no more flash uploader only HTML5 goodness
This commit is contained in:
parent
d21f32d849
commit
b60b1378f8
Gemfile
app
assets
javascripts/locomotive
models
utils
views
content_assets
shared
snippets
theme_assets
stylesheets/locomotive
controllers/locomotive
views/locomotive
doc
1
Gemfile
1
Gemfile
@ -25,7 +25,6 @@ gem 'rails-backbone', '0.5.4'
|
|||||||
gem 'handlebars-rails', :git => 'git://github.com/yabawock/handlebars-rails.git'
|
gem 'handlebars-rails', :git => 'git://github.com/yabawock/handlebars-rails.git'
|
||||||
gem 'codemirror-rails'
|
gem 'codemirror-rails'
|
||||||
gem 'tinymce-rails'
|
gem 'tinymce-rails'
|
||||||
gem 'uploadify-rails', :git => 'git://github.com/nragaz/uploadify-rails.git'
|
|
||||||
gem 'flash_cookie_session', '~> 1.1.1'
|
gem 'flash_cookie_session', '~> 1.1.1'
|
||||||
|
|
||||||
gem 'locomotive_liquid', '2.2.2', :require => 'liquid'
|
gem 'locomotive_liquid', '2.2.2', :require => 'liquid'
|
||||||
|
@ -1,9 +1,18 @@
|
|||||||
class Locomotive.Models.ContentAsset extends Backbone.Model
|
class Locomotive.Models.ContentAsset extends Backbone.Model
|
||||||
|
|
||||||
|
paramRoot: 'content_asset'
|
||||||
|
|
||||||
|
urlRoot: "#{Locomotive.mount_on}/content_assets"
|
||||||
|
|
||||||
initialize: ->
|
initialize: ->
|
||||||
|
@prepare()
|
||||||
|
|
||||||
|
prepare: ->
|
||||||
@set
|
@set
|
||||||
image: @get('content_type') == 'image'
|
image: @get('content_type') == 'image'
|
||||||
|
|
||||||
|
return @
|
||||||
|
|
||||||
class Locomotive.Models.ContentAssetsCollection extends Backbone.Collection
|
class Locomotive.Models.ContentAssetsCollection extends Backbone.Collection
|
||||||
|
|
||||||
model: Locomotive.Models.ContentAsset
|
model: Locomotive.Models.ContentAsset
|
||||||
|
@ -1,31 +0,0 @@
|
|||||||
window.Locomotive.Uploadify =
|
|
||||||
|
|
||||||
build: (el, options) ->
|
|
||||||
multipart_params = @_get_default_multipart_params()
|
|
||||||
|
|
||||||
el.uploadify
|
|
||||||
script: options.url
|
|
||||||
multi: true
|
|
||||||
queueID: null
|
|
||||||
buttonText: 'edit'
|
|
||||||
buttonImg: null
|
|
||||||
width: options.width || 30
|
|
||||||
height: options.height || 30
|
|
||||||
hideButton: true
|
|
||||||
wmode: 'transparent'
|
|
||||||
auto: true
|
|
||||||
fileExt: options.file_ext || '*.jpg;*.png;*.jpeg;*.gif'
|
|
||||||
fileDesc: 'Only .jpg, .png, .jpeg, .gif'
|
|
||||||
removeCompleted: true
|
|
||||||
fileDataName: options.data_name
|
|
||||||
scriptData: multipart_params
|
|
||||||
onComplete: (a, b, c, response, data) ->
|
|
||||||
model = JSON.parse(response)
|
|
||||||
options.success(model)
|
|
||||||
onError: (a, b, c, errorObj) ->
|
|
||||||
options.error(errorObj) if options.error
|
|
||||||
|
|
||||||
_get_default_multipart_params: ->
|
|
||||||
_.tap { _method: 'post', '_http_accept': 'application/json' }, (params) ->
|
|
||||||
params[$('meta[name=csrf-param]').attr('content')] = encodeURI(encodeURIComponent($('meta[name=csrf-token]').attr('content')));
|
|
||||||
params[$('meta[name=key-param]').attr('content')] = $('meta[name=key-token]').attr('content');
|
|
@ -15,14 +15,17 @@ class Locomotive.Views.ContentAssets.PickerView extends Locomotive.Views.Shared.
|
|||||||
@collection.fetch()
|
@collection.fetch()
|
||||||
|
|
||||||
build_uploader: (el, link) ->
|
build_uploader: (el, link) ->
|
||||||
window.Locomotive.Uploadify.build el,
|
link.bind 'click', (event) ->
|
||||||
url: link.attr('href')
|
event.stopPropagation() & event.preventDefault()
|
||||||
data_name: el.attr('name')
|
el.click()
|
||||||
height: link.outerHeight()
|
|
||||||
width: link.outerWidth()
|
el.bind 'change', (event) =>
|
||||||
file_ext: '*.png;*.gif;*.jpg;*.jpeg;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.txt;*.zip'
|
_.each event.target.files, (file) =>
|
||||||
success: (model) => @collection.add(model)
|
asset = new Locomotive.Models.ContentAsset(source: file)
|
||||||
error: (msg) => @shake()
|
asset.save {},
|
||||||
|
headers: { 'X-Flash': true }
|
||||||
|
success: (model, response) => @collection.add(model.prepare())
|
||||||
|
error: => @shake()
|
||||||
|
|
||||||
add_asset: (asset, first) ->
|
add_asset: (asset, first) ->
|
||||||
view = new Locomotive.Views.ContentAssets.PickerItemView model: asset, parent: @
|
view = new Locomotive.Views.ContentAssets.PickerItemView model: asset, parent: @
|
||||||
|
@ -31,8 +31,9 @@ class Locomotive.Views.Shared.AssetPickerView extends Backbone.View
|
|||||||
create_dialog: ->
|
create_dialog: ->
|
||||||
@dialog = $(@el).dialog
|
@dialog = $(@el).dialog
|
||||||
modal: true
|
modal: true
|
||||||
|
zIndex: 998
|
||||||
width: 650,
|
width: 650,
|
||||||
create: =>
|
create: (event, ui) =>
|
||||||
$('.ui-widget-overlay').bind 'click', => @close()
|
$('.ui-widget-overlay').bind 'click', => @close()
|
||||||
|
|
||||||
$(@el).prev().find('.ui-dialog-title').html(@$('h2').html())
|
$(@el).prev().find('.ui-dialog-title').html(@$('h2').html())
|
||||||
@ -41,18 +42,13 @@ class Locomotive.Views.Shared.AssetPickerView extends Backbone.View
|
|||||||
|
|
||||||
actions.find('#close-link').click (event) => @close(event)
|
actions.find('#close-link').click (event) => @close(event)
|
||||||
|
|
||||||
open: =>
|
open: (event, ui, extra) =>
|
||||||
actions = $(@el).parent().find('.ui-dialog-buttonpane')
|
actions = $(@el).parent().find('.ui-dialog-buttonpane')
|
||||||
el = actions.find('input[type=file]')
|
el = actions.find('input[type=file]')
|
||||||
link = actions.find('#upload-link')
|
link = actions.find('#upload-link')
|
||||||
|
|
||||||
@build_uploader(el, link)
|
@build_uploader(el, link)
|
||||||
|
|
||||||
actions.find('.button-wrapper').hover(
|
|
||||||
=> link.addClass('hover'),
|
|
||||||
=> link.removeClass('hover')
|
|
||||||
)
|
|
||||||
|
|
||||||
@open()
|
@open()
|
||||||
|
|
||||||
open: ->
|
open: ->
|
||||||
|
@ -53,7 +53,7 @@ class Locomotive.Views.Snippets.FormView extends Locomotive.Views.Shared.FormVie
|
|||||||
lineNumbers: false
|
lineNumbers: false
|
||||||
passDelay: 50
|
passDelay: 50
|
||||||
tabMode: 'shift'
|
tabMode: 'shift'
|
||||||
theme: 'default'
|
theme: 'default medium'
|
||||||
onChange: (editor) => @model.set(template: editor.getValue())
|
onChange: (editor) => @model.set(template: editor.getValue())
|
||||||
|
|
||||||
after_inputs_fold: ->
|
after_inputs_fold: ->
|
||||||
|
@ -55,7 +55,7 @@ class Locomotive.Views.ThemeAssets.FormView extends Locomotive.Views.Shared.Form
|
|||||||
|
|
||||||
enable_source_file: ->
|
enable_source_file: ->
|
||||||
# only in HTML 5
|
# only in HTML 5
|
||||||
@$('#theme_asset_source').bind 'change', (event) =>
|
@$('.formtastic #theme_asset_source').bind 'change', (event) =>
|
||||||
input = $(event.target)[0]
|
input = $(event.target)[0]
|
||||||
if input.files?
|
if input.files?
|
||||||
@model.set(source: input.files[0])
|
@model.set(source: input.files[0])
|
||||||
|
@ -18,13 +18,17 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Locomotive.Views.Shar
|
|||||||
@collection.fetch data: { content_type: 'image' }
|
@collection.fetch data: { content_type: 'image' }
|
||||||
|
|
||||||
build_uploader: (el, link) ->
|
build_uploader: (el, link) ->
|
||||||
window.Locomotive.Uploadify.build el,
|
link.bind 'click', (event) ->
|
||||||
url: link.attr('href')
|
event.stopPropagation() & event.preventDefault()
|
||||||
data_name: el.attr('name')
|
el.click()
|
||||||
height: link.outerHeight()
|
|
||||||
width: link.outerWidth()
|
el.bind 'change', (event) =>
|
||||||
success: (model) => @collection.add(model)
|
_.each event.target.files, (file) =>
|
||||||
error: (msg) => @shake()
|
asset = new Locomotive.Models.ThemeAsset(source: file)
|
||||||
|
asset.save {},
|
||||||
|
headers: { 'X-Flash': true }
|
||||||
|
success: (model) => @collection.add(model)
|
||||||
|
error: => @shake()
|
||||||
|
|
||||||
select_asset: (event) ->
|
select_asset: (event) ->
|
||||||
event.stopPropagation() & event.preventDefault()
|
event.stopPropagation() & event.preventDefault()
|
||||||
|
@ -9,4 +9,8 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
@include background-image(linear-gradient(top, #f0f0f0, #f9f9f9 4px, #f9f9f9 4px, #ffffff 12px, #ffffff));
|
@include background-image(linear-gradient(top, #f0f0f0, #f9f9f9 4px, #f9f9f9 4px, #ffffff 12px, #ffffff));
|
||||||
|
|
||||||
|
.medium {
|
||||||
|
height: 250px !important;
|
||||||
|
}
|
||||||
}
|
}
|
@ -102,22 +102,16 @@
|
|||||||
top: 8px;
|
top: 8px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
|
||||||
|
z-index: 1003;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@include light-button;
|
@include light-button;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.upload {
|
input[type=file] {
|
||||||
#theme_asset_sourceUploader, #content_asset_sourceUploader {
|
z-index: 1003;
|
||||||
position: absolute;
|
}
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
z-index: 1001;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
} // .button-wrapper.upload
|
|
||||||
} // .button-wrapper
|
} // .button-wrapper
|
||||||
|
|
||||||
} // .ui-dialog-buttonpane
|
} // .ui-dialog-buttonpane
|
||||||
|
@ -10,7 +10,6 @@ module Locomotive
|
|||||||
|
|
||||||
def create
|
def create
|
||||||
@content_asset = current_site.content_assets.create(params[:content_asset])
|
@content_asset = current_site.content_assets.create(params[:content_asset])
|
||||||
puts @content_asset.errors.inspect
|
|
||||||
respond_with @content_asset
|
respond_with @content_asset
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -9,10 +9,11 @@
|
|||||||
|
|
||||||
.dialog-actions
|
.dialog-actions
|
||||||
= link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
|
= link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
|
||||||
.button-wrapper.upload
|
|
||||||
= file_field_tag 'content_asset[source]'
|
|
||||||
= link_to t('.upload'), content_assets_url(:json), :class => 'new', :id => 'upload-link'
|
|
||||||
|
|
||||||
|
.button-wrapper.upload
|
||||||
|
= form_tag theme_assets_url(:json), :class => 'quick-upload' do
|
||||||
|
= file_field_tag 'theme_asset[source]', :multiple => 'multiple'
|
||||||
|
= link_to t('locomotive.theme_assets.image_picker.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link'
|
||||||
|
|
||||||
%script{ :type => 'text/html', :id => 'content_asset' }
|
%script{ :type => 'text/html', :id => 'content_asset' }
|
||||||
|
|
||||||
|
@ -8,9 +8,11 @@
|
|||||||
|
|
||||||
.dialog-actions
|
.dialog-actions
|
||||||
= link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
|
= link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
|
||||||
|
|
||||||
.button-wrapper.upload
|
.button-wrapper.upload
|
||||||
= file_field_tag 'theme_asset[source]'
|
= form_tag theme_assets_url(:json), :class => 'quick-upload' do
|
||||||
= link_to t('locomotive.theme_assets.image_picker.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link'
|
= file_field_tag 'theme_asset[source]', :multiple => 'multiple'
|
||||||
|
= 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' }
|
%script{ :type => 'text/html', :id => 'theme_asset' }
|
||||||
|
|
||||||
@ -20,4 +22,4 @@
|
|||||||
%span.size {{size}}
|
%span.size {{size}}
|
||||||
—
|
—
|
||||||
%span!= t('.updated_at')
|
%span!= t('.updated_at')
|
||||||
%span.date {{updated_at}}
|
%span.date {{updated_at}}
|
1
doc/TODO
1
doc/TODO
@ -42,6 +42,7 @@ x edit my site
|
|||||||
- list
|
- list
|
||||||
- crud
|
- crud
|
||||||
|
|
||||||
|
- disallow to click twice on the submit form button
|
||||||
- message to notify people if their browser is too old
|
- message to notify people if their browser is too old
|
||||||
- install a site by default at the first installation (without asking)
|
- install a site by default at the first installation (without asking)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user