add functionality to navigate between records in mobile version of lightbox

lib/Alchemy/Phrasea/Controller/LightboxController.php

@@ -78,17 +78,39 @@ class LightboxController extends Controller
     {
         /** @var BasketElementRepository $repository */
         $repository = $this->app['repo.basket-elements'];
-
         $basketElement = $repository->findUserElement($sselcont_id, $this->getAuthenticatedUser());
 
+        $basket = $basketElement->getBasket();
+
+        $elements = $basket->getElements();
+        for ($i = 0; $i < count($elements); ++$i) {
+            if ($sselcont_id == $elements[$i]->getId()) {
+                $nextKey = $i + 1;
+                $prevKey = $i - 1;
+                if ($nextKey < count($elements)) {
+                    $nextId = $elements[$nextKey]->getId();
+                }
+                else {
+                    $nextId = null;
+                }
+                if ($prevKey >= 0) {
+                    $prevId = $elements[$prevKey]->getId();
+                }
+                else {
+                    $prevId = null;
+                }
+            }
+        }
+
         if ($this->app['browser']->isMobile()) {
             return $this->renderResponse('lightbox/basket_element.html.twig', [
                 'basket_element' => $basketElement,
-                'module_name'    => $basketElement->getRecord($this->app)->get_title()
+                'module_name'    => $basketElement->getRecord($this->app)->get_title(),
+                'nextId'         => $nextId,
+                'prevId'         => $prevId
             ]);
         }
 
-        $basket = $basketElement->getBasket();
 
         $ret = [];
         $ret['number'] = $basketElement->getRecord($this->app)->getNumber();

resources/www/lightbox/styles/main-mobile.scss

@@ -1 +1,15 @@
-@import './jquery-mobile/jquery-validator';
+@import './jquery-mobile/jquery-validator';
+
+.nav_button {
+  width: 90%;
+  margin: 0px auto;
+  padding: 4px;
+}
+
+#left-btn {
+  float: left;
+}
+
+#right-btn {
+  float: right;
+}

templates/mobile/lightbox/basket_element.html.twig

@@ -37,14 +37,31 @@
 
 {% block content %}
   {% set record = basket_element.getRecord(app) %}
-<div data-role="page" id="page">
+
+
+    <div data-role="page" id="page">
   <div data-role="header">
-    <a href="{{ path('lightbox_validation', { 'basket' : basket_element.getBasket().getId() }) }}" data-rel="back" data-icon="arrow-l">Back</a>
+      <a href="{{ path('lightbox_validation', { 'basket' : basket_element.getBasket().getId() }) }}"
+         data-icon="arrow-l">{{ 'Back' | trans }}</a>
     <h1>{{basket_element.getOrd()}} - {{record.get_title()}}</h1>
-    <a rel="external" href="{{ path('lightbox') }}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+      <a rel="external" href="{{ path('lightbox') }}" data-icon="home" data-iconpos="notext" data-direction="reverse"
+         class="ui-btn-right jqm-home">{{ 'Home' | trans }}</a>
   </div>
   <div id="content" data-role="content">
     {{ thumbnail.format100percent(record.get_preview()) }}
+      <div class="nav_button">
+          {% if prevId != NULL %}
+              <a data-ajax="false" id="left-btn"
+                 href="{{ path('lightbox_ajax_load_basketelement', { 'sselcont_id' : prevId }) }}"
+                 class="ui-btn ui-shadow ui-corner-all ui-icon-carat-l ui-btn-icon-notext">Left</a>
+          {% endif %}
+          {% if nextId != NULL %}
+              <a data-ajax="false" id="right-btn" data-ajax="false"
+                 href="{{ path('lightbox_ajax_load_basketelement', { 'sselcont_id' : nextId }) }}"
+                 class="ui-btn ui-shadow ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Right</a>
+          {% endif %}
+          <div style="clear: both;"></div>
+      </div>
     {% if basket_element.getBasket().getValidation() %}
       {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
         <fieldset data-role="controlgroup" data-type="horizontal" style="text-align:center;">
@@ -70,4 +87,5 @@
 
   </div>
 </div>
+
 {% endblock %}

templates/mobile/lightbox/index.html.twig

@@ -82,7 +82,7 @@
 
 <div id="validation" data-role="page">
     <div data-role="header">
-     <a href="#home" data-rel="back" data-icon="arrow-l">{{ 'Back' | trans }}</a>
+        <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
      <h1>{{ 'Validations' | trans }}</h1>
   </div>
     <div data-role="content">
@@ -112,7 +112,7 @@
 
 <div id="baskets" data-role="page">
     <div data-role="header">
-        <a href="#home" data-rel="back" data-icon="arrow-l">{{ 'Back' | trans }}</a>
+        <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
      <h1>{{ 'Paniers' | trans }}</h1>
   </div>
     <div data-role="content">

templates/mobile/lightbox/validate.html.twig

@@ -26,7 +26,9 @@
 {% block content %}
 <div id="home" data-role="page">
     <div data-role="header">
-    <a href="{{ path('lightbox') }}{% if basket.getValidation() %}#validation{% else %}#baskets{% endif %}" data-rel="back" data-icon="arrow-l">{{ 'Back' | trans }}</a>
+        <a rel="external"
+           href="{{ path('lightbox') }}{% if basket.getValidation() %}#validation{% else %}#baskets{% endif %}"
+           data-icon="arrow-l">{{ 'Back' | trans }}</a>
     <h1>{{basket.getName()}}</h1>
     <a rel="external" href="{{ path('lightbox') }}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">{{ 'Home' | trans }}</a>
   </div>