para 0.6.9 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4915e7e03e392a3307e8b5176de12be7fdb73d6e
-  data.tar.gz: 45bf225b7000ad5f140bedfb91ab7ac77f8aa624
+  metadata.gz: f89735619264be8599e3ccccfccdb64d07aa219c
+  data.tar.gz: 7aea1f82a1e545b142dc4abcca505de107a3d94d
 SHA512:
-  metadata.gz: d874e015838070cc4a3d1dde20c78d22cc5faddf9ca53ebc70feb6962fc0cab806cb23960047224e8fe2fdabb944645f3bdec79e62b1d6318c9b12774bcbc644
-  data.tar.gz: 40ba2a96ee48edeeccd59ff47a39275df5fc10f86ddbcd194471291516684f6fca51b16077f53c4a61370cd74d309a1a6ed6fbe981dae53c3c8f3f4a962822e0
+  metadata.gz: cc137eb9e0185c8a7fac27b9ddb830981bcfa0e7b1951153beed16f4cc289efd3c5b6f467ee793cf9920aa02e9ed407f677b494fffa04fb60cff7ea85d69cfe6
+  data.tar.gz: 7d2b0d6a005b9a2770bf28a459fe34c8ca4cddd8276cb58f3df99923131a96f24e99903850d8867de76778b3a771ced22ed49b6bc95f4c4062768d360880a55b

data/app/assets/images/para/admin/template-section.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="248px" height="152px" viewBox="0 0 248 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43 (38999) - http://www.bohemiancoding.com/sketch -->
+    <title>Circle with Text Centered</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.0799999982">
+        <g id="Section" transform="translate(-23.000000, -8.000000)">
+            <g id="Circle-with-Text-Centered">
+                <g transform="translate(23.000000, 8.000000)">
+                    <g id="Circle-Image" transform="translate(97.000000, 0.000000)">
+                        <path d="M54.1791045,27.0906486 C54.1791045,42.0513524 42.0513524,54.1791045 27.0906486,54.1791045 C12.1277521,54.1791045 0,42.0513524 0,27.0906486 C0,12.1299448 12.1277521,0 27.0906486,0 C42.0513524,0 54.1791045,12.1299448 54.1791045,27.0906486" id="Fill-1195" fill="#6C7A8C"></path>
+                        <path d="M43.9738349,32.7029625 L33.369052,19.4754572 C32.730731,18.6805036 31.5254945,18.6826756 30.8915012,19.4798012 L25.5772088,26.1456819 C25.034095,26.8276912 24.0452385,26.9449795 23.359314,26.4063224 L21.208497,24.7208472 C20.5853226,24.2321463 19.6960009,24.2777584 19.1269215,24.8316194 L11.1598105,32.5574382 C10.1320056,33.5522161 10.8352406,35.2985075 12.2633485,35.2985075 L42.7361414,35.2985075 C44.0712059,35.2985075 44.8112255,33.7476965 43.9738349,32.7029625" id="Fill-1196" fill="#B3C0C5"></path>
+                        <path d="M12.3134328,18.8794297 C12.3134328,20.6933958 13.6003682,22.1641791 15.1875885,22.1641791 C16.7727661,22.1641791 18.0597015,20.6933958 18.0597015,18.8794297 C18.0597015,17.0654637 16.7727661,15.5970149 15.1875885,15.5970149 C13.6003682,15.5970149 12.3134328,17.0654637 12.3134328,18.8794297" id="Fill-1197" fill="#B3C0C5"></path>
+                    </g>
+                    <path d="M245.247179,136 L2.75282063,136 C1.54052422,136 0.828262225,135.402475 0.828262225,135 L0.828262225,126 C0.828262225,125.595003 1.5375189,125 2.75282063,125 L245.247179,125 C246.459476,125 247.171738,125.597525 247.171738,126 L247.171738,135 C247.171738,135.402475 246.459476,136 245.247179,136" id="Fill-1198" fill="#B3C0C5"></path>
+                    <path d="M226.963875,152 L18.1492878,152 C16.9361399,152 16.2247294,151.402612 16.2247294,151 L16.2247294,142 C16.2247294,141.594867 16.9331382,141 18.1492878,141 L226.963875,141 C228.177022,141 228.888433,141.597388 228.888433,142 L228.888433,151 C228.888433,151.402612 228.177022,152 226.963875,152" id="Fill-1199" fill="#B3C0C5"></path>
+                    <path d="M223.114758,120 L21.9984047,120 C20.8850909,120 20.0738463,119.308911 20.0738463,118 L20.0738463,106 C20.0738463,104.68853 20.8820863,104 21.9984047,104 L223.114758,104 C224.228071,104 225.039316,104.691089 225.039316,106 L225.039316,118 C225.039316,119.308911 224.228071,120 223.114758,120" id="Fill-1200" fill="#6C7A8C"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

