push_type_admin 0.4.0 → 0.5.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c3d960aaef9dd0a53c2f119fd4137866dcfc50c8
-  data.tar.gz: 7435bf38aba00ddcd09c73919295295e6467281f
+  metadata.gz: d4cc13203e49f92317bb5f7d66a44b442e77b046
+  data.tar.gz: 73a58e4c00ae2272d4553f92873f65eee1cbdb3c
 SHA512:
-  metadata.gz: 04f3f10b8d9b81ea7792ed67fd254e5937a39454492f933f9a74535aeb2703c14cc02b4182bd78ed8d40be6b91b8929dd942794c53e0a96f722cb8ec48bd29cf
-  data.tar.gz: 1d548077105f0f5cd80329ec4da6361c8e9d4d422a45cda9326fb1d95fd65505f356f6ac2740f9b1edf435ef37a2821d7e001bd9c4f5ee157e530eeaae74071a
+  metadata.gz: 672984c2e948223e360ffda43c619627e4d61ae8e665937a3b43409a8ef7367aec86aec458c93a71832373453a3bd4e835675c129b4a918d57b7feddf78514f0
+  data.tar.gz: 189c06b0e04d7604e0e9e6c5200d4d9ffb27a39deb358bfbdd641177e303ffc182ce4079c76e96b8ae961751214de244be78abcabd2099da062a69acd91e7687

data/app/assets/javascripts/push_type/admin.js.coffee

@@ -21,9 +21,13 @@
 #= require jquery.sticky
 #= require jquery.sortable
 #= require jquery.filedrop
+#= require jquery.simplePagination
+#= require selectize
 #= require moment
+#= require pickadate/picker
+#= require pickadate/picker.date
+#= require pickadate/picker.time
 #= require_self
-#= require bootstrap-tagsinput
 #= stub push_type/admin_assets
 #= require_tree .
 
@@ -61,7 +65,41 @@ $(document).on 'ready page:load', ->
 
   $(document).confirmWithReveal()
 
-  $('.tagsinput', '.tag_list').tagsinput
-    tagClass: 'label secondary radius'
+  $('input', '.date').pickadate
+    format: 'd mmmm yyyy'
+    formatSubmit: 'yyyy-mm-dd'
+    hiddenName: true
+
+  $('input', '.time').pickatime
+    format: 'h:i A'
+    formatSubmit: 'HH:i'
+    formatLabel: 'h:i A <sm!all>HH:i</sm!all>'
+    hiddenName: true
+
+  $('select', '.select').selectize
+    plugins:      ['remove_button']
+    hideSelected: false
+
+  $('select', '.taxonomy').selectize
+    plugins:      ['remove_button']
+    hideSelected: false
+    onInitialize: ->
+      sel     = this
+      options = sel.$input.data('options')
+      items   = sel.$input.data('items')
+      $.each options, -> sel.addOption this
+      if $.isArray items
+        $.each items, -> sel.addItem this
+      else
+        sel.addItem items
+    render: 
+      option: (item, esc) ->
+        pre = if item.depth > 0 then '- '.repeat(item.depth) else ''
+        """<div class="option">#{ pre }#{ esc item.text }</div>"""
+
+  $('select', '.tag_list').selectize
+    plugins:  ['remove_button', 'drag_drop']
+    create:   true
+    persist:  false
     
 

data/app/assets/javascripts/push_type/asset_field.js.coffee

@@ -0,0 +1,55 @@
+@app.controller 'AssetFieldCtrl',  ['$scope', '$http', ($scope, $http) ->
+
+  $scope.$modal = null
+  $scope.assets = []
+  $scope.meta   = {}
+  
+  $scope.loadAssets = (page) ->
+    config = if page? then { params: { page: page } } else null
+    req = $http.get $scope.assetsPath, config
+    req.success (data) ->
+      $scope.assets = data.assets
+      $scope.meta   = data.meta
+      $scope.initPagination() if $scope.hasAssets()
+
+  $scope.hasAssets = ->
+    $scope.assets.length
+
+  $scope.selectAsset = (asset) ->
+    $scope.asset = asset
+    $scope.$modal.foundation 'reveal', 'close'
+    true
+
+  $scope.deselectAsset = ->
+    $scope.asset = null
+
+  $scope.afterUpload = (asset) ->
+    $scope.loadAssets()
+    $scope.$modal.find('.tab-title a[data-success]').trigger 'click'
+    true
+
+]
+
+@app.directive 'paginateAssets', ->
+  ($scope, $el, $attrs) ->
+    $scope.initPagination = ->
+      $el.pagination
+        pages:          $scope.meta.total_pages
+        currentPage:    $scope.meta.current_page
+        hrefTextPrefix: '#/media/page-'
+        onPageClick: (page, e) ->
+          e.preventDefault()
+          $scope.loadAssets(page)
+
+
+
+# jQuery init
+$(document).on 'ready page:load', ->
+
+  $(document).on 'open.fndtn.reveal', '.asset-field-modal', ->
+    $scope  = angular.element($(this)).scope()
+    $scope.$modal = $(this)
+    $scope.loadAssets()
+    $scope.$apply()
+      
+      

