From 72c2cb2059ddcffdfa1d85ede519be720ad62c07 Mon Sep 17 00:00:00 2001 From: did Date: Sat, 19 Nov 2011 15:47:56 +0100 Subject: [PATCH] rename asset to content_asset + clean the locomotive_media plugin for tinyMCE (wip) --- .../locomotive/models/content_asset.js.coffee | 13 ++ .../locomotive/models/theme_asset.js.coffee | 4 +- .../utils/image_uploadify.js.coffee | 2 +- .../locomotive/utils/tinymce_settings.js | 4 +- .../content_assets/picker_item_view.js.coffee | 30 +++ .../content_assets/picker_view.js.coffee | 106 ++++++++- .../views/pages/_form_view.js.coffee | 3 +- .../views/shared/asset_picker_view.js.coffee | 0 .../theme_assets/image_picker_view.js.coffee | 4 +- .../plugins/locomedia/editor_plugin.js | 43 ---- .../css/style.css | 0 .../dialog.htm | 0 .../plugins/locomotive_media/editor_plugin.js | 77 +++++++ .../editor_plugin_src.js | 0 .../img/sample.gif | Bin .../js/dialog.js | 0 .../langs/de_dlg.js | 0 .../langs/en_dlg.js | 0 .../langs/fr_dlg.js | 0 .../langs/it_dlg.js | 0 .../langs/no_dlg.js | 0 .../themes/advanced/skins/locomotive/ui.css | 2 +- .../stylesheets/locomotive/application.scss | 2 +- .../locomotive/content_assets.scss | 206 ++++++++++++++++++ .../locomotive/dialog_changes.scss | 37 +--- .../locomotive/content_assets_controller.rb | 52 +---- app/helpers/locomotive/assets_helper.rb | 22 +- .../locomotive/{asset.rb => content_asset.rb} | 8 +- app/models/locomotive/site.rb | 12 +- app/presenters/locomotive/base_presenter.rb | 4 + .../locomotive/content_asset_presenter.rb | 42 ++++ ..._uploader.rb => content_asset_uploader.rb} | 2 +- .../content_assets/_picker.html.haml | 32 +++ .../pages/_editable_elements.html.haml | 2 +- app/views/locomotive/pages/_form.html.haml | 1 + .../locomotive/theme_assets/_picker.html.haml | 10 +- config/locales/admin_ui.en.yml | 20 +- config/locales/admin_ui.fr.yml | 19 +- lib/tasks/locomotive.rake | 16 +- 39 files changed, 593 insertions(+), 182 deletions(-) create mode 100644 app/assets/javascripts/locomotive/models/content_asset.js.coffee create mode 100644 app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee create mode 100644 app/assets/javascripts/locomotive/views/shared/asset_picker_view.js.coffee delete mode 100644 app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/css/style.css (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/dialog.htm (100%) create mode 100644 app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin.js rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/editor_plugin_src.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/img/sample.gif (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/js/dialog.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/langs/de_dlg.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/langs/en_dlg.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/langs/fr_dlg.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/langs/it_dlg.js (100%) rename app/assets/javascripts/tinymce/plugins/{locomedia => locomotive_media}/langs/no_dlg.js (100%) create mode 100644 app/assets/stylesheets/locomotive/content_assets.scss rename app/models/locomotive/{asset.rb => content_asset.rb} (80%) create mode 100644 app/presenters/locomotive/content_asset_presenter.rb rename app/uploaders/locomotive/{asset_uploader.rb => content_asset_uploader.rb} (75%) create mode 100644 app/views/locomotive/content_assets/_picker.html.haml diff --git a/app/assets/javascripts/locomotive/models/content_asset.js.coffee b/app/assets/javascripts/locomotive/models/content_asset.js.coffee new file mode 100644 index 00000000..8293e6fd --- /dev/null +++ b/app/assets/javascripts/locomotive/models/content_asset.js.coffee @@ -0,0 +1,13 @@ +class Locomotive.Models.ContentAsset extends Backbone.Model + + initialize: -> + @set + image: @get('content_type') == 'image' + + + +class Locomotive.Models.ContentAssetsCollection extends Backbone.Collection + + model: Locomotive.Models.ContentAsset + + url: "#{Locomotive.mount_on}/content_assets" \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/models/theme_asset.js.coffee b/app/assets/javascripts/locomotive/models/theme_asset.js.coffee index db27d769..111f241f 100644 --- a/app/assets/javascripts/locomotive/models/theme_asset.js.coffee +++ b/app/assets/javascripts/locomotive/models/theme_asset.js.coffee @@ -5,4 +5,6 @@ class Locomotive.Models.ThemeAsset extends Backbone.Model class Locomotive.Models.ThemeAssetsCollection extends Backbone.Collection - url: "#{Locomotive.mount_on}/theme_assets" \ No newline at end of file + model: Locomotive.Models.ThemeAsset + + url: "#{Locomotive.mount_on}/theme_assets" diff --git a/app/assets/javascripts/locomotive/utils/image_uploadify.js.coffee b/app/assets/javascripts/locomotive/utils/image_uploadify.js.coffee index 47b5c0c3..01837252 100644 --- a/app/assets/javascripts/locomotive/utils/image_uploadify.js.coffee +++ b/app/assets/javascripts/locomotive/utils/image_uploadify.js.coffee @@ -14,7 +14,7 @@ window.ImageUploadify = hideButton: true wmode: 'transparent' auto: true - fileExt: '*.jpg;*.png;*.jpeg;*.gif' + fileExt: options.file_ext || '*.jpg;*.png;*.jpeg;*.gif' fileDesc: 'Only .jpg, .png, .jpeg, .gif' removeCompleted: true fileDataName: options.data_name diff --git a/app/assets/javascripts/locomotive/utils/tinymce_settings.js b/app/assets/javascripts/locomotive/utils/tinymce_settings.js index 892fe3fd..5467e4ca 100644 --- a/app/assets/javascripts/locomotive/utils/tinymce_settings.js +++ b/app/assets/javascripts/locomotive/utils/tinymce_settings.js @@ -1,9 +1,9 @@ window.TinyMceDefaultSettings = { theme : 'advanced', skin : 'locomotive', - plugins: 'safari,jqueryinlinepopups,locomedia,fullscreen', + plugins: 'safari,jqueryinlinepopups,locomotive_media,fullscreen', extended_valid_elements: 'iframe[width|height|frameborder|allowfullscreen|src|title]', - theme_advanced_buttons1 : 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomedia', + theme_advanced_buttons1 : 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomotive_media', theme_advanced_buttons2 : 'formatselect,fontselect,fontsizeselect', theme_advanced_buttons3 : '', theme_advanced_toolbar_location : "top", diff --git a/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee b/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee new file mode 100644 index 00000000..a79bc9cf --- /dev/null +++ b/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee @@ -0,0 +1,30 @@ +Locomotive.Views.ContentAssets ||= {} + +class Locomotive.Views.ContentAssets.PickerItemView extends Backbone.View + + tagName: 'li' + + className: 'asset' + + events: + 'click h4 a': 'select_asset' + 'click a.remove': 'remove_asset' + + render: -> + $(@el).html(ich.content_asset(@model.toJSON())) + + return @ + + select_asset: (event) -> + event.stopPropagation() & event.preventDefault() + @on_select(@model) + + on_select: -> + @options.parent.options.on_select(@model) if @options.parent.options.on_select + + remove_asset: (event) -> + event.stopPropagation() & event.preventDefault() + + message = $(event.target).attr('data-confirm') || $(event.target).parent().attr('data-confirm') + + @model.destroy() if confirm(message) diff --git a/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee b/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee index 4aff3695..ea329e7d 100644 --- a/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee +++ b/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee @@ -4,14 +4,108 @@ class Locomotive.Views.ContentAssets.PickerView extends Backbone.View tag: 'div' - events: - 'click ul.list a': 'select_asset' + number_items_per_row: 4 + + _item_views: [] initialize: -> - # _.bindAll(@, 'add_assets', 'add_asset') - # @collection.bind('reset', @add_assets) + _.bindAll(@, 'add_assets', 'add_asset', 'remove_asset') + @collection.bind('reset', @add_assets) + @collection.bind('add', @add_asset) + @collection.bind('remove', @remove_asset) render: -> - console.log('hello world from PickerView !') + @_reset() - select_asset: -> \ No newline at end of file + $(@el).html(ich.content_asset_picker()) + + @collection.fetch() + + return @ + + create_dialog: -> + @dialog = $(@el).dialog + modal: true + width: 650, + create: => + $('.ui-widget-overlay').bind 'click', => @close() + + @$('h2').appendTo($(@el).prev()) + actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix') + + actions.find('#close-link').click (event) => @close(event) + + open: => + actions = $(@el).parent().find('.ui-dialog-buttonpane') + link = actions.find('#upload-link') + el = actions.find('input[type=file]') + + window.ImageUploadify.build el, # TODO: ImageUploadify => DefaultUploadify. Put this in method + url: link.attr('href') + data_name: el.attr('name') + height: link.outerHeight() + width: link.outerWidth() + file_ext: '*.png;*.gif;*.jpg;*.jpeg;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.txt' + success: (model) => @collection.add(model) + error: (msg) => @shake() + + actions.find('.upload-button-wrapper').hover( + => link.addClass('hover'), + => link.removeClass('hover') + ) + + @open() + + open: -> + $(@el).dialog('open') + + close: (event) -> + event.stopPropagation() & event.preventDefault() if event? + $(@el).dialog('close') + + shake: -> + $(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100) + + center: -> + $(@el).dialog('option', 'position', 'center') + + add_assets: (collection) -> + collection.each @add_asset + + @_refresh() + + setTimeout (=> @create_dialog()), 30 # disable flickering + + add_asset: (asset) -> + view = new Locomotive.Views.ContentAssets.PickerItemView model: asset, parent: @ + + (@_item_views ||= []).push(view) + @$('ul.list .clear').before(view.render().el) + + @_refresh() + + remove_asset: (asset) -> + view = _.find @_item_views, (tmp) -> tmp.model == asset + view.remove() if view? + @_refresh() + @center() + + _refresh: -> + if @collection.length == 0 + @$('ul.list').hide() & @$('p.no-items').show() + else + @$('p.no-items').hide() & @$('ul.list').show() + self = @ + @$('ul.list li.asset').each (index) -> + if (index + 1) % self.number_items_per_row == 0 + $(@).addClass('last') + else + $(@).removeClass('last') + + @center() if @dialog? + + _reset: -> + _.each @_item_views || [], (view) -> view.remove() + $('.ui-widget-overlay').unbind 'click' + @$('.actions input[type=file]').remove() + @dialog.dialog('destroy') if @dialog? \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee b/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee index 7735d93b..417c2aa5 100644 --- a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee +++ b/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee @@ -68,8 +68,7 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView @$('#editable-elements .nav a').click (event) => event.stopPropagation() & event.preventDefault() - link = $(event.target).parent() - + link = $(event.target) index = parseInt(link.attr('href').match(/block-(.+)/)[1]) @$('#editable-elements .wrapper ul li.block').hide() diff --git a/app/assets/javascripts/locomotive/views/shared/asset_picker_view.js.coffee b/app/assets/javascripts/locomotive/views/shared/asset_picker_view.js.coffee new file mode 100644 index 00000000..e69de29b diff --git a/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee b/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee index 21bffaa6..5dab815d 100644 --- a/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee +++ b/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee @@ -28,7 +28,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View $('.ui-widget-overlay').bind 'click', => @close() @$('h2').appendTo($(@el).prev()) - actions = @$('.actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix') + actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix') actions.find('#close-link').click (event) => @close(event) @@ -81,7 +81,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View add_asset: (asset) -> @$('ul.list').append(ich.theme_asset(asset.toJSON())) - @center() if @editor + @center() if @dialog? _reset: -> $('.ui-widget-overlay').unbind 'click' diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js b/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js deleted file mode 100644 index 786013a1..00000000 --- a/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * editor_plugin_src.js - * - * Copyright 2009, Moxiecode Systems AB - * Released under LGPL License. - * - * License: http://tinymce.moxiecode.com/license - * Contributing: http://tinymce.moxiecode.com/contributing - */ - -(function() { - tinymce.create('tinymce.plugins.LocoMediaPlugin', { - init : function(ed, url) { - view = new Locomotive.Views.ContentAssets.PickerView(); - - // Register commands - ed.addCommand('locoMedia', function() { - view.render(); - }); - - // Register buttons - ed.addButton('locomedia', { - title : 'locomedia.image_desc', - cmd : 'locoMedia' - }); - }, - - getInfo : function() { - return { - longname : 'Locomotive Media File', - author : 'Didier Lafforgue', - authorurl : 'http://www.locomotivecms.com', - infourl : 'http://www.locomotivecms.com', - version : tinymce.majorVersion + "." + tinymce.minorVersion - }; - } - }); - - // Register plugin - tinymce.PluginManager.add('locomedia', tinymce.plugins.LocoMediaPlugin); -})(); - -// (function(){tinymce.create('tinymce.plugins.LocoMediaPlugin',{init:function(ed,url){ed.addCommand('locoMedia',function(){ed.windowManager.open({file:url+'/dialog.htm?8',width:645,height:350,inline:1},{plugin_url:url})});ed.addButton('locomedia',{title:'locomedia.image_desc',cmd:'locoMedia'})},getInfo:function(){return{longname:'Locomotive Media File',author:'Didier Lafforgue',authorurl:'http://www.locomotivecms.com',infourl:'http://www.locomotivecms.com',version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add('locomedia',tinymce.plugins.LocoMediaPlugin)})(); \ No newline at end of file diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/css/style.css b/app/assets/javascripts/tinymce/plugins/locomotive_media/css/style.css similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/css/style.css rename to app/assets/javascripts/tinymce/plugins/locomotive_media/css/style.css diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/dialog.htm b/app/assets/javascripts/tinymce/plugins/locomotive_media/dialog.htm similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/dialog.htm rename to app/assets/javascripts/tinymce/plugins/locomotive_media/dialog.htm diff --git a/app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin.js new file mode 100644 index 00000000..657a87f7 --- /dev/null +++ b/app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin.js @@ -0,0 +1,77 @@ +/** + * editor_plugin_src.js + * + * Copyright 2009, Moxiecode Systems AB + * Released under LGPL License. + * + * License: http://tinymce.moxiecode.com/license + * Contributing: http://tinymce.moxiecode.com/contributing + */ + +(function() { + var insertImage = function(ed, asset) { + var args = {}, el; + + // Fixes crash in Safari + if (tinymce.isWebKit) ed.getWin().focus(); + + if (asset.get('image')) + tinymce.extend(args, { src : asset.get('url') }); + else + tinymce.extend(args, { href : asset.get('url') }); + + el = ed.selection.getNode(); + + if (el && (el.nodeName == 'IMG' || el.nodeName == 'A')) { + ed.dom.setAttribs(el, args); + } else { + if (asset.get('image')) { + ed.execCommand('mceInsertContent', false, '', { skip_undo: 1 }); + } else { + var html = ed.selection.getContent(); + if (html == '') html = asset.get('filename'); + ed.execCommand('mceInsertContent', false, '' + html + '', { skip_undo: 1 }); + } + + ed.dom.setAttribs('__mce_tmp', args); + ed.dom.setAttrib('__mce_tmp', 'id', ''); + ed.undoManager.add(); + } + } + + tinymce.create('tinymce.plugins.LocomotiveMediaPicker', { + init : function(ed, url) { + view = new Locomotive.Views.ContentAssets.PickerView({ + 'collection': new Locomotive.Models.ContentAssetsCollection() + }); + + // Register commands + ed.addCommand('locomotiveMedia', function() { + view.options.on_select = function(asset) { + insertImage(ed, asset); + view.close(); + } + view.render(); + }); + + // Register buttons + ed.addButton('locomotive_media', { + title : 'locomotive_media.image_desc', + cmd : 'locomotiveMedia' + }); + }, + + getInfo : function() { + return { + longname : 'Locomotive Media Picker', + author : 'Didier Lafforgue', + authorurl : 'http://www.locomotivecms.com', + infourl : 'http://www.locomotivecms.com', + version : tinymce.majorVersion + "." + tinymce.minorVersion + }; + } + }); + + // Register plugin + tinymce.PluginManager.add('locomotive_media', tinymce.plugins.LocomotiveMediaPicker); +})(); diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin_src.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin_src.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin_src.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin_src.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/img/sample.gif b/app/assets/javascripts/tinymce/plugins/locomotive_media/img/sample.gif similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/img/sample.gif rename to app/assets/javascripts/tinymce/plugins/locomotive_media/img/sample.gif diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/js/dialog.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/js/dialog.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/js/dialog.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/js/dialog.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/langs/de_dlg.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/langs/de_dlg.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/langs/de_dlg.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/langs/de_dlg.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/langs/en_dlg.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/langs/en_dlg.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/langs/en_dlg.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/langs/en_dlg.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/langs/fr_dlg.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/langs/fr_dlg.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/langs/fr_dlg.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/langs/fr_dlg.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/langs/it_dlg.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/langs/it_dlg.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/langs/it_dlg.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/langs/it_dlg.js diff --git a/app/assets/javascripts/tinymce/plugins/locomedia/langs/no_dlg.js b/app/assets/javascripts/tinymce/plugins/locomotive_media/langs/no_dlg.js similarity index 100% rename from app/assets/javascripts/tinymce/plugins/locomedia/langs/no_dlg.js rename to app/assets/javascripts/tinymce/plugins/locomotive_media/langs/no_dlg.js diff --git a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css index 526946d7..5b2da43c 100755 --- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css +++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css @@ -735,7 +735,7 @@ background-position: -380px 0 } -.locomotiveSkin span.mce_locomedia { +.locomotiveSkin span.mce_locomotive_media { background-position: -380px 0 } diff --git a/app/assets/stylesheets/locomotive/application.scss b/app/assets/stylesheets/locomotive/application.scss index 2e0090d8..0f21e30f 100644 --- a/app/assets/stylesheets/locomotive/application.scss +++ b/app/assets/stylesheets/locomotive/application.scss @@ -52,7 +52,7 @@ ul.list { list-style: none; margin: 0px 0 20px 0; - li { + li.item { position: relative; height: 31px; line-height: 31px; diff --git a/app/assets/stylesheets/locomotive/content_assets.scss b/app/assets/stylesheets/locomotive/content_assets.scss new file mode 100644 index 00000000..0a73f89f --- /dev/null +++ b/app/assets/stylesheets/locomotive/content_assets.scss @@ -0,0 +1,206 @@ +@import "compass/css3"; +@import "compass/css3/border-radius"; +@import "compass/css3/images"; +@import "compass/css3/text-shadow"; +@import "helpers"; + +ul.content-assets { + + li.asset { + position: relative; + float: left; + width: 139px; + height: 140px; + clear: none; + + margin: 0 17px 17px 0; + + @include border-radius(8px); + @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px); + background: #ebedf4; + + &.last { + margin-right: 0px; + } + + h4 { + margin: 0px; + + line-height: 30px; + + text-align: left; + + @include border-top-radius(8px); + @include background-image(linear-gradient(#ebedf4, #d7dbe7)); + border-bottom: 1px solid #ccced7; + + a { + @include hover-link; + + margin-left: 5px; + outline: none; + + font-size: 11px; + color: #1f82bc; + font-weight: bold; + } + } + + .icon, .image { + width: 80px; + height: 80px; + border: 4px solid #fff; + margin: 10px 0 5px 24px; + + @include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 5px 1px); + } + + .image { + background: transparent image-url("locomotive/list/empty.png") repeat 0 0; + + .inside { + display: table-cell; + vertical-align: middle; + text-align: center; + width: 80px; + height: 85px; + } + } // .image + + .icon { + + .inside { + position: relative; + top: 24px; + width: 80px; + + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + + color: #fff; + font-size: 12px; + font-weight: bold; + text-align: center; + text-transform: uppercase; + @include single-text-shadow(rgba(0, 0, 0, 0.3), 1px, 1px, 1px); + } + + &.pdf { + background: #e82f2d; + @include background-image(linear-gradient(left top, #fc4e42, #b9101d)); + } + + &.media { + background: #6e489c; + @include background-image(linear-gradient(left top, #ba89d1, #4f317d)); + } + + &.other { + background: #4a4a50; + @include background-image(linear-gradient(left top, #92939a, #28282b)); + } + } // .icon + + .actions { + position: absolute; + top: 8px; + right: 5px; + } + + } // li.asset + +} + +// ul.assets { +// list-style: none; +// margin: 0px; +// padding: 0px; +// } +// +// ul.assets li.asset { +// position: relative; +// float: left; +// width: 139px; +// height: 140px; +// background: transparent url(/assets/locomotive//list/thumb.png) no-repeat 0 0; +// margin: 0 17px 17px 0; +// } +// +// ul.assets li.asset.last { +// margin-right: 0px; +// } +// +// ul.assets li.asset h4 { margin: 0px; height: 30px; border-bottom: 1px solid #ccced7; position: relative; } +// +// ul.assets li.asset h4 a { +// position: absolute; +// top: 7px; +// left: 12px; +// font-weight: bold; +// font-size: 0.6em; +// color: #1f82bc; +// text-decoration: none; +// } +// +// ul.assets li.asset h4 a:hover { text-decoration: underline; } +// +// ul.assets li.asset div.icon, ul.assets li.asset div.image { +// width: 80px; +// height: 80px; +// border: 4px solid #fff; +// margin: 10px 0 0 24px; +// box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); +// -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); +// -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); +// } +// +// ul.assets li.asset div.image { +// background: transparent url(/assets/locomotive//list/empty.png) repeat 0 0; +// } +// +// ul.assets li.asset div.image .inside { +// display: table-cell; +// vertical-align: middle; +// text-align: center; +// width: 72px; +// height: 72px; +// } +// +// ul.assets li.asset div.icon .inside { +// position: relative; +// top: 24px; +// text-align:center; +// width: 80px; +// -webkit-transform: rotate(-45deg); +// -moz-transform: rotate(-45deg); +// font-weight: bold; +// color: #fff; +// text-shadow: 0px 1px 0px #333; +// text-transform: uppercase; +// font-size: 1.1em; +// } +// +// ul.assets li.asset div.pdf { +// background: #e82f2d; +// background: -webkit-gradient(linear, left top, right bottom, from(#fc4e42), to(#b9101d)); +// background: -moz-linear-gradient(-45deg, #fc4e42, #b9101d); +// } +// +// ul.assets li.asset div.media { +// background: #6e489c; +// background: -webkit-gradient(linear, left top, right bottom, from(#ba89d1), to(#4f317d)); +// background: -moz-linear-gradient(-45deg, #ba89d1, #4f317d); +// } +// +// ul.assets li.asset div.other { +// background: #4a4a50; +// background: -webkit-gradient(linear, left top, right bottom, from(#92939a), to(#28282b)); +// background: -moz-linear-gradient(-45deg, #92939a, #28282b); +// } +// +// +// ul.assets li.asset div.actions { +// position: absolute; +// top: 4px; +// right: 12px; +// } \ No newline at end of file diff --git a/app/assets/stylesheets/locomotive/dialog_changes.scss b/app/assets/stylesheets/locomotive/dialog_changes.scss index 3782f197..9176dd4c 100644 --- a/app/assets/stylesheets/locomotive/dialog_changes.scss +++ b/app/assets/stylesheets/locomotive/dialog_changes.scss @@ -64,34 +64,6 @@ padding: 10px; background: #fff; - .actions { - position: absolute; - top: -22px; - right: 2px; - - a { - @include gray-button; - } - - &.button-wrapper { - - #theme_asset_sourceUploader { - position: absolute; - top: 0px; - right: 0px; - } - - #theme_asset_sourceUploader { - z-index: 1001; - } - - a { - z-index: 1000; - } - } // .actions.button-wrapper - - } // .actions - .list { overflow: auto; height: 350px; @@ -112,6 +84,10 @@ border-top: 1px solid #5F6069; background: #8B8D9A; + a { + outline: none; + } + a#close-link { @include hover-link; color: #fff; @@ -127,13 +103,10 @@ @include light-button; } - #theme_asset_sourceUploader { + #theme_asset_sourceUploader, #content_asset_sourceUploader { position: absolute; top: 0px; right: 0px; - } - - #theme_asset_sourceUploader { z-index: 1001; } diff --git a/app/controllers/locomotive/content_assets_controller.rb b/app/controllers/locomotive/content_assets_controller.rb index 648ab5f9..92b18796 100644 --- a/app/controllers/locomotive/content_assets_controller.rb +++ b/app/controllers/locomotive/content_assets_controller.rb @@ -1,56 +1,24 @@ module Locomotive class ContentAssetsController < BaseController - include ActionView::Helpers::SanitizeHelper - include ActionView::Helpers::TextHelper - respond_to :json, :only => [:index, :create, :destroy] def index - index! do |response| - response.json do - render :json => { :assets => @assets.collect { |asset| asset_to_json(asset) } } - end - end + @content_assets = current_site.content_assets + respond_with(@content_assets) end def create - @asset = current_site.assets.build(:name => params[:name], :source => params[:file]) - - create! do |success, failure| - success.json do - render :json => asset_to_json(@asset) - end - failure.json do - render :json => { :status => 'error' } - end - end - rescue Exception => e - render :json => { :status => 'error', :message => e.message } + @content_asset = current_site.content_assets.create(params[:content_asset]) + puts @content_asset.errors.inspect + respond_with @content_asset end - protected - - def collection - if params[:image] - @assets ||= begin_of_association_chain.assets.only_image - else - @assets ||= begin_of_association_chain.assets - end - end - - def asset_to_json(asset) - { - :status => 'success', - :filename => asset.source_filename, - :short_name => truncate(asset.name, :length => 15), - :extname => truncate(asset.extname, :length => 3), - :content_type => asset.content_type, - :url => asset.source.url, - :vignette_url => asset.vignette_url, - :destroy_url => asset_url(asset, :json) - } + def destroy + @content_asset = current_site.content_assets.find(params[:id]) + @content_asset.destroy + respond_with @content_asset end end -end +end \ No newline at end of file diff --git a/app/helpers/locomotive/assets_helper.rb b/app/helpers/locomotive/assets_helper.rb index ced9f04b..42e1b557 100644 --- a/app/helpers/locomotive/assets_helper.rb +++ b/app/helpers/locomotive/assets_helper.rb @@ -1,16 +1,16 @@ module Locomotive::AssetsHelper - def vignette_tag(asset) - if asset.image? - html, css = image_tag(asset.vignette_url), 'image' - else - css = "icon #{asset.content_type}" - html = asset.content_type.to_s == 'other' ? truncate(asset.extname, :length => 3) : asset.content_type - html = '?' if html.blank? - end - - content_tag(:div, content_tag(:div, html, :class => 'inside'), :class => css) - end + # def vignette_tag(asset) + # if asset.image? + # html, css = image_tag(asset.vignette_url), 'image' + # else + # css = "icon #{asset.content_type}" + # html = asset.content_type.to_s == 'other' ? truncate(asset.extname, :length => 3) : asset.content_type + # html = '?' if html.blank? + # end + # + # content_tag(:div, content_tag(:div, html, :class => 'inside'), :class => css) + # end def image_dimensions_and_size(asset) content_tag(:small, "#{asset.width}px x #{asset.height}px | #{number_to_human_size(asset.size)}") diff --git a/app/models/locomotive/asset.rb b/app/models/locomotive/content_asset.rb similarity index 80% rename from app/models/locomotive/asset.rb rename to app/models/locomotive/content_asset.rb index 91af46f5..bb3d0938 100644 --- a/app/models/locomotive/asset.rb +++ b/app/models/locomotive/content_asset.rb @@ -1,5 +1,5 @@ module Locomotive - class Asset + class ContentAsset include ::Mongoid::Document include ::Mongoid::Timestamps @@ -14,7 +14,7 @@ module Locomotive field :height, :type => Integer field :size, :type => Integer field :position, :type => Integer, :default => 0 - mount_uploader :source, AssetUploader, :mount_on => :source_filename + mount_uploader :source, ContentAssetUploader, :mount_on => :source_filename ## associations ## referenced_in :site, :class_name => 'Locomotive::Site' @@ -37,5 +37,9 @@ module Locomotive { :url => self.source.url }.merge(self.attributes).stringify_keys end + def as_json(options = {}) + Locomotive::ContentAssetPresenter.new(self).as_json + end + end end \ No newline at end of file diff --git a/app/models/locomotive/site.rb b/app/models/locomotive/site.rb index 95323d04..8788ab2a 100644 --- a/app/models/locomotive/site.rb +++ b/app/models/locomotive/site.rb @@ -13,12 +13,12 @@ module Locomotive field :robots_txt ## associations ## - references_many :pages, :class_name => 'Locomotive::Page', :validate => false - references_many :snippets, :class_name => 'Locomotive::Snippet', :dependent => :destroy, :validate => false - references_many :theme_assets, :class_name => 'Locomotive::ThemeAsset', :dependent => :destroy, :validate => false - references_many :assets, :class_name => 'Locomotive::Asset', :dependent => :destroy, :validate => false - references_many :content_types, :class_name => 'Locomotive::ContentType', :dependent => :destroy, :validate => false - embeds_many :memberships, :class_name => 'Locomotive::Membership' + references_many :pages, :class_name => 'Locomotive::Page', :validate => false + references_many :snippets, :class_name => 'Locomotive::Snippet', :dependent => :destroy, :validate => false + references_many :theme_assets, :class_name => 'Locomotive::ThemeAsset', :dependent => :destroy, :validate => false + references_many :content_assets, :class_name => 'Locomotive::ContentAsset', :dependent => :destroy, :validate => false + references_many :content_types, :class_name => 'Locomotive::ContentType', :dependent => :destroy, :validate => false + embeds_many :memberships, :class_name => 'Locomotive::Membership' ## validations ## validates_presence_of :name diff --git a/app/presenters/locomotive/base_presenter.rb b/app/presenters/locomotive/base_presenter.rb index ad72ed68..280b7f12 100644 --- a/app/presenters/locomotive/base_presenter.rb +++ b/app/presenters/locomotive/base_presenter.rb @@ -11,6 +11,10 @@ class Locomotive::BasePresenter @source = object end + def id + @source._id.to_s + end + # def as_json(options = {}) # @source.as_json(options) # end diff --git a/app/presenters/locomotive/content_asset_presenter.rb b/app/presenters/locomotive/content_asset_presenter.rb new file mode 100644 index 00000000..57f07abe --- /dev/null +++ b/app/presenters/locomotive/content_asset_presenter.rb @@ -0,0 +1,42 @@ +module Locomotive + class ContentAssetPresenter < BasePresenter + + def filename + truncate(self.source.source_filename, :length => 19) + end + + def short_name + truncate(self.source.name, :length => 15) + end + + def extname + truncate(self.source.extname, :length => 3) + end + + def content_type + self.source.content_type + end + + def content_type_text + value = self.source.content_type.to_s == 'other' ? self.extname : self.source.content_type + value.blank? ? '?' : value + end + + def url + self.source.source.url + end + + def vignette_url + self.source.vignette_url + end + + def as_json + {}.tap do |hash| + %w(id filename short_name extname content_type content_type_text url vignette_url).map(&:to_sym).each do |meth| + hash[meth] = self.send(meth) + end + end + end + + end +end \ No newline at end of file diff --git a/app/uploaders/locomotive/asset_uploader.rb b/app/uploaders/locomotive/content_asset_uploader.rb similarity index 75% rename from app/uploaders/locomotive/asset_uploader.rb rename to app/uploaders/locomotive/content_asset_uploader.rb index 320fd5f4..ae5e27a1 100644 --- a/app/uploaders/locomotive/asset_uploader.rb +++ b/app/uploaders/locomotive/content_asset_uploader.rb @@ -1,7 +1,7 @@ # encoding: utf-8 module Locomotive - class AssetUploader < ::CarrierWave::Uploader::Base + class ContentAssetUploader < ::CarrierWave::Uploader::Base include Locomotive::CarrierWave::Uploader::Asset diff --git a/app/views/locomotive/content_assets/_picker.html.haml b/app/views/locomotive/content_assets/_picker.html.haml new file mode 100644 index 00000000..8a82863d --- /dev/null +++ b/app/views/locomotive/content_assets/_picker.html.haml @@ -0,0 +1,32 @@ +%script{ :type => 'text/html', :id => 'content_asset_picker' } + + %h2!= t('.title') + + %p.no-items{ :style => 'display: none' }!= t('.no_items') + + %ul.list.content-assets{ :style => 'display: none' } + %li.clear + + .dialog-actions + = link_to t('locomotive.buttons.close'), '#', :id => 'close-link' + .upload-button-wrapper + = file_field_tag 'content_asset[source]' + = link_to t('.upload'), content_assets_url(:json), :class => 'new', :id => 'upload-link' + + +%script{ :type => 'text/html', :id => 'content_asset' } + + %h4 + = link_to '{{filename}}', '{{url}}' + {{#if image}} + .image + .inside + %img{ :src => '{{vignette_url}}' } + {{else}} + .icon{ :class => '{{content_type}}' } + .inside + {{content_type_text}} + {{/if}} + + .actions + = link_to image_tag('locomotive/list/icons/cross.png'), '#', :class => 'remove', :'data-confirm' => t('locomotive.messages.confirm') diff --git a/app/views/locomotive/pages/_editable_elements.html.haml b/app/views/locomotive/pages/_editable_elements.html.haml index f3f4ac56..466e1269 100644 --- a/app/views/locomotive/pages/_editable_elements.html.haml +++ b/app/views/locomotive/pages/_editable_elements.html.haml @@ -5,7 +5,7 @@ #editable-elements .nav - grouped_editable_elements.keys.each_with_index do |name, index| - = link_to content_tag(:span, name.try(:humanize).gsub('\'', '') || t('locomotive.pages.form.default_block')), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}" + = link_to name.try(:humanize).gsub('\'', '') || t('locomotive.pages.form.default_block'), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}" .clear .wrapper diff --git a/app/views/locomotive/pages/_form.html.haml b/app/views/locomotive/pages/_form.html.haml index f741cf5b..5c4f3124 100644 --- a/app/views/locomotive/pages/_form.html.haml +++ b/app/views/locomotive/pages/_form.html.haml @@ -1,4 +1,5 @@ - content_for :head do + = render :partial => '/locomotive/content_assets/picker' = render :partial => '/locomotive/theme_assets/picker' - if can?(:manage, @page) diff --git a/app/views/locomotive/theme_assets/_picker.html.haml b/app/views/locomotive/theme_assets/_picker.html.haml index 2f0e7ce2..3b766f37 100644 --- a/app/views/locomotive/theme_assets/_picker.html.haml +++ b/app/views/locomotive/theme_assets/_picker.html.haml @@ -1,21 +1,21 @@ %script{ :type => 'text/html', :id => 'theme_image_picker' } - %h2!= t('locomotive.theme_assets.images.title') + %h2!= t('locomotive.theme_assets.image_picker.title') - %p.no-items{ :style => 'display: none' }!= t('.no_items') + %p.no-items{ :style => 'display: none' }!= t('locomotive.theme_assets.image_picker.no_items') %ul.list{ :style => 'display: none' } - .actions + .dialog-actions = link_to t('locomotive.buttons.close'), '#', :id => 'close-link' .upload-button-wrapper = file_field_tag 'theme_asset[source]' - = link_to t('locomotive.theme_assets.index.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link' + = link_to t('locomotive.theme_assets.image_picker.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link' %script{ :type => 'text/html', :id => 'theme_asset' } - %li + %li.item = link_to '{{local_path}}', '{{url}}' .more %span.size {{size}} diff --git a/config/locales/admin_ui.en.yml b/config/locales/admin_ui.en.yml index 739cf351..c3d7af91 100644 --- a/config/locales/admin_ui.en.yml +++ b/config/locales/admin_ui.en.yml @@ -185,7 +185,6 @@ en: title: Listing theme files help: "The theme files section is the place where you manage the files needed by your layout, snippets...etc. If you need to manage an image gallery, create a new content type instead.
Warning: you may not see all the assets depending on your rights." new: new file - upload: Upload files snippets: Snippets css_and_js: Style and javascript fonts: Fonts @@ -207,17 +206,16 @@ en: picker_link: Insert a file into the code choose_file: Choose file choose_plain_text: Choose plain text - images: - title: Listing images - no_items: "There are no files for now." + image_picker: + title: "Insert theme image" + no_items: "There are no images for now." + upload: "Upload theme images" - assets: - new: - title: New asset - help: "Fill in the form below to create your asset." - edit: - title: Edit asset - help: "Fill in the form below to update your asset." + content_assets: + picker: + title: "Insert media" + no_items: "There are no media for now." + upload: "Upload media" content_types: index: diff --git a/config/locales/admin_ui.fr.yml b/config/locales/admin_ui.fr.yml index bcd9f9d2..1a4242ef 100644 --- a/config/locales/admin_ui.fr.yml +++ b/config/locales/admin_ui.fr.yml @@ -186,7 +186,6 @@ fr: title: Liste des fichiers du thème help: "Les fichiers du thème sont utilisés pour construire le gabarit de vos pages. Si vous avez besoin d'une galerie d'images, créer un modèle sera plus adéquate.
Attention : Suivant les droits que vous avez, il se peut que vous ne puissiez pas voir tous les fichiers." new: nouveau fichier - upload: Uploader fichiers snippets: Snippets css_and_js: Style et javascript images: Images @@ -205,21 +204,19 @@ fr: help_image: "Utilisez votre image dans le template de vos pages ou snippets avec le code Liquid suivant : {{ '%{path}' | theme_image_tag }}.
. Votre image a comme dimensions : %{width}px x %{height}px.
" help_javascript: "Utilisez votre javascript dans le template de vos pages avec le code Liquid suivant : {{ '%{path}' | javascript_tag }}.
" help_stylesheet: "Utilisez votre stylesheet dans le template de vos pages avec le code Liquid suivant : {{ '%{path}' | stylesheet_tag }}.
" - form: choose_file: Choisir fichier choose_plain_text: Passer en mode texte - images: - title: Liste des images + image_picker: + title: Insérer une image du thème no_items: "Il n'y a pas d'images." + upload: "Uploader images du thème" - assets: - new: - title: "Nouveau média" - help: "Remplissez le formulaire ci-dessous pour créer votre média." - edit: - title: "Edition média" - help: "Remplissez le formulaire ci-dessous pour mettre à jour votre média." + content_assets: + picker: + title: "Insérer un média" + no_items: "Il n'y a aucun média." + upload: "Uploader média" content_types: index: diff --git a/lib/tasks/locomotive.rake b/lib/tasks/locomotive.rake index 2df1f1f1..3fa85199 100644 --- a/lib/tasks/locomotive.rake +++ b/lib/tasks/locomotive.rake @@ -71,6 +71,20 @@ namespace :locomotive do end end + desc "Namespace collections" + task :namespace_collections do + db = Mongoid.config.master['sites'].db + db.collections.each do |collection| + next if collection.name =~ /^locomotive_/ # already namespaced + + new_name = "locomotive_#{collection.name}" + new_name = "locomotive_content_assets" if collection.name =~ /^assets/ + + puts "renaming #{collection.name} into #{new_name}" + collection.rename_collection new_name + end + end + end -end \ No newline at end of file +end