got a working version of the inline editor
This commit is contained in:
did
parent
ebe149110b
commit
89020e7cf5
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -3,6 +3,7 @@
|
|||
#= require jquery_ujs
|
||||
#= require underscore
|
||||
#= require backbone
|
||||
#= require locomotive/backbone.sync
|
||||
#= require locomotive/growl
|
||||
#= require locomotive/handlebars
|
||||
#= require locomotive/ICanHandlebarz
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
unless window.Aloha?
|
||||
window.Aloha = {}
|
||||
|
||||
window.Aloha.settings =
|
||||
logLevels: { 'error': true, 'warn': true, 'info': false, 'debug': false }
|
||||
errorhandling: true
|
||||
plugins:
|
||||
format:
|
||||
config: [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
|
||||
editables:
|
||||
'.editable-short-text' : [ 'b', 'i', 'u' ]
|
||||
|
||||
link:
|
||||
config: [ 'a' ]
|
||||
editables:
|
||||
'.editable-short-text': [ ]
|
||||
|
||||
list:
|
||||
config: [ 'ul' ]
|
||||
editables:
|
||||
'.editable-short-text': [ ]
|
||||
|
||||
i18n:
|
||||
available: ['en', 'fr', 'pt-BR', 'es', 'de', 'no', 'ru', 'nl']
|
||||
|
||||
sidebar:
|
||||
disabled: true
|
||||
|
|
@ -48,6 +48,10 @@
|
|||
var script = doc.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = src;
|
||||
if (options && options.onload) {
|
||||
script.onload = options.onload;
|
||||
delete(options.onload);
|
||||
}
|
||||
for (var key in options) {
|
||||
script.setAttribute(key, options[key]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,5 @@ $.growl.settings.dockCss = {
|
|||
width: '100%',
|
||||
zIndex: 50000
|
||||
};
|
||||
|
||||
// $.growl.settings.displayTimeout = 500;
|
||||
|
|
@ -27,15 +27,18 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
|
|||
@$('#toolbar .inner').html(@toolbar_view.refresh().render().el)
|
||||
|
||||
decorate_iframe: ->
|
||||
console.log('decorating iframe')
|
||||
|
||||
iframe = @iframe
|
||||
iframe.load =>
|
||||
# add js / css
|
||||
doc = iframe[0].contentWindow.document
|
||||
window.addStylesheet doc, '/assets/locomotive/aloha/css/aloha.css'
|
||||
window.addJavascript doc, '/assets/locomotive/utils/aloha_settings.js'
|
||||
window.addJavascript doc, '/assets/locomotive/aloha/lib/aloha.js',
|
||||
'data-aloha-plugins': 'common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste'
|
||||
window.addStylesheet doc, '/assets/locomotive/aloha/css/aloha.css'
|
||||
onload: =>
|
||||
@toolbar_view.enable()
|
||||
iframe[0].contentWindow.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
|
||||
@toolbar_view.change_editable_element editable.editable
|
||||
|
||||
# bind the resize event. When the iFrame's size changes, update its height
|
||||
iframe_content = iframe.contents().find('body')
|
||||
|
|
@ -47,87 +50,3 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
|
|||
|
||||
# Resize the iFrame immediately.
|
||||
iframe_content.resize()
|
||||
|
||||
# render: ->
|
||||
# super
|
||||
#
|
||||
# console.log('rendering')
|
||||
#
|
||||
# @enable_iframe_auto_height()
|
||||
#
|
||||
# @foo()
|
||||
#
|
||||
# @toolbar_view = new Locomotive.Views.
|
||||
#
|
||||
# set_page: (attributes) ->
|
||||
# @page = new Locomotive.Models.Page(attributes)
|
||||
#
|
||||
# window.foo = @page
|
||||
#
|
||||
# @$('#toolbar .inner').html(ich.toolbar(@page.toJSON()))
|
||||
#
|
||||
# enable_iframe_auto_height: ->
|
||||
# console.log('decorating iframe')
|
||||
#
|
||||
# console.log(@$('#page iframe html'))
|
||||
#
|
||||
# # @$('#page iframe').iframeAutoHeight
|
||||
# # debug: true
|
||||
# # callback: (callbackObject) =>
|
||||
# # $('body').css('overflow': 'visible')
|
||||
#
|
||||
# iframe = @$('#page iframe')
|
||||
# iframe.load =>
|
||||
# iframe_content = iframe.contents().find('body')
|
||||
#
|
||||
# # Bind the resize event. When the iframe's size changes, update its height as
|
||||
# # well as the corresponding info div.
|
||||
# iframe_content.resize ->
|
||||
# elem = $(this)
|
||||
#
|
||||
# # Resize the IFrame.
|
||||
# if elem.outerHeight(true) > $('body').outerHeight(true)
|
||||
# iframe.css height: elem.outerHeight(true)
|
||||
#
|
||||
# # Update the info div width and height.
|
||||
# # $('#iframe-info').text( 'IFRAME width: ' + elem.width() + ', height: ' + elem.height() );
|
||||
#
|
||||
# # Resize the Iframe and update the info div immediately.
|
||||
# iframe_content.resize()
|
||||
#
|
||||
# foo: ->
|
||||
# @$('#page iframe').load =>
|
||||
# # console.log 'iframe loaded'
|
||||
# doc = @$('#page iframe')[0].contentWindow.document
|
||||
#
|
||||
# script = doc.createElement('script')
|
||||
# script.type = 'text/javascript'
|
||||
# script.src = '/assets/locomotive/aloha/lib/aloha.js'
|
||||
# script.setAttribute('data-aloha-plugins', 'common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste')
|
||||
# doc.body.appendChild(script)
|
||||
#
|
||||
# stylesheet = doc.createElement('link')
|
||||
# stylesheet.style = 'text/css'
|
||||
# stylesheet.href = '/assets/locomotive/aloha/css/aloha.css'
|
||||
# stylesheet.media = 'screen'
|
||||
# stylesheet.rel = 'stylesheet'
|
||||
# doc.head.appendChild(stylesheet)
|
||||
#
|
||||
# # <link href="/assets/locomotive/aloha/css/aloha.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
# # {{ '/assets/locomotive/aloha/css/aloha.css' | stylesheet_tag }}
|
||||
#
|
||||
# # $("body", doc).append(script)
|
||||
#
|
||||
# # $('body', doc).append('<script src="assets/locomotive/aloha/lib/aloha.js" data-aloha-plugins="common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste,common/block"></script>')
|
||||
#
|
||||
# # <script src="/assets/locomotive/aloha/lib/aloha.js" data-aloha-plugins="common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste,common/block"></script>
|
||||
# # $('body', doc).append('<p>Hello world</p>');
|
||||
#
|
||||
#
|
||||
# # register_page_content: (iframe) ->
|
||||
# #
|
||||
# #
|
||||
# # console.log 'he he'
|
||||
#
|
||||
#
|
||||
#
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
|||
className: 'toolbar-view'
|
||||
|
||||
events:
|
||||
'change .edit input[type=checkbox]': 'toggle_inline_editing'
|
||||
'change .editing-mode input[type=checkbox]': 'toggle_editing_mode'
|
||||
'click .element-actions a.save': 'save_modifications'
|
||||
'click .element-actions a.cancel': 'cancel_modifications'
|
||||
|
||||
initialize: ->
|
||||
super
|
||||
|
|
@ -16,12 +18,42 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
|||
super
|
||||
$(@el).html(ich.toolbar(@model.toJSON()))
|
||||
|
||||
@enable_edit_checkbox()
|
||||
@enable_editing_mode_checkbox()
|
||||
|
||||
@
|
||||
|
||||
toggle_inline_editing: (event) ->
|
||||
console.log('toggle_inline_editing !!!')
|
||||
change_editable_element: (aloha_editable) ->
|
||||
console.log('changing editable_element...')
|
||||
|
||||
window.bar = aloha_editable
|
||||
|
||||
element_id = aloha_editable.obj.attr('data-element-id')
|
||||
@model.get('editable_elements').get(element_id).set
|
||||
content: aloha_editable.getContents()
|
||||
|
||||
@$('.element-actions').show()
|
||||
|
||||
save_modifications: (event) ->
|
||||
event.stopPropagation() & event.preventDefault()
|
||||
|
||||
previous_attributes = _.clone @model.attributes
|
||||
|
||||
@model.save {},
|
||||
success: (model, response, xhr) =>
|
||||
model.attributes = previous_attributes
|
||||
@$('.element-actions').hide()
|
||||
error: (model, xhr) =>
|
||||
@$('.element-actions').hide()
|
||||
|
||||
cancel_modifications: (event) ->
|
||||
event.stopPropagation() & event.preventDefault()
|
||||
@options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href;
|
||||
|
||||
enable: ->
|
||||
@options.target[0].contentWindow.Aloha.settings.locale = window.locale;
|
||||
@$('.editing-mode').show()
|
||||
|
||||
toggle_editing_mode: (event) ->
|
||||
if $(event.target).is(':checked')
|
||||
@editable_elements().aloha()
|
||||
else
|
||||
|
|
@ -30,8 +62,8 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
|||
editable_elements: ->
|
||||
@options.target[0].contentWindow.Aloha.jQuery('.editable-long-text, .editable-short-text')
|
||||
|
||||
enable_edit_checkbox: ->
|
||||
@$('.edit input[type=checkbox]').checkToggle
|
||||
enable_editing_mode_checkbox: ->
|
||||
@$('.editing-mode input[type=checkbox]').checkToggle
|
||||
on_label_color: '#fff'
|
||||
off_label_color: '#bbb'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,5 +10,6 @@
|
|||
*= require codemirror/themes/default
|
||||
*= require locomotive/toggle.css
|
||||
*= require locomotive/liquid_mode.css
|
||||
*= require_tree ./locomotive/shared
|
||||
*= require_tree ./locomotive/backoffice
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,30 +5,6 @@
|
|||
@import "helpers";
|
||||
@import "box";
|
||||
|
||||
div.notice {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
|
||||
background: transparent image-url("locomotive/form/growl-notice.png") repeat-x 0 0;
|
||||
|
||||
&.error, &.alert {
|
||||
background-image: image-url("locomotive/form/growl-error.png");
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
@include single-text-shadow(#333, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ___ boxes ___ */
|
||||
|
||||
#wrapper #content > div.inner .box {
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
* the top of the compiled file, but it's generally better to create a new file per style scope.
|
||||
*= require locomotive/blueprint/screen.css
|
||||
*= require locomotive/toggle.css
|
||||
*= require locomotive/shared/growl.css
|
||||
*= require_tree ./inline_editor
|
||||
*/
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
@include single-text-shadow(#000, 0px, 1px, 0px);
|
||||
}
|
||||
|
||||
.edit {
|
||||
.editing-mode {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
line-height: 50px;
|
||||
|
|
@ -63,5 +63,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-actions {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
line-height: 50px;
|
||||
|
||||
a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@import "compass/css3/images";
|
||||
@import "compass/css3/text-shadow";
|
||||
|
||||
div.notice {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
@include background-image(linear-gradient(rgba(102, 176, 71, 0.9), rgba(111, 191, 77, 0.9) 80%, rgba(104, 180, 72, 0.9)));
|
||||
border-bottom: 2px solid rgba(88, 153, 62, 0.9);
|
||||
|
||||
&.error, &.alert {
|
||||
@include background-image(linear-gradient(rgba(212, 64, 64, 0.9), rgba(230, 69, 69, 0.9) 70%, rgba(216, 65, 65, 0.9)));
|
||||
border-bottom: 2px solid rgba(192, 57, 57, 0.9);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 80px;
|
||||
|
||||
margin: 0px;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
@include single-text-shadow(#333, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
|
@ -8,21 +8,21 @@ module Locomotive
|
|||
|
||||
before_filter :require_site
|
||||
|
||||
before_filter :authenticate_locomotive_account!, :only => [:edit]
|
||||
before_filter :authenticate_locomotive_account!, :only => [:show_toolbar]
|
||||
|
||||
before_filter :validate_site_membership, :only => [:edit]
|
||||
before_filter :validate_site_membership, :only => [:show_toolbar]
|
||||
|
||||
def show_toolbar
|
||||
render :layout => false
|
||||
end
|
||||
|
||||
def show
|
||||
render_locomotive_page
|
||||
end
|
||||
|
||||
def edit
|
||||
if params[:noiframe]
|
||||
@editing = true
|
||||
render_locomotive_page
|
||||
else
|
||||
render :layout => false
|
||||
end
|
||||
@editing = true
|
||||
render_locomotive_page
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -8,18 +8,11 @@ module Locomotive
|
|||
def call(env)
|
||||
response = @app.call(env)
|
||||
|
||||
# if env['warden'].authenticated?(:locomotive_account) &&
|
||||
# !env['PATH_INFO'].starts_with?("/assets") &&
|
||||
# !env['PATH_INFO'].starts_with?("/#{Locomotive.mounted_on}/") &&
|
||||
# !env['PATH_INFO'].ends_with?("/edit")
|
||||
|
||||
Rails.logger.debug "headers = #{response[1].inspect}"
|
||||
|
||||
unless response[1]['Editable'].blank?
|
||||
Rails.logger.debug "==> #{ENV['PATH_INFO'].inspect}, warden ? #{env['warden'].inspect} /#{env['warden'].user} / #{env['warden'].authenticated?(:locomotive_account)}"
|
||||
|
||||
html = response.last.body.to_s.gsub '</body>', %(
|
||||
<a href="_edit">Edit</a>
|
||||
<a href="_admin">Admin</a>
|
||||
</body>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -24,9 +24,7 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
window.application_view = new Locomotive.Views.InlinEditor.ApplicationView({
|
||||
flash: #{flash.to_json}
|
||||
});
|
||||
window.application_view = new Locomotive.Views.InlinEditor.ApplicationView();
|
||||
window.application_view.render();
|
||||
|
||||
});
|
||||
|
|
@ -35,13 +33,17 @@
|
|||
|
||||
%h1 {{title}}
|
||||
|
||||
.edit
|
||||
.editing-mode{ :style => 'display: none' }
|
||||
%label Editing mode:
|
||||
= check_box_tag 'edit', '1', false
|
||||
|
||||
.element-actions{ :style => 'display: none' }
|
||||
= link_to t('.save'), '#', :class => 'button save'
|
||||
= link_to t('.cancel'), '#', :class => 'button cancel'
|
||||
|
||||
%body
|
||||
#page
|
||||
%iframe{ :src => %(#{request.fullpath}?noiframe=true') , :scrolling => 'no', :frameborder => '0' }
|
||||
%iframe{ :src => request.fullpath.gsub('_admin', '_edit'), :scrolling => 'no', :frameborder => '0' }
|
||||
|
||||
#toolbar
|
||||
.background
|
||||
|
|
@ -65,10 +65,12 @@ Rails.application.routes.draw do
|
|||
resources :locomotive_entry_submissions, :controller => 'locomotive/public/content_entries', :path => 'entry_submissions/:slug'
|
||||
|
||||
# magic urls
|
||||
# match '/editable' => 'locomotive/public/rendering#edit', :path => '/'
|
||||
match '/_admin' => 'locomotive/public/pages#show_toolbar'
|
||||
match '*path/_admin' => 'locomotive/public/pages#show_toolbar'
|
||||
|
||||
match '/_edit' => 'locomotive/public/pages#edit'
|
||||
match '*path/_edit' => 'locomotive/public/pages#edit'
|
||||
|
||||
match '/' => 'locomotive/public/pages#show'
|
||||
match '/edit' => 'locomotive/public/pages#edit'
|
||||
match '*path/edit' => 'locomotive/public/pages#edit'
|
||||
# match '_/*path' => 'locomotive/public/rendering#show'
|
||||
match '*path' => 'locomotive/public/pages#show'
|
||||
end
|
||||
16
doc/TODO
16
doc/TODO
|
|
@ -72,9 +72,19 @@ x edit my site
|
|||
- back to default locale (if changed in settings)
|
||||
- front
|
||||
- inline editor
|
||||
- remove inline-editor tag
|
||||
- rack
|
||||
- iframe
|
||||
x rack
|
||||
x iframe
|
||||
(- remove inline-editor tag)
|
||||
- save editable elements
|
||||
- notification (growl)
|
||||
- i18n
|
||||
- change page
|
||||
- aloha:
|
||||
- i18n
|
||||
- insert image
|
||||
- remove sidebar
|
||||
|
||||
|
||||
- bugs:
|
||||
- unable to toggle the "required" check_boxes for content types
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
define( {
|
||||
'floatingmenu.tab.format': 'Mise en page',
|
||||
'floatingmenu.tab.insert': 'Insertion',
|
||||
'yes': 'Oui',
|
||||
'no': 'Non',
|
||||
'cancel': 'Annuel',
|
||||
'repository.no_item_found': 'Aucun élément trouvé.',
|
||||
'repository.loading': 'Chargement',
|
||||
'repository.no_items_found_yet': 'Aucun élément trouvé...'
|
||||
} );
|
||||
|
|
@ -1,20 +1,21 @@
|
|||
define( {
|
||||
'root': {
|
||||
'plugin.abbr.floatingmenu.tab.abbr': 'Abbreviation',
|
||||
'floatingmenu.tab.format': 'Format',
|
||||
'floatingmenu.tab.insert': 'Insert',
|
||||
'yes': 'Yes',
|
||||
'no': 'No',
|
||||
'cancel': 'Cancel',
|
||||
'repository.no_item_found': 'No item found.',
|
||||
'repository.loading': 'Loading',
|
||||
'repository.no_items_found_yet': 'No items found yet...'
|
||||
},
|
||||
'de': true
|
||||
/* 'eo': true,
|
||||
'fi': true,
|
||||
'fr': true,
|
||||
'it': true,
|
||||
'pl': true,
|
||||
'ru': true*/
|
||||
'root': {
|
||||
'plugin.abbr.floatingmenu.tab.abbr': 'Abbreviation',
|
||||
'floatingmenu.tab.format': 'Format',
|
||||
'floatingmenu.tab.insert': 'Insert',
|
||||
'yes': 'Yes',
|
||||
'no': 'No',
|
||||
'cancel': 'Cancel',
|
||||
'repository.no_item_found': 'No item found.',
|
||||
'repository.loading': 'Loading',
|
||||
'repository.no_items_found_yet': 'No items found yet...'
|
||||
},
|
||||
'de': true,
|
||||
'fr': true
|
||||
/* 'eo': true,
|
||||
'fi': true,
|
||||
|
||||
'it': true,
|
||||
'pl': true,
|
||||
'ru': true*/
|
||||
} );
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue