loft 0.1.2 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d229fb260b365c12ff3b3ea01d22d46127a2ef0f
-  data.tar.gz: 2d134163274e9e5c1c2613e9f436a93cd6eea9a2
+  metadata.gz: 7f204fc64713eb740598cd03d4cd32aa11313719
+  data.tar.gz: 39d010891c3e501c7321690cdcfe81b4e4ba26f9
 SHA512:
-  metadata.gz: 8888002fc78aa83f97d4a848bcc5f37745317070a3bead5d5d7d48992f37695de3fa735fd042f5a5369d53b85e230a50ca82746f5f8d88f30778da83181ede2d
-  data.tar.gz: 8629e3a75d48bb5bff41e699f13f30b01aaed2193590a1bbdfadb31a38df182171957fc6868ef8e1351e9f50cd39c937c559246f60affe03e227e808f4267d15
+  metadata.gz: 8bbe85ed20e0221a0d4776100bfa2a8648816b6ce960d5aeb590990fbcb2586ed29efdef9822c46f811b3a97fb5e6d2aa353e02c7273ecdb6691891e58fccbfc
+  data.tar.gz: b612bcbf8a16792e2231b79e250be6ea4c6cf3bfee97c465fda6f8825317a65ed3fa862797747c1a25c5135fe1230aab3eb2130a4904bae35d9981ef7eaee6a1

data/.gitignore

@@ -1,2 +1,4 @@
 *.gem
-.DS_Store
+.DS_Store
+
+node_modules/

data/Gruntfile.coffee

@@ -0,0 +1,41 @@
+module.exports = (grunt) ->
+  # Project configuration
+  grunt.initConfig
+    pkg: grunt.file.readJSON('package.json')
+    coffee:
+      compileBare:
+        options:
+          bare: true
+        files:
+          'build/loft.js': [
+            # core
+            'app/assets/javascripts/loft/group-actions.coffee'
+            'app/assets/javascripts/loft/asset-item.coffee'
+            'app/assets/javascripts/loft/module.coffee'
+            # redactor
+            'app/assets/javascripts/loft/redactor-loft.coffee'
+            # inputs
+            'app/assets/javascripts/loft/input-loft-asset.coffee'
+            'app/assets/javascripts/loft/input-loft-image.coffee'
+          ]
+
+    concat:
+      loft:
+        src: [
+          'build/loft.js'
+        ]
+        dest: 'dist/loft.js'
+
+    clean: [
+      'build'
+    ]
+
+  grunt.loadNpmTasks('grunt-contrib-coffee')
+  grunt.loadNpmTasks('grunt-contrib-concat')
+  grunt.loadNpmTasks('grunt-contrib-clean')
+
+  grunt.registerTask('default', ['coffee', 'concat', 'clean'])
+
+
+
+

data/README.md

@@ -45,10 +45,14 @@ Add to ```admin.scss```:
 Add to ```admin.coffee``` character configuration object:
 
 ```coffee
-assets: new Loft('Library', 'asset', '/admin/assets')
+loft: new Loft('Files', 'asset', '/admin/assets')
 ```
 
 