data/app/assets/javascripts/push_type/repeater_field.js.coffee

@@ -0,0 +1,14 @@
+@app.controller 'RepeaterFieldCtrl',  ['$scope', ($scope) ->
+
+  $scope.rows = [$scope.obj]
+
+  $scope.initRows = (rows) ->
+    $scope.rows = rows if rows? && rows.length
+
+  $scope.addRow = ->
+    $scope.rows.push $scope.obj
+
+  $scope.removeRow = (i) ->
+    $scope.rows.splice(i, 1);
+
+]

data/app/assets/stylesheets/push_type/admin.scss

@@ -10,7 +10,11 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
+ *= require selectize
  *= require_self
+ *= require pickadate/classic
+ *= require pickadate/classic.date
+ *= require pickadate/classic.time
  */
 
 @import "foundation_and_overrides";
@@ -702,6 +706,10 @@ form .permalink {
   }
 }
 
+input[type="hidden"] + .error {
+  display: none;
+}
+
 .error-icon {
   display:              inline;
   font-size:            $form-label-font-size;
@@ -717,11 +725,11 @@ form .permalink {
 }
 
 form .publish-date {
-  font-size:            rem-calc(12);
   select {
     display:            inline;
     width:              auto;
     padding-right:      rem-calc(20);
+    font-size:            rem-calc(12);
   }
 }
 
@@ -763,70 +771,182 @@ form .asset-upload {
   }
 }
 
+.asset-field {
+  margin:               rem-calc(0 0 16);
+  padding:              rem-calc(8);
+  border:               1px solid $input-border-color;
+  box-shadow:           $input-box-shadow;
+
+  .preview {
+    border:             1px solid $table-border-color;
+  }
+  .button {
+    margin-top:         0;
+    margin-bottom:      0;
+  }
+  &.error {
+    margin-bottom:      0;
+  }
+}
+
+.repeater-field {
+  margin:               rem-calc(0 0 16);
+  border:               1px solid $input-border-color;
+
+  table {
+    margin:             0;
+    border:             none;
+  }
+  .remove {
+    width:              rem-calc(40);
+    text-align:         center;
+    a {
+      color:            $alert-color;
+    }
+  }
+  .plus {
+    padding: 0.5625rem 0.625rem;
+  }
+  .button, input, select, textarea {
+    margin:             0;
+  }
+  textarea {
+    min-height:         4em;
+  }
+}
+
 .markdown textarea {
   height:               400px;
   font-family:          $font-family-monospace;
 }
 
