loft 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ccac65018592298f1e32ccdc370f0c0b7bb845ad
-  data.tar.gz: ec7a87c3cbc6b444957a82ba71a9086a613bf1a4
+  metadata.gz: cb9743cdf74ccbaeba6c950df7dd300cbf01366e
+  data.tar.gz: 4c0eab2a4a70f0b97040990532c2d109abd41fb3
 SHA512:
-  metadata.gz: ea38f740b9bc4a63612cc738e4603e539f72a59f1f93047fd684d3fa88d7385c2b6fd312e88ba533547c7a99f193799a59c5e02f526cbb10c383bb350f2cf8b9
-  data.tar.gz: 038275e74677eacc7818653af9f2567afe4d2eed4cf830c2827107d03059d27bc4ee96ebf2e6c29bfa09bbefa90fd41b0a366fc45dfa025b149bd882fb3b4286
+  metadata.gz: e89aaeae7d1f9a4a8de33b35558b5302ac667254bb2c529764c5f8a9cb51e952e010ed678618e0199a78c8d27820f693d689381379fad26828e9e19a1ec060f7
+  data.tar.gz: 8d9d873ea22d68690893052c4bb81c69beaf01179819d3b308625ae1ca3395e1977af1f15537f6e50307d4b99d3331a8ea13ec199f68fbac4e0af4b56abc076f

data/.gitignore

@@ -0,0 +1,2 @@
+*.gem
+.DS_Store

data/README.md

@@ -1,6 +1,7 @@
 # Loft
 
