Add context menu in grid actions.

assets/css/app.scss

@@ -29,6 +29,7 @@
 @import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
 
 @import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
+@import "~jquery-contextmenu/dist/jquery.contextMenu.css";
 
 //@import "~lightgallery/dist/css/lightgallery.css";
 //@import "~video.js/dist/video-js.css";

assets/js/vendor.js

@@ -33,6 +33,7 @@ require('easy-pie-chart/dist/jquery.easypiechart.min');
 require('jquery-ui-timepicker-addon');
 require('@fancyapps/fancybox/dist/jquery.fancybox.js');
 require('@fancyapps/fancybox/src/js/media.js');
+require('jquery-contextmenu/dist/jquery.contextMenu.js');
 // require('video.js');
 
 // doesn't work with webpack added directly in /public/libs folder

package.json

@@ -36,6 +36,7 @@
     "fullcalendar": "^3.0",
     "highlight.js": "^9.12.0",
     "image-map-resizer": "^1.0.10",
+    "jquery-contextmenu": "^2.9.0",
     "jquery-ui": "^1.12.1",
     "jquery-ui-timepicker-addon": "^1.6.3",
     "jquery-ui-touch-punch": "^0.2.3",

src/CoreBundle/Controller/ResourceController.php

@@ -249,7 +249,7 @@ class ResourceController extends AbstractResourceController implements CourseCon
             false,
             '_self',
             [
-                'class' => 'btn btn-secondary ',
+                'class' => 'btn btn-secondary info_action',
                 'icon' => 'fa-info-circle',
                 'iframe' => true,
             ]
@@ -259,6 +259,12 @@ class ResourceController extends AbstractResourceController implements CourseCon
             $id = $row->getEntity()->getResourceNode()->getId();
             $routeParams['id'] = $id;
             $action->setRouteParameters($routeParams);
+            $attributes = $action->getAttributes();
+            $attributes['data-action'] = $action->getRoute();
+            $attributes['data-action-id'] = $action->getRoute().'_'.$id;
+            $attributes['data-node-id'] = $id;
+
+            $action->setAttributes($attributes);
 
             return $action;
         };
@@ -305,18 +311,30 @@ class ResourceController extends AbstractResourceController implements CourseCon
                 'chamilo_core_resource_edit',
                 false,
                 '_self',
-                ['class' => 'btn btn-secondary']
+                ['class' => 'btn btn-secondary', 'icon' => 'fa fa-pen']
             );
             $myRowAction->addManipulateRender($setNodeParameters);
             $grid->addRowAction($myRowAction);
 
+            // More action.
+            $myRowAction = new RowAction(
+                $translation->trans('More'),
+                'chamilo_core_resource_preview',
+                false,
+                '_self',
+                ['class' => 'btn btn-secondary edit_resource', 'icon' => 'fa fa-ellipsis-h']
+            );
+
+            $myRowAction->addManipulateRender($setNodeParameters);
+            $grid->addRowAction($myRowAction);
+
             // Delete action.
             $myRowAction = new RowAction(
                 $translation->trans('Delete'),
                 'chamilo_core_resource_delete',
                 true,
                 '_self',
-                ['class' => 'btn btn-danger']
+                ['class' => 'btn btn-danger', 'hidden' => true]
             );
             $myRowAction->addManipulateRender($setNodeParameters);
             $grid->addRowAction($myRowAction);

src/ThemeBundle/Resources/views/Resource/grid_theme.html.twig

@@ -58,7 +58,6 @@
           </form>
         </div>
       {% else %}
-
         {% if action.attributes.iframe is defined and action.attributes.iframe %}
           <a
             data-fancybox data-type="iframe"
@@ -73,18 +72,27 @@
             {% endif %}
           </a>
          {% else %}
-          <a
-            href="{{ url(action.route, column.routeParameters(row, action), false) }}"
-            target="{{ action.target }}" {% if action.confirm %} onclick="return confirm('{{ action.confirmMessage }}')"{% endif %}
 
-            {% for name, value in action.attributes %} {{ name }}="{{ value }}" {% endfor %}
-          >
-            {% if action.attributes.icon is defined and action.attributes.icon %}
-                <i class="fas {{ action.attributes.icon }} "></i>
-            {% else %}
-                {{ action.title|trans }}
-            {% endif %}
-          </a>
+           {% if action.attributes.hidden is defined and action.attributes.hidden %}
+              <span style="display: none">
+           {% endif %}
+
+            <a
+              href="{{ url(action.route, column.routeParameters(row, action), false) }}"
+              target="{{ action.target }}" {% if action.confirm %} onclick="return confirm('{{ action.confirmMessage }}')"{% endif %}
+              {% for name, value in action.attributes %} {{ name }}="{{ value }}" {% endfor %}
+            >
+              {% if action.attributes.icon is defined and action.attributes.icon %}
+                  <i class="fas {{ action.attributes.icon }} "></i>
+              {% else %}
+                  {{ action.title|trans }}
+              {% endif %}
+            </a>
+
+            {% if action.attributes.hidden is defined and action.attributes.hidden %}
+            </span>
+         {% endif %}
+
           {% endif %}
       {% endif %}
     {% endfor %}