+## Notes
+
+1. Check out [kraken.io](https://github.com/kraken-io/kraken-ruby) for image optimization.
+
 ## Loft family
 
 - [Character](https://github.com/slate-studio/chr): Powerful javascript CMS for apps

data/app/assets/javascripts/loft.coffee

@@ -1,10 +1,10 @@
 #= require loft/group-actions
 #= require loft/asset-item
-#= require loft/type-item
 #= require loft/module
 
-#= require redactor-loft
-#= require input-loft-image
+#= require loft/redactor-loft
+#= require loft/input-loft-asset
+#= require loft/input-loft-image
 
 # TODOs:
-# - refactor group remove action
+# - refactor group remove action: delete a bunch first, then reload the page

data/app/assets/javascripts/loft/asset-item.coffee

@@ -11,10 +11,44 @@
 # -----------------------------------------------------------------------------
 class @LoftAssetItem extends Item
   constructor: (@module, @path, @object, @config) ->
-    @$el =$ "<div class='item asset asset-#{ @object.type }' data-id='#{ @object._id }' data-title=''></div>"
+    @$el =$ "<div class='item asset asset-#{ @object.type }' data-id='#{ @object._id }'></div>"
     @render()
 
 
+  # PRIVATE ===============================================
+
+  _bind_name_input: ->
+    @$nameInput.on 'blur',  (e) => @_update_name_if_changed()
+    @$nameInput.on 'keyup', (e) =>
+      if e.keyCode == 13 then $(e.target).blur()
+      if e.keyCode == 27 then @_cancel_name_change()
+
+
+  _edit_name: (e) ->
+    @$el.addClass('edit-name')
+    @$nameInput.focus().select()
+
+
+  _cancel_name_change: ->
+    @$el.removeClass('edit-name')
+    name = @$title.html()
+    @$nameInput.val(name)
+
+
+  _update_name_if_changed: ->
+    @$el.removeClass('edit-name')
+    name = @$nameInput.val()
+
+    if name == @$title.html() then return
+    @$title.html(name)
+
+    @config.arrayStore.update @object._id, { '[name]': name },
+      onSuccess: (object) =>
+      onError:   (errors) => # process errors
+
+
+  # PUBLIC ================================================
+
   render: ->
     @$el.html('').removeClass('item-folder has-subtitle has-thumbnail')
 
@@ -40,7 +74,7 @@ class @LoftAssetItem extends Item
 
 
     # input for assets name
-    name = @$el.attr('data-title')
+    name = @$title.text()
     @$name      =$ "<div class='asset-name'></div>"
     @$nameInput =$ "<input type='text' value='#{ name }' />"
     @$name.append @$nameInput
@@ -51,36 +85,5 @@ class @LoftAssetItem extends Item
     @$title.on 'click', (e) => @_edit_name(e)
 
 
-  _bind_name_input: ->
-    @$nameInput.on 'blur',  (e) => @_update_name_if_changed()
-    @$nameInput.on 'keyup', (e) =>
-      if e.keyCode == 13 then $(e.target).blur()
-      if e.keyCode == 27 then @_cancel_name_change()
-
-
-  _edit_name: (e) ->
-    @$el.addClass('edit-name')
-    @$nameInput.focus().select()
-
-
-  _cancel_name_change: ->
-    @$el.removeClass('edit-name')
-    name = @$title.html()
-    @$nameInput.val(name)
-
-
-  _update_name_if_changed: ->
-    @$el.removeClass('edit-name')
-    name = @$nameInput.val()
-
-    if name == @$title.html() then return
-    @$title.html(name)
-
-    @config.arrayStore.update @object._id, { '[name]': name },
-      onSuccess: (object) =>
-      onError:   (errors) => # process errors
-
-
-
 
 

data/app/assets/javascripts/loft/group-actions.coffee

@@ -15,6 +15,8 @@ class @LoftGroupActions
     @_bind_checkboxes()
 
 
+  # PRIVATE ===============================================
+
   _render: ->
     @$el =$ "<div class='assets-group-actions' style='display:none;'></div>"
     @list.$header.append @$el
@@ -95,6 +97,8 @@ class @LoftGroupActions
     @$el.show()
 
 
+  # PUBLIC ================================================
+
   hide: ->
     @$el.hide()
 

data/app/assets/javascripts/loft/input-loft-asset.coffee

@@ -0,0 +1,11 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT LOFT ASSET
+# -----------------------------------------------------------------------------

data/app/assets/javascripts/{input-loft-image.coffee → loft/input-loft-image.coffee}

@@ -41,7 +41,7 @@ class @InputLoftImage extends InputString
 
     @$chooseBtn.on 'click', (e) =>
       e.preventDefault()
-      chr.modules.assets.showModal 'images', false, (objects) =>
+      chr.modules.loft.showModal 'images', false, (objects) =>
         asset = objects[0]
         @updateValue(asset.file.url)
 

data/app/assets/javascripts/loft/module.coffee

@@ -8,32 +8,40 @@
 
 # -----------------------------------------------------------------------------
 # Loft
+# -----------------------------------------------------------------------------
 #
 # Public methods:
-#   new Loft(title, @resource, @resourcePath)
+#   new Loft(title, resource, resourcePath, @arrayStoreClass, @arrayStoreConfig)
 #   showModal(assetType, @selectMultipleAssets, @onAcceptCallback)
 #   closeModal()
 #
 # -----------------------------------------------------------------------------
 class @Loft
-  constructor: (title, @resource, @resourcePath) ->
+  constructor: (title, resource, resourcePath, @arrayStoreClass, @arrayStoreConfig) ->
     @module = {}
     @store  = {}
 
+    @arrayStoreClass  ?= RailsArrayStore
+    @arrayStoreConfig ?=
+      resource:    resource
+      path:        resourcePath
+      sortBy:      'created_at'
+      sortReverse: true
+      searchable:  true
+
     @_uploadsCounter = 0
 
     moduleConfig =
       title:                title
       showNestedListsAside: true
-      itemClass:            LoftTypeItem
       items:
-        assets_all:      @_nested_list_config 'All'
-        assets_images:   @_nested_list_config 'Images',   'image'
-        assets_text:     @_nested_list_config 'Text',     'text'
-        assets_archives: @_nested_list_config 'Archives', 'archive'
-        assets_audio:    @_nested_list_config 'Audio',    'audio'
-        assets_video:    @_nested_list_config 'Video',    'video'
-        assets_other:    @_nested_list_config 'Other',    'other'
+        loft_all:      @_nested_list_config 'All'
+        loft_images:   @_nested_list_config 'Images',   'image'
+        loft_text:     @_nested_list_config 'Text',     'text'
+        loft_archives: @_nested_list_config 'Archives', 'archive'
+        loft_audio:    @_nested_list_config 'Audio',    'audio'
+        loft_video:    @_nested_list_config 'Video',    'video'
+        loft_other:    @_nested_list_config 'Other',    'other'
 
       onModuleInit: (module) =>
         @_initialize_module(module)
@@ -41,9 +49,11 @@ class @Loft
     return moduleConfig
 
 
+  # PRIVATE ===============================================
+
   _initialize_module: (module) ->
     @module = module
-    @store  = @module.nestedLists.assets_all.config.arrayStore
+    @store  = @module.nestedLists.loft_all.config.arrayStore
 
     # API method
     @module.showModal = (assetType, selectMultipleAssets, callback) =>
@@ -55,28 +65,40 @@ class @Loft
     @module.rootList.$header.prepend @module.rootList.$modalCloseBtn
     @module.rootList.$modalCloseBtn.on 'click', (e) => e.preventDefault() ; @closeModal()
 
+    # modal types navigation
+    @module.rootList.$items.on 'click', 'a', (e) =>
+      if @module.$el.hasClass 'module-modal'
+        e.preventDefault()
+
+        $item    = $(e.currentTarget)
+        listName = $item.attr('href').split('/')[2]
+
+        @module.activeList.hide()
+        @module.showList(listName)
+        @module.activeList.updateItems()
+
+        $item.parent().children('.active').removeClass('active')
+        $item.addClass('active')
+
     # enable grid mode as default on desktop/tablet
     if ! chr.isMobile()
       @module.$el.addClass('grid-mode')
 
 
   _nested_list_config: (moduleName, assetType) ->
-    arrayStoreConfig =
-      resource:    @resource
-      path:        @resourcePath
-      searchable:  true
-      sortBy:      'created_at'
-      sortReverse: true
+    storeConfig = {}
+    $.extend(storeConfig, @arrayStoreConfig)
 
     if assetType
-      $.extend(arrayStoreConfig, { urlParams: { by_type:  assetType } })
+      $.extend(storeConfig, { urlParams: { by_type:  assetType } })
 
     config =
       title:              moduleName
       itemTitleField:     'name'
       itemSubtitleField:  'created_ago'
+      showWithParent:     true
       itemClass:          LoftAssetItem
-      arrayStore:         new MongosteenArrayStore(arrayStoreConfig)
+      arrayStore:         new @arrayStoreClass(storeConfig)
       onListInit: (list) => @_inititialize_list(list)
       onListShow: (list) => @_clear_assets_selection()
 
@@ -102,6 +124,12 @@ class @Loft
     list.$backBtn.after list.$switchMode
     list.$switchMode.on 'click', (e) => e.preventDefault() ; @module.$el.toggleClass('grid-mode')
 
+    # modal back for mobiles
+    list.$header.on 'click', '.back', (e) =>
+      if @module.$el.hasClass 'module-modal'
+        e.preventDefault()
+        @module.showList()
+
 
   _upload: (file, list) ->
     obj = {}
@@ -125,11 +153,10 @@ class @Loft
     if @_uploadsCounter == 0
       @module.$el.removeClass('assets-uploading')
 
-      # update data in list if it's not assets_all,
-      # in assets_all new objects are added automatically
-      visibleList = @module.visibleNestedListShownWithParent()
-      if visibleList.name != 'assets_all'
-        visibleList.updateItems()
+      # update data in list if it's not loft_all,
+      # in loft_all new objects are added automatically
+      if @module.activeList.name != 'loft_all'
+        @module.activeList.updateItems()
 
 
   _clear_assets_selection: ->
@@ -138,6 +165,8 @@ class @Loft
       list.$items.find('.asset-checkbox').prop('checked', false)
 
 
+  # PUBLIC ================================================
+
   closeModal: ->
     @selectMultipleAssets = true
     @_clear_assets_selection()
@@ -149,13 +178,14 @@ class @Loft
   showModal: (assetType='all', @selectMultipleAssets=false, @onAcceptCallback=$.noop) ->
     # modal mode
     @module.$el.addClass('module-modal')
+    # show module
+    @module.show()
     # show nested list
-    @module.showNestedList("assets_#{ assetType }")
+    @module.showList("loft_#{ assetType }")
+    @module.activeList.updateItems()
     # select active item
     @module.rootList.$items.children().removeClass('active')
-    @module.rootList.$items.children("[href='#/assets/assets_#{ assetType }']").addClass('active')
-    # show module
-    @module.show()
+    @module.rootList.$items.children("[href='#/loft/loft_#{ assetType }']").addClass('active')
 
 
 

data/app/assets/javascripts/{redactor-loft.coffee → loft/redactor-loft.coffee}

@@ -23,13 +23,13 @@ RedactorPlugins.loft = ->
 
 
     showImagesModal: ->
-      chr.modules.assets.showModal 'images', true, (objects) => @loft.insertImages(objects)
+      chr.modules.loft.showModal 'images', true, (objects) => @loft.insertImages(objects)
 
 
     # allow multiple assets when no text is selected
     showAllModal: ->
       multipleAssets = this.selection.getText() == ''
-      chr.modules.assets.showModal 'all', multipleAssets, (objects) => @loft.insertFiles(objects)
+      chr.modules.loft.showModal 'all', multipleAssets, (objects) => @loft.insertFiles(objects)
 
 
     # if text is selected replace text with <a>{{ text }}</a>

data/app/assets/stylesheets/_loft.scss

@@ -7,11 +7,6 @@
 
 // MIXINS
 
-@mixin iconBase($bgSize, $width, $height) {
-  background-image: image-url('loft/library@3x.png'); background-size: $bgSize;
-  display: block; width: $width; height: $height;
-}
-
 @mixin iconLabel($title) {
   &:before {
     display: block; margin-top: 2.6em;
@@ -21,13 +16,17 @@
   }
 }
 
+@mixin iconBase($bgSize, $width, $height) {
+  display: block; background-size: $bgSize; width: $width; height: $height;
+  background-image: image-url("loft/library@3x.png");
+}
 
 // ASSET TYPE ICONS
 
-.module.assets .list:first-child .items {
+.loft .list:first-child .items {
   .item {
     .item-title { margin-left: 2.05em; }
-    &:before    { @include absolutePosition(inherit inherit inherit 1em); content: ''; display: block; }
+    &:before    { @include position(absolute, null null null 1em); content: ''; display: block; }
   }
 
   .item {
@@ -63,24 +62,24 @@
 
 // LIST MODE
 
-.module.assets .list:not(:first-child) .items .item.asset {
+.loft .list:not(:first-child) .items .item.asset {
   padding-left: 6.25em; // 100px;
 
   // checkbox
   .asset-checkbox {
-    @include absolutePosition(1.3em inherit inherit 1em); z-index: 1;
-    input { @include absolutePosition(0px inherit inherit 0px); }
+    @include position(absolute, 1.3em null null 1em); z-index: 1;
+    input { @include position(absolute, 0px null null 0px); }
   }
 
   // type icon
   .asset-icon {
     @include iconBase(64px 224px, 32px, 32px);
-    @include absolutePosition(12px inherit inherit 3.05em);
+    @include position(absolute, 12px null null 3.05em);
   }
 
   // image thumbnail
   &.asset-image .asset-icon {
-    @include absolutePosition(8px inherit inherit 2.8em);
+    @include position(absolute, 8px null null 2.8em);
     overflow: hidden; width: 40px; height: 40px; border-radius: 20px;
     img { height: 100%; }
   }
@@ -99,8 +98,8 @@
   .item-title { cursor: pointer; }
   .asset-name {
     display: none; z-index: 1;
-    @include absolutePosition(7px .5em inherit 94px);
-    input { width: 100%; padding: .1em .3em .3em .3em; @include noFocus();
+    @include position(absolute, 7px .5em null 94px);
+    input { width: 100%; padding: .1em .3em .3em .3em; @include no-focus-outline;
             border: 1px solid $stableColor; box-shadow: 0 0 10px $lightColor; border-radius: 3px; }
   }
   &.edit-name .asset-name { display: block; }
@@ -115,10 +114,10 @@
 // GROUP ACTIONS
 
 .assets-group-actions {
-  @include absolutePosition(0 0 0 0); background: $white;
-  .accept   { @include headerButton($positiveColor);  float: right; margin-right: 1em; }
-  .delete   { @include headerButton($assertiveColor); float: right; margin-right: 1em; }
-  .unselect { @include headerButton($stableColor);    float: left;  margin-left:  1em; }
+  @include position(absolute, 0 0 0 0); background: $white;
+  .accept   { @include header-button($positiveColor);  float: right; margin-right: 1em; }
+  .delete   { @include header-button($assertiveColor); float: right; margin-right: 1em; }
+  .unselect { @include header-button($stableColor);    float: left;  margin-left:  1em; }
 }
 
 .assets-group-actions .accept { display: none; }
@@ -129,28 +128,24 @@
 // UPLOAD BUTTON
 
 .asset-upload {
-  @include absolutePosition(0 -40px inherit inherit);
-  @extend .icon-plus; @include noFocus;
+  @include position(absolute, 0 -40px null null);
+  @extend .icon-plus; @include no-focus-outline;
   cursor: pointer; padding-left: 80px;
 }
 
-.list header .asset-upload + .search { @include absolutePosition(0 40px inherit inherit); }
-.list.list-search header .asset-upload + .search { @include absolutePosition(0 0 inherit 0); }
-.module.assets.assets-uploading .list:not(:first-child) header .spinner { display: inline-block; }
+.list header .asset-upload + .search { @include position(absolute, 0 40px null null); }
+.list.list-search header .asset-upload + .search { @include position(absolute, 0 0 null 0); }
+.loft.assets-uploading .list:not(:first-child) header .spinner { display: inline-block; }
 
 
 // MODAL MODE
 
-.module.assets {
-  .modal-close {
-    display: none;
-    @include headerButton();
-    @include absolutePosition(null null null 1em );
-  }
+.loft {
+  .modal-close { @include hide(); }
   &.module-modal {
-    @include absolutePosition(.5em .5em 0em .5em); z-index: 1100;
+    @include position(absolute, 0 .5em 0 .5em); z-index: 1100;
 
-    &:after { display: none; }
+    &:after { @include hide(); }
 
     // dark background
     &:before {
@@ -158,53 +153,53 @@
       content: ''; display: block; background: rgba(0,0,0,.25);
     }
 
-    .modal-close { display: inline; }
+    .modal-close { @include header-button(); @include position(absolute, null null null 1em ); }
+    .header { top: 0; left: .5em; right: .5em; width: auto; }
+
     .list:first-child .back { display: none }
   }
 }
 
 
-/* TABLET LAYOUT */
-
-@media #{ $tablet } {
-  .module.assets .list:not(:first-child) .items { font-size: 1em; }
-
-  // ITEM
-  .module.assets .list:not(:first-child) .items .item.asset {
+/* Tablet ------------------------------------------------------------------ */
+@media #{$tablet} {
+  // ITEMS
+  .loft .list:not(:first-child) .items { font-size: 1em; }
+  .loft .list:not(:first-child) .items .item.asset {
     padding-top: 19px; padding-bottom: 19px;
     .item-title {
       display: inline; cursor: pointer;
       &:hover { color: $positiveColor; text-decoration: underline; }
     }
-    .item-subtitle { @include absolutePosition(1.55em 1em inherit inherit); }
+    .item-subtitle { @include position(absolute, 1.55em 1em null null); }
     .asset-name { top: 16px; }
   }
 
   // MODAL MODE
-  .module.assets.module-modal { @include absolutePosition(1.5em 1.5em 0em 1.5em) }
+  .loft.module-modal { @include position(absolute, 1.5em 1.5em 0em 1.5em) }
+  .loft.module-modal .header { top: 0; left: 0; right: 0; width: auto; }
 
 
   // GRID MODE
   .assets-switch-mode {
-    @include absolutePosition(inherit inherit inherit 1em);
-    display: inline;
-    font-size: .9em;
+    @include position(absolute, null null null 1em);
+    display: inline; font-size: .9em; line-height: 2.9; left: 3em;
     &:before { content: 'Grid'; color: $lightColor; margin-right: .25em; }
     &:after  { content: 'List'; color: $stableColor; }
   }
-  .module.assets.grid-mode .assets-switch-mode {
+  .loft.grid-mode .assets-switch-mode {
     &:before { color: $stableColor; }
     &:after  { color: $lightColor;  }
   }
 
-  .module.assets.grid-mode {
+  .loft.grid-mode {
     .list:not(:first-child) .items {
       padding: .25em .25em 5em .75em;
       .item.asset { margin: 0 .75em 1.5em; float: left; display: inline-block; }
 
       .item.asset {
         padding-left: 1em; width: 222px; height: 222px;
-        @include noBorder(); border: 1px solid $contrastColor; border-radius: 4px;
+        @include no-bottom-border; border: 1px solid $contrastColor; border-radius: 4px;
 
         // checkbox: position + decoration
         .asset-checkbox {
@@ -214,9 +209,9 @@
 
         // thumbnail
         .asset-icon {
-          @include absolutePosition(10px inherit inherit 10px);
+          @include position(absolute, 10px null null 10px);
           width: 200px; height: 150px; background: $white; border-radius: 0;
-          &:after { @include absolutePosition(0px 0px 0px 0px); box-shadow: 0 0 1px rgba(0,0,0,0.2) inset; content: ''; display: block; }
+          &:after { @include position(absolute, 0px 0px 0px 0px); box-shadow: 0 0 1px rgba(0,0,0,0.2) inset; content: ''; display: block; }
         }
 
         .asset-thumbnail-small  { display: none;  }
@@ -239,6 +234,15 @@
 }
 
 
+/* Desktop ----------------------------------------------------------------- */
+@media #{$desktop} {
+  // BACK
+  .loft .list:not(:first-child) .back { @include hide; }
+
+  // GRID MODE
+  .assets-switch-mode { left: 1em; }
+}
+