[Summary view] [Print] [Text view]

   1  /*+***********************************************************************************
   2   * The contents of this file are subject to the vtiger CRM Public License Version 1.0
   3   * ("License"); You may not use this file except in compliance with the License
   4   * The Original Code is:  vtiger CRM Open Source
   5   * The Initial Developer of the Original Code is vtiger.
   6   * Portions created by vtiger are Copyright (C) vtiger.
   7   * All Rights Reserved.
   8   *************************************************************************************/
   9  jQuery.Class('Settings_Menu_Editor_Js', {}, {
  10      
  11      //This will store the MenuEditor Container
  12      menuEditorContainer : false,
  13      
  14      //This will store the  MenuList selectElement
  15      menuListSelectElement : false,
  16      
  17      //This will store the MenuEditor Form
  18      menuEditorForm : false,
  19      
  20      /**
  21       * Function to get the MenuEditor container
  22       */
  23      getContainer : function() {
  24          if(this.menuEditorContainer == false) {
  25              this.menuEditorContainer = jQuery('#menuEditorContainer');
  26          }
  27          return this.menuEditorContainer;
  28      },
  29      
  30      /**
  31       * Function to get the MenuList select element
  32       */
  33      getMenuListSelectElement : function() {
  34          if(this.menuListSelectElement == false) {
  35              this.menuListSelectElement = jQuery('#menuListSelectElement');
  36          }
  37          return this.menuListSelectElement;
  38      },
  39      
  40      /**
  41       * Function to get the MenuEditor form
  42       */
  43      getForm : function() {
  44          if(this.menuEditorForm == false) {
  45              this.menuEditorForm = jQuery('#menuEditorContainer');
  46          }
  47          return this.menuEditorForm;
  48      },
  49      
  50      /**
  51       * Function to regiser the event to make the menu items list sortable
  52       */
  53      makeMenuItemsListSortable : function() {
  54          var thisInstance = this;
  55          var selectElement = this.getMenuListSelectElement();
  56          var select2Element = app.getSelect2ElementFromSelect(selectElement);
  57          
  58          //TODO : peform the selection operation in context this might break if you have multi select element in menu editor
  59          //The sorting is only available when Select2 is attached to a hidden input field.
  60          var select2ChoiceElement = select2Element.find('ul.select2-choices');
  61          select2ChoiceElement.sortable({
  62                  'containment': select2ChoiceElement,
  63                  start: function() { jQuery('#selectedMenus').select2("onSortStart"); },
  64                  update: function() { 
  65                      jQuery('#selectedMenus').select2("onSortEnd");
  66                      //If sorting happened save button should show
  67                      thisInstance.showSaveButton();
  68                  }
  69              });
  70      },
  71      
  72      /**
  73       * Function which will arrange the selected element choices in order
  74       */
  75      arrangeSelectChoicesInOrder : function() {
  76          var container = this.getContainer();
  77          var selectElement = this.getMenuListSelectElement();
  78          var select2Element = app.getSelect2ElementFromSelect(selectElement);
  79          
  80          var choicesContainer = select2Element.find('ul.select2-choices');
  81          var choicesList = choicesContainer.find('li.select2-search-choice');
  82          var selectedOptions = selectElement.find('option:selected');
  83          var selectedOrder = JSON.parse(jQuery('input[name="topMenuIdsList"]', container).val());
  84          for(var index=selectedOrder.length ; index > 0 ; index--) {
  85              var selectedValue = selectedOrder[index-1];
  86              var option = selectedOptions.filter('[value="'+selectedValue+'"]');
  87              choicesList.each(function(choiceListIndex,element){
  88                  var liElement = jQuery(element);
  89                  if(liElement.find('div').html() == option.html()){
  90                      choicesContainer.prepend(liElement);
  91                      return false;
  92                  }
  93              });
  94          }
  95      },
  96      
  97      /**
  98       * Function which will get the selected columns with order preserved
  99       * @return : array of selected values in order
 100       */
 101      getSelectedColumns : function() {
 102          var selectElement = this.getMenuListSelectElement();
 103          var select2Element = app.getSelect2ElementFromSelect(selectElement);
 104  
 105          var selectedValuesByOrder = {};
 106          var selectedOptions = selectElement.find('option:selected');
 107          var orderedSelect2Options = select2Element.find('li.select2-search-choice').find('div');
 108          var i = 1;
 109          orderedSelect2Options.each(function(index,element){
 110              var chosenOption = jQuery(element);
 111              selectedOptions.each(function(optionIndex, domOption){
 112                  var option = jQuery(domOption);
 113                  if(option.html() == chosenOption.html()) {
 114                      selectedValuesByOrder[i++] = option.val();
 115                      return false;
 116                  }
 117              });
 118          });
 119          
 120          return selectedValuesByOrder;
 121      },
 122      
 123      /**
 124       * Function which will show the save button in menuEditor Container
 125       */
 126      showSaveButton : function() {
 127          var container = this.getContainer();
 128          var saveButton = jQuery('[name="saveMenusList"]', container);
 129          
 130          if(app.isHidden(saveButton)) {
 131              saveButton.removeClass('hide');
 132          }
 133      },
 134      
 135      registerEvents : function(e){
 136          var thisInstance = this;
 137          var container = thisInstance.getContainer();
 138          var selectElement = thisInstance.getMenuListSelectElement();
 139          var select2Element = app.getSelect2ElementFromSelect(selectElement);
 140          var form = thisInstance.getForm();
 141          
 142          //register all select2 Elements
 143          app.showSelect2ElementView(container.find('select.select2'), {_maximumSelectionSize: 7, dropdownCss : {'z-index' : 0}});
 144          
 145          //On change of menus list only will show the save button
 146          selectElement.on('change', function() {
 147              select2Element.validationEngine('hide');
 148              thisInstance.showSaveButton();
 149          });
 150          
 151          //To arrange the select choices in the order those are selected
 152          thisInstance.arrangeSelectChoicesInOrder();
 153          
 154          //To make the menu items list sortable
 155          thisInstance.makeMenuItemsListSortable();
 156          
 157          var params = app.getvalidationEngineOptions(true);
 158          params.onValidationComplete = function(form, valid){
 159              if(valid) {
 160                  var progressIndicatorElement = jQuery.progressIndicator({
 161                      'position' : 'html',
 162                      'blockInfo' : {
 163                          'enabled' : true
 164                      }
 165                  });
 166                  //before saving, updtae the selected modules list
 167                  jQuery('input[name="selectedModulesList"]', container).val(JSON.stringify(thisInstance.getSelectedColumns()));
 168                  return valid;
 169              }
 170          }
 171          
 172          form.validationEngine(params);
 173      }
 174  });
 175  
 176  
 177  jQuery(document).ready(function(){
 178      var settingMenuEditorInstance = new Settings_Menu_Editor_Js();
 179      settingMenuEditorInstance.registerEvents();
 180  })