drg_cms 0.6.1.4 → 0.6.1.9

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

@@ -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
@@ -207,7 +207,7 @@ process_json_result = function(json) {
       // 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]) );
@@ -245,9 +245,20 @@ process_json_result = function(json) {
       
 /**** display popup message ****/
       case 'popup':
-      $('#popup').html(value);
-      $('#popup').bPopup({ speed: 650, transition: 'slideUp'});
-      break;
+        if (selector == 'url') {
+          $('#popup').bPopup({ loadUrl: value,
+            transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+            opacity: 0, position: ['auto', 20],
+            closeClass: 'dc-link' });
+        }
+        else {
+          $('#popup').html(value);
+          $('#popup').bPopup( {
+            transition: 'slideDown', transitionClose: 'slideDown', speed: 300,
+            opacity: 0, position: ['auto', 20],
+            closeClass: 'dc-link' });
+        }
+        break;
 
 /**** update div ****/
     case '#div+':
@@ -273,6 +284,9 @@ process_json_result = function(json) {
     case 'url':
       window.location.href = value;
       break;
+    case 'parenturl':
+      parent.location.href = value;
+      break;
     case 'alert':
       alert(value);
       break;
@@ -326,10 +340,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;
 }
 
 /*******************************************************************
@@ -385,7 +401,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 {
@@ -393,8 +409,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
@@ -457,7 +520,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    
@@ -468,13 +531,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);
   });
 
   /*******************************************************************
@@ -574,7 +646,7 @@ $(document).ready( function() {
   $('.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;
+    if (embedded_height == 0) embedded_height = 50;
     this.style.height = (embedded_height + 30) + 'px';
     // resize parent iframe window too
     let parentWindow = this.contentWindow.parent;
@@ -634,9 +706,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-search_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. 
@@ -657,24 +741,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
@@ -690,20 +794,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
   *******************************************************************/
@@ -724,28 +815,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) { 
@@ -883,11 +986,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);
+    };
   });
 
   /*******************************************************************
@@ -905,7 +1007,7 @@ $(document).ready( function() {
       value = field.val();
     }
     url = url + "&filter_value=" + value;
-    location.href = url;
+    simple_ajax_call(url);
   });
 
  /*******************************************************************
@@ -913,47 +1015,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.
   *******************************************************************/
@@ -1085,14 +1217,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);
   });
 
 /*******************************************************************
@@ -1100,6 +1232,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();
@@ -1110,7 +1244,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();    
   });
   
@@ -1125,7 +1259,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);
   });
 
   /*****************************************************************
@@ -1133,14 +1267,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');
   });
 
 });