locomotivecms 3.0.1 → 3.1.0.rc1

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

@@ -48,7 +48,7 @@ class Locomotive.Views.Inputs.FileView extends Backbone.View
 
     window.application_view.drawer_view.close()
 
-    url = @absolute_url(data.url)
+    url = window.absolute_url(data.url)
 
     window.remote_file_to_base64 url, (base64) =>
       if base64
@@ -138,13 +138,6 @@ class Locomotive.Views.Inputs.FileView extends Backbone.View
     reader.onload = (e) -> callback(e.target.result)
     reader.readAsDataURL(file)
 
-  absolute_url: (url) ->
-    return url if url.indexOf('http') == 0
-
-    http = location.protocol
-    slashes = http.concat("//")
-    slashes.concat(window.location.host).concat(url)
-
   showEl: (el) -> el.removeClass('hide')
   hideEl: (el) -> el.addClass('hide')
 

data/app/assets/javascripts/locomotive/views/inputs/image_view.js.coffee

@@ -0,0 +1,84 @@
+Locomotive.Views.Inputs ||= {}
+
+class Locomotive.Views.Inputs.ImageView extends Backbone.View
+
+  events:
+    'click *[data-action=delete]':  'mark_file_as_deleted'
+    'click *[data-action=undo]':    'undo'
+    'click a.file-browse':          'open_content_assets_drawer'
+
+  initialize: ->
+    _.bindAll(@, 'change_file')
+    @pubsub_token = PubSub.subscribe 'file_picker.select', @change_file
+
+  render: ->
+    @$spinner = @$('.file-wrapper .spinner')
+
+    @urls =
+      default:  @$('.file-wrapper').data('default-url')
+      current:  @$('.file-wrapper').data('url')
+
+    @initial_state  = if @urls.current == '' then 'no_file' else 'existing_file'
+    @urls.current   = @urls.default if _.isEmpty(@urls.current)
+
+    @resize_format  = @$('.file-wrapper').data('resize')
+    @no_file_label  = @$('.file-wrapper').data('no-file-label')
+
+  open_content_assets_drawer: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    window.application_view.drawer_view.open(
+      $(event.target).attr('href'),
+      Locomotive.Views.ContentAssets.PickerView,
+      { parent_view: @ })
+
+  mark_file_as_deleted: (event) ->
+    if @initial_state == 'existing_file'
+      @current_filename = @$('.file-name').html()
+      @update_ui false, true, @urls.default, @no_file_label
+
+  undo: (event) ->
+    @update_ui true, false, @urls.current, @current_filename || @no_file_label
+
+  change_file: (msg, data) ->
+    return unless data.parent_view.cid == @.cid
+
+    window.application_view.drawer_view.close()
+
+    url = window.absolute_url(data.url)
+
+    # update the textfield storing the URL of the image
+    @set_file_url(url)
+
+    @current_filename ||= @$('.file-name').html()
+
+    @$spinner.show() & @update_filename(data.filename)
+
+    # ask for a cropped/resized version of the image
+    window.resize_image url, @resize_format, (resized_image) =>
+      @update_ui true, true, resized_image, data.filename
+      @$spinner.hide()
+
+  update_ui: (with_file, undo_enabled, url, filename) ->
+    @set_file_url('') unless with_file
+
+    if undo_enabled
+      @$('*[data-action=delete]').hide()
+      @$('*[data-action=undo]').show()
+    else
+      @$('*[data-action=undo]').hide()
+      @$('*[data-action=delete]').show() unless @initial_state == 'no_file'
+
+    @$('.file-image img').attr('src', url)
+
+    @update_filename(filename)
+
+  update_filename: (name) ->
+    @$('.file-name').html(name) unless _.isEmpty(name)
+
+  set_file_url: (url) ->
+    @$('.file input[type=text]').val(url)
+
+  remove: ->
+    super
+    PubSub.unsubscribe(@pubsub_token) if @pubsub_token?

data/app/assets/javascripts/locomotive/views/inputs/rte/edit_table_view.js.coffee

@@ -10,6 +10,8 @@ class Locomotive.Views.Inputs.Rte.EditTableView extends Backbone.View
     @editor   = @options.editor
 
   render: ->
+    return if @$link.size() == 0
+
     @create_popover()
     @attach_events()
 

data/app/assets/javascripts/locomotive/views/inputs/rte/file_view.js.coffee

@@ -9,7 +9,8 @@ class Locomotive.Views.Inputs.Rte.FileView extends Backbone.View
     picker:   false
 
   container:
-    dataset: []
+    dataset:
+      showdialogonselection: true
 
   initialize: ->
     _.bindAll(@, 'change_image', 'insert_file', 'hide')
@@ -28,8 +29,6 @@ class Locomotive.Views.Inputs.Rte.FileView extends Backbone.View
     command = @editor.toolbar.commandMapping['insertFile:null']
     command.dialog = @
 
