drg_cms 0.6.1.5 → 0.6.1.11

data/app/assets/javascripts/drg_cms/drg_cms.js

@@ -67,7 +67,7 @@ update_embedded_on_tab_select = function(div_name) {
  *  Return false when confirmation is not required 
  *******************************************************************/
 confirmation_is_cancled = function(object) {
-  var confirmation = object.getAttribute("data-confirm");
+  let confirmation = object.getAttribute("data-confirm");
   // if confirmation required
   if (confirmation !== null) {
     if (!confirm(confirmation)) {return true;}
@@ -81,8 +81,8 @@ confirmation_is_cancled = function(object) {
  * methodname and depend field value to obtain new values for select field.
  *******************************************************************/
 update_select_depend = function(select_name, depend_name, method) {
-  var select_field = $('#'+select_name);
-  var depend_field = $('#'+depend_name);
+  let select_field = $('#' + select_name);
+  let depend_field = $('#' + depend_name);
   
   $.ajax({
     url: "/dc_common/autocomplete",
@@ -159,7 +159,7 @@ $(function() {
  *  record_name: will replace value of record[name] field on a form with supplied value
  *
  *  msg_error: will display error message.
- *  msg_warn: will display warning message.
+ *  msg_warning: will display warning message.
  *  msg_info: will display informational message.
  *  
  *  popup: will display popup message
@@ -199,15 +199,17 @@ process_json_result = function(json) {
       
 /**** update fields on form ****/
     case 'record':
-      let name = key.replace('record_','record[') + ']';
-      field = $('[name="' + name + '"]');
+      //let name = key.replace('record_','record[') + ']';
+      //field = $('[name="' + name + '"]');
+      field = $('#' + key);
+      // console.log(field);
       // checkbox field
       if (field.is(':checkbox')) {
         field.prop('checked', value);
       // select field  
       } else if (field.is('select')) {
         // options for select field
-        if (value && value.isArray) {
+        if (Array.isArray(value)) {
           field.empty();
           $.each(value, function(index, v) {
             field.append( new Option(v[0], v[1]) );
@@ -246,11 +248,24 @@ process_json_result = function(json) {
 /**** display popup message ****/
       case 'popup':
         if (selector == 'url') {
-          $('#popup').bPopup({ loadUrl: value });
+          $('#popup').bPopup({ loadUrl: value,
+            transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+            opacity: 0, position: ['auto', 20],
+            closeClass: 'dc-link' });
         }
         else {
           $('#popup').html(value);
-          $('#popup').bPopup({speed: 650, transition: 'slideUp', position: ['auto',1]});
+          $('#popup').bPopup( {
+            transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+            opacity: 0, position: ['auto', 20],
+            closeClass: 'dc-link' });
+        }
+        // resize parent iframe if smaller then 500px to ensure popup some space
+        let document_height = document.body.scrollHeight;
+        if (document_height < 500) {
+          let frame = window.frameElement
+          if (frame === null) frame = document.body;
+          frame.style.height = '500px';
         }
         break;
 
@@ -334,10 +349,12 @@ function dc_reload_window() {
 /*******************************************************************
  * Will open popup window
  *******************************************************************/
-function popup_window(url, window_name, win, w, h) {
-  let y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2);
-  let x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2);
-  return win.open(url, window_name, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
+function popup_window(url, title, parent_win, w, h) {
+  let y = parent_win.top.outerHeight / 2 + parent_win.top.screenY - (h / 2);
+  let x = parent_win.top.outerWidth / 2 + parent_win.top.screenX - (w / 2);
+  let win = parent_win.open(url, 'dc_popup', `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
+  win.document.title = title;
+  return win;
 }
 
 /*******************************************************************
@@ -393,7 +410,7 @@ process_parent_form_updates = function(element) {
 /*****************************************************************
  * Toggle show and hide div
  ******************************************************************/
-dc_toggle_div = function(div) {
+dc_div_toggle = function(div) {
   if ($(div).is(":visible")) {
     $(div).slideUp();
   } else {
@@ -401,8 +418,55 @@ dc_toggle_div = function(div) {
   }
 };
 
+/*****************************************************************
+ * Process simple ajax call
+ ******************************************************************/
+simple_ajax_call = function(url) {
+  $.ajax({
+    url: url,
+    success: function(data) { process_json_result(data); }
+  });
+};
+
+/*****************************************************************
+ * Return value of the input field on a form
+ ******************************************************************/
+function dc_field_get_value(field_name) {
+  field_name = field_name.replace('record_', '');
+  let field = $('[name="record[' + field_name + ']"]');
+  return field.val();
+}
+
+/*****************************************************************
+ * Will process data-fields attribute and add field values as parameters to url
+ ******************************************************************/
+function dc_url_add_params(form, url) {
+  // check if data-fields attribute present
+  let fields = form.getAttribute("data-fields");
+  if (fields === null) return url;
+  // url might already contain ?
+  let form_parms = '?';
+  if (url.match(/\?/)) form_parms = '';
+
+  fields.split(',').forEach( function(field) {
+    let value = dc_field_get_value(field);
+    if (value) form_parms += '&' + field + '=' + value;
+  });
+  return url + form_parms;
+}
+
 /*******************************************************************
- * 
+ * Copy div text to clipboard
+ *******************************************************************/
+function dc_copy_to_clipboard(div) {
+  let copyText = document.getElementById(div).innerText;
+  console.log(copyText);
+  /* Copy the text inside the text field */
+  navigator.clipboard.writeText(copyText);
+}
+
+/*******************************************************************
+ * Events start here
  *******************************************************************/
 $(document).ready( function() {
 /* This could be the way to focus on first input field on document open
@@ -465,7 +529,7 @@ $(document).ready( function() {
   * Popup CMS edit menu option clicked
   *******************************************************************/
   $('.drgcms_popmenu_item').on('click',function(e) {
-    url = e.target.getAttribute("data-url");
+    let url = e.target.getAttribute("data-url");
     $('#iframe_cms').attr('src', url);
 //    $('#iframe_cms').width(1000).height(1000);
 // scroll to top of page and hide menu    
@@ -476,13 +540,22 @@ $(document).ready( function() {
  /*******************************************************************
   * Sort action clicked on cmsedit
   *******************************************************************/
-  $('.drgcms_sort').change( function(e) {
+  $('.dc-sort-select').change( function(e) {
     let table = e.target.getAttribute("data-table");
     let form  = e.target.getAttribute("data-form");
     if (form === null) form = table;
     let sort = e.target.value;
-    e.target.value = null;
-    window.location.href = "/cmsedit?sort=" + sort + "&table=" + table +  "&form_name=" + form;
+//    e.target.value = null;
+    let url = "/cmsedit/run?control=cmsedit.sort&sort=" + sort + "&table=" + table +  "&form_name=" + form;
+    simple_ajax_call(url);
+  });
+
+  /*******************************************************************
+   * Click on field name in result header perform sort action
+   *******************************************************************/
+  $('.dc-result-header span').on('click',function(e) {
+    let url = e.target.getAttribute("data-url");
+    simple_ajax_call(url);
   });
 
   /*******************************************************************
@@ -490,20 +563,20 @@ $(document).ready( function() {
    *******************************************************************/
   $('.dc-check-all').on('click',function(e) {
     let checkboxes = $('.dc-check');
-    if ($(this).hasClass('fa-check-square-o')) {
+    if ($(this).hasClass('mi-check_box')) {
       // check all checkboxes
       checkboxes.each( function() {
         $(this).prop('checked', true);
         $(this).parent().closest('div').addClass('dc-checked');
       });
-      $(this).removeClass('fa-check-square-o').addClass('fa-square-o');
+      $(this).removeClass('mi-check_box').addClass('mi-check_square');
     } else {
       // uncheck all checkboxes
       checkboxes.each( function() {
         $(this).prop('checked', false);
         $(this).parent().closest('div').removeClass('dc-checked');
       });
-      $(this).removeClass('fa-square-o').addClass('fa-check-square-o');
+      $(this).removeClass('mi-check_square').addClass('mi-check_box');
     }
   });
 
@@ -603,11 +676,22 @@ $(document).ready( function() {
     if (url.length < 5) return false;
 
     // check HTML5 validations
-    if ($("form")[0] && !$("form")[0].checkValidity() ) {
-      $("form")[0].reportValidity();
-      return false;
+    let validate = this.getAttribute("data-validate");
+    if (validate == null || validate == true) {
+      if ($("form")[0] && !$("form")[0].checkValidity()) {
+        $("form")[0].reportValidity();
+        return false;
+      }
     }
 
+    // update html editor fields before data serialization
+    let cke_elements = document.querySelectorAll(`div[id^="cke_record"]`);
+    cke_elements.forEach(e => {
+      let field_id = e.id.replace('cke_', '');
+      let text = CKEDITOR.instances[field_id].getData();
+      $('#' + field_id).val(text);
+    });
+
     let data = {};
     let request = this.getAttribute("data-request");
     switch (request) {
@@ -628,7 +712,7 @@ $(document).ready( function() {
     if (checkboxes.length > 0) {
       let checked = [];
       checkboxes.each( function() {
-        if ($(this).prop('checked')) checked.push($(this).attr("id"));
+        if ($(this).prop('checked')) checked.push($(this).attr("id").replace('check-', ''));
       })
       data['checked'] = checked;
     }
@@ -642,9 +726,21 @@ $(document).ready( function() {
       success: function(data) {
         process_json_result(data);
         $('.dc-spinner').hide();
+      },
+      error: function (request, status, error) {
+        $('.dc-spinner').css('color','red');
+        alert(request.responseText);
       }
     });
   });
+
+  /*******************************************************************
+   * Click on filter off
+   *******************************************************************/
+  $('.mi-filter_alt_off').on('click', function(e) {
+    let url = $(this).parents('.dc-filter').attr("data-url");
+    if (url.length > 5) simple_ajax_call(url);
+  });
   
 /*******************************************************************
  * Process action submit button click. 
@@ -665,24 +761,44 @@ $(document).ready( function() {
     form.setAttribute('action', url);
     form.setAttribute('method', "post");
     form.submit();
-  });  
-    
-/*******************************************************************
-  will open a new window with URL specified. 
-********************************************************************/
-  $('.dc-window-open').on('click', function(e) { 
-   // confirmation if required
-    if (confirmation_is_cancled(this)) {return false;}
-    
-    var url   = this.getAttribute("data-url");
-    var title = this.getAttribute("title");
-    var w     = 1000;
-    var h     = 800;
-    var left  = (screen.width/2)-(w/2);
-    var top   = (screen.height/2)-(h/2);
-    var win   = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
+  });
+
+  /*******************************************************************
+    Will open a new window with URL specified.
+  ********************************************************************/
+  $('.dc-window-open').on('click', function(e) {
+    // confirmation if required
+    if (confirmation_is_cancled(this)) return false;
+
+    let url = this.getAttribute("data-url");
+    let title = this.getAttribute("title");
+    let w = this.getAttribute("data-x") || 1000;
+    let h = this.getAttribute("data-y") || 800;
+
+    url = dc_url_add_params(this, url)
+    let win = popup_window(url, title, window, w, h);
     win.focus();
-  });  
+  });
+
+  /*******************************************************************
+   Will open a new popup with URL specified.
+   ********************************************************************/
+  $('.dc-popup-open').on('click', function(e) {
+    // confirmation if required
+    if (confirmation_is_cancled(this)) return false;
+
+    let url = this.getAttribute("data-url");
+    let title = this.getAttribute("title");
+    let w = this.getAttribute("data-x") || 1000;
+    let h = this.getAttribute("data-y") || 800;
+
+    url = dc_url_add_params(this, url)
+    $('#popup').bPopup({ loadUrl: url,
+                             transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+                             opacity: 0, position: ['auto', 20],
+                             closeClass: 'dc-link'
+    });
+  });
 
  /*******************************************************************
  * Animate button on click
@@ -698,20 +814,7 @@ $(document).ready( function() {
     $(this).toggleClass('dc-animate-button'); 
   });
  */
- /*******************************************************************
- * Animate button on click
- *******************************************************************/
-  $('.dc-animate').mousedown( function() {
-    $(this).toggleClass('dc-animate-button');
-  });
-  
- /*******************************************************************
- * Animate button on click
- *******************************************************************/
-  $('.dc-animate').mouseup( function() {
-    $(this).toggleClass('dc-animate-button'); 
-  });
- 
+
  /*******************************************************************
   * App menu option clicked
   *******************************************************************/
@@ -732,28 +835,40 @@ $(document).ready( function() {
 /*******************************************************************
  * Display spinner on link with spinner, submit link
  *******************************************************************/
-  $('.dc-link-spinner').on('click', function(e) {
+  $('.dc-link.spin').on('click', function(e) {
     $('.dc-spinner').show();
   });  
   
   $('.dc-link-submit').on('click', function(e) {
     $('.dc-spinner').show();
-  });  
+  });
+
+  /*******************************************************************
+   * Hide spinner when validation error occured
+   *******************************************************************/
+  $(':input').on("invalid", function(event) {
+    $('.dc-spinner').hide();
+  });
 
 /*******************************************************************
   * Add button clicked while in edit. Create window dialog for adding new record
   * into required table. This is helper scenario, when user is selecting
   * data from with text_autocomplete and data doesn't exist in belongs_to table.
   *******************************************************************/
-  $('.in-edit-add').on('click', function(e) { 
-    let url = '/cmsedit/new?window_close=0&table=' + this.getAttribute("data-table");
+  $('.in-edit-add').on('click', function(e) {
+    let id = this.getAttribute("data-id");
+    let table = this.getAttribute("data-table");
+    let url = '/cmsedit/new?window_close=0&table=' + table;
+    if (id) {
+      url = '/cmsedit/' + id + '/edit?window_close=0&table=' + table;
+    }
     let w = popup_window(url, '', window, 1000, 800);
     w.focus();    
   });  
   
 /**********************************************************************
  * When filter_field (field name) is selected on filter subform this routine finds 
- * and displays apropriate span with input field.
+ * and displays appropriate span with input field.
  **********************************************************************/
   $('#filter_field').on('change', function() {
     if (this.value.length > 0) { 
@@ -891,11 +1006,10 @@ $(document).ready( function() {
   *******************************************************************/
   $('#_record__filter_field').keydown( function(e) {
     if (e.which == '13' || e.which == '9') {
-      var url = $(this).parents('span').attr("data-url");
+      let url = $(this).parents('span').attr("data-url");
       url = url + "&filter_value=" + this.value;
-      location.href = url;
-      return false;      
-    }
+      simple_ajax_call(url);
+    };
   });
 
   /*******************************************************************
@@ -913,7 +1027,7 @@ $(document).ready( function() {
       value = field.val();
     }
     url = url + "&filter_value=" + value;
-    location.href = url;
+    simple_ajax_call(url);
   });
 
  /*******************************************************************
@@ -921,47 +1035,77 @@ $(document).ready( function() {
   *******************************************************************/
   $('#open_drgcms_filter').on('click', function(e) {
     $('#drgcms_filter').bPopup({
-      speed: 650,
-      transition: 'slideDown'
-    });      
+      transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+      opacity: 0, position: ['auto', 20],
+      closeClass: 'dc-link' });
   });
   
   /*******************************************************************
   * Click on preview selected image
   *******************************************************************/
   $('.dc-image-preview').on('click', function(e) {
-//      var img = $('.img1 img').attr('src');
-      var img = $(this).children(":first").attr('src');
-      $('#dc-image-preview').bPopup({
-            content:'image', //'ajax', 'iframe' or 'image'
-            contentContainer:'#dc-image-preview',
-            loadUrl: img
-        });
+    let img = $(this).children(":first").attr('src');
+    $('#dc-image-preview').bPopup({
+          content: 'image', //'ajax', 'iframe' or 'image'
+          contentContainer: '#dc-image-preview',
+          loadUrl: img,
+          opacity: 0
+    });
   });
   
  /*******************************************************************
-  * 
+  * Set new filter
   *******************************************************************/
-  $('.drgcms_popup_submit').on('click', function(e) {
-    //e.preventDefault();  
-    url = $(this).attr( 'data-url' );
-    field = $('select#filter_field1').val();
-    oper  = $('select#filter_oper').val();
-    location.href = url + '&filter_field=' + field + '&filter_oper=' + oper
-// Still opening in new window
-//    iframe = parent.document.getElementsByTagName("iframe")[0].getAttribute("id");
-//    loc = url + '&filter_field=' + field + '&filter_oper=' + oper
-//    $('#'+iframe).attr('src', loc);
-//    parent.document.getElementById(iframe).src = loc   
+  $('.dc-filter-set').on('click', function(e) {
+    let url = $(this).attr( 'data-url' );
+    let field = $('select#filter_field1').val();
+    let operation  = $('select#filter_oper').val();
+    url = url + '&filter_field=' + field + '&filter_oper=' + operation
+    simple_ajax_call(url);
    });
-   
- /*******************************************************************
-  * Toggle one cmsedit menu level
-  *******************************************************************/
-   $('.cmsedit-top-level-menu').on('click', function(e) {
-     $(e.target).find('ul').toggle('fast');
+
+  /*******************************************************************
+   * Toggle one cmsedit menu level
+   *******************************************************************/
+  $('.cmsedit-top-level-menu div').on('click', function(e) {
+    $(e.target).siblings('ul').toggle('fast');
+    $(e.target).toggleClass('expanded');
+  });
+
+  /*******************************************************************
+   * Toggle result set record menu
+   *
+   * This and additional two event hadlers provide expected behavior of submenus popup and close.
+   *******************************************************************/
+  $('.dc-result-submenu .mi-more_vert').on('click', function(e) {
+    let ul = $(e.target).siblings('ul');
+    // hide last selected menu if not the same
+    if (typeof dc_last_menu_selected !== 'undefined') { dc_last_menu_selected.hide(); }
+    // if menu is past the bottom fix it to bottom
+    let menu_bottom = ul.height() + ul.parent().position().top + 20;
+    if (menu_bottom > $(document).height()) ul.css('bottom', 0);
+    ul.show();
+    dc_last_menu_selected = ul;
    });
-   
+
+  /*******************************************************************
+   * Result record menu has lost focus. Hide menu.
+   *******************************************************************/
+  $('.dc-result-submenu ul').hover(function(e) {
+  },
+    function(e) {
+      dc_last_menu_selected.hide();
+      dc_last_menu_selected = undefined;
+  });
+
+  /*******************************************************************
+   * Result set record menu is left open if action is canceled. Ex. delete confirm. This will hide menu.
+   *******************************************************************/
+  $('.dc-result-submenu ul li').on('click', function(e) {
+    console.log('ups');
+    if (typeof dc_last_menu_selected !== 'undefined') dc_last_menu_selected.hide();
+  });
+
 /*******************************************************************
   * Resize result table columns. For now an idea.
   *******************************************************************/
@@ -1009,9 +1153,10 @@ $(document).ready( function() {
     } else { 
       sign = '';
     }
-// save value to hidden field which holds return value
+// save value to field holding return value and trigger change event
     var field = '#' + $(this).attr("id").slice(0,-1);
     $(field).val(val);
+    $(field).trigger("change")
     
 // decimal part
     if (decimals == 0) separator = '';
@@ -1093,14 +1238,14 @@ $(document).ready( function() {
   *******************************************************************/
   $('.dc-result-header .th i').hover( function() {
     old_sort_icon = '';
-    // save old sort icon and replace it with filter icon   
+    // save old sort icon and replace it with filter icon
     $.each( $(this).attr("class").split(/\s+/), 
       function(index, item) { if (item.match('sort')) { old_sort_icon = item}; }
     );
-    $(this).removeClass(old_sort_icon).addClass('fa-filter');
-// bring back old sort icon
-  }, function(){
-    $(this).removeClass('fa-filter').addClass(old_sort_icon);
+    $(this).removeClass(old_sort_icon).addClass('mi-ads_click');
+  // bring back old sort icon
+  }, function() {
+    $(this).removeClass('mi-ads_click').addClass(old_sort_icon);
   });
 
 /*******************************************************************
@@ -1108,6 +1253,8 @@ $(document).ready( function() {
   *******************************************************************/
   $('.dc-result-header .th i').click( function(e) {
     e.preventDefault();
+    if ($(this).hasClass('no-filter')) return;
+
     // additional click will close dialog when visible
     if ($('.filter-popup').is(':visible')) {
       $('.filter-popup').hide();
@@ -1118,7 +1265,7 @@ $(document).ready( function() {
     let field_name = header.attr("data-name");
     $('.filter-popup').attr('data-name', field_name);
     // change popup position and show
-    $('.filter-popup').css({'top':e.pageY+5,'left':e.pageX, 'position':'absolute'});
+    $('.filter-popup').css({'top': e.pageY + 5, 'left': e.pageX, 'position': 'absolute'});
     $('.filter-popup').show();    
   });
   
@@ -1133,7 +1280,7 @@ $(document).ready( function() {
     let field_name = parent.data("name");
     
     url = url + '&filter_field=' + field_name + '&filter_oper=' + operator;
-    window.location.href = url;
+    simple_ajax_call(url);
   });
 
   /*****************************************************************
@@ -1141,14 +1288,14 @@ $(document).ready( function() {
    ******************************************************************/
   $(".dc-handle").click(function() {
     let div = this.getAttribute("data-div");
-    dc_toggle_div(div);
+    dc_div_toggle(div);
   });
 
   /*******************************************************************
    * Show-Hide CMS menu on hamburger click
    *******************************************************************/
   $('#menu-hamburger').on('click', function(e) {
-    $('.cmsedit-container #menu').toggleClass('visible');
+    $('.cmsedit-container #cms-menu').toggleClass('visible');
   });
 
 });