tribeca_cms 0.1.1

data/app/assets/javascripts/locomotive/views/editable_elements/file_view.js.coffee

@@ -0,0 +1,74 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.FileView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'file input'
+
+  states:
+    change: false
+    delete: false
+
+  events:
+    'click a.change': 'toggle_change'
+    'click a.delete': 'toggle_delete'
+
+  render: ->
+    $(@el).html(ich.editable_file_input(@model.toJSON()))
+
+    # only in HTML 5
+    @$('input[type=file]').bind 'change', (event) =>
+      input = $(event.target)[0]
+      if input.files?
+        @model.set(source: input.files[0])
+
+    return @
+
+  after_render: ->
+    # do nothing
+
+  refresh: ->
+    @$('input[type=file]').unbind 'change'
+    @states = { 'change': false, 'delete': false }
+    @render()
+
+  toggle_change: (event) ->
+    @_toggle event, 'change',
+      on_change: =>
+        @$('a:first').hide() & @$('input[type=file]').show() & @$('a.delete').hide()
+      on_cancel: =>
+        @model.set(source: null)
+        @$('a:first').show() & @$('input[type=file]').val('').hide() & @$('a.delete').show()
+
+  toggle_delete: (event) ->
+    @_toggle event, 'delete',
+      on_change: =>
+        @$('a:first').addClass('deleted') & @$('a.change').hide()
+        @$('input[type=hidden].remove-flag').val('1')
+        @model.set('remove_source': true)
+      on_cancel: =>
+        @$('a:first').removeClass('deleted') & @$('a.change').show()
+        @$('input[type=hidden].remove-flag').val('0')
+        @model.set('remove_source': false)
+
+  _toggle: (event, state, options) ->
+    event.stopPropagation() & event.preventDefault()
+
+    button  = $(event.target)
+    label   = button.attr('data-alt-label')
+
+    unless @states[state]
+      options.on_change()
+    else
+      options.on_cancel()
+
+    button.attr('data-alt-label', button.html())
+
+    button.html(label)
+
+    @states[state] = !@states[state]
+
+  remove: ->
+    @$('input[type=file]').unbind 'change'
+    super

data/app/assets/javascripts/locomotive/views/editable_elements/long_text_view.js.coffee

@@ -0,0 +1,36 @@
+#= require ./short_text_view
+
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.LongTextView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'text input html'
+
+  render: ->
+    $(@el).html(ich.editable_text_input(@model.toJSON()))
+
+    return @
+
+  after_render: ->
+    settings = _.extend {}, @tinymce_settings(),    
+      oninit: ((editor) =>
+        $.cmd 'S', (() =>
+          @model.set(content: editor.getBody().innerHTML)
+          $(@el).parents('form').trigger('submit')
+        ), [], ignoreCase: true, document: editor.dom.doc),
+      onchange_callback: (editor) =>
+        @model.set(content: editor.getBody().innerHTML)
+
+    @$('textarea').tinymce(settings)
+
+  tinymce_settings: ->
+    _.extend { language: window.locale }, window.Locomotive.tinyMCE.defaultSettings
+
+  refresh: ->
+    # do nothing
+
+  remove: ->
+    @$('textarea').tinymce().destroy()
+    super

data/app/assets/javascripts/locomotive/views/editable_elements/short_text_view.js.coffee

@@ -0,0 +1,22 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.ShortTextView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'text input short'
+
+  render: ->
+    $(@el).html(ich.editable_text_input(@model.toJSON()))
+
+    @$('textarea').bind 'keyup', (event) =>
+      input = $(event.target)
+      @model.set(content: input.val())
+
+    return @
+
+  after_render: ->
+    # do nothing
+
+  refresh: ->
+    # do nothing

data/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee

@@ -0,0 +1,124 @@
+Locomotive.Views.InlineEditor ||= {}
+
+#= require ./toolbar_view
+
+class Locomotive.Views.InlineEditor.ApplicationView extends Backbone.View
+
+  el: 'body'
+
+  initialize: ->
+    super
+
+    @iframe = @$('#page iframe')
+
+    _.bindAll(@, '_$')
+
+    @toolbar_view = new Locomotive.Views.InlineEditor.ToolbarView(target: @iframe)
+
+    @content_assets_picker_view = new Locomotive.Views.ContentAssets.PickerView(collection: new Locomotive.Models.ContentAssetsCollection())
+
+  render: ->
+    super
+
+    @enable_iframe_autoheight()
+
+    @toolbar_view.render()
+
+    @content_assets_picker_view.render()
+
+  enable_iframe_autoheight: ->
+    iframe = @iframe
+
+    iframe.load =>
+      if @_$('meta[name=inline-editor]').size() > 0
+        # bind the resize event. When the iFrame's size changes, update its height
+        iframe_content = iframe.contents()
+        iframe_content.resize ->
+          elem = $(this)
+
+          if elem.outerHeight(true) > iframe.outerHeight(true) # Resize the iFrame.
+            iframe.css height: elem.outerHeight(true)
+
+        # Resize the iFrame immediately.
+        iframe_content.resize()
+      else
+        @toolbar_view.show_status('disabled', true).hide_editing_mode_block()
+
+        # keep the user in the admin mode
+        @enhance_iframe_links()
+
+  set_page: (attributes) ->
+    @page = new Locomotive.Models.Page(attributes)
+
+    @toolbar_view.model = @page
+
+    @enhance_iframe()
+
+    @toolbar_view.refresh()
+
+  enhance_iframe: ->
+    _window = @_window()
+
+    _window.Aloha.settings.locale = window.locale
+
+    # set main window title
+    window.document.title = _window.document.title
+
+    # allow to hit the refresh button and still stay on the same page
+    window.history.replaceState('OBJECT', 'TITLE', _window.location.href.replace('_edit', '_admin'))
+
+    # only but dirty way to handle back buttons with webkit.
+    if $.browser.webkit
+      window.history.pushState('OBJECT', 'TITLE', _window.location.href.replace('_edit', '_admin'))
+
+    # keep the user in the admin mode
+    @enhance_iframe_links _window.Aloha.jQuery
+
+    # notify the toolbar about changes
+    _window.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
+      @toolbar_view.notify editable.editable
+
+  enhance_iframe_links: (_jQuery) ->
+    toolbar_view  = @toolbar_view
+    _jQuery       ||= @_$
+    _window       = @_window()
+
+    _jQuery('a[class!="x-tab-right"]').live 'click', (event) ->
+      link  = _jQuery(event.target)
+      url   = link.attr('href')
+
+      if url? && url.indexOf('#') != 0 && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null && /^\/sites\//.exec(url) == null
+        # change the url only if aloha is enabled
+        unless link.parents('div.editable-long-text, div.editable-short-text').hasClass('aloha-editable')
+
+          url = '/index' if url == '/'
+
+          unless url.indexOf('_edit') > 0
+            if url.indexOf('?') > 0
+              url = url.replace('?', '/_edit?')
+            else
+              url = "#{url}/_edit"
+
+          # let the editor know that we are redirecting her/him to the target page
+          toolbar_view.show_status 'loading'
+
+          # redirection now !
+          link.attr('href', url)
+      else
+        # force the opening of a new window because we are in an iframe (security)
+        event.preventDefault()
+        window.open url
+
+  unique_dialog_zindex: ->
+    # returns the number of jQuery UI modals created in order to set a valid zIndex for each of them.
+    # Each modal window should have a different zIndex, otherwise there will be conflicts between them.
+    window.Locomotive.jQueryModals ||= 0
+
+    1050 + window.Locomotive.jQueryModals++
+
+  _window: ->
+     @iframe[0].contentWindow
+
+  _$: (selector) ->
+    $(selector, @_window().document)
+

data/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee

@@ -0,0 +1,145 @@
+Locomotive.Views.InlineEditor ||= {}
+
+class Locomotive.Views.InlineEditor.ToolbarView extends Backbone.View
+
+  el: '#toolbar .inner'
+
+  events:
+    'change .editing-mode input[type=checkbox]':  'toggle_editing_mode'
+    'click  .back a':                             'back'
+    'click  .element-actions a.save':             'save_changes'
+    'click  .element-actions a.cancel':           'cancel_changes'
+
+  render: ->
+    super
+
+    @enable_editing_mode_checkbox()
+
+    @enable_content_locale_picker()
+
+    @
+
+  notify: (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()
+
+    @hide_editing_mode_block()
+
+  show_status: (status, growl) ->
+    growl ||= false
+
+    message = @$('h1').attr("data-#{status}-status")
+    @$('h1').html(message).removeClass().addClass(status)
+
+    $.growl('error', message) if growl
+
+    @
+
+  save_changes: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    previous_attributes = _.clone @model.attributes
+
+    @model.save {},
+      success: (model, response, xhr) =>
+        model.attributes = previous_attributes
+        @$('.element-actions').hide()
+        @show_editing_mode_block()
+      error: (model, xhr) =>
+        @$('.element-actions').hide()
+
+  cancel_changes: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    @options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href
+
+  back: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    if @model
+      window.location.href = @model.get('edit_url')
+    else
+      window.location.href = window.Locomotive.mounted_on + '/pages'
+
+  show_editing_mode_block: ->
+    @$('.editing-mode').show()
+
+  hide_editing_mode_block: ->
+    @$('.editing-mode').hide()
+
+  toggle_editing_mode: (event) ->
+    return if @editable_elements() == null
+
+    if $(event.target).is(':checked')
+      @editable_elements().aloha()
+    else
+      @editable_elements().removeClass('aloha-editable-highlight').mahalo()
+
+  editable_elements: ->
+    if @options.target[0].contentWindow.Aloha
+      @options.target[0].contentWindow.Aloha.jQuery('.editable-long-text, .editable-short-text')
+    else
+      null
+
+  enable_editing_mode_checkbox: ->
+    @$('.editing-mode input[type=checkbox]').checkToggle
+      on_label_color:   '#fff'
+      off_label_color:  '#bbb'
+
+  enable_content_locale_picker: ->
+    _window = @options.target[0].contentWindow
+    link    = @$('#content-locale-picker-link')
+    picker  = $('#content-locale-picker')
+
+    return if picker.size() == 0
+
+    link.bind 'click', (event) ->
+      event.stopPropagation() & event.preventDefault()
+      picker.toggle()
+
+    picker.find('li').bind 'click', (event) =>
+      selected  = $(event.target).closest('li')
+      locale    = selected.find('span.text').html()
+
+      picker.toggle()
+
+      window.content_locale = locale
+
+      url = @model.get('localized_fullpaths')[locale]
+      url = 'index' if url == ''
+      url = "/#{url}/_edit"
+
+      _window.location.href = url
+
+  select_locale: (locale) ->
+    _window = @options.target[0].contentWindow
+    link    = @$('#content-locale-picker-link')
+    picker  = $('#content-locale-picker')
+
+    # get the information about the locale
+    entry  = picker.find("li[data-locale=#{locale}]")
+    image  = entry.find('img').attr('src')
+    label  = entry.find('span.text').html()
+
+    # refresh the current entry
+    link.find('img').attr('src', image)
+    link.find('span.text').html(label)
+
+    # refresh the list of locales
+    picker.find('li.selected').removeClass('selected')
+    entry.addClass('selected')
+
+  refresh: ->
+    @select_locale(@model.get('lang'))
+
+    @$('h1').html(@model.get('title')).removeClass()
+
+    if @$('.editing-mode input[type=checkbox]').is(':checked')
+      @$('.editing-mode div.switchArea').trigger('click')
+
+    @$('.element-actions').hide()
+
+    @show_editing_mode_block()
+
+

data/app/assets/javascripts/locomotive/views/my_account/edit_view.js.coffee

@@ -0,0 +1,24 @@
+#= require ../shared/form_view
+
+Locomotive.Views.MyAccount ||= {}
+
+class Locomotive.Views.MyAccount.EditView extends Locomotive.Views.Shared.FormView
+
+  el: '#content'
+
+  events:
+    'submit': 'save'
+
+  initialize: ->
+    @model = new Locomotive.Models.CurrentAccount(@options.account)
+
+    Backbone.ModelBinding.bind @
+
+  render: ->
+    super()
+
+  save: (event) ->
+    if @model.get('locale') == window.locale
+      @save_in_ajax(event)
+
+

data/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -0,0 +1,162 @@
+#= require ../shared/form_view
+
+Locomotive.Views.Pages ||= {}
+
+class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
+
+  el: '#content'
+
+  events:
+    'change   #page_parent_id':       'change_page_url'
+    'click    a#image-picker-link':   'open_image_picker'
+    'click    a#copy-template-link':  'replace_template'
+    'submit':                         'save'
+
+  initialize: ->
+    _.bindAll(@, 'insert_image')
+
+    @model = new Locomotive.Models.Page(@options.page)
+
+    @touched_url = false
+
+    @image_picker_view = new Locomotive.Views.ThemeAssets.ImagePickerView
+      collection: new Locomotive.Models.ThemeAssetsCollection()
+      on_select:  @insert_image
+
+    @image_picker_view.render()
+
+    Backbone.ModelBinding.bind @
+
+    @editable_elements_view = new Locomotive.Views.EditableElements.EditAllView(collection: @model.get('editable_elements'))
+
+  render: ->
+    super()
+
+    # slugify the slug field from title
+    @slugify_title()
+
+    # the url gets modified by different ways so reflect the changes in the UI
+    @listen_for_url_changes()
+
+    # enable response type to be changed (xml, json, ...etc)
+    @enable_response_type_select()
+
+    # enable check boxes
+    @enable_templatized_checkbox()
+
+    @enable_redirect_checkbox()
+
+    @enable_other_checkboxes()
+
+    # liquid code textarea
+    @enable_liquid_editing()
+
+    # editable elements
+    @render_editable_elements()
+
+    return @
+
+  open_image_picker: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    @image_picker_view.editor = @editor
+    @image_picker_view.fetch_assets()
+
+  insert_image: (path) ->
+    text = "{{ '#{path}' | theme_image_url }}"
+    @editor.replaceSelection(text)
+    @image_picker_view.close()
+
+  replace_template: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    link = $(event.target).closest('a')
+
+    $.rails.ajax
+      url:       link.attr('href')
+      type:      'get'
+      dataType:  'json'
+      success:  (data) =>
+        @editor.setValue(data.raw_template)
+
+  enable_liquid_editing: ->
+    input = @$('#page_raw_template')
+
+    if input.size() > 0
+      @editor = CodeMirror.fromTextArea input.get()[0],
+        mode:             'liquid'
+        autoMatchParens:  false
+        lineNumbers:      true
+        passDelay:        50
+        tabMode:          'shift'
+        theme:            'default'
+        onChange: (editor) => @model.set(raw_template: editor.getValue())
+
+  after_inputs_fold: ->
+    @editor.refresh()
+
+  render_editable_elements: ->
+    @$('.formtastic fieldset.inputs:first').before(@editable_elements_view.render().el)
+    @editable_elements_view.after_render()
+
+  # Remove the editable elements and rebuild them
+  reset_editable_elements: ->
+    @editable_elements_view.remove()
+    @editable_elements_view.collection = @model.get('editable_elements')
+    @render_editable_elements()
+
+  # Just re-connect the model and the views (+ redraw the file fields)
+  refresh_editable_elements: ->
+    @editable_elements_view.unbind_model()
+    @editable_elements_view.collection = @model.get('editable_elements')
+    @editable_elements_view.refresh()
+
+  slugify_title: ->
+    @$('#page_title').slugify(target: @$('#page_slug'))
+    @$('#page_slug').bind 'change', ((event) => @touched_url = true)
+
+  listen_for_url_changes: ->
+    setInterval (=> (@change_page_url() & @touched_url = false) if @touched_url), 2000
+
+  change_page_url: ->
+    $.rails.ajax
+      url:        @$('#page_slug').attr('data-url')
+      type:       'get'
+      dataType:   'json'
+      data:       { parent_id:  @$('#page_parent_id').val(), slug: @$('#page_slug').val() }
+      success:    (data) =>
+        @$('#page_slug_input .inline-hints').html(data.url).effect('highlight')
+        if data.templatized_parent
+          @$('li#page_slug_input').show()
+          @$('li#page_templatized_input, li#page_target_klass_name_input').hide()
+        else
+          @$('li#page_templatized_input').show() unless @model.get('redirect')
+
+  enable_response_type_select: ->
+    @$('li#page_response_type_input').change (event) =>
+      if $(event.target).val() == 'text/html'
+        @$('li#page_redirect_input, li#page_redirect_url_input, li#page_redirect_type_input').show()
+      else
+        @model.set redirect: false
+        @$('li#page_redirect_input, li#page_redirect_url_input, li#page_redirect_type_input').hide()
+
+  enable_templatized_checkbox: ->
+    @_enable_checkbox 'templatized',
+      features:     ['slug', 'redirect', 'listed']
+      on_callback:  =>
+        @$('li#page_target_klass_name_input').show()
+      off_callback: =>
+        @$('li#page_target_klass_name_input').hide()
+
+    @$('li#page_templatized_input').hide() if @model.get('templatized_from_parent') == true
+
+  enable_redirect_checkbox: ->
+    @_enable_checkbox 'redirect',
+      features:     ['templatized', 'cache_strategy']
+      on_callback:  =>
+        @$('li#page_redirect_url_input, li#page_redirect_type_input').show()
+      off_callback: =>
+        @$('li#page_redirect_url_input, li#page_redirect_type_input').hide()
+
+  enable_other_checkboxes: ->
+    _.each ['published', 'listed'], (exp) =>
+      @$('li#page_' + exp + '_input input[type=checkbox]').checkToggle()