-    # console.log "[insertFileView] attach_editor"
-
   create_popover: ->
     @$popover.show()
     @$link.popover
@@ -106,6 +105,9 @@ class Locomotive.Views.Inputs.Rte.FileView extends Backbone.View
       @$link.popover('show')
       @opened.popover = true
 
+  update: (state) ->
+    # do nothing
+
   hide: ->
     # console.log "[insertFileView] hide, opened =#{@opened}"
     if @opened.picker

data/app/assets/javascripts/locomotive/views/inputs/rte/image_view.js.coffee

@@ -0,0 +1,14 @@
+#= require ./file_view
+
+Locomotive.Views.Inputs.Rte ||= {}
+
+class Locomotive.Views.Inputs.Rte.ImageView extends Locomotive.Views.Inputs.Rte.FileView
+
+  initialize: ->
+    super()
+    @$link        = @$('a[data-wysihtml5-command=insertImage]')
+    @$popover     = @$link.next('.image-dialog-content')
+
+  attach_editor: ->
+    command = @editor.toolbar.commandMapping['insertImage:null']
+    command.dialog = @

data/app/assets/javascripts/locomotive/views/inputs/rte/link_view.js.coffee

@@ -6,7 +6,7 @@ class Locomotive.Views.Inputs.Rte.LinkView extends Backbone.View
 
   container:
     dataset:
-      showdialogonselection: true
+      showdialogonselection: false
 
   initialize: ->
     _.bindAll(@, 'apply', 'show', 'hide')
@@ -15,6 +15,8 @@ class Locomotive.Views.Inputs.Rte.LinkView extends Backbone.View
     @editor     = @options.editor
     @$content   = @$link.next('.link-dialog-content')
 
+    @$content.find('.input.select select:not(.disable-select2)').data('select2').$dropdown.addClass('rte-select2-dropdown')
+
   render: ->
     @attach_editor()
     @create_popover()
@@ -23,8 +25,8 @@ class Locomotive.Views.Inputs.Rte.LinkView extends Backbone.View
   create_popover: ->
     @$content.show()
     @$link.popover
-      container:  '.content'
-      placement:  'left'
+      container:  '.editable-elements'
+      placement:  'right'
       content:    @$content
       html:       true
       trigger:    'manual'
@@ -75,7 +77,11 @@ class Locomotive.Views.Inputs.Rte.LinkView extends Backbone.View
 
     @isOpen = true
 
+  update: (state) ->
+    # do nothing
+
   hide: ->
+    @_input_el('target', 'select').select2('close')
     @$link.popover('hide')
     @isOpen = false
 

data/app/assets/javascripts/locomotive/views/inputs/rte/table_view.js.coffee

@@ -13,6 +13,8 @@ class Locomotive.Views.Inputs.Rte.TableView extends Backbone.View
     @$content = @$link.next('.table-dialog-content')
 
   render: ->
+    return if @$link.size() == 0
+
     @create_popover()
 
     @attach_events()
@@ -21,8 +23,8 @@ class Locomotive.Views.Inputs.Rte.TableView extends Backbone.View
   create_popover: ->
     @$content.show()
     @$link.popover
-      container:  '.main'
-      placement:  'left'
+      container:  '.editable-elements'
+      placement:  'right'
       content:    @$content
       html:       true
       trigger:    'manual'
@@ -60,6 +62,9 @@ class Locomotive.Views.Inputs.Rte.TableView extends Backbone.View
 
     @$content.parents('form')[0].reset()
 
+  update: (state) ->
+    # do nothing
+
   hide: ->
     # console.log "[TableView] hide"
     @$link.popover('hide')

data/app/assets/javascripts/locomotive/views/inputs/rte_view.js.coffee.erb

@@ -9,7 +9,7 @@ class Locomotive.Views.Inputs.RteView extends Backbone.View
     'highlight textarea':   'highlight'
 
   initialize: ->