-## Character CMS media assets plugin
+*Media assets manager for [Character CMS](https://github.com/slate-studio/chr).*
+
 
 ### Installation
 
@@ -10,46 +11,58 @@ Add to ```Gemfile```:
 
 Setup a new model for assets ```asset.rb```:
 
-    class Asset
-      include Mongoid::Document
-      include Mongoid::Timestamps
-      include Mongoid::SerializableId
-      include Mongoid::LoftAsset
-    end
+```ruby
+class Asset
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  include Mongoid::SerializableId
+  include Mongoid::LoftAsset
+end
+```
 
 Add controller for asset model to make it accesible via CMS, e.g. ```app/controllers/admin/assets_controller.rb```:
 
-    class Admin::AssetsController < Admin::BaseController
-      mongosteen
-      has_scope :by_type
-      json_config({ methods: [ :list_item_thumbnail, :created_ago ] })
-    end
+```ruby
+class Admin::AssetsController < Admin::BaseController
+  mongosteen
+  has_scope :by_type
+  json_config({ methods: [ :item_thumbnail, :created_ago ] })
+end
+```
 
 Add admin assets controller to ```routes.rb```:
 
-    resources :assets
+```ruby
+resources :assets
+```
 
 Add to ```admin.scss```:
 
-    @import "loft";
+```scss
+@import "loft";
+```
 
 Add to ```admin.coffee``` character configuration object:
 
-    assets: new Loft('Library', 'asset', '/admin/assets')
+```coffee
+assets: new Loft('Library', 'asset', '/admin/assets')
+```
 
 
 ## Loft family
 
+- [Character](https://github.com/slate-studio/chr): Powerful javascript CMS for apps
 - [Mongosteen](https://github.com/slate-studio/mongosteen): An easy way to add restful actions for mongoid models
-- [Character](https://github.com/slate-studio/chr): A simple and lightweight javascript library for building data management web apps
 - [Inverter](https://github.com/slate-studio/inverter): An easy way to connect Rails templates content to CMS
 
-## Credits
 
-[![Slate Studio](https://slate-git-images.s3-us-west-1.amazonaws.com/slate.png)](http://slatestudio.com)
+## License
 
-Inverter is maintained and funded by [Slate Studio, LLC](http://slatestudio.com). Tweet your questions or suggestions to [@slatestudio](https://twitter.com/slatestudio) and while you’re at it follow us too.
+Copyright © 2015 [Slate Studio, LLC](http://slatestudio.com). Loft is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
 
-## License
 
-Copyright © 2015 [Slate Studio, LLC](http://slatestudio.com). Character is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
+## About Slate Studio
+
+[![Slate Studio](https://slate-git-images.s3-us-west-1.amazonaws.com/slate.png)](http://slatestudio.com)
+
+Loft is maintained and funded by [Slate Studio, LLC](http://slatestudio.com). Tweet your questions or suggestions to [@slatestudio](https://twitter.com/slatestudio) and while you’re at it follow us too.

data/app/assets/javascripts/chr/form/input-loft-image.coffee

@@ -0,0 +1,87 @@
+# -----------------------------------------------------------------------------
+# 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 IMAGE
+# -----------------------------------------------------------------------------
+class @InputLoftImage extends InputString
+  _addInput: ->
+    @config.placeholder ?= 'Image url'
+
+    @$input =$ "<input type='string' name='#{ @name }' value='#{ @_valueSafe() }' id='#{ @name }' />"
+    @$el.append @$input
+    @$input.on 'change', (e) =>
+      @updateValue($(e.target).val())
+
+    @_add_image()
+    @_add_choose_button()
+    @_add_remove_button()
+    @_update_input_class()
+
+
+  _add_image: ->
+    @$image =$ "<a href='' target='_blank' class='image'><img src='' /></a>"
+    @$el.append @$image
+    @_update_image()
+
+
+  _add_choose_button: ->
+    @$chooseBtn =$ "<a href='#' class='choose'></a><br/>"
+    @$el.append @$chooseBtn
+
+    @_update_choose_button_title()
+
+    @$chooseBtn.on 'click', (e) =>
+      e.preventDefault()
+      chr.modules.assets.showModal 'images', false, (objects) =>
+        asset = objects[0]
+        @updateValue(asset.file.url)
+
+
+  _add_remove_button: ->
+    @$removeBtn =$ "<a href='#' class='remove'>Remove</a>"
+    @$el.append @$removeBtn
+
+    @$removeBtn.on 'click', (e) =>
+      e.preventDefault()
+      if confirm('Are you sure?')
+        @updateValue('')
+
+
+  _update_image: ->
+    url = @value
+    @$image.attr('href', @value).children().attr('src', @value)
+    if @value == '' then @$image.hide() else @$image.show()
+
+
+  _update_choose_button_title: ->
+    title = if @value == '' then 'Choose or upload' else 'Choose other or upload'
+    @$chooseBtn.html(title)
+
+
+  _update_input_class: ->
+    if @value == '' then @$el.removeClass('has-value') else @$el.addClass('has-value')
+
+
+  #
+  # PUBLIC
+  #
+
+  updateValue: (@value) ->
+    @$input.val(@value)
+
+    @_update_image()
+    @_update_choose_button_title()
+    @_update_input_class()
+
+
+_chrFormInputs['loft-image'] = InputLoftImage
+
+
+
+

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

@@ -1,10 +1,17 @@
-# add file icon
-# add selectbox for delete
-# add modal dialog mode
-
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# Loft Asset Item
+# -----------------------------------------------------------------------------
 class @LoftAssetItem extends Item
   constructor: (@module, @path, @object, @config) ->
-    @$el =$ "<div class='item asset' data-id='#{ @object._id }' data-title=''></div>"
+    @$el =$ "<div class='item asset asset-#{ @object.type }' data-id='#{ @object._id }' data-title=''></div>"
     @render()
 
 
@@ -18,14 +25,26 @@ class @LoftAssetItem extends Item
     @$link =$ "<a class='asset-icon' href='#{ @object.file.url }' target='_blank'></a>"
     @$el.prepend(@$link)
 
+    # thumbnail for images
+    if @object.type == 'image' && @object.grid_item_thumbnail != ''
+      @$thumbnailSmall  =$ "<img class='asset-thumbnail-small'  src='#{ @object.item_thumbnail.small  }' />"
+      @$thumbnailMedium =$ "<img class='asset-thumbnail-medium' src='#{ @object.item_thumbnail.medium }' />"
+      @$link.append @$thumbnailSmall
+      @$link.append @$thumbnailMedium
+
     # checkbox for item selection
-    @$checkbox =$ "<input class='asset-checkbox' type='checkbox' />"
+    @$checkbox      =$ "<div class='asset-checkbox'></div>"
+    @$checkboxInput =$ "<input type='checkbox' />"
+    @$checkbox.append(@$checkboxInput)
     @$el.prepend(@$checkbox)
 
+
     # input for assets name
     name = @$el.attr('data-title')
-    @$nameInput =$ "<input class='asset-name' type='text' value='#{ name }' />"
-    @$title.before @$nameInput
+    @$name      =$ "<div class='asset-name'></div>"
+    @$nameInput =$ "<input type='text' value='#{ name }' />"
+    @$name.append @$nameInput
+    @$title.before @$name
     @_bind_name_input()
 
     # handler for asset name change on title click

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

@@ -1,5 +1,16 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# Loft Group Actions
+# -----------------------------------------------------------------------------
 class @LoftGroupActions
-  constructor: (@list, @module) ->
+  constructor: (@list, @loft) ->
     @_render()
     @_bind_checkboxes()
 
@@ -8,53 +19,83 @@ class @LoftGroupActions
     @$el =$ "<div class='assets-group-actions' style='display:none;'></div>"
     @list.$header.append @$el
 
-    @$unselectBtn =$ "<a href='#' class='unselect'>Unselect All</a>"
-    @$unselectBtn.on 'click', (e) => e.preventDefault(); @_unselect_list_items()
-    @$el.append @$unselectBtn
+    # accept selected
+    @$acceptBtn =$ "<a href='#' class='accept'>Accept</a>"
+    @$acceptBtn.on 'click', (e) => e.preventDefault(); @_accept_selected_items()
+    @$el.append @$acceptBtn
 
+    # delete button
     @$deleteBtn =$ "<a href='#' class='delete'>Delete Selected</a>"
     @$deleteBtn.on 'click', (e) => e.preventDefault(); @_delete_selected_list_items()
     @$el.append @$deleteBtn
 
+    # unselect button
+    @$unselectBtn =$ "<a href='#' class='unselect'>Unselect</a>"
+    @$unselectBtn.on 'click', (e) => e.preventDefault(); @_unselect_list_items()
+    @$el.append @$unselectBtn
+
 
   _bind_checkboxes: ->
-    @list.$el.on 'click', '.asset .asset-checkbox', (e) =>
+    @list.$el.on 'click', '.asset .asset-checkbox input', (e) =>
+      # when multiple selection disabled select only one asset a time
+      if ! @loft.selectMultipleAssets
+        @_select_single_item($(e.target))
+
       selectedItems = @_selected_list_items()
       if selectedItems.length > 0
         @_show()
       else
-        @_hide()
+        @hide()
+
+
+  _select_single_item: ($checkbox) ->
+    if $checkbox.prop('checked')
+      @list.$el.find('.asset .asset-checkbox input:checked').prop('checked' , false)
+      $checkbox.prop('checked', true)
 
 
   _selected_list_items: ->
-    @list.$el.find '.asset .asset-checkbox:checked'
+    $.map @list.$el.find('.asset .asset-checkbox input:checked'), (checkbox) -> $(checkbox).parent().parent()
 
 
   _unselect_list_items: ->
-    @list.$el.find('.asset .asset-checkbox').prop('checked', false)
-    @_hide()
+    @list.$el.find('.asset .asset-checkbox input').prop('checked', false)
+    @hide()
 
 
   _delete_selected_list_items: ->
     if confirm("Are you sure?")
-      selectedItems        = @_selected_list_items()
-      filesToRemoveCounter = selectedItems.length
+      $selectedItems       = @_selected_list_items()
+      filesToRemoveCounter = $selectedItems.length
 
       # we have on scroll pagination so after some items are removed,
       # next page request might skip items that replaced removed ones
-      for item in selectedItems
-        objectId = $(item).parent().attr('data-id')
+      for $item in $selectedItems
+        objectId = $item.attr('data-id')
         @list.config.arrayStore.remove objectId,
           onSuccess: => # success notification
           onError:   => # error notification
-      @_hide()
+      @hide()
+
+
+  _accept_selected_items: ->
+    $selectedItems  = @_selected_list_items()
+
+    objects = []
+    for $item in $selectedItems
+      objectId = $item.attr('data-id')
+      object   = @list.config.arrayStore.get(objectId)
+      objects.push object
+
+    @loft.onAcceptCallback(objects)
+    @loft.closeModal()
 
 
   _show: ->
     @$el.show()
 
 
-  _hide: ->
+  hide: ->
     @$el.hide()
 
 

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

@@ -1,3 +1,20 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# Loft
+#
+# public methods:
+#   new Loft(title, @resource, @resourcePath)
+#   showModal(assetType, @selectMultipleAssets, @onAcceptCallback)
+#   closeModal()
+#
+# -----------------------------------------------------------------------------
 class @Loft
   constructor: (title, @resource, @resourcePath) ->
     @module = {}
@@ -6,8 +23,9 @@ class @Loft
     @_uploadsCounter = 0
 
     moduleConfig =
-      title: title
+      title:                title
       showNestedListsAside: true
+      itemClass:            LoftTypeItem
       items:
         assets_all:      @_nested_list_config 'All'
         assets_images:   @_nested_list_config 'Images',   'image'
@@ -27,12 +45,28 @@ class @Loft
     @module = module
     @store  = @module.nestedLists.assets_all.config.arrayStore
 
+    # API method
+    @module.showModal = (assetType, selectMultipleAssets, callback) =>
+      @showModal(assetType, selectMultipleAssets, callback)
+    @selectMultipleAssets = true
+
+    # modal close button
+    @module.rootList.$modalCloseBtn =$ "<a href='#' class='modal-close'>Cancel</a>"
+    @module.rootList.$header.prepend @module.rootList.$modalCloseBtn
+    @module.rootList.$modalCloseBtn.on 'click', (e) => e.preventDefault() ; @closeModal()
+
+    # enable grid mode as default on desktop/tablet
+    if ! _isMobile()
+      @module.$el.addClass('grid-mode')
+
 
   _nested_list_config: (moduleName, assetType) ->
     arrayStoreConfig =
-      resource:   @resource
-      path:       @resourcePath
-      searchable: true
+      resource:    @resource
+      path:        @resourcePath
+      searchable:  true
+      sortBy:      'created_at'
+      sortReverse: true
 
     if assetType
       $.extend(arrayStoreConfig, { urlParams: { by_type:  assetType } })
@@ -44,15 +78,12 @@ class @Loft
       itemClass:          LoftAssetItem
       arrayStore:         new MongosteenArrayStore(arrayStoreConfig)
       onListInit: (list) => @_inititialize_list(list)
+      onListShow: (list) => @_clear_assets_selection()
 
     return config
 
 
   _inititialize_list: (list) ->
-    # uploading spinner
-    list.$loading =$ "<div class='loader'></div>"
-    list.$el.append list.$loading
-
     # file input button for uploading new files
     list.$uploadInput =$ "<input class='asset-upload' type='file' multiple='multiple' />"
     list.$search.before list.$uploadInput
@@ -64,7 +95,12 @@ class @Loft
         @_upload(file, list) for file in files
 
     # group actions toolbar
-    list.$groupActions = new LoftGroupActions(list, this)
+    list.groupActions = new LoftGroupActions(list, this)
+
+    # grid/list checkbox
+    list.$switchMode =$ "<a class='assets-switch-mode' href='#'></a>"
+    list.$backBtn.after list.$switchMode
+    list.$switchMode.on 'click', (e) => e.preventDefault() ; @module.$el.toggleClass('grid-mode')
 
 
   _upload: (file, list) ->
@@ -74,8 +110,9 @@ class @Loft
     @_start_file_upload()
     @store.push obj,
       onSuccess: (object) => @_finish_file_upload(list)
-      onError:   (errors) => @_finish_file_upload(list)
-        # + process validation errors, if any
+      onError:   (errors) =>
+        @_finish_file_upload(list)
+        chr.showError('Can\'t upload file.')
 
 
   _start_file_upload: ->
@@ -89,11 +126,38 @@ class @Loft
       @module.$el.removeClass('assets-uploading')
 
       # update data in list if it's not assets_all,
-      # in there new objects are added automatically
+      # in assets_all new objects are added automatically
       visibleList = @module.visibleNestedListShownWithParent()
       if visibleList.name != 'assets_all'
         visibleList.updateItems()
 
 
+  _clear_assets_selection: ->
+    for name, list of @module.nestedLists
+      list.groupActions.hide()
+      list.$items.find('.asset-checkbox').prop('checked', false)
+
+
+  closeModal: ->
+    @selectMultipleAssets = true
+    @_clear_assets_selection()
+    @module.$el.removeClass('module-modal')
+    @module.hide()
+
+
+  # chr.modules.assets.showModal()
+  showModal: (assetType='all', @selectMultipleAssets=false, @onAcceptCallback=$.noop) ->
+    # modal mode
+    @module.$el.addClass('module-modal')
+    # show nested list
+    @module.showNestedList("assets_#{ assetType }")
+    # select active item
+    @module.rootList.$items.children().removeClass('active')
+    @module.rootList.$items.children("[href='#/assets/assets_#{ assetType }']").addClass('active')
+    # show module
+    @module.show()
+
+
+
 
 

data/app/assets/javascripts/chr/loft/type-item.coffee

@@ -0,0 +1,37 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# Loft Asset Item
+# -----------------------------------------------------------------------------
+class @LoftTypeItem extends Item
+  onClick: (e) ->
+    if @.$el.hasClass('active') then e.preventDefault() ; return
+
+    if ! @module.$el.hasClass 'module-modal'
+      window._skipHashchange = true
+
+      location.hash = $(e.currentTarget).attr('href')
+      crumbs        = location.href.split('/')
+
+      @module.showNestedList(_last(crumbs), true)
+
+    else
+      e.preventDefault()
+
+      $item = $(e.currentTarget)
+
+      $item.parent().children('.active').removeClass('active')
+      $item.addClass('active')
+
+      listName = $item.attr('href').split('/')[2]
+      @module.showNestedList(listName, true)
+
+
+
+

data/app/assets/javascripts/chr/redactor/loft.coffee

@@ -0,0 +1,67 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# Redactor.js Loft Plugin
+# -----------------------------------------------------------------------------
+
+if ! RedactorPlugins then @RedactorPlugins = {}
+
+RedactorPlugins.loft = ->
+  methods =
+    init: ->
+      imageButton = @button.add('image', 'Insert Image')
+      @button.addCallback(imageButton, @loft.showImagesModal)
+
+      fileButton = @button.add('file', 'Insert File')
+      @button.addCallback(fileButton, @loft.showAllModal)
+
+
+    showImagesModal: ->
+      chr.modules.assets.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)
+
+
+    # if text is selected replace text with <a>{{ text }}</a>
+    # otherwise add link(s) split by <br/> tag
+    insertFiles: (objects) ->
+      if objects.length > 0
+        selectedText = this.selection.getText()
+        if selectedText != ''
+          asset = objects[0]
+          html = "<a href='#{ asset.file.url }' target='_blank'>#{ selectedText }</a>"
+        else
+          links = []
+          for asset in objects
+            links.push "<a href='#{ asset.file.url }' target='_blank'>#{ asset.name }</a>"
+          html = links.join('<br>')
+
+        this.insert.html(html, false)
+
+
+    insertImages: (objects) ->
+      if objects.length > 0
+        images = []
+        for asset in objects
+          images.push "<img src='#{ asset.file.url }' alt='#{ asset.name }' />"
+
+        html = images.join('<br>')
+
+        this.insert.html(html, false)
+
+
+  return methods
+
+
+
+

data/app/assets/javascripts/loft.coffee

@@ -1,3 +1,9 @@
 #= require chr/loft/group-actions
 #= require chr/loft/asset-item
+#= require chr/loft/type-item
 #= require chr/loft/module
+#= require chr/redactor/loft
+#= require chr/form/input-loft-image
+
+# TODOs:
+# - refactor group remove action

data/app/assets/stylesheets/_loft.scss

@@ -2,106 +2,243 @@
 // Styles for Loft Character CMS plugin, this should be included in
 // admin.scss (default)
 //
-// - mobile version
-//
 
-/* Tablet Layout */
-@media #{$tablet} {
-  .module.assets {
-    .list:not(:first-child) {
-      .items {
-        .item { min-height: 49px; }
-        .item-title    { display: inline-block; }
-        .item-subtitle { display: inline; float: right; }
-        .item.has-subtitle { padding: 1em; }
-      }
-    }
+@import "chr/form/input-loft-image";
+
+// 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;
+    content: $title; color: $contrastColor;
+    font-size: 1.5em; font-weight: 300; letter-spacing: 8px;
+    text-align: center; text-transform: uppercase;
   }
 }
 
 
-// Group Actions
+// ASSET TYPE ICONS
+
+.module.assets .list:first-child .items {
+  .item {
+    .item-title { margin-left: 2.05em; }
+    &:before    { @include absolutePosition(inherit inherit inherit 1em); content: ''; display: block; }
+  }
+
+  .item {
+    &:before         {    @include iconBase(32px 112px, 16px, 16px); }
+    &.active:before  {    background-position: 16px   0px; }
+  }
+  .item:nth-child(2) {
+    &:before            { background-position:  0px -16px; }
+    &.active { &:before { background-position: 16px -16px; } }
+  }
+  .item:nth-child(3) {
+    &:before            { background-position:  0px -32px; }
+    &.active { &:before { background-position: 16px -32px; } }
+  }
+  .item:nth-child(4) {
+    &:before            { background-position:  0px -48px; }
+    &.active { &:before { background-position: 16px -48px; } }
+  }
+  .item:nth-child(5) {
+    &:before            { background-position:  0px -64px; }
+    &.active { &:before { background-position: 16px -64px; } }
+  }
+  .item:nth-child(6) {
+    &:before            { background-position:  0px -80px; }
+    &.active { &:before { background-position: 16px -80px; } }
+  }
+  .item:nth-child(7) {
+    &:before            { background-position:  0px -96px; }
+    &.active { &:before { background-position: 16px -96px; } }
+  }
+}
+
+
+// LIST MODE
+
+.module.assets .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); }
+  }
+
+  // type icon
+  .asset-icon {
+    @include iconBase(64px 224px, 32px, 32px);
+    @include absolutePosition(12px inherit inherit 3.05em);
+  }
+
+  // image thumbnail
+  &.asset-image .asset-icon {
+    @include absolutePosition(8px inherit inherit 2.8em);
+    overflow: hidden; width: 40px; height: 40px; border-radius: 20px;
+    img { height: 100%; }
+  }
+
+  &.asset-image   .asset-icon { background-position:  0px  -32px; }
+  &.asset-text    .asset-icon { background-position:  0px  -64px; }
+  &.asset-archive .asset-icon { background-position:  0px  -96px; }
+  &.asset-audio   .asset-icon { background-position:  0px -128px; }
+  &.asset-video   .asset-icon { background-position:  0px -160px; }
+  &.asset-other   .asset-icon { background-position:  0px -192px; }
+
+  .asset-thumnail-small  { display: block; }
+  .asset-thumnail-medium { display: none;  }
+
+  // name
+  .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();
+            border: 1px solid $stableColor; box-shadow: 0 0 10px $lightColor; border-radius: 3px; }
+  }
+  &.edit-name .asset-name { display: block; }
+}
+
+
+// LIST-GRID MODE SWITCHER
+
+.assets-switch-mode { display: none; }
+
+
+// GROUP ACTIONS
+
 .assets-group-actions {
   @include absolutePosition(0 0 0 0); background: $white;
-  .unselect { @include headerButton($stableColor); float: left;  margin-left: 1em; }
+  .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; }
 }
 
+.assets-group-actions .accept { display: none; }
+.module-modal .assets-group-actions .accept { display: inline; }
+.module-modal .assets-group-actions .delete { display: none;   }
 
-// Icons for Parrent List
-.list.assets {
-  .items .item {
-    .item-title { margin-left: 2.05em; }
-    &:before {
-      content: '';
-      position: absolute;
-      display: block; width: 16px; height: 16px;
-      margin-right: 1em;
-      background-color: $lightColor;
-    }
-  }
-}
 
+// UPLOAD BUTTON
 
-// Upload Button
 .asset-upload {
-  @include absolutePosition(0 0 inherit inherit);
-  @extend .icon-plus;
-  cursor: pointer;
-  right: -40px;
-  padding-left: 80px;
-  &:focus { outline: none; }
+  @include absolutePosition(0 -40px inherit inherit);
+  @extend .icon-plus; @include noFocus;
+  cursor: pointer; padding-left: 80px;
 }
 
-.list header {
-  .asset-upload + .search { @include absolutePosition(0 40px inherit inherit); }
-}
+.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.list-search header {
-  .asset-upload + .search { @include absolutePosition(0 0 inherit 0); }
-}
 
+// MODAL MODE
 
-// Loader Spinner
-.module.assets.assets-uploading .list:not(:first-child) header .spinner { display: inline-block; }
+.module.assets {
+  .modal-close {
+    display: none;
+    @include headerButton();
+    @include absolutePosition(null null null 1em );
+  }
+  &.module-modal {
+    @include absolutePosition(.5em .5em 0em .5em); z-index: 1100;
 
+    &:after { display: none; }
+
+    // dark background
+    &:before {
+      @include position(fixed, 0px 0px 0px 0px); z-index: 0;
+      content: ''; display: block; background: rgba(0,0,0,.25);
+    }
 
-// List Item
-.item.asset {
-  .item-title {
-    cursor: pointer;
-    position: relative;
-    &:hover { color: $positiveColor; text-decoration: underline; }
+    .modal-close { display: inline; }
+    .list:first-child .back { display: none }
   }
-  .asset-name {
-    display: none;
-    width: 50%;
-    position: absolute;
-    line-height: 1;
-    padding: 0em .3em .3em .375em;
-    top: .55em; bottom: .55em; left: 4.5em;
-    z-index: 1;
-    border-radius: 3px;
-    &:focus {
-      outline: none !important;
-      border: 1px solid $stableColor;
-      box-shadow: 0 0 10px $lightColor;
+}
+
+
+/* TABLET LAYOUT */
+
+@media #{ $tablet } {
+  .module.assets .list:not(:first-child) .items { font-size: 1em; }
+
+  // ITEM
+  .module.assets .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); }
+    .asset-name { top: 16px; }
   }
-  .asset-checkbox {
-    position: relative; top: -.25em;
-    margin-right: 1em;
+
+  // MODAL MODE
+  .module.assets.module-modal { @include absolutePosition(1.5em 1.5em 0em 1.5em) }
+
+
+  // GRID MODE
+  .assets-switch-mode {
+    @include absolutePosition(inherit inherit inherit 1em);
+    display: inline;
+    font-size: .9em;
+    &:before { content: 'Grid'; color: $lightColor; margin-right: .25em; }
+    &:after  { content: 'List'; color: $stableColor; }
+  }
+  .module.assets.grid-mode .assets-switch-mode {
+    &:before { color: $stableColor; }
+    &:after  { color: $lightColor;  }
   }
-  .asset-icon {
-    display: inline-block; width: 16px; height: 16px;
-    margin-right: 1em;
-    background-color: $lightColor; }
 
-  &.edit-name {
-    .asset-name { display: block; }
+  .module.assets.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;
+
+        // checkbox: position + decoration
+        .asset-checkbox {
+          top: 10px; left: 10px; width: 24px; height: 24px; background: $white;
+          box-shadow: 0 1px 0 rgba(0,0,0,0.05),1px 0 0 rgba(0,0,0,0.05); border-bottom-right-radius: 4px;
+        }
+
+        // thumbnail
+        .asset-icon {
+          @include absolutePosition(10px inherit inherit 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; }
+        }
+
+        .asset-thumbnail-small  { display: none;  }
+        .asset-thumbnail-medium { display: block; }
+
+        // name & subtitle
+        .item-title { display: block; margin-top: 9.45em; }
+        .item-subtitle { display: block; position: initial; margin-top: .3em; }
+        &.edit-name .asset-name { top: inherit; bottom: 27px; left: 10px; right: 10px; }
+      }
+
+      // asset type labels
+      .asset-text    .asset-icon { @include iconLabel('Text');    }
+      .asset-archive .asset-icon { @include iconLabel('Archive'); }
+      .asset-audio   .asset-icon { @include iconLabel('Audio');   }
+      .asset-video   .asset-icon { @include iconLabel('Video');   }
+      .asset-other   .asset-icon { @include iconLabel('File');    }
+    }
   }
 }
 
 
 
 
+

data/app/assets/stylesheets/chr/form/_input-loft-image.scss

@@ -0,0 +1,11 @@
+.input-loft-image {
+  &.has-value         { min-height: 11em; }
+
+  input               { margin-bottom: .25em; }
+  .image img          { max-height: 6em; margin: .25em .75em .25em 0; float: left; }
+  .choose, .remove    { color: $positiveColor; display: inline-block; }
+
+  &.has-value .choose { margin-top: .25em; }
+  &.has-value .remove { display: inline-block; }
+  .remove             { display: none; font-size: .8em; margin-top: .5em; }
+}

data/lib/{uploaders → concerns}/asset_file_uploader.rb

@@ -6,11 +6,15 @@ module Loft
       include CarrierWave::MiniMagick
 
       def store_dir
-        "assets/loft/#{ model._number }"
+        "loft/#{ model._number }"
       end
 
-      version :small_150, if: :is_image? do
-        process :resize_to_fill => [150, 150]
+      version :_200x150_2x, if: :is_image? do
+        process :resize_to_fill => [400, 300]
+      end
+
+      version :_40x40_2x, if: :is_image? do
+        process :resize_to_fill => [80, 80]
       end
 
       def is_image? new_file

data/lib/loft.rb

@@ -3,5 +3,5 @@ require 'carrierwave/mongoid'
 module Loft
   require 'loft/engine'
   require 'mongoid/loft_asset'
-  require 'uploaders/asset_file_uploader'
+  require 'concerns/asset_file_uploader'
 end

data/lib/loft/version.rb

@@ -1,3 +1,3 @@
 module Loft
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/lib/mongoid/loft_asset.rb

@@ -26,7 +26,7 @@ module Mongoid
 
       # increment value, used by uploader
       field :_number, type: Integer
-      increments :number
+      increments :_number
 
       # uploaders
       mount_uploader :file, AssetFileUploader
@@ -54,11 +54,11 @@ module Mongoid
       end
 
 
-      def list_item_thumbnail
+      def item_thumbnail
         if is_image? and file?
-          file.small_150.url
+          { medium: file._200x150_2x.url, small: file._40x40_2x.url }
         else
-          ''
+          {}
         end
       end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: loft
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Alexander Kravets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-24 00:00:00.000000000 Z
+date: 2015-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mongoid_search
@@ -88,22 +88,28 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".gitignore"
 - CONTRIBUTING.md
 - Gemfile
 - LICENSE.md
 - README.md
 - Rakefile
+- app/assets/images/loft/library@3x.png
+- app/assets/javascripts/chr/form/input-loft-image.coffee
 - app/assets/javascripts/chr/loft/asset-item.coffee
 - app/assets/javascripts/chr/loft/group-actions.coffee
 - app/assets/javascripts/chr/loft/module.coffee
+- app/assets/javascripts/chr/loft/type-item.coffee
+- app/assets/javascripts/chr/redactor/loft.coffee
 - app/assets/javascripts/loft.coffee
 - app/assets/stylesheets/_loft.scss
+- app/assets/stylesheets/chr/form/_input-loft-image.scss
 - app/uploaders/asset_file_uploader.rb
+- lib/concerns/asset_file_uploader.rb
 - lib/loft.rb
 - lib/loft/engine.rb
 - lib/loft/version.rb
 - lib/mongoid/loft_asset.rb
-- lib/uploaders/asset_file_uploader.rb
 - loft.gemspec
 homepage: http://slatestudio.com
 licenses: