cronapp-framework-js 3.0.0-SP.33 → 3.0.0-SP.35

package/js/directives.js

@@ -2818,7 +2818,7 @@
                     className = 'k-custom-command' + (label ? ' k-button-with-label' : '');
                   }
                   if (column.theme)
-                    className += ' ' + column.theme;
+                    className += ' btn ' + column.theme;
 
                   var tooltip = '';
                   if (column.tooltip && column.tooltip.length)
@@ -2830,9 +2830,14 @@
                     className += ' ' + classForTooltip;
                   }
 
+                  let width = column.width;
+                  if (width) {
+                    width += 'px';
+                  }
+
                   let idForCommand = app.common.generateId();
                   let ariaLabel = tooltip || label || idForCommand;
-                  let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${column.iconClass}'></span>${label}</a>`;
+                  let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}' style='width:${width}'><span class='${column.iconClass}'></span>${label}</a>`;
 
                   var addColumn = {
                     command: [{
@@ -2863,7 +2868,7 @@
 
                       let className = 'k-custom-command' + (label ? ' k-button-with-label' : '');
                       if (buttonColumn.theme)
-                        className += ' ' + buttonColumn.theme;
+                        className += ' btn ' + buttonColumn.theme;
 
                       let tooltip = '';
                       if (buttonColumn.tooltip && buttonColumn.tooltip.length)
@@ -2875,9 +2880,14 @@
                         className += ' ' + classForTooltip;
                       }
 
+                      let width = buttonColumn.width;
+                      if (width) {
+                        width += 'px';
+                      }
+
                       let idForCommand = app.common.generateId();
                       let ariaLabel = tooltip || label || idForCommand;
-                      let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${buttonColumn.iconClass}'></span>${label}</a>`;
+                      let template = `<a href class='k-button ${className} k-grid-${idForCommand}' aria-label='${ariaLabel}' style='width:${width}'><span class='${buttonColumn.iconClass}'></span>${label}</a>`;
                     
                       let command = {
                         name: idForCommand,
@@ -5399,6 +5409,79 @@
                     mainView.classList.add("main-view-retratil");
                   }
                 });
+
+                let baseNav = element.closest('nav');
+                if (baseNav && baseNav.length) {
+
+                  let subMenuOnHover = !baseNav.hasClass('submenu-click');
+                  let baseNavId = baseNav.attr('id');
+
+                  if (!baseNavId) {
+                    baseNavId = app.common.generateId();
+                    baseNav.attr('id', baseNavId);
+                  }
+
+                  if (subMenuOnHover) {
+                    let alreadyHooked = $(`#${baseNavId} .dropdown-submenu`).data('hooked');
+                    if (!alreadyHooked) {
+                      $(`#${baseNavId} .dropdown-submenu`).on('mouseenter', function (e) {
+                        $(this).children('.dropdown-menu').addClass('show');
+                      }).on('mouseleave', function (e) {
+                        $(this).children('.dropdown-menu').removeClass('show');
+                      });
+                      $(`#${baseNavId} .dropdown-submenu`).data('hooked', true);
+                    }
+                    
+                  }
+                  else {
+                    let alreayHooked = $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).data('hooked');
+                    if (!alreayHooked) {
+                      $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).on('click', function(e) {
+                        if (!$(this).next().hasClass('show')) {
+                          $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
+                        }
+                        var $subMenu = $(this).next('.dropdown-menu');
+                        $subMenu.toggleClass('show');
+
+                        $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
+                          $('.dropdown-submenu .show').removeClass('show');
+                        });
+
+                        if ($subMenu.length) {
+                          return false;
+                        }
+                        else {
+                          $('.dropdown-menu').removeClass('show');
+                        }
+                      });
+                      $(`#${baseNavId} .dropdown-menu a.dropdown-toggle`).data('hooked', true);
+                    }
+                    
+                    let alreadyHookedBs = $(`#${baseNavId} .dropdown.nav-item`).data('hooked');
+                    if (!alreadyHookedBs) {
+                      $(`#${baseNavId} .dropdown.nav-item`).on('hidden.bs.dropdown', function (e) {
+                        $('.dropdown-submenu .show').removeClass("show");
+                        $('.dropdown-menu .show').removeClass('show');
+                      });
+                      $(`#${baseNavId} .dropdown.nav-item`).data('hooked', true);
+                    }
+                    
+                  }
+
+                }
+                else {
+                  let menuWihtoutNavBar_id = $(element).find('ul:first').attr('id')
+                  let alreadyHooked = $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).data('hooked');
+                  if (!alreadyHooked) {
+                    $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).on('mouseenter', function (e) {
+                      $(this).children('.dropdown-menu').addClass('show');
+                    }).on('mouseleave', function (e) {
+                      $(this).children('.dropdown-menu').removeClass('show');
+                    });
+                    $(`#${menuWihtoutNavBar_id} .dropdown-submenu`).data('hooked', true);
+                  }
+                }
+
               });
             });
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cronapp-framework-js",
-  "version": "3.0.0-SP.33",
+  "version": "3.0.0-SP.35",
   "description": "Javascript library for CronApp's projects",
   "main": "cronapp.framework.js",
   "scripts": {