-    _.bindAll(@, 'register_keydown_event', 'on_content_change', 'resize')
+    _.bindAll(@, 'register_editor_events', 'on_content_change', 'resize')
 
     @tokens = [
       PubSub.subscribe 'application_view.resize', @resize
@@ -25,13 +25,12 @@ class Locomotive.Views.Inputs.RteView extends Backbone.View
 
     @editor = new wysihtml5.Editor $textarea.attr('id'),
       toolbar:        "wysihtml5-toolbar-#{$textarea.attr('id')}"
-      useLineBreaks:  false
+      useLineBreaks:  $textarea.data('inline')
       parserRules:    wysihtml5ParserRules
       stylesheets:    ['<%= stylesheet_path("locomotive/wysihtml5_editor") %>']
+      showToolbarDialogsOnSelection: false
 
-    @editor.on 'load', @register_keydown_event
-    @editor.on 'change', @on_content_change
-    @editor.on 'aftercommand:composer', @on_content_change
+    @editor.on 'load', @register_editor_events
 
   render_views: ->
     that = @
@@ -40,6 +39,7 @@ class Locomotive.Views.Inputs.RteView extends Backbone.View
         that.views = [
           that.build_and_render_view(Locomotive.Views.Inputs.Rte.LinkView),
           that.build_and_render_view(Locomotive.Views.Inputs.Rte.FileView),
+          that.build_and_render_view(Locomotive.Views.Inputs.Rte.ImageView),
           that.build_and_render_view(Locomotive.Views.Inputs.Rte.TableView),
           that.build_and_render_view(Locomotive.Views.Inputs.Rte.EditTableView)
         ]
@@ -74,11 +74,24 @@ class Locomotive.Views.Inputs.RteView extends Backbone.View
     view.render()
     view
 
-  register_keydown_event: ->
+  register_editor_events: ->
+    # keyup events
     @$('.wysihtml5-sandbox').contents().find('body').on 'keyup', =>
       @on_content_change()
 
+    # double click (links)
+    @$('.wysihtml5-sandbox').contents().find('body').on 'dblclick', =>
+      selectedNode = @editor.composer.selection.getSelectedNode()
+      link         = wysihtml5.dom.getParentElement(selectedNode, { query: 'a' }, 4)
+
+      if link
+        @editor.toolbar.commandMapping['createLink:null'].link.click()
+
+    @editor.on 'change', @on_content_change
+    @editor.on 'aftercommand:composer', @on_content_change
+
   on_content_change: ->
+    console.log 'modified'
     PubSub.publish 'inputs.text_changed',
       view:     @
       content:  @editor.getValue()

data/app/assets/javascripts/locomotive/views/inputs/simple_image_view.js.coffee

@@ -1,35 +1,25 @@
+#= require ./image_view
+
 Locomotive.Views.Inputs ||= {}
 
-class Locomotive.Views.Inputs.SimpleImageView extends Backbone.View
+class Locomotive.Views.Inputs.SimpleImageView extends Locomotive.Views.Inputs.ImageView
 
-  events:
-    'click *[data-action=delete]':  'mark_file_as_deleted'
-    'click *[data-action=undo]':    'undo'
-    'change input[type=file]':      'change_file'
+  events: _.extend {}, Locomotive.Views.Inputs.ImageView.prototype.events,
+    'change input[type=file]': 'change_file'
 
   render: ->
-    @$spinner = @$('.file-wrapper .spinner')
+    super
+
     @$fields  =
       file:     @$('input[type=file]')
       remove:   @$('input[type=hidden].remove')
 
-    @urls =
-      default:  @$('.file-wrapper').data('default-url')
-      current:  @$('.file-wrapper').data('url')
-
-    @urls.current = @urls.default if _.isEmpty(@urls.current)
-
-    @resize_format  = @$('.file-wrapper').data('resize')
-    @no_file_label  = @$('.file-wrapper').data('no-file-label')
-    @initial_state  = if @urls.current? then 'existing_file' else 'no_file'
-
-  mark_file_as_deleted: (event) ->
-    if @initial_state == 'existing_file'
-      @current_filename = @$('.file-name').html()
-      @update_ui false, true, @urls.default, @no_file_label
-
   undo: (event) ->
-    @update_ui true, false, @urls.current, @current_filename || @no_file_label
+    # reset file input
+    @$fields.file.wrap('<form>').parent('form').trigger('reset')
+    @$fields.file.unwrap()
+
+    super
 
   change_file: (event) ->
     file = if event.target.files then event.target.files[0] else null
@@ -46,26 +36,13 @@ class Locomotive.Views.Inputs.SimpleImageView extends Backbone.View
         @update_ui true, true, resized_image, file.name
         @$spinner.hide()
 
-  image_to_base_64: (file, callback) ->
-    reader = new FileReader()
-    reader.onload = (e) -> callback(e.target.result)
-    reader.readAsDataURL(file)
-
   update_ui: (with_file, undo_enabled, url, filename) ->
     value = if with_file then '0' else '1'
     @$fields.remove.val(value)
 
-    if undo_enabled
-      @$('*[data-action=delete]').hide()
-      @$('*[data-action=undo]').show()
-    else
-      @$('*[data-action=undo]').hide()
-      @$('*[data-action=delete]').show()
-
-    @$('.file-image img').attr('src', url)
-
-    @update_filename(filename)
-
-  update_filename: (name) ->
-    @$('.file-name').html(name) unless _.isEmpty(name)
+    super
 
+  image_to_base_64: (file, callback) ->
+    reader = new FileReader()
+    reader.onload = (e) -> callback(e.target.result)
+    reader.readAsDataURL(file)

data/app/assets/javascripts/locomotive/views/shared/drawer_view.js.coffee

@@ -2,7 +2,7 @@ Locomotive.Views.Shared ||= {}
 
 class Locomotive.Views.Shared.DrawerView extends Backbone.View
 
-  el: 'section.drawer'
+  el: '.content-main > .drawer'
 
   delays:
     fade:   50 # see the _transitions.css.scss file
@@ -16,7 +16,7 @@ class Locomotive.Views.Shared.DrawerView extends Backbone.View
     super
 
   open: (url, view_klass, options = {}) ->
-    console.log "[DrawerView] open, stack(#{@stack.length}) opened = #{$('body').hasClass('drawer-opened')}, #{url}"
+    console.log "[DrawerView] open, stack(#{@stack.length}) opened = #{$(@el).hasClass('drawer-open')}, #{url}"
     entry = { url: url, view_klass: view_klass, options: options }
     @push(entry)
 
@@ -64,7 +64,8 @@ class Locomotive.Views.Shared.DrawerView extends Backbone.View
 
   hide: (entry, callback) ->
     if @stack.length == 0
-      $('body').removeClass('drawer-opened')
+      # $('body').removeClass('drawer-opened')
+      $(@el).removeClass('drawer-open')
     else
       entry.view.$el.addClass('fadeout') if entry?
 
@@ -84,9 +85,9 @@ class Locomotive.Views.Shared.DrawerView extends Backbone.View
 
   container: (preserve) ->
     if preserve? && preserve
-      @$('> .inner').find('> div')
+      @$('> .content-inner').find('> div')
     else
-      @$('> .inner').html('<div></div>').find('> div')
+      @$('> .content-inner').html('<div></div>').find('> div')
 
   _show: (entry, container) ->
     _klass      = entry.view_klass
@@ -95,4 +96,5 @@ class Locomotive.Views.Shared.DrawerView extends Backbone.View
     entry.view = new _klass(attributes)
     entry.view.render()
 
-    $('body').addClass('drawer-opened')
+    # $('body').addClass('drawer-opened')
+    $(@el).addClass('drawer-open')

data/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee

@@ -7,17 +7,21 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
   namespace: null
 
   events:
-    'submit form':            'save'
-    'ajax:aborted:required':  'show_empty_form_message'
+    'submit form':              'save'
+    'ajax:aborted:required':    'show_empty_form_message'
+    'keyup input, textarea':    'modifying'
 
   render: ->
     @inputs = []
 
     @display_active_nav()
 
+    @register_unsaved_content()
+
     @enable_hover()
 
     @enable_simple_image_inputs()
+    @enable_image_inputs()
     @enable_file_inputs()
     @enable_array_inputs()
     @enable_toggle_inputs()
@@ -33,6 +37,14 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
 
     return @
 
+  register_unsaved_content: ->
+    # reset the unsaved content since this is a new form
+    window.unsaved_content = false
+
+    @tokens = [
+      PubSub.subscribe 'inputs.text_changed', => @modifying()
+    ]
+
   display_active_nav: ->
     url = document.location.toString()
     if url.match('#')
@@ -51,6 +63,7 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
     @$('form button[type=submit], form input[type=submit]').button('reset')
 
   save: (event) ->
+    window.unsaved_content = false
     @change_state()
     @record_active_tab()
 
@@ -74,6 +87,13 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
       view.render()
       self.inputs.push(view)
 
+  enable_image_inputs: ->
+    self = @
+    @$('.input.image').each ->
+      view = new Locomotive.Views.Inputs.ImageView(el: $(@))
+      view.render()
+      self.inputs.push(view)
+
   enable_file_inputs: ->
     self = @
     @$('.input.file').each ->
@@ -99,17 +119,15 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
   enable_date_inputs: ->
     @$('.input.date input[type=text]').each ->
       $(@).datetimepicker
-        language: window.content_locale
-        pickTime: false
-        widgetParent: '.main'
+        locale: window.content_locale
+        widgetParent: $(this).parents('.form-wrapper')
         format: $(@).data('format')
 
   enable_datetime_inputs: ->
     @$('.input.date-time input[type=text]').each ->
       $(@).datetimepicker
-        language: window.content_locale
-        pickTime: true
-        widgetParent: '.main'
+        locale: window.content_locale
+        widgetParent: $(this).parents('.form-wrapper')
         use24hours: true
         useseconds: false
         format: $(@).data('format')
@@ -151,8 +169,12 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
       view.render()
       self.inputs.push(view)
 
+  modifying: (event) ->
+    window.unsaved_content = true
+
   remove: ->
     _.each @inputs, (view) -> view.remove()
+    _.each @tokens, (token) -> PubSub.unsubscribe(token)
 
     @$('.input.select select:not(.disable-select2)').select2('destroy')
     @$('.input.tags input[type=text]').tagsinput('destroy')