RubyGems - integral - Versions diffs - 1.1.0 → 1.5.1 - Mend

integral 1.1.0 → 1.5.1

Files changed (633) hide show

data/app/assets/javascripts/ckeditor/plugins/wordcount/samples/maxParagraphs.html ADDED

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CKEditor</title>
+    <script src="../../../ckeditor.js"></script>
+	</head>
+	<body>
+		<textarea name="editor1"></textarea>
+		<script>
+      var config = {
+        extraPlugins: 'wordcount',
+        wordcount: {
+          maxParagraphs: 5,
+          showParagraphs: true,
+          showWordCount: false,
+          showRemaining: true
+        },
+        language: 'en'
+      }
+    </script>
+    <script>
+      CKEDITOR.replace( 'editor1' , config);
+    </script>
+	</body>
+</html>

data/app/assets/javascripts/integral/backend.js CHANGED

@@ -42,6 +42,54 @@ function ready() {
     window.initialized = true;
   }
+  function loadMore(entries) {
+    if (entries[0].intersectionRatio <= 0) {
+      return;
+    }
+    lastNotificationObserver.unobserve(notificationsContainer.find('ul li:last-of-type')[0])
+    $.ajax({
+      url: notificationsContainer.data('load-more-url'),
+      success: function(response) {
+        notificationsContainer.find('ul').append(response.content)
+        $('[data-notification-read-url]').each(function( index, notification ) {
+          unreadNotificationObserver.unobserve(notification)
+          unreadNotificationObserver.observe(notification)
+        });
+        if (response.load_more_url) {
+          notificationsContainer.data('load-more-url', response.load_more_url)
+          lastNotificationObserver.observe(notificationsContainer.find('ul li:last-of-type')[0])
+        } else {
+          notificationsContainer.find('.js-loader--notifications').hide()
+        }
+      }
+    });
+  }
+  function readNotification(entries) {
+    var i;
+    for (i = 0; i < entries.length; i++) {
+      entry = entries[i]
+      if (entry.intersectionRatio < .90) {
+        continue;
+      }
+      readUrl = entry.target.dataset.notificationReadUrl
+      unreadNotificationObserver.unobserve(entry.target)
+      entry.target.removeAttribute('data-notification-read-url')
+      $.ajax({
+        url: readUrl,
+        type: 'PUT',
+        success: function(response) {
+        }
+      });
+    }
+  }
   $(document).foundation();
   jQuery('input, textarea').characterCounter();
   SlugGenerator.check_for_slugs();
