drg_cms 0.6.0.6 → 0.6.1.4

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

@@ -46,14 +46,20 @@ dumpAttributes = function(obj) {
  * Function checks if there are delay loaded embedded elements on 
  * selected tab and triggers iframe reload.
  *******************************************************************/
-update_embedded_on_first_display = function(div_name) {
-  var iframes = $(div_name).find("iframe");
+update_embedded_on_tab_select = function(div_name) {
+  let iframes = $(div_name).find("iframe");
   $.each(iframes, function(index, iframe) {
-    var src_delay = iframe.getAttribute('data-src-delay'); 
+    // delayed load
+    let src_delay = iframe.getAttribute('data-src-delay');
     if (src_delay != null && src_delay != '') {
       iframe.setAttribute('data-src-delay', '');
       iframe.setAttribute('src', src_delay);
     }
+    // always load on tab select
+    let src_always = iframe.getAttribute('data-src-always');
+    if (src_always != null) {
+      iframe.setAttribute('src', src_always);
+    }    
   });
 };
 
@@ -169,67 +175,79 @@ $(function() {
  *  window_: Will force loading of url supplied in value into new window
  *  reload_: Will reload current window
  *  
- *  Operations can be chained and are executed sequentialy.
- *    render json: {'window_' => "/dokument.pdf", 'reload_' => 1}.to_json
- *  will open /dokument.pdf in new window and reload current window.
+ *  Operations can be chained and are executed sequential.
+ *    render json: {'window_' => "/document.pdf", 'reload_' => 1}.to_json
+ *  will open /document.pdf in new window and reload current window.
  *  
  *    render json: {'record_name' => "Damjan", 'record_surname' => 'Rems'}.to_json
  *  will replace values of two fields on the form.
  *******************************************************************/
 
 process_json_result = function(json) {
-  var i,w,operation,selector, msg_div, field;
+  let i, w, operation, selector, msg_div, field;
   $.each(json, function(key, value) {
     i = key.search('_');
     if (i > 1) {
-      operation = key.substring(0,i);
-      selector  = key.substring(i+1,100);
+      operation = key.substring(0, i);
+      selector  = key.substring(i+1, 100);
     } else {
       operation = key;
       selector  = '';
     }
-//  
+
     switch (operation) {
       
 /**** update fields on form ****/
     case 'record':
-      field = $('#'+key);
+      let name = key.replace('record_','record[') + ']';
+      field = $('[name="' + name + '"]');
       // checkbox field
-      if (field.is(':checkbox')) { 
+      if (field.is(':checkbox')) {
         field.prop('checked', value);
       // select field  
       } else if (field.is('select')) {
-          // options for select field
-          if (value && value.isArray) {
-            field.empty();
-            $.each(value, function(index, v) {
-              field.append( new Option(v[0], v[1]) );
-            });
-          // select field value
-          } else {
-            field.val(value);
-          }
+        // options for select field
+        if (value && value.isArray) {
+          field.empty();
+          $.each(value, function(index, v) {
+            field.append( new Option(v[0], v[1]) );
+          });
+        // select field value
+        } else {
+          field.val(value).change();
+        }
+      // radio field
+      } else if (field.attr('type') == 'radio') {
+        field.val([value])
+
       // other input fields
       } else {
         field.val(value);
       }
       break;
 
+/**** transfer focus to field ****/
+    case 'focus':
+      $('#' + value).focus();
+      break;
+
 /**** display message ****/
     case 'msg': 
-      msg_div = 'dc-form-' + selector;
-      if ( $('.'+msg_div).length == 0 ) {
+      let msg_div = 'dc-form-' + selector;
+      if ( $('.' + msg_div).length == 0 ) {
         value = '<div class="' + msg_div + '">' + value + '</div>';
         $('.dc-title').after(value);
       } else {
-        $('.'+msg_div).html(value);
+        $('.' + msg_div).html(value);
+        $('.' + msg_div).show();
       }
       break;
       
 /**** display popup message ****/
-    case 'popup':
+      case 'popup':
       $('#popup').html(value);
-      $('#popup').bPopup({ speed: 650, transition: 'slideDown' });            
+      $('#popup').bPopup({ speed: 650, transition: 'slideUp'});
+      break;
 
 /**** update div ****/
     case '#div+':
@@ -260,7 +278,8 @@ process_json_result = function(json) {
       break;
     case 'window':
       if (value == 'close') { window.close(); 
-      } else if (value == 'reload') { location.reload(); 
+      } else if (value == 'reload') {
+        window.location.href = window.location.href;
       } else {
         w = window.open(value, selector);
         w.focus();
@@ -271,13 +290,24 @@ process_json_result = function(json) {
       w.focus();        
       break;
     case 'eval':
+      console.log('from process_json_result: Eval option will be deprecated. Use script instead.')
       eval (value);
       break;
+    case 'script':
+      eval (value);
+      break; 
     case 'reload':
+      value = value.toString();
       if (value == 'parent') {
-        parent.location.reload();
+        //parent.location.reload();
+        parent.location.href = parent.location.href;
+
+/*** this would be current window (reload: true) ****/
+      } else if (value.length < 5) {
+        window.location.href = window.location.href;
+/*** reload iframe ****/
       } else {
-        location.reload();
+        $( '#' + value ).attr('src', $( '#' + value ).attr('src'));
       } 
       break;
     default: 
@@ -293,6 +323,15 @@ function dc_reload_window() {
   location.reload(); 
 }
 
+/*******************************************************************
+ * 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}`);
+}
+
 /*******************************************************************
  * Will select first editable input field on form. Works only when tab
  * is selected. Still have to find out, what to do on initial display.
@@ -322,14 +361,35 @@ $.fn.dc_scroll_view = function () {
  * Updates single field on parent iframe form of embedded form.
  *******************************************************************/
 process_parent_form_updates = function(element) {
-  var field = element.getAttribute("data-field");
-  var value = element.getAttribute("data-value");
-  if ( window.parent.$('#'+field).length > 0 ) {
-    if (field.substring(0,3) === 'td_') {   // readonly field
-      window.parent.$('#'+field+' > div').html(value);
-    } else { // input field
-      window.parent.$('#'+field).val(value);
+  let field = element.getAttribute("data-field");
+  let value = element.getAttribute("data-value");
+  let selector = '#' + field;
+
+  // update record
+  if (field.match(/record/)) {
+    if (window.parent.$(selector).length > 0) {
+      if (field.substring(0, 3) === 'td_') {   // readonly field
+        window.parent.$(selector + ' > div').html(value);
+      } else { // input field
+        window.parent.$(selector).val(value);
+      }
     }
+  // any div
+  } else {
+    if (window.parent.$(selector).length > 0) {
+      window.parent.$(selector).html(value);
+    }
+  }
+};
+
+/*****************************************************************
+ * Toggle show and hide div
+ ******************************************************************/
+dc_toggle_div = function(div) {
+  if ($(div).is(":visible")) {
+    $(div).slideUp();
+  } else {
+    $(div).slideDown();
   }
 };
 
@@ -409,18 +469,54 @@ $(document).ready( function() {
   * Sort action clicked on cmsedit
   *******************************************************************/
   $('.drgcms_sort').change( function(e) {
-    table = e.target.getAttribute("data-table");
-    sort = e.target.value; 
+    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;
+    window.location.href = "/cmsedit?sort=" + sort + "&table=" + table +  "&form_name=" + form;
   });
-  
+
+  /*******************************************************************
+   * Click on dc-check-all icon. Check or uncheck all checkboxes
+   *******************************************************************/
+  $('.dc-check-all').on('click',function(e) {
+    let checkboxes = $('.dc-check');
+    if ($(this).hasClass('fa-check-square-o')) {
+      // 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');
+    } 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');
+    }
+  });
+
+  /*******************************************************************
+   * Click on dc-check icon. Change color of background of element
+   *******************************************************************/
+  $('.dc-check').on('click',function(e) {
+    let parent = $(this).parent().closest('div');
+    if ($(this).prop('checked')) {
+      parent.addClass('dc-checked');
+    } else {
+      parent.removeClass('dc-checked');
+    }
+  });
+
  /*******************************************************************
   * Tab clicked on form. Hide old and show selected div.
   *******************************************************************/
   $('.dc-form-li').on('click', function(e) { 
     // find li with dc-form-li-selected class. This is our old tab
-    var old_tab_id = null;
+    let old_tab_id = null;
     $(e.target).parents('ul').find('li').each( function() {
       if ($(this).hasClass('dc-form-li-selected')) {
         // when not already selected toggle dc-form-li-selected class and save old tab
@@ -438,13 +534,13 @@ $(document).ready( function() {
       $('#data_' + e.target.getAttribute("data-div")).toggleClass('div-hidden');
       
       // resize parent iframe to fit selected tab size
-//      var div_height = document.getElementById('data_' + e.target.getAttribute("data-div")).clientHeight + 130;
-//      var div_height = document.getElementById('cmsform').clientHeight + 50;
-      var div_height = document.body.scrollHeight;
-      window.frameElement.style.height = div_height.toString() + 'px';
-// it would be too easy      $('#cmsform :input:enabled:visible:first').focus();
+      let div_height = document.body.scrollHeight;
+      let frame = window.frameElement
+      if (frame === null) frame = document.body;
+      frame.style.height = div_height.toString() + 'px';
+
       select_first_input_field('#data_' + e.target.getAttribute("data-div"));
-      update_embedded_on_first_display('#data_' + e.target.getAttribute("data-div"));
+      update_embedded_on_tab_select('#data_' + e.target.getAttribute("data-div"));
     }
   });  
 
@@ -453,10 +549,10 @@ $(document).ready( function() {
  * unless on initial display.
  *******************************************************************/
   $('#iframe_cms').on('load', function() {
-    new_height = this.contentWindow.document.body.offsetHeight + 50;
+    let new_height = this.contentWindow.document.body.offsetHeight + 50;
     if (new_height < 500 && new_height > 60) new_height = 500;
     this.style.height = new_height + 'px'; 
-// scroll to top
+    // scroll to top
     $('#iframe_cms').dc_scroll_view();
   });
 
@@ -465,52 +561,81 @@ $(document).ready( function() {
  * unless on initial display with no data 
  *******************************************************************/
   $('#iframe_edit').on('load', function() {
-//    console.log(this.contentWindow.document.body.offsetHeight);
     if (this.contentWindow.document.body.offsetHeight > 10) {
       this.style.height = (this.contentWindow.document.body.offsetHeight + 30) + 'px'; 
-// scroll to top
+
       $('#iframe_edit').dc_scroll_view();
     }
   });
-  
+
+  /*******************************************************************
+   * Same goes for iframe_embedded. Resize it + 30px
+   *******************************************************************/
+  $('.iframe_embedded').on('load', function() {
+    let embedded_height = this.contentWindow.document.body.offsetHeight;
+    // workaround. It gets tricky when embedded field is on tab
+    if (embedded_height == 0) embedded_height = 500;
+    this.style.height = (embedded_height + 30) + 'px';
+    // resize parent iframe window too
+    let parentWindow = this.contentWindow.parent;
+    let parent_height = (parentWindow.document.body.offsetHeight + 30) + 'px';
+    //parentWindow.frameElement.setAttribute('style', 'height:' + parent_height);
+    parentWindow.frameElement.style.height = parent_height;
+  });
+
 /*******************************************************************
  * Process Ajax call on cmsedit form actions
  *******************************************************************/
   $('.dc-link-ajax').on('click', function(e) {
     // confirmation if required
     if (confirmation_is_cancled(this)) {return false;}
-   
+
+    // url must be specified in data-url
+    let url = this.getAttribute("data-url");
+    if (url.length < 5) return false;
+
     // check HTML5 validations
     if ($("form")[0] && !$("form")[0].checkValidity() ) {
       $("form")[0].reportValidity();
       return false;
     }
-    var req = this.getAttribute("data-request");
-    // Get values from elements on the page:
-    if (req == "script") {
-      eval (this.getAttribute("data-script"));
-      return false;
-    }
-    else if (req == "post") { 
-      data = $('form').serialize(); 
+
+    let data = {};
+    let request = this.getAttribute("data-request");
+    switch (request) {
+      case 'script':
+        eval(this.getAttribute("data-script"));
+        return false;
+
+      case 'post':
+        data = $('form').serialize();
+        break;
+
+      default:
+        request = 'get'; // by default
     }
-    else { 
-      data = {}; 
-      req = 'get'; // by default
+
+    // add checkbox id-s to data if checkboxes present
+    let checkboxes = $('.dc-check');
+    if (checkboxes.length > 0) {
+      let checked = [];
+      checkboxes.each( function() {
+        if ($(this).prop('checked')) checked.push($(this).attr("id"));
+      })
+      data['checked'] = checked;
     }
-    
-    $('.dc-spinner').show();   
+
+    $('.dc-spinner').show();
     $.ajax({
-      url: this.getAttribute("data-url"),
-      type: req,
+      url: url,
+      type: request,
       dataType: "json",
       data: data,
       success: function(data) {
         process_json_result(data);
         $('.dc-spinner').hide();
       }
-      
-    });  
+    });
   });
   
 /*******************************************************************
@@ -613,9 +738,8 @@ $(document).ready( function() {
   * data from with text_autocomplete and data doesn't exist in belongs_to table.
   *******************************************************************/
   $('.in-edit-add').on('click', function(e) { 
-    url = '/cmsedit/new?table=' + this.getAttribute("data-table");
-/* I know. It doesn't work as expected. But it will do for now. */
-    w = window.open(url, '', 'chrome=yes,width=800,height=600,resizable,scrollbars=yes,status=1,centerscreen=yes,modal=yes');
+    let url = '/cmsedit/new?window_close=0&table=' + this.getAttribute("data-table");
+    let w = popup_window(url, '', window, 1000, 800);
     w.focus();    
   });  
   
@@ -625,13 +749,9 @@ $(document).ready( function() {
  **********************************************************************/
   $('#filter_field').on('change', function() {
     if (this.value.length > 0) { 
-      name = 'filter_' + this.value;
+      let name = 'filter_' + this.value;
       $(this).parents('form').find('span').each( function() {
-/*
-element = $(this).find(':first').attr('id');
- sometimes it is the second element         
-        if (element == nil) { element = $(this).find(':first').next().attr('id');}
- */   
+
         if ($(this).attr('id') == name) {
           if ( $(this).hasClass('div-hidden') ) { $(this).toggleClass('div-hidden'); }
         } else {
@@ -713,8 +833,8 @@ element = $(this).find(':first').attr('id');
   * Fire action (by default show document) when doubleclicked on result row
   *******************************************************************/
   $('.dc-result tr').on('dblclick', function(e) {
-    url = String( this.getAttribute("data-dblclick") );
-// prevent when data-dblclick not set
+    let url = String( this.getAttribute("data-dblclick") );
+    // prevent when data-dblclick not set
     if (url.length > 5) { 
       e.preventDefault();
       location.href = url;
@@ -725,8 +845,8 @@ element = $(this).find(':first').attr('id');
   * Fire action (by default show document) when doubleclicked on result row
   *******************************************************************/
   $('.dc-result-data').on('dblclick', function(e) {
-    url = String( this.getAttribute("data-dblclick") );
-// prevent when data-dblclick not set
+    let url = String( this.getAttribute("data-dblclick") );
+    // prevent when data-dblclick not set
     if (url.length > 5) { 
       e.preventDefault();
       location.href = url;
@@ -758,12 +878,12 @@ element = $(this).find(':first').attr('id');
   });
   
  /*******************************************************************
-  * This will fire cmsedit index action and pass value enterred into 
+  * This will fire cmsedit index action and pass value entered into
   * filter field and thus refresh browsed result set.
   *******************************************************************/
   $('#_record__filter_field').keydown( function(e) {
     if (e.which == '13' || e.which == '9') {
-      url = $(this).parents('span').attr("data-url");
+      var url = $(this).parents('span').attr("data-url");
       url = url + "&filter_value=" + this.value;
       location.href = url;
       return false;      
@@ -775,9 +895,16 @@ element = $(this).find(':first').attr('id');
   * work on all field types.
   *******************************************************************/
   $('.record_filter_field_icon').on('click', function(e) {
-    field = $('#_record__filter_field');
-    url = $(this).parents('span').attr("data-url");
-    url = url + "&filter_value=" + field.val();
+    let field = $('#_record__filter_field');
+    let url = $(this).parents('span').attr("data-url");
+    let value = null;
+
+    if (field.is(':checkbox')) {
+      value = field.is(':checked'); }
+    else {
+      value = field.val();
+    }
+    url = url + "&filter_value=" + value;
     location.href = url;
   });
 
@@ -897,10 +1024,13 @@ element = $(this).find(':first').attr('id');
    });
    
  /*******************************************************************
-  * number_field type keypressed
+  * Key pressed in number_field.
+  * - put minus sign in front of input field
+  * - replace dot and comma separators when required. Not all numeric pads are created equal.
+  * - when enter is pressed, save value to field before form is proccessed
   *******************************************************************/
    $('.dc-number').on('keydown', function(e) {
-// Minus sign. Put it on first place     
+     // Minus sign. Put it on first place
      if (e.which == 109) {
        if($(this).val().substr(0,1) == '-') {
          $(this).val( $(this).val().substr(1,20));
@@ -909,17 +1039,47 @@ element = $(this).find(':first').attr('id');
        }
        e.preventDefault();
      }
-// Enter. Save value before Enter is processed
-      if (e.which == 13) {
-        var delimiter = $(this).attr("data-delimiter") || '.';
-        var decimals  = $(this).attr("data-decimal") || 2;        
-        var value = $(this).val().replace(delimiter,'.');
-        var field = '#' + $(this).attr("id").slice(0,-1);
+     // replace , with . if . is separator.
+     var separator = $(this).attr("data-separator") || '.';
+     var inp = this;
+     if (e.which == 188) {
+       if (separator == '.') {
+         setTimeout(function() {
+           inp.value = inp.value.replace(/,/g, '.');
+         }, 0);
+       }
+     }
+     // replace . with , if , is separator
+     if (e.which == 190) {
+       if (separator == ',') {
+         setTimeout(function() {
+           inp.value = inp.value.replace(/\./g, ',');
+         }, 0);
+       }
+     }
+
+     // Enter means process form. Save the value before form is processed
+     if (e.which == 13) {
+       var decimals  = $(this).attr("data-decimal") || 2;
+       var value = $(this).val().replace(separator,'.');
+       var field = '#' + $(this).attr("id").slice(0,-1);
         
-        $(field).val( parseFloat(value).toFixed(decimals) );
-      }
+       $(field).val( parseFloat(value).toFixed(decimals) );
+     }
    });
-   
+
+  /*******************************************************************
+   * Slovenian keyboard has comma key instead of dot in numeric pad.
+   * This will catch if comma has been pressed and will replace it with dot.
+   *******************************************************************/
+  $('.date-picker').keypress( function(e) {
+    if (e.keyCode !== 44) return;
+    var inp = this;
+    setTimeout(function() {
+      inp.value = inp.value.replace(/,/g, '.');
+    }, 0);
+  });
+
  /*******************************************************************
   * Result header sort icon is hoverd. Change background icon to filter.
   *******************************************************************/
@@ -946,8 +1106,8 @@ element = $(this).find(':first').attr('id');
       return;
     }
     // retrieve name of current field and set it in popup
-    var header = $(this).closest('.th');
-    var field_name = header.attr("data-name");    
+    let header = $(this).closest('.th');
+    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'});
@@ -959,15 +1119,30 @@ element = $(this).find(':first').attr('id');
   * filter on action.
   *******************************************************************/
   $('.filter-popup li').click( function(e) {
-    var url      = $(this).data('url')
-    var operator = $(this).data('operator');
-    var parent   = $(this).closest('.filter-popup')
-    var field_name = parent.data("name");
+    let url = $(this).data('url');
+    let operator = $(this).data('operator');
+    let parent = $(this).closest('.filter-popup');
+    let field_name = parent.data("name");
     
     url = url + '&filter_field=' + field_name + '&filter_oper=' + operator;
     window.location.href = url;
   });
 
+  /*****************************************************************
+   * Toggle div
+   ******************************************************************/
+  $(".dc-handle").click(function() {
+    let div = this.getAttribute("data-div");
+    dc_toggle_div(div);
+  });
+
+  /*******************************************************************
+   * Show-Hide CMS menu on hamburger click
+   *******************************************************************/
+  $('#menu-hamburger').on('click', function(e) {
+    $('.cmsedit-container #menu').toggleClass('visible');
+  });
+
 });
 
 /*******************************************************************