+.date, .time {
+  input[readonly] {
+    background: white;
+    cursor: pointer;
+    &.picker__input--active {
+      background-color: $input-focus-bg-color;
+      border-color: $input-focus-border-color;
+    }
+  }
+  .picker {
+    margin-top: -#{ rem-calc(17) };
+  }
+  .picker__footer {
+    padding-bottom: 0.75em;
+    button {
+      margin-bottom: 0;
+      border-bottom: none;
+      &:before {
+        margin-right: rem-calc(8);
+      }
+    }
+  }
+  .picker__button--today {
+    color: $primary-color;
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+  .picker__button--clear {
+    color: $alert-color;
+    &:hover {
+      background-color: scale-color($alert-color, $lightness: 85%);
+    }
+  }
+  .picker__button--close {
+    color: $monsoon;
+    &:hover {
+      background-color: scale-color($monsoon, $lightness: 85%);
+    }
+  }
+  .picker__list {
+    padding-bottom: 0.75em;
+  }
+  .picker__list-item {
+    small {
+      float: right;
+      line-height: 2.75em;
+      color: $aluminum;
+    }
+  }
+}
+
+.selectize-input {
+  min-height:           42px;
+  font-size:            $input-font-size;
+  line-height:          1.5em;
+  color:                $input-font-color;
+  background-color:     $input-bg-color;
+  border-color:         $input-border-color;
+  @include radius(0);
+
+  &.focus {
+    background-color:   #fff;
+    border-color:       $input-focus-border-color;
+    @include radius(0);
+  }
+  &.dropdown-active {
+    background-color:   #fff;
+  }
+  &.dropdown-active::before {
+    background:         $input-border-color;
+  }
+
+  input {
+    border: 0;
+    height: auto;
+  }
+}
+
+.selectize-control {
+  margin-bottom:        1rem;
+
+  &.multi {
+    .item {
+      padding-left:       10px !important;
+      padding-right:      10px !important;
+      background-color:   $secondary-color;
+      @include radius($label-radius);
+    }
+    &.plugin-remove_button .item {
+      padding-right:      35px !important;
+    }
+    &.plugin-remove_button .remove {
+      width:              25px !important;
+      font-size:          16px !important;
+      font-weight:        600 !important;
+      color:              $base !important;
+      border-left-color:  $input-border-color !important;
+    }
+  }
+
+  .error & {
+    margin-bottom:      0;
+    line-height:        0.5em;
+  }
+}
+
+.selectize-dropdown {
+  font-size:            1em;
+  line-height:          1.5em;
+  border-color:         $input-focus-border-color;
+  @include radius(0);
+
+  .option {
+    padding:            0.5rem;
+    font-style:         italic;
+  }
+  .option.selected {
+    color:              $base;
+  }
+
+}
+
+.tabs {
+  border:               1px solid $silver;
+  border-bottom:        none;
+  background-color:     $silver;
+}
+
 @import "foundation-icons";
-@import "tagsinput";
-
-
-
-
-
-
-
-//.angular-ui-tree {
-//
-//}
-//
-//.angular-ui-tree-empty {
-//    border: 1px dashed #bbb;
-//    min-height: 100px;
-//    background-color: #e5e5e5;
-//    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-//    background-size: 60px 60px;
-//    background-position: 0 0, 30px 30px;
-//}
-//
-//.angular-ui-tree-nodes {
-//  display: block;
-//  position: relative;
-//  margin: 0px;
-//  padding: 0px;
-//  list-style: none;
-//}
-//
-//.angular-ui-tree-nodes .angular-ui-tree-nodes {
-//    padding-left: 20px;
-//}
-//.angular-ui-tree-node, .angular-ui-tree-placeholder {
-//  display: block;
-//  position: relative;
-//  margin: 0px;
-//  padding: 0px;
-//  min-height: 20px;
-//  line-height: 20px;
-//}
-//
-
-//
-//.angular-ui-tree-placeholder {
-//    margin: 5px 0;
-//    padding: 0;
-//    min-height: 30px;
-//}
-//
-//.angular-ui-tree-handle {
-//    cursor: move;
-//    text-decoration: none;
-//    font-weight: bold;
-//    -webkit-box-sizing: border-box;
-//    -moz-box-sizing: border-box;
-//    box-sizing: border-box;
-//    min-height: 20px;
-//    line-height: 20px;
-//}

data/app/controllers/push_type/admin_controller.rb

@@ -5,6 +5,9 @@ module PushType
     before_filter :initial_breadcrumb
     helper_method :push_type_user
 
+    # TODO - do I need to require all helpers
+    helper PushType::Admin::Engine.helpers
+
     def info
       render layout: false
     end

data/app/controllers/push_type/assets_controller.rb

@@ -7,7 +7,15 @@ module PushType
     before_filter :load_asset,  only: [:edit, :update, :destroy, :restore]
 
     def index
-      @assets = PushType::Asset.not_trash.page(params[:page]).per(20)
+      respond_to do |format|
+        format.html do
+          @assets = PushType::Asset.not_trash.page(params[:page]).per(20)
+        end
+        format.json do
+          @assets = PushType::Asset.not_trash.page(params[:page]).per(12)
+          render json: { assets: view_context.assets_array(@assets).as_json, meta: { current_page: @assets.current_page, total_pages: @assets.total_pages } }
+        end
+      end
     end
 
     def trash

data/app/views/push_type/fields/_asset.html.haml

@@ -0,0 +1,52 @@
+= f.label field.name, field.label
+
+.asset-field{ class: ('error' if f.object.errors[field.name.to_sym].present?), ng: { controller: 'AssetFieldCtrl', init: "assetsPath='#{ push_type.assets_path }'; asset=#{ f.object.send(field.name) ? asset_hash(f.object.send(field.name)).to_json : 'null' }" } }
+  = f.hidden_field field.name, value: '{{ asset.id }}'
+
+  .row{ ng: { show: 'asset' } }
+    .small-4.medium-3.columns
+      %img.preview{ alt: '{{ asset.file_name }}', ng: { src: '{{ asset.preview_thumb_url }}' } }
+    .small-8.medium-9.columns
+      %table
+        %tr
+          %th File name
+          %td {{ asset.file_name }}
+        %tr
+          %th File size
+          %td {{ asset.file_size }} kb
+        %tr
+          %th Content type
+          %td {{ asset.mime_type }}
+      %a.button.secondary.small.radius{ ng: { click: 'deselectAsset()' } } Remove media
+  %div{ ng: { hide: 'asset' } }
+    %a.button.success.small.radius{ data: { reveal: { id: field.id_attr } } } Pick media
+
+  .reveal-modal.asset-field-modal{ id: field.id_attr, data: { reveal: true } }
+
+    %ul.tabs{ data: { tab: true } }
+      %li.tab-title.active= link_to ficon(:thumbnails, 'Media'), '#media', data: { success: true }
+      %li.tab-title= link_to ficon(:upload, 'Upload'), '#upload'
+
+    .tabs-content
+      #media.content.active
+        .empty-default{ ng: { hide: 'hasAssets()' } }
+          %h2 No uploads
+          %p No media has been uploaded yet.
+        %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4{ ng: { show: 'hasAssets()' } }
+          %li{ ng: { repeat: 'asset in assets' } }
+            %article.asset-list-item
+              %a{ ng: { click: 'selectAsset(asset)' } }
+                .preview
+                  %img{ alt: '{{ asset.file_name }}', ng: { src: '{{ asset.preview_thumb_url }}' } }
+                .title {{ asset.description_or_file_name }}
+        .pagination-centered{ paginate: { assets: true }, ng: { show: 'hasAssets()' } }
+
+      #upload.content
+        .asset-upload
+          .dropzone{ asset: { upload: push_type.upload_assets_path, maxfiles: 10 } }
+            .prompt Drag files to quickly upload them…
+            .icon= ficon(:upload_cloud)
+
+- if f.object.errors[field.name.to_sym].present?
+  %small.error= f.object.errors[field.name.to_sym].join(', ')
+

data/app/views/push_type/fields/_date.html.haml

@@ -0,0 +1,2 @@
+= f.label field.name, field.label
+= f.send field.form_helper, field.name, field.html_options.merge(data: { value: f.object.field_store[field.name] })

data/app/views/push_type/fields/_matrix.html.haml

@@ -0,0 +1,17 @@
+= f.label field.name, field.label
+
+.repeater-field{ ng: { controller: 'RepeaterFieldCtrl', init: "obj={}; initRows(#{ f.object.send(field.name).to_json })" } }
+  %table
+    %thead
+      %tr
+        - field.mapping.keys.each do |key|
+          %th= key.to_s.humanize
+        %th  
+    %tbody
+      %tr{ ng: { repeat: 'row in rows track by $index' } }
+        - field.mapping.each do |key, form_helper|
+          %td= f.send form_helper, nil, field.html_options.merge(name: "#{ f.object_name }[#{ field.name }][][#{ key }]", id: "#{ f.object_name }_#{ field.name }_{{ $index }}_#{ key }", value: nil, :'ng-model' => "row.#{ key }")
+        %td.remove
+          %a.alert{ ng: { click: 'removeRow($index)' } }= ficon(:x)
+  .plus
+    %a.button.success.tiny.radius{ ng: { click: 'addRow()' } }= ficon :plus, 'Add row'

data/app/views/push_type/fields/_repeater.html.haml

@@ -0,0 +1,10 @@
+= f.label field.name, field.label
+
+.repeater-field{ ng: { controller: 'RepeaterFieldCtrl', init: "obj=null; initRows(#{ f.object.send(field.name).to_json })" } }
+  %table
+    %tr{ ng: { repeat: 'row in rows track by $index' } }
+      %td= f.send field.form_helper, nil, field.html_options.merge(name: "#{ f.object_name }[#{ field.name }][]", id: "#{ f.object_name }_#{ field.name }_{{ $index }}", value: nil, :'ng-model' => 'row')
+      %td.remove
+        %a.alert{ ng: { click: 'removeRow($index)' } }= ficon(:x)
+  .plus
+    %a.button.success.tiny.radius{ ng: { click: 'addRow()' } }= ficon :plus, 'Add row'

data/app/views/push_type/fields/_select.html.haml

@@ -0,0 +1,2 @@
+= f.label field.name, field.label
+= f.select field.name, field.choices, field.field_options, field.html_options

data/app/views/push_type/fields/_taxonomy.html.haml

@@ -0,0 +1,2 @@
+= f.label field.name, field.label
+= f.select field.name, [], field.field_options, field.html_options.merge(data: { options: field.taxonomy_tree_to_json, items: f.object.send(field.relation_id_method) })

data/app/views/push_type/nodes/new.html.haml

@@ -3,8 +3,8 @@
 - if @parent
   - for node in @parent.self_and_ancestors.reverse
     - breadcrumbs.add node.title, push_type.node_nodes_path(node)
-  - breadcrumbs.add yield(:title), push_type.new_node_node_path(@parent)
+  - breadcrumbs.add yield(:title), push_type.new_node_node_path(@parent, kind: @node.type.underscore)
 - else
-  - breadcrumbs.add yield(:title), push_type.new_node_path
+  - breadcrumbs.add yield(:title), push_type.new_node_path(kind: @node.type.underscore)
 
 = render 'form_fields', url: @parent ? push_type.node_nodes_path(@parent, kind: @node.type.underscore) : push_type.nodes_path(kind: @node.type.underscore)

data/lib/push_type/admin.rb

@@ -8,6 +8,8 @@ require 'foundation-icons-sass-rails'
 require 'jquery-rails'
 require 'angularjs-rails'
 require 'momentjs-rails'
+require 'pickadate-rails'
+require 'selectize-rails'
 require 'turbolinks'
 
 require 'breadcrumbs'
@@ -27,4 +29,4 @@ end
 require 'push_type/admin/assets'
 require 'push_type/admin/engine'
 
-require 'push_type/breadcrumbs/foundation'
+require 'push_type/breadcrumbs/foundation'

data/test/dummy/app/assets/javascripts/application.js

@@ -7,7 +7,7 @@
 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 // compiled file.
 //
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
 //= require jquery

data/test/dummy/app/models/page.rb

@@ -5,6 +5,10 @@ class Page < PushType::Node
 
   # Set custom fields
   # field :body, :text, validates: { presence: true }
+
+  field :complex, :matrix, mapping: [{bing: :text_area}, :foo, :bar]
+
+  field :rows, :repeater
   
 
 end

data/test/dummy/config/initializers/push_type.rb

@@ -33,6 +33,6 @@ PushType.setup do |config|
   #   secret_access_key:  ENV['SECRET_ACCESS_KEY_ID']
   # }
 
-  # config.dragonfly_secret = '0089895be716b09c452f5aa6ce7f2542b505833b4ac21602759ec911e5f6a4b3'
+  # config.dragonfly_secret = 'fc4c3287eb624efc55139ec042d9e4cece28f9f98510630e13e58ac50633b87f'
 
 end

data/test/dummy/config/secrets.yml

@@ -11,10 +11,10 @@
 # if you're sharing your code publicly.
 
 development:
-  secret_key_base: 19c1ece42cdbf1dd255feb63d4b52cbe3e06b9b6c3cb6c6caf2e53d580836a0836f38951ce78ab9fd5d6cbde4bf6d91bc7ce7d37bb25ce2a366f5c6ccd8fb73d
+  secret_key_base: 70300d33099eb1ca3a1e49d4523f2ba66c19d9a2c0163a88b9fe7f21a4fb01caeddc265960f8ed75aa9f1d7b3f603eac51850b7205bc3beb6877f2e78cd4530e
 
 test:
-  secret_key_base: c265f41895ca8e96c9a8c9454cd18852d82eb1b0b5c1b3955346831e23650f54ccd2adfe1f2860325f157dc86e899207c4a904445af170d7f9a9bc8de9cdf24f
+  secret_key_base: b09664f107bf039ce597d0c4c2f69da6d0ef3b9055f47b255acb5690790c59ab93fa96933367479b7f22b22abe213c4c10c1b37413e8d6171e9556821da1533f
 
 # Do not keep production secrets in the repository,
 # instead read values from the environment.

data/test/dummy/db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20150423122742) do
+ActiveRecord::Schema.define(version: 20150429164610) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"