lato_core 2.1.2 → 2.1.3

data/app/assets/javascripts/lato_core/{interfaces/Modal.js → modules/CoreModal.js}

@@ -1,4 +1,4 @@
-var Modal = (function () {
+var CoreModal = (function () {
 
   function open (modalId, event) {
     $('#' + modalId + '.elements-modal').addClass('elements-modal--active')
@@ -20,9 +20,34 @@ var Modal = (function () {
     }
   }
 
+  function initializeModalCloseButton (modal) {
+    var closeButton = $(modal).find('.elements-modal__close-button')
+    $(closeButton).click(function (e) {
+      e.preventDefault()
+      // close modal
+      $(modal).removeClass('elements-modal--active')
+      $(modal).find('.elements-modal__modal').removeClass('elements-modal__modal--active')
+      // active body scrolling
+      $('body').removeClass('stop-scrolling')
+    })
+  }
+
+  function _initModalCloseButton () {
+    $('.elements-modal').each(function () {
+      initializeModalCloseButton(this)
+    })
+  }
+
+  // Init:
+  function init () {
+    _initModalCloseButton()
+  }
+
   return {
+    init: init,
+    initializeModalCloseButton: initializeModalCloseButton,
     open: open,
     close: close
   }
 
-})()
+})()

data/app/assets/javascripts/lato_core/modules/CoreSelect.js

@@ -0,0 +1,110 @@
+var CoreSelect = (function () {
+
+  function initializeSelect (select) {
+    var selectInput = $(select).find('.inputs__select')
+    $(selectInput).selectize({
+      create: $(selectInput).attr('data-create') === 'true',
+      maxItems: $(selectInput).attr('data-multiple') === 'true' ? null : 1,
+      delimiter: ','
+    })
+  }
+
+  function initializeMultipleSelect (multipleSelect) {
+    var selects =  $(multipleSelect).find('select.inputs__select')
+    // manage every select
+    selects.each(function (index) {
+      _initMultipleSelectSelectize(index, selects)
+    })
+    // load options for first selectize
+    _loadMultipleSelectOptions(null, 0, selects)
+  }
+
+  function _initMultipleSelectSelectize (selectPosition, selects) {
+    var select = selects[selectPosition]
+    var value = $(select).attr('value')
+    console.log(value)
+    var position = $(select).attr('data-position')
+    // clear old selectize
+    var selectize = select.selectize
+    if (selectize) {
+      selectize.destroy()
+    }
+    // initialize selectize
+    $(select).selectize({
+      maxItems: 1,
+      valueField: 'value',
+      labelField: 'label',
+      searchField: 'label',
+      options: [],
+      onChange: function (value) {
+        _loadMultipleSelectOptions(value, parseInt(position) + 1, selects)
+      },
+      onInitialize: function () {
+        if (value) {
+          this.setValue(value)
+          _loadMultipleSelectOptions(value, parseInt(position) + 1, selects)
+        }
+      }
+    })
+  }
+
+  function _updateMultipleSelectSelectize (options, selectPosition, selects) {
+    var select = selects[selectPosition]
+    var value = $(select).attr('value')
+    var position = $(select).attr('data-position')
+
+    var selectize = $(select)[0].selectize
+
+    if (selectize) {
+      selectize.clear();
+      selectize.clearOptions();
+      selectize.load(function (callback) {
+        callback(options)
+      })
+      if (value) {
+        selectize.setValue(value)
+        _loadMultipleSelectOptions(value, parseInt(position) + 1, selects)
+      }
+    }
+  }
+
+  function _loadMultipleSelectOptions (filterValue, selectPosition, selects) {
+    var select = selects[selectPosition]
+    if (!select) { return }
+    var apiUrl = $(select).attr('data-api')
+    $.ajax({
+      url: apiUrl,
+      cache: false,
+      data: (filterValue ? {value: filterValue} : null),
+      success: function (response) {
+        _updateMultipleSelectSelectize(response, selectPosition, selects)
+      }
+    })
+  }
+
+  function _initSelect () {
+    $('.inputs-select').each(function () {
+      initializeSelect(this)
+    })
+  }
+
+  function _initMultipleSelect () {
+    $('.inputs-multipleselect').each(function () {
+      initializeMultipleSelect(this)
+    })
+  }
+
+  // Init:
+  function init () {
+    _initSelect()
+    _initMultipleSelect()
+  }
+
+  return {
+    init: init,
+    initializeSelect: initializeSelect,
+    initializeMultipleSelect: initializeMultipleSelect
+  }
+
+})()
+  

data/app/assets/javascripts/lato_core/{initializers/inputs/SortableManager.js → modules/CoreSortableManager.js}

@@ -1,8 +1,9 @@
-var SortableManager = (function () {
-  function initSortable() {
+var CoreSortableManager = (function () {
+
+  function _initSortable () {
     var sortableContainer = document.querySelectorAll('.js-sortable__main-container')
 
-    if(sortableContainer.length > 0) {
+    if (sortableContainer.length > 0) {
       for (var i = 0; i < sortableContainer.length; i++) {
 
         var sort = Sortable.create(sortableContainer[i], {
@@ -36,7 +37,7 @@ var SortableManager = (function () {
     }
   }
 
-  function updateOrder(container) {
+  function updateOrder (container) {
     var sortableElements = container.querySelectorAll('.js-sortable__element')
     for (var i = 0; i < sortableElements.length; i++) {
       var sortableElement = sortableElements[i]
@@ -50,12 +51,12 @@ var SortableManager = (function () {
     }
   }
 
-  function destroySort(sortInstance) {
+  function destroySort (sortInstance) {
     sortInstance.destroy()
   }
 
   function init () {
-    initSortable()
+    _initSortable()
   }
 
   return {

data/app/assets/javascripts/lato_core/modules/CoreTable.js

@@ -0,0 +1,28 @@
+var CoreTable = (function () {
+
+  function initializeTableFixedHead (table) {
+    var tableElement = $(table).find('.elements-table__table')
+    $(tableElement).floatThead({
+      scrollContainer: function (table) {
+        return table.closest('.elements-table--fixed')
+      }
+    })
+  }
+  
+  function _initTableFixedHead () {
+    $('.elements-table.elements-table--fixed').each(function () {
+      initializeTableFixedHead(this)
+    })
+  }
+
+  // Init:
+  function init () {
+    _initTableFixedHead()
+  }
+
+  return {
+    init: init,
+    initializeTableFixedHead: initializeTableFixedHead
+  }
+
+})()

data/app/assets/stylesheets/lato_core/cells/inputs/_inputs.scss

@@ -14,3 +14,4 @@
 @import "geolocalization";
 @import "sortableblock";
 @import "youtube";
+@import "multipleselect";

data/app/assets/stylesheets/lato_core/cells/inputs/_multipleselect.scss

@@ -0,0 +1,6 @@
+.inputs-multipleselect  {
+
+  >.row {
+    margin: -7.5px;
+  }
+}

data/app/assets/stylesheets/lato_core/cells/widgets/_index.scss

@@ -63,6 +63,15 @@
   }
 }
 
+.widgets-index__counter {
+  height: 31px;
+  float: left;
+  padding-top: 10px;
+  padding-right: 15px;
+  border-bottom: solid 1px $color_grey;
+  font-size: 0.8em;
+}
+
 // Responsive layout:
 
 @media(max-width:767px) {

data/app/cells/lato_core/inputs/dropzone/views/show.html.erb

@@ -1,24 +1,28 @@
-<%= render '../../shared/label.html' %>
+<div class="inputs-dropzone inputs__container">
 
-<form
-  method="<%= @args[:method] %>"
-  action="<%= @args[:url] %>"
-  class="inputs__dropzone"
-  data-param-name="<%= @args[:param_name] %>"
-  data-max-size="<%= @args[:max_size] %>"
-  data-max-files="<%= @args[:max_files] %>"
->
+  <%= render '../../shared/label.html' %>
 
-  <input type="hidden" name="utf8" value="✓">
-  <input type="hidden" name="authenticity_token" value="<%= @core__cells_authenticity_token %>">
-  <input type="hidden" name="_method" value="<%= @args[:method] %>">
-  
-  <div class="fallback">
-    <input name="<%= @args[:param_name] %>" type="file" multiple />
-  </div>
+  <form
+    method="<%= @args[:method] %>"
+    action="<%= @args[:url] %>"
+    class="inputs__dropzone"
+    data-param-name="<%= @args[:param_name] %>"
+    data-max-size="<%= @args[:max_size] %>"
+    data-max-files="<%= @args[:max_files] %>"
+  >
 
-  <div class="icon">
-    <i class="fa fa-file-o" aria-hidden="true"></i>
-  </div>
+    <input type="hidden" name="utf8" value="✓">
+    <input type="hidden" name="authenticity_token" value="<%= @core__cells_authenticity_token %>">
+    <input type="hidden" name="_method" value="<%= @args[:method] %>">
+    
+    <div class="fallback">
+      <input name="<%= @args[:param_name] %>" type="file" multiple />
+    </div>
 
-</form>
+    <div class="icon">
+      <i class="fa fa-file-o" aria-hidden="true"></i>
+    </div>
+
+  </form>
+
+</div>

data/app/cells/lato_core/inputs/multipleselect/cell.rb

@@ -0,0 +1,52 @@
+module LatoCore
+
+  class Inputs::Multipleselect::Cell < Cell
+
+    @@requested_args = [:name]
+
+    @@default_args = {
+      label: '',
+      help: '',
+      class: 'md-12',
+      selects: [] # {name: '', label: '', api: '', value: '', class: ''}
+    }
+
+    def initialize(args = {})
+      @args = validate_args(
+        args: args,
+        requested_args: @@requested_args,
+        default_args: @@default_args
+      )
+
+      set_conditions
+    end
+
+    def show
+      render 'show.html'
+    end
+
+    protected
+
+    def generate_select(select_settings, position)
+      LatoCore::Inputs::Select::Cell.new(
+        name: "#{@args[:name]}[#{select_settings[:name]}]",
+        label: select_settings[:label],
+        value: select_settings[:value],
+        class: select_settings[:class],
+        attributes: {
+          api: select_settings[:api],
+          position: position
+        }
+      )
+    end
+
+    private
+
+    def set_conditions
+      @show_label = !@args[:label].nil? && !@args[:label].blank?
+      @show_help = !@args[:help].nil? && !@args[:help].blank?
+    end
+
+  end
+
+end

data/app/cells/lato_core/inputs/multipleselect/views/show.html.erb

@@ -0,0 +1,16 @@
+<div class="inputs-multipleselect inputs__container <%= @args[:class] %>">
+
+  <%= render '../../shared/label.html' %>
+
+  <div class="row">
+    
+    <% @args[:selects].each_with_index do |select_settings, index| %>
+      <% select = generate_select(select_settings, index) %>
+      <%= select %>
+    <% end %>
+
+  </div>
+
+  <%= render '../../shared/help.html' %>
+  
+</div>

data/app/cells/lato_core/inputs/select/cell.rb

@@ -16,7 +16,8 @@ module LatoCore
       option_value: 'value',
       option_name: 'name',
       option_blank: true,
-      class: 'md-12'
+      class: 'md-12',
+      attributes: {}
     }
 
     def initialize(args = {})
@@ -33,12 +34,24 @@ module LatoCore
       render 'show.html'
     end
 
+    # This function return a string used on the HTML option to
+    # set a an option value selected or not.
+    def get_option_value_selected(option_value)
+      if @args[:multiple]
+        values = @args[:value].is_a?(Array) ? @args[:value] : @args[:value].split(',')
+        return values.include?(option_value) ? "selected='selected'" : ''
+      end
+
+      @args[:value] == option_value ? "selected='selected'" : ''
+    end
+
     private
 
       def set_conditions
         @show_label = !@args[:label].nil? && !@args[:label].blank?
         @show_help = !@args[:help].nil? && !@args[:help].blank?
         @options = generate_options
+        @value = generate_value
       end
 
       def generate_options
@@ -53,6 +66,11 @@ module LatoCore
         return options
       end
 
+      def generate_value
+        return @args[:value].is_a?(Array) ? @args[:value].join(',') : @args[:value] if @args[:multiple]
+        @args[:value]
+      end
+
   end
 
 end

data/app/cells/lato_core/inputs/select/views/show.html.erb

@@ -5,18 +5,26 @@
   <select
     class="inputs__select"
     type="text"
-    value="<%= @args[:value] %>"
+    value="<%= @value %>"
     name="<%= @args[:name] %>"
     placeholder="<%= @args[:placeholder] %>"
     data-required="<%= @args[:required] %>"
     data-create="<%= @args[:create] %>"
     data-multiple="<%= @args[:multiple] %>"
+
+    <% if @args[:multiple] %>
+      multiple="multiple"
+    <% end %>
+    
+    <% @args[:attributes].each do |key, value| %>
+      data-<%= key%>="<%= value %>"
+    <% end %>
   >
     <% if @args[:option_blank] %>
       <option value=""></option>
     <% end %>
     <% @options.each do |option| %>
-      <option value="<%= option[:value] %>" <%= @args[:value] == option[:value] ? 'selected' : '' %>>
+      <option value="<%= option[:value] %>" <%= get_option_value_selected(option[:value]) %>>
         <%= option[:name] %>
       </option>
     <% end %>

data/app/cells/lato_core/widgets/index/cell.rb

@@ -38,6 +38,7 @@ module LatoCore
 
       def set_conditions
         @records = @args[:records].is_a?(Hash) ? @args[:records][:records] : @args[:records]
+        @total = @args[:records].is_a?(Hash) ? @args[:records][:total] : @args[:records].length
         # conditions for show
         @show_row_actions = @args[:index_url] && @args[:actions] && (@args[:actions][:show] || @args[:actions][:edit] || @args[:actions][:delete])
         @show_row_actions_class = @show_row_actions ? 'widgets-index--actions' : ''