@@ -50,8 +98,126 @@ function ready() {
   new ChartManager();
   NotificationManager.flash();
   ImageUploader.init();
+  new RemoteForm($('.remote-form'));
   Grid.init();
+  $("[data-form-subscribe-notifications], [data-form-unsubscribe-notifications]").submit(function( event ) {
+    $(event.target).find('.button').attr('disabled', true)
+  });
+  $('[data-form-subscribe-notifications]').on( "ajax:success", function(event, response) {
+    activeForm = $(event.target)
+    activeForm.find('.button').attr('disabled', false)
+    activeForm.addClass('hide')
+    $('[data-form-unsubscribe-notifications]').removeClass('hide')
+    toastr['success']('You have subscribed to notifications.')
+  });
+  $('[data-form-unsubscribe-notifications]').on( "ajax:success", function(event, response) {
+    activeForm = $(event.target)
+    activeForm.find('.button').attr('disabled', false)
+    activeForm.addClass('hide')
+    $('[data-form-subscribe-notifications]').removeClass('hide')
+    toastr['success']('You have unsubscribed to notifications.')
+  });
+  notificationsContainer = $('[data-notifications]')
+  if (notificationsContainer.data('load-more-url')) {
+    lastNotificationObserver = new IntersectionObserver(loadMore, { root: notificationsContainer[0] });
+    lastNotificationObserver.observe(notificationsContainer.find('ul li:last-of-type')[0])
+  }
+  unreadNotificationObserver = new IntersectionObserver(readNotification, { root: notificationsContainer[0], threshold: 0.90 });
+  $('[data-notification-read-url]').each(function( index, notification ) {
+    unreadNotificationObserver.observe(notification)
+  });
+  // Recent activity 'view more' behaviour
+  $("[data-recent-activity]").on("click", function(ev) {
+    $button = $(ev.currentTarget);
+    modalId = $button.data('container-id');
+    $modal = $('#' + modalId);
+    if ($modal.length > 0) {
+      $modal.foundation('open');
+    } else {
+      $modal = $('#activity-placeholder').clone().appendTo('body')
+      $form = $modal.find('form')
+      $modal.attr('id', modalId)
+      $modal.foundation()
+      // Populate modal with content & filters
+      $modal.find('[data-title]').html($button.data('recent-activity-title'))
+      $modal.find('[data-timeline]').html($button.closest('.card').find('.timeline').html())
+      $form.find("input[name='grid[user]']").val($button.data('recent-activity-user'))
+      $form.find("input[name='grid[object]']").val($button.data('recent-activity-object'))
+      $form.find("input[name='grid[created_at]']").val($button.data('recent-activity-created-at'))
+      $form.find("input[name='grid[item_id]']").val($button.data('recent-activity-item-id'))
+      $form.on( "ajax:success", function(event, response) {
+        if (response.last_created_at != null) {
+          $modal.find('[data-timeline]').append(response.content)
+          $form.find("input[name='grid[created_at]']").val(response.last_created_at)
+        } else {
+          $form.find("input[type='submit']").hide()
+        }
+      });
+      $modal.foundation('open')
+      $form.submit()
+    }
+  });
+  // Initialize foundation components on filter
+  $(".card.listing form").on("ajax:success", function(ev) {
+    $(ev.currentTarget).closest('.card.listing').find('[data-grid] table').foundation();
+  });
+  // Hijack context menu click for rows which have a URL
+  $('.card.listing').on('contextmenu', 'tr[data-href]', function(ev) {
+    $('#' + ev.currentTarget.dataset.contextMenu).foundation('open');
+    return false;
+  });
+  // Capture clicks on rows which have a URL and visit that URL
+  $('.card.listing').on('click', 'tr[data-href]', function(ev) {
+    // Do not follow if the click is within a data-toggle
+    if (($(ev.target).closest('[data-toggle]').length == 0) && ($(ev.target).closest('[data-dropdown]').length == 0)) {
+      document.location = $(ev.currentTarget).data('href');
+    }
+  });
+  $("[data-button-delete-category]").on("ajax:success", function(ev) {
+    $(ev.currentTarget).closest('tr').fadeOut();
+  });
+  $("[data-button-delete-category]").on("ajax:error", function(ev) {
+    toastr["error"](I18n.t('integral.remote_form.error'));
+  });
+  $("#new_category_modal").on("open.zf.reveal", function(ev) {
+    $(ev.currentTarget).find('form').enableClientSideValidations();
+  });
+  $("[data-button-edit-category]").on( "click", function(ev) {
+    modalId = '#' + ev.currentTarget.dataset.buttonEditCategory;
+    modalUrl = ev.currentTarget.dataset.modalUrl;
+    if ($(modalId).length == 0) {
+      $.ajax({url: modalUrl, success: function(response){
+        $('body').append(response.content);
+        modal = $(modalId);
+        modal.foundation().foundation('open');
+        modal.find('form').enableClientSideValidations();
+        new RemoteForm(modal.find('form'));
+        SlugGenerator.check_for_slugs();
+      }});
+    } else {
+      $(modalId).foundation('open');
+    }
+  });
   if (($('body.lists.new').length > 0) || ($('body.lists.show').length > 0) || ($('body.lists.edit').length > 0)) {
     new List();
   }
@@ -92,24 +258,20 @@ function ready() {
     var dialogName = ev.data.name;
     var dialogDefinition = ev.data.definition;
-    // TODO: Add Info callout
-    if ( dialogName == 'image' ) {
+    if ( dialogName == 'image2' ) {
       var infoTab = dialogDefinition.getContents('info');
-      var advancedTab = dialogDefinition.getContents('advanced');
-      // Remove unhelpful inputs
-      infoTab.remove('txtHeight');
-      infoTab.remove('ratioLock');
-      infoTab.remove('txtBorder');
-      infoTab.remove('txtHSpace');
-      infoTab.remove('txtVSpace');
-      //infoTab.remove('htmlPreview');
-      advancedTab.remove('linkId');
-      advancedTab.remove('cmbLangDir');
-      advancedTab.remove('txtLangCode');
-      advancedTab.remove('txtGenLongDescr');
+      // Remove unused inputs
+      infoTab.remove('height');
+      infoTab.remove('lock');
+      // Do not validate width input
+      infoTab.get('width').validate = function() {
+        return true;
+      }
     }
+    // Remove unused inputs for link
     if ( dialogName == 'link' ) {
       var advancedTab = dialogDefinition.getContents('advanced');
       var targetTab = dialogDefinition.getContents('target');
@@ -230,25 +392,34 @@ function ready() {
   };
   // Material Tags
-  $("input[data-role=materialtags]").each(function( index ) {
-    suggestableInput = $(this)
-      typeaheadSuggestions = suggestableInput.data('typeahead').split(' ')
-      // Initialize suggest engine
-      suggestEngine = new Bloodhound({
-        datumTokenizer: Bloodhound.tokenizers.whitespace,
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        local: typeaheadSuggestions
-      });
+  $("[data-suggest-tags]").each(function( index ) {
+    suggestableInput = $(this);
+    typeaheadSuggestions = suggestableInput.data('suggestTagsTypeahead').split(' ');
+    freeInput = suggestableInput.data('suggestTagsFreeInput');
+    if (typeof freeInput === 'undefined') {
+      freeInput = true;
+    }
+    // Initialize suggest engine
+    suggestEngine = new Bloodhound({
+      datumTokenizer: Bloodhound.tokenizers.whitespace,
+      queryTokenizer: Bloodhound.tokenizers.whitespace,
+      local: typeaheadSuggestions
+    });
     // Initialize materialtags
     suggestableInput.materialtags({
+      freeInput: freeInput,
       typeaheadjs: {
         source: function(query, cb) {
           suggestEngine.search(query, function(suggestions) {
             cb(filterSuggestions(suggestableInput, suggestions));
           });
-        }
+        },
+        // TODO: These two options don't currently work but would be nice to add in
+        autoselect: true,
+        highlight: true
       }
     });
   });

data/app/assets/javascripts/integral/frontend.js CHANGED

@@ -9,8 +9,10 @@
 //= require toastr
 //= require rails.validations
 //= require rails.validations.simple_form
-//= require integral/support/date_picker/picker
-//= require integral/support/date_picker/picker.date
+//= require integral/support/lib/lazysizes
+//= require integral/support/ls.twitter
+//= require integral/support/ls.instagram
+//= require integral/support/date_picker
 //= require integral/support/date_picker
 //= require integral/support/click_to_copy
 //= require integral/support/google_analytics
@@ -35,6 +37,39 @@ function ready() {
   new RemoteForm($('.remote-form'));
   new DatePicker('.datepicker');
   GoogleAnalytics.trackRead();
+  // Move most read posts widget to middle of post listing (can't do this serverside due to caching)
+  $mostReadWidget = $('[data-most-read-posts]');
+  if ($mostReadWidget.length == 1) {
+    $('[data-most-read-posts]').insertAfter('[data-post-list] div:nth-child(5)');
+  }
+  // Scroll Container
+  // TODO
+  // in future allow to configure each scroll-container how it activiates
+  // also update when changing size
+  $(".scroll-container").each(function( index ) {
+    container = $(this);
+    wrapper = container.find('.scroll-wrapper');
+    visibleChildren = wrapper.children(':visible');
+    //elementWidth = '250';
+    elementWidth = parseInt(container.data('item-width'))
+    validSizes = ['small', 'medium']
+    //if (Foundation.MediaQuery.current == 'small') {
+    if (validSizes.includes(Foundation.MediaQuery.current)) {
+      visibleChildren.each(function(index) {
+        $(this).css('width', elementWidth);
+        $(this).css('max-width', 'unset');
+      });
+      firstChild = visibleChildren.first()
+      wrapperWidth = (elementWidth + (parseInt(firstChild.css('marginLeft')) + parseInt(firstChild.css('marginRight')))) * visibleChildren.size();
+      widthCss = wrapperWidth + 'px';
+      wrapper.css('width', widthCss);
+    }
+  });
 };
 // Initial Page load event handler

data/app/assets/javascripts/integral/support/character_counter.js CHANGED

@@ -12,8 +12,9 @@ jQuery.fn.characterCounter = function(){
     var itHasLengthAttribute = $input.attr('maxlength') != undefined;
     var itIsntDisabled = $input.attr('data-character-counter') != 'false';
+    var itIsEnabled = $input.attr('data-character-counter') == 'true';
-    if ((itHasLengthAttribute) && (itIsntDisabled)) {
+    if ((itHasLengthAttribute) && (itIsntDisabled) || itIsEnabled) {
       $input.on('input', updateCounter);
       $input.on('focus', updateCounter);
       $input.on('blur', removeCounterElement);
@@ -24,14 +25,18 @@ jQuery.fn.characterCounter = function(){
 };
 function updateCounter(){
-  var maxLength     = +$(this).attr('maxlength'),
-  actualLength      = this.value.length,
-  isValidLength     = actualLength <= maxLength;
+  var maxLength = $(this).attr('maxlength');
+  var actualLength = this.value.length;
-  $(this).parent().find('span[class="character-counter"]')
-    .html( actualLength + '/' + maxLength);
+  if (maxLength === undefined) {
+    var formattedCount = actualLength;
+  } else {
+    var isValidLength = actualLength <= maxLength;
+    var formattedCount = actualLength + '/' + maxLength;
+    addInputStyle(isValidLength, $(this));
+  }
-  addInputStyle(isValidLength, $(this));
+  $(this).parent().find('span[class="character-counter"]').html(formattedCount);
 }
 function addCounterElement($input) {
@@ -45,7 +50,7 @@ function addCounterElement($input) {
     .addClass('character-counter')
     .css('float','right')
     .css('font-size','12px')
-    .css('margin-top', '-.5rem')
+    .css('align-self', 'flex-end')
     .css('height', 1);
   $input.after($counterElement);

data/app/assets/javascripts/integral/support/confirm_modal.coffee CHANGED

@@ -16,8 +16,8 @@ $.rails.buildConfirmationDialog = (message, modalId, confirmBtnId, cancelBtnId)
     </div>
     <div class='modal-footer'>
-       <a id='#{cancelBtnId}' class='button secondary hollow'>#{I18n.t('integral.actions.cancel')}</a>
-       <a id='#{confirmBtnId}' class='button primary'>#{I18n.t('integral.actions.confirm')}</a>
+       <button id='#{cancelBtnId}' class='button secondary hollow'>#{I18n.t('integral.actions.cancel')}</button>
+       <button id='#{confirmBtnId}' class='button primary'>#{I18n.t('integral.actions.confirm')}</button>
     </div>
      <button class='close-button' data-close aria-label='Close modal' type='button'>
        <span aria-hidden='true'>&times;</span>

data/app/assets/javascripts/integral/support/date_picker.coffee CHANGED

@@ -1,38 +1,44 @@
-# Represents Date Picker (PickADate)
+# Represents Date Picker - requires jQuery UI Datepicker - https://jqueryui.com/datepicker/
 class this.DatePicker
+  @getCurrentDate: (element, dateFormat='yy-mm-dd') ->
+    date = null
+    try
+      date = $.datepicker.parseDate( dateFormat, element.value )
+    catch error
+    date
   @initDateRanges: ->
     $('[data-date-picker-end-element]').each (index, dpStartElement) ->
       $dpStartElement = $(dpStartElement)
-      dpStart = $dpStartElement.pickadate('picker')
-      $dpEndElement = $('#' + $dpStartElement.data().datePickerEndElement)
-      dpEnd = $dpEndElement.pickadate('picker')
-      # Check if there’s a “from” or “to” date to start with.
-      if dpStart.get('value')
-        minimumDate = new Date(dpStart.get('select').obj.valueOf() + 86400000)
-        dpEnd.set('min', minimumDate)
-      if dpEnd.get('value')
-        maximumDate = new Date(dpEnd.get('select').obj.valueOf() - 86400000)
-        dpStart.set('max', maximumDate)
-      # When something is selected, update the “from” and “to” limits.
-      dpStart.on 'set', (event) =>
-        if event.select
-          minimumDate = new Date(dpStart.get('select').obj.valueOf() + 86400000)
-          dpEnd.set('min', minimumDate)
+      endSelector = "[id='" + $dpStartElement.data().datePickerEndElement + "']"
+      $dpEndElement = $(endSelector)
-      dpEnd.on 'set', (event) =>
-        if event.select
-          maximumDate = new Date(dpEnd.get('select').obj.valueOf() - 86400000)
-          dpStart.set('max', maximumDate)
-        else if 'clear' of event
-          dpStart.set('max', false)
+      # Passing these options is doesn't seem to be working?
+      dpStart = $dpStartElement.datepicker(
+        firstDay: 1
+        showAnim: ""
+      )
+      dpEnd = $dpEndElement.datepicker(
+        firstDay: 1
+        showAnim: ""
+      )
+      dpStart.datepicker("option", "firstDay", 1)
+      dpEnd.datepicker("option", "firstDay", 1)
+      dpStart.datepicker("option", "showAnim", '')
+      dpEnd.datepicker("option", "showAnim", '')
+      dpStart.on "change", (ev) =>
+        dateMinimum = DatePicker.getCurrentDate(ev.currentTarget)
+        dateMinimum.setDate(dateMinimum.getDate() + 1)
+        dpEnd.datepicker("option", "minDate", dateMinimum)
+      dpEnd.on "change", (ev) =>
+        dateMaximum = DatePicker.getCurrentDate(ev.currentTarget)
+        dateMaximum.setDate(dateMaximum.getDate() - 1)
+        dpStart.datepicker("option", "maxDate", dateMaximum)
   constructor: (selector, opts={}) ->
     @selector = selector
     @opts = opts
-    @_setLanguage()
     @_initializeDatePicker()
   _initializeDatePicker: ->
@@ -43,41 +49,30 @@ class this.DatePicker
       maxRaw = dp[0].max
       minDate = new Date minRaw if minRaw
       maxDate = new Date maxRaw if maxRaw
+      disabledDates = dp.data('disabled-dates')
+      showButtonPanel = if dp.data('date-picker-button-panel') == true then true else false
+      closeText = if dp.data('date-picker-close-text') then dp.data('date-picker-close-text') else 'Close'
-      dp.pickadate
-        min: minDate
-        max: maxDate
-        disable: @getDisabledDates(dp)
-        container: @getContainer(dp)
-        closeOnSelect: true
-        format: "yyyy-mm-dd"
-        onOpen: @opts.onOpen
-        onClose: @opts.onClose
-  getContainer: (dp) ->
-    dp.data('date-picker-container')
-  getDisabledDates: (dp) ->
-    data = dp.data('disabled-dates')
-    return [] if not data
-    dates = []
-    for date in data.split(',')
-      dates.push new Date(date)
+      dp.datepicker
+        dateFormat: "yy-mm-dd"
+        minDate: minDate
+        maxDate: maxDate
+        beforeShow: @opts.onOpen
+        onClose: (dateText, inst) =>
+          if dp.data('date-picker-clear') == true && inst.dpDiv.find('button.clicked').length > 0
+            inst.input.val('')
+            inst.input.change()
+          else
+            @opts.onClose() if @opts.close
+        showButtonPanel: showButtonPanel
+        closeText: closeText
+        # Return false to disable a specific date
+        beforeShowDay: (currentDate) =>
+          return [true] if not disabledDates
-    dates
+          for dateStr in disabledDates.split(',')
+            parsedDate = new Date(dateStr)
-  # TODO: Change this to I18n
-  _setLanguage: ->
-    $.extend($.fn.pickadate.defaults, {
-      monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
-      monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
-      weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
-      weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
-      weekdaysLetter: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
-      today: 'Today',
-      clear: 'Clear',
-      close: 'Close',
-      firstDay: 1,
-    })
+            return [false] if (parsedDate.getFullYear() == currentDate.getFullYear() and parsedDate.getDate() == currentDate.getDate() and parsedDate.getMonth() == currentDate.getMonth())
+          [true]