data/app/assets/javascripts/para/admin.coffee

@@ -0,0 +1,20 @@
+#= require jquery
+#= require jquery_ujs
+#= require turbolinks
+#= require bootstrap
+#= require vertebra
+#= require jasny-bootstrap
+#= require simple_form_extension
+#= require jquery.scrollto
+#= require html5-sortable
+#= require cocoon
+#= require jquery.remote-modal-form
+#= require_self
+#= require_tree ./lib
+#= require_tree ./inputs
+#= require_tree ./admin
+#= require ./plugins-includes
+#= require admin/app
+
+# Initialize scope
+window.Para = {}

data/app/assets/javascripts/para/admin/tabs.coffee

@@ -4,23 +4,40 @@
 class Para.Tabs extends Vertebra.View
   events:
     'shown.bs.tab a[data-toggle="tab"]': 'onTabShown'
+    'change .tab-pane': 'onFormInputUpdate'
 
   initialize: (options = {}) ->
     @$anchorInput = options.$anchorInput
     @showActiveTab()
+    @refreshTabsErrors()
 
   showActiveTab: ->
-    if (hash = location.hash or @$anchorInput?.val())
-      @$('a[href="' + hash + '"]').tab('show')
+    if (hash = (location.hash or @$anchorInput?.val()))
+      @findTab(hash).tab('show')
 
   onTabShown: (e) =>
-    tabHash = $(e.target).attr('href').substr(1)
-    history.pushState(null, null, "##{ tabHash }")
-    @updateAnchorInput(tabHash)
+    tabHash = $(e.target).attr('href')
+    history.pushState(null, null, tabHash)
+    @updateAnchorInput()
 
   updateAnchorInput: ->
     @$anchorInput.val(location.hash) if @$anchorInput.length
 