src/ThemeBundle/Resources/views/Resource/index.html.twig

@@ -30,6 +30,7 @@
 
     <script>
         $(function () {
+            // Preview action.
             $('[data-fancybox="gallery"]').fancybox({
                 toolbar: "true",
                 buttons: [
@@ -59,11 +60,11 @@
                 {#'</div>',#}
             });
 
+            // Visibility action.
             $('.change_visibility').on('click', function (e) {
                 e.preventDefault();
                 var link = $(this);
                 var url = $(this).attr('href');
-                console.log(url);
                 $.ajax({
                     type: "post",
                     url: url,
@@ -81,6 +82,42 @@
                     },
                 });
             });
+
+            // More action.
+            $.contextMenu({
+                selector: '.edit_resource',
+                callback: function(key, options, e) {
+                    e.preventDefault();
+                    var nodeId = options.$trigger.attr("data-node-id");
+                    var action = 'chamilo_core_resource_'+key+ '_'+nodeId;
+                    console.log(action);
+                    var newOption = options.$trigger.parent().find("[data-action-id='" + action + "']");
+                    var link = $(newOption).attr('href');
+
+                    if (link == 'javascript:;' || key == 'delete') {
+                        $(newOption).click();
+                    } else {
+                        window.location.href = link;
+                    }
+                    return true;
+                },
+                autoHide: false,
+                animation: {duration: 250, show: 'fadeIn', hide: 'fadeOut'},
+                trigger: 'left',
+                items: {
+                    // "preview": {name: "Preview", icon: "fas fa-search"},
+                    "show": {name: "Info", icon: "fas fa-info-circle"},
+                    "sep1": "---------",
+                    "edit": {name: "Edit", icon: "fas fa-pen"},
+                    //"download": {name: "Download", icon: "fas fa-arrow-alt-circle-down"},
+                    "delete": {name: "Delete", icon: "fas fa-trash"},
+                }
+            });
+
+            $('.edit_resource').on('click', function(e) {
+                e.preventDefault();
+                console.log('clicked', this);
+            })
         });
     </script>
 

yarn.lock

@@ -4468,6 +4468,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+jquery-contextmenu@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/jquery-contextmenu/-/jquery-contextmenu-2.9.0.tgz#3e0635b6e9da4140dc926892543df3d66f8a84dd"
+  integrity sha512-sn0eyBNeIa7AOdU+j3lP2YZ0bbtkrTCtkp3S7UwRf8lurPVKI/3uyOV3h/pMyJclfmO6ps5shObQTfzJiaN/OQ==
+
 jquery-ui-timepicker-addon@^1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/jquery-ui-timepicker-addon/-/jquery-ui-timepicker-addon-1.6.3.tgz#8037c39b0b630282dd0b37dd8ad7fc5e1163377f"
@@ -4488,7 +4493,7 @@ jquery.scrollbar@^0.2.11:
   resolved "https://registry.yarnpkg.com/jquery.scrollbar/-/jquery.scrollbar-0.2.11.tgz#e91bd4a97d83859463024d26e730dc36676ab59d"
   integrity sha1-6RvUqX2DhZRjAk0m5zDcNmdqtZ0=
 
-jquery@>2.1.4, jquery@>=1.10, "jquery@>=1.5.0 <4.0", jquery@>=1.6.0, jquery@>=1.7, jquery@>=1.7.0, jquery@^3.3.1, jquery@^3.4, jquery@^3.4.1:
+jquery@>2.1.4, jquery@>=1.10, "jquery@>=1.5.0 <4.0", jquery@>=1.6.0, jquery@>=1.7, jquery@^3.3.1, jquery@^3.4, jquery@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
   integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
@@ -4672,13 +4677,6 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-lightgallery@^1.6.12:
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/lightgallery/-/lightgallery-1.6.12.tgz#c024428d1488969075dc551a85dddf905adb0e4b"
-  integrity sha512-t8hIgZc3ZvGW9pG8Bd68bXcUj7FWGewaroT7ADYo2fvQTgkqcMMLtXw9yQclS7BF0soadA0B6BN3MWOEiS2pYA==
-  dependencies:
-    jquery ">=1.7.0"
-
 linkifyjs@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.8.tgz#2bee2272674dc196cce3740b8436c43df2162f9c"