+  refreshTabsErrors: ->
+    @$('[data-toggle="tab"]').each (i, tab) =>
+      @refreshTabErrors($(tab))
+
+  refreshTabErrors: ($tab) ->
+    $panel = @$($tab.attr('href'))
+    $tab.addClass('has-error') if $panel.find('.has-error').length
+
+  onFormInputUpdate: (e) ->
+    $tab = @findTab($(e.currentTarget).attr('id'))
+    @refreshTabErrors($tab)
+
+  findTab: (id) ->
+    id = id.replace(/^\#/, '')
+    @$('a[href="' + id + '"]')
 
 $(document).on 'page:change turbolinks:load', ->
   $('[data-form-tabs]').each (i, el) ->

data/app/assets/javascripts/para/admin/theme_actions.coffee

@@ -1,7 +1,7 @@
 scrollToComponentSection = ($component, duration = 0) ->
-  sectionOffset = $component.closest('.component-section-item').offset().top + $('.page-sidebar').scrollTop()
-  headerHeight = $('.page-sidebar .brand-logo').outerHeight()
-  $('.page-sidebar').scrollTo(sectionOffset - headerHeight, duration: duration)
+  sectionOffset = $component.closest('.component-section-item').offset().top + $('.navmenu').scrollTop()
+  headerHeight = $('.navmenu .navmenu-brand').outerHeight()
+  $('.navmenu-nav').scrollTo(sectionOffset - headerHeight, duration: duration)
 
 responsive_sidebar_navigation = ->
   # Scroll to active element's section on page change

data/app/assets/javascripts/para/inputs/material-input.coffee

@@ -0,0 +1,4 @@
+$(document).on 'page:change turbolinks:load', ->
+  $('body').on 'focusin focusout', 'input, .redactor-editor, select, textarea', (e) ->
+    focused = e.type is 'focusin'
+    $(e.target).closest('.form-group').toggleClass('focused', focused)

data/app/assets/javascripts/para/inputs/multi-select-input.coffee

@@ -0,0 +1,173 @@
+class Para.MultiSelectInput extends Vertebra.View
+  events:
+    'keyup [data-search-field]': 'onSearchKeyUp'
+    'click [data-add-all]': 'onAllItemsAdded'
+    'click [data-remove-all]': 'onAllItemsRemoved'
+
+  initialize: ->
+    @$searchField = @$('[data-search-field]')
+    @$selectedItems = @$('[data-selected-items] tbody')
+    @$availableItems = @$('[data-available-items]')
+    @$input = @$('[data-multi-select-input-field]')
+
+    @searchURL = @$el.data('search-url')
+    @orderable = @$el.is('[data-orderable]')
+
+    @noSelectedItemsTemplate = @$('[data-no-selected-items]').data('no-selected-items')
+    @noAvailableItemsTemplate = @$('[data-no-available-items]').data('no-available-items')
+
+    @throttledTriggerSearch = throttle(@triggerSearch, 300, trailing: true)
+
+    @availableItems = []
+    @selectedItems = (@buildSelectedItem(el) for el in @$selectedItems.find('[data-selected-item-id]'))
+    @refreshSelectedItems()
+    @refreshAvailableItems()
+
+  onSearchKeyUp: ->
+    @throttledTriggerSearch()
+
+  triggerSearch: =>
+    @searchFor(@$searchField.val())
+
+  searchFor: (terms) ->
+    terms = trim(terms)
+    return if terms is @terms
+    @terms = terms
+    @setLoading(true)
+    @_currentSearchXHR?.abort()
+    @_currentSearchXHR = $.get(@searchURL, search: terms).done(@onSearchReturn)
+
+  onSearchReturn: (results, b, c) =>
+    @_currentSearchXHR = null
+    @setLoading(false)
+    @$('[data-available-items] tbody').html(results)
+    @refreshAvailableItems()
+
+  refreshAvailableItems: ->
+    item.destroy() for item in @availableItems
+    @availableItems = (@buildAvailableItem(el) for el in @$('[data-available-items] tr'))
+    @showEmptyListHint(@noAvailableItemsTemplate, @$availableItems) unless @availableItems.length
+
+  buildAvailableItem: (el) ->
+    availableItem = new Para.MultiSelectAvailableItem(el: el)
+    availableItem.setSelected(true) for selectedItem in @selectedItems when selectedItem.id is availableItem.id
+    @listenTo(availableItem, 'add', @onItemAdded)
+    availableItem
+
+  onItemAdded: (item) =>
+    @selectItem(item)
+
+  buildSelectedItem: (el) ->
+    selectedItem = new Para.MultiSelectSelectedItem(el: el)
+    @listenTo(selectedItem, 'remove', @onItemRemoved)
+    selectedItem
+
+  selectItem: (item) ->
+    return if @alreadySelected(item)
+
+    item.setSelected(true)
+    selectedItem = @buildSelectedItem(item.$el.attr('data-selected-item-template'))
+    @selectedItems.push(selectedItem)
+    @refreshSelectedItems()
+
+  alreadySelected: (item) ->
+    return true for selectedItem in @selectedItems when selectedItem.id is item.id
+    false
+
+  refreshSelectedItems: ->
+    @$selectedItems.empty()
+    selectedItem.renderTo(@$selectedItems) for selectedItem in @selectedItems
+
+    selectedItemIds = (selectedItem.id for selectedItem in @selectedItems).join(', ')
+    @$input.val(selectedItemIds)
+
+    if @selectedItems.length
+      @initializeOrderable()
+    else
+      @showEmptyListHint(@noSelectedItemsTemplate, @$selectedItems)
+
+  showEmptyListHint: (template, $container) ->
+    $(template).appendTo($container)
+
+  onItemRemoved: (selectedItem) =>
+    itemIndex = index for item, index in @selectedItems when item.id is selectedItem.id
+    @selectedItems.splice(itemIndex, 1)
+    selectedItem.destroy()
+    @refreshSelectedItems()
+
+    availableItem = item for item in @availableItems when item.id is selectedItem.id
+    availableItem.setSelected(false) if availableItem
+
+  onAllItemsAdded: ->
+    return unless @availableItems.length
+
+    @selectItem(availableItem) for availableItem in @availableItems
+
+  onAllItemsRemoved: ->
+    return unless @selectedItems.length
+
+    @selectedItems = []
+    @refreshSelectedItems()
+
+    item.setSelected(false) for item in @availableItems
+
+  initializeOrderable: ->
+    return unless @orderable
+
+    columnsCount = @$selectedItems.find('> tr > td').length
+
+    @$selectedItems.sortable('destroy')
+
+    @$selectedItems.sortable
+      handle: '.order-anchor'
+      forcePlaceholderSize: true
+      placeholder: "<tr><td colspan='#{ columnsCount }'></td></tr>"
+
+    @$selectedItems.on('sortupdate', @selectedItemsSorted)
+
+  selectedItemsSorted: =>
+    indices = {}
+    indices[$(el).data('selected-item-id')] = index for el, index in @$selectedItems.find('[data-selected-item-id]')
+
+    @selectedItems.sort (a, b) =>
+      aIndex = indices[a.id]
+      bIndex = indices[b.id]
+      if aIndex > bIndex then 1 else -1
+
+    @refreshSelectedItems()
+
+  setLoading: (state) ->
+    @$el.toggleClass('loading', state)
+    @$('.fa-search').toggleClass('fa-spin', state)
+
+class Para.MultiSelectAvailableItem extends Vertebra.View
+  events:
+    'click [data-add-item]': 'addItem'
+
+  initialize: ->
+    @id = @$el.data('available-item-id')
+
+  addItem: ->
+    @trigger('add', this)
+
+  setSelected: (@selected) ->
+    @$el.toggleClass('selected', @selected)
+
+
+class Para.MultiSelectSelectedItem extends Vertebra.View
+  initialize: ->
+    @id = @$el.data('selected-item-id')
+
+  bindEvents: ->
+    @$('[data-remove-item]').on 'click', @removeItem
+
+  renderTo: ($container) ->
+    @$el.appendTo($container)
+    @bindEvents()
+
+  removeItem: (e) =>
+    @trigger('remove', this)
+
+
+$.simpleForm.onDomReady ($document) ->
+  $document.find('[data-multi-select-input]').each (i, el) -> new Para.MultiSelectInput(el: el)

data/app/assets/javascripts/para/inputs/nested_many.coffee

@@ -23,6 +23,7 @@ class Para.NestedManyField
 
   initializeCocoon: ->
     @$fieldsList.on 'cocoon:after-insert', $.proxy(@afterInsertField, this)
+    @$fieldsList.on 'cocoon:before-remove', $.proxy(@beforeRemoveField, this)
 
   afterInsertField: (e, $element) ->
     if ($collapsible = $element.find('[data-open-on-insert="true"]')).length
@@ -33,14 +34,13 @@ class Para.NestedManyField
       @initializeOrderable()
       @sortUpdate()
 
-    if ($redactor = $element.find('[data-redactor]')).length
-      $redactor.simpleFormRedactor()
+    $element.simpleForm()
 
-    if ($selectize = $element.find('[data-selectize]'))
-      $selectize.simpleFormSelectize()
-
-    if ($slider = $element.find('[data-slider]'))
-      $slider.simpleFormSlider()
+  beforeRemoveField: (e, $element) ->
+    $nextEl = $element.next()
+    # Remove attributes mappings field for new records since it will try to
+    # create an empty nested resource otherwise
+    $nextEl.remove() if $nextEl.is('[data-attributes-mappings]') and not $element.is('[data-persisted]')
 
   openInsertedField: ($field) ->
     $target = $($field.attr('href'))
@@ -54,5 +54,5 @@ class Para.NestedManyField
     $target.find('input, textarea, select').eq('0').focus()
 
 
-$(document).on 'page:change turbolinks:load', ->
-  $('.nested-many-field').each (i, el) -> new Para.NestedManyField($(el))
+$.simpleForm.onDomReady ($document) ->
+  $document.find('.nested-many-field').each (i, el) -> new Para.NestedManyField($(el))

data/app/assets/stylesheets/para/admin.sass

@@ -1,12 +1,12 @@
 //= require_self
-//= require animate.min
+//= require animate
+//= require hint
 //= require font-awesome
-//= require jasny.bootstrap.min
+//= require jasny-bootstrap
 //= require simple_form_extension
 //= require selectize
 //= require selectize.bootstrap3
-//= require ./admin/theme
-//= require_tree ./overrides
-//= require_tree ./admin/src
+//= require_tree ./lib
+//= require ./admin/main
 //= require ./plugins-includes
 //= require admin/app

data/app/assets/stylesheets/para/admin/main.sass

@@ -0,0 +1,32 @@
+@charset "UTF-8"
+//** Import google font
+@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700,900')
+
+@import "src/variables"
+@import "bootstrap"
+
+@import "src/mixins"
+@import "src/common"
+@import "src/base"
+@import "src/buttons"
+@import "src/form"
+@import "src/nested_one"
+@import "src/table"
+@import "src/list"
+@import "src/panel"
+@import "src/alert"
+@import "src/dropdown"
+@import "src/multi-select"
+@import "src/nested-many"
+@import "src/checkable"
+@import "src/sorting"
+@import "src/orderable"
+@import "src/pagination"
+@import "src/tree"
+@import "src/navigation"
+@import "src/breadcrumb"
+@import "src/navtabs"
+@import "src/statcard"
+@import "src/page-loading"
+@import "src/responsive"
+@import "src/well"

data/app/assets/stylesheets/para/admin/src/_alert.sass

@@ -0,0 +1,17 @@
+//
+// Alert
+// --------------------------------------------------
+
+//== Main style
+//
+//##
+
+.page-content
+  .alert
+    +first-child()
+      margin-right: -15px
+      margin-left: -15px
+      margin-bottom: 0
+      +border-radius(0)
+    &.no-results
+      margin: 15px 0 0 0

data/app/assets/stylesheets/para/admin/src/_base.sass

@@ -0,0 +1,51 @@
+//
+// Base
+// --------------------------------------------------
+
+//== Layout
+//
+//##
+
+html *
+  outline: 0!important
+
+body, html
+  min-height: 100%
+  position: relative
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+.body-full-height
+  height: 100%
+  body
+    height: 100%
+
+body
+  padding: $navbar-height 0 0 0
+  background: image_url('para/admin/tangram-mosaic.png') repeat top left $gray-light
+  background-size: 128px 128px
+
+//== Page content
+//
+//##
+
+.page-title
+  background-color: #fff
+  padding: 15px 25px 15px 25px
+  z-index: $zindex-navbar-fixed + 1
+  +material-box-shadow-soft(2)
+  h1
+    margin: 0
+    font-weight: 300
+    float: left
+    line-height: 34px
+
+.page-content-wrap
+  background-color: #fff
+  margin: 25px 10px 25px 10px
+  +border-radius($border-radius-small)
+  +material-box-shadow-soft
+  padding: 25px
+
+b, strong
+  font-weight: 500