locomotivecms 3.0.0.rc2 → 3.0.0.rc3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f5fcc2bd87ac0d01a19c8ea5f798ff338f1eb8fc
-  data.tar.gz: b189780fd9fbc5c04631715245fa79a068d355f9
+  metadata.gz: adb0a5ebc0f40fc62072340ff10f15d6029d14bb
+  data.tar.gz: c7d3971de7bd5e22fc8d32b94445e3c6ff96f2cc
 SHA512:
-  metadata.gz: 0b3a1a9f8d51163f4c16999f78e02d9cbcde1b00875bbb8694be328d50d2afcece5af4f8eb087b6ebb0d0bae1322770f363a5100d99acd8785f148c86334762c
-  data.tar.gz: a48ea5fc1565b9a175ae2b3e515644fed3dd15664961c75a37ab152630108cd3052db6f50bd867f21381d6601ad2dfde8420d8180f3e57d25dcc99a0e72a8231
+  metadata.gz: 470554e8983fb56b3d2e88bc02dd1276b21baa7153dc9afcd8c98b29e4b4ea9ecb3cbe1eef5bba2df822da81024ac1682ec29eec4c157dd4337709bcf9499ea3
+  data.tar.gz: e38ef2a4463cd47412a61cc2843242e843db154d8e78f0e58486939535e6318b70453c0763fb5bd6c1eaf0884bca322f65cb35730513fd2180cf4421a732fa27

data/Gemfile

@@ -21,8 +21,8 @@ group :development do
   # gem 'custom_fields', path: '../gems/custom_fields' # for Developers
   # gem 'custom_fields', github: 'locomotivecms/custom_fields', ref: '15cceb66ed'
 
-  # gem 'locomotivecms_steam', path: '../in_progress/steam', require: false
-  # gem 'locomotivecms_steam', github: 'locomotivecms/steam', ref: 'c1d1120', require: false
+  # gem 'locomotivecms_steam', path: '../gems/steam', require: false
+  # gem 'locomotivecms_steam', github: 'locomotivecms/steam', ref: 'c9cb7f6', require: false
 
   # gem 'locomotive_liquid', path: '../gems/liquid' # for Developers
   # gem 'locomotivecms_solid', path: '../gems/solid' # for Developers

data/README.md

@@ -65,9 +65,10 @@ Here is our Transifex portal page: [https://www.transifex.com/locomotive/locomot
 
 Locomotive is an open source project, we encourage contributions. If you have found a bug and want to contribute a fix, or have a new feature you would like to add, follow the steps below to get your patch into the project:
 
-- Install ruby and mongoDB
+- Install ruby, mongoDB and phantomjs
 - Clone the project <code>git clone git@github.com:locomotivecms/engine.git</code>
 - Setup a virtual host entry for <code>test.example.com</code> to point to localhost
+- Start mongodb if it is not already running
 - Run the tests <code>bundle exec rake</code>
 - Write your failing tests
 - Make the tests pass

data/app/api/locomotive/api/entities/site_entity.rb

@@ -31,6 +31,14 @@ module Locomotive
           Locomotive::Dragonfly.resize_url site.picture.url, '100x100#'
         end
 
+        expose :preview_url do |site, opts|
+          Locomotive::Engine.routes.url_helpers.preview_url(site, host: opts[:env]['HTTP_HOST'])
+        end
+
+        expose :sign_in_url do |site, opts|
+          Locomotive::Engine.routes.url_helpers.new_locomotive_account_session_url(host: opts[:env]['HTTP_HOST'])
+        end
+
       end
 
     end

data/app/api/locomotive/api/exception_rescuers.rb

@@ -8,7 +8,7 @@ module Locomotive
       included do
 
         rescue_from :all do |e|
-          Rails.logger.error "[API]" + e.message + "\"" + e.backtrace.join("\n")
+          Rails.logger.error "[API] " + e.message + "\n\t" + e.backtrace.join("\n\t")
 
           error_response(message: { error: e.message }, status: 500)
         end

data/app/api/locomotive/api/forms/content_entry_form.rb

@@ -26,12 +26,13 @@ module Locomotive
 
         def set_many_to_many(field, value)
           if value.blank?
-            dynamic_attributes[:"#{field.name}_ids"] = [] # reset it
+            dynamic_attributes[:"#{field.name.singularize}_ids"] = [] # reset it
           else
-            dynamic_attributes[:"#{field.name}_ids"] = fetch_entry_ids(field.class_name, value).sort do |a, b|
+            dynamic_attributes[:"#{field.name.singularize}_ids"] = fetch_entry_ids(field.class_name, value).sort do |a, b|
+              # keep the original order
               (value.index(a.first.to_s) || value.index(a.last)) <=>
               (value.index(b.first.to_s) || value.index(b.last))
-            end # keep the original order
+            end.map(&:first)
           end
         end
 

data/app/api/locomotive/api/helpers/params_helper.rb

@@ -10,16 +10,34 @@ module Locomotive
         # Much safer than permitted_params because it also uses the current policy
         # (Pundit) to filter the parameters.
         #
-        # Example:
+        # Examples:
         #
         # permitted_params_from_policy(current_site, :site)
         #
-        def permitted_params_from_policy(object_or_class, key)
-          _params     = permitted_params[key]
+        # If we want to deal with ActionDispatch::Http::UploadedFile instances
+        # instead of hashes (which would break the permitted attributes policy).
+        #
+        # permitted_params_from_policy(current_site, :site, [:picture])
+        #
+        def permitted_params_from_policy(object_or_class, key, file_inputs = nil)
+          _params = permitted_params[key]
+
+          build_uploaded_files_from_params!(_params, file_inputs) if file_inputs
+
           _attributes = policy(object_or_class).permitted_attributes
           ::ActionController::Parameters.new(_params).permit(*_attributes)
         end
 
+        def build_uploaded_files_from_params!(hash, list)
+          list.each do |name|
+            file_hash = hash[name]
+
+            next unless file_hash.try(:has_key?, :tempfile)
+
+            hash[name] = ActionDispatch::Http::UploadedFile.new(file_hash)
+          end
+        end
+
       end
 
     end

data/app/api/locomotive/api/resources/current_site_resource.rb

@@ -46,7 +46,7 @@ module Locomotive
           put do
             authorize current_site, :update?
 
-            current_site_form = Forms::SiteForm.new(permitted_params_from_policy(current_site, :site))
+            current_site_form = Forms::SiteForm.new(permitted_params_from_policy(current_site, :site, [:picture]))
             service.update(current_site, current_site_form.serializable_hash)
 
             present current_site, with: entity_klass

data/app/api/locomotive/api/resources/site_resource.rb

@@ -71,7 +71,7 @@ module Locomotive
           post do
             authorize Site, :create?
 
-            site_form = Forms::SiteForm.new(permitted_params_from_policy(Locomotive::Site, :site))
+            site_form = Forms::SiteForm.new(permitted_params_from_policy(Locomotive::Site, :site, [:picture]))
             site = service.create!(site_form.serializable_hash)
 
             present site, with: entity_klass
@@ -98,7 +98,7 @@ module Locomotive
             site = load_site
             authorize site, :update?
 
-            site_form = Forms::SiteForm.new(permitted_params_from_policy(site, :site))
+            site_form = Forms::SiteForm.new(permitted_params_from_policy(site, :site, [:picture]))
             site.assign_attributes(site_form.serializable_hash)
             site.save!
 

data/app/assets/javascripts/locomotive/not_logged_in.js.coffee

@@ -1,6 +1,6 @@
 #= require jquery
 #= require_self
-#= require underscore
+#= require underscore/underscore
 #= require locomotive/bootstrap-notify
 #= require ./utils/notify
 

data/app/assets/javascripts/locomotive/utils/core_ext.js

@@ -60,7 +60,7 @@
     doc.body.appendChild(script);
   }
 
-  window.addStylesheet = function(doc, src, options) {
+  window.addStylesheet = function(doc, src) {
     var stylesheet = doc.createElement('link');
     stylesheet.style = 'text/css';
     stylesheet.href = src;

data/app/assets/javascripts/locomotive/utils/wysihtml5.js.coffee

@@ -1,33 +1,23 @@
-# New command: strike
-wysihtml5.commands.strike =
-  exec: (composer, command, param) ->
-    wysihtml5.commands.formatInline.exec(composer, command, 'strike')
-
-  state: (composer, command) ->
-     wysihtml5.commands.formatInline.state(composer, command, 'strike')
-
-# New command: justify full
-# https://github.com/xing/wysihtml5/blob/56960b31adc37e07797382d8e8b10109f206b19c/src/commands/justifyFull.js
 ((wysihtml5) ->
-  CLASS_NAME  = "wysiwyg-text-align-justify"
-  REG_EXP     = /wysiwyg-text-align-[0-9a-z]+/g
 
-  wysihtml5.commands.justifyFull =
-    exec: (composer, command, param) ->
-      wysihtml5.commands.formatBlock.exec(composer, 'formatBlock', null, CLASS_NAME, REG_EXP)
+  # New command: strike
+  wysihtml5.commands.strike =
+    exec: (composer, command) ->
+      wysihtml5.commands.formatInline.exec(composer, command, 'STRIKE')
 
     state: (composer, command) ->
-      wysihtml5.commands.formatBlock.state(composer, "formatBlock", null, CLASS_NAME, REG_EXP)
+      wysihtml5.commands.formatInline.state(composer, command, 'STRIKE', null, null)
 
 )(wysihtml5)
 
+
 # New command: insert file
 ((wysihtml5) ->
 
   wysihtml5.commands.insertFile =
     exec: (composer, command, param) ->
       # do nothing
-      console.log "[insertFile] exec(#{command}, #{param})"
+      # console.log "[insertFile] exec(#{command}, #{param})"
 
     state: (composer, command) ->
       # console.log "[insertFile] state(#{command})"
@@ -36,4 +26,40 @@ wysihtml5.commands.strike =
 
 )(wysihtml5)
 
+# Replace command: insert table
+((wysihtml5) ->
+
+  buildHeader = (cols) ->
+    html = '<thead><tr>'
+    html += '<th><br></th>' for col in [0...cols]
+    html + '</tr></thead>'
+
+  buildBody = (cols, rows) ->
+    html = '<tbody>'
+    for row in [0...rows]
+      html += '<tr>'
+      html += '<td><br></td>' for col in [0...cols]
+      html += '</tr>'
+    html += '</tbody>'
+
+  wysihtml5.commands.createTable =
+    exec: (composer, command, options) ->
+      options = _.extend { cols: 3, rows: 3, class_name: '', head: true }, options
+
+      cols = parseInt(options.cols, 10)
+      rows = parseInt(options.rows, 10)
+
+      html = "<table class='#{options.class_name}'>"
+      html += buildHeader(cols) if options.head
+      html += buildBody(cols, rows)
+      html += '</table>'
+
+      composer.commands.exec('insertHTML', html)
+
+    state: (composer, command) ->
+      false
+
+)(wysihtml5)
+
+
 

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

@@ -35,10 +35,14 @@ class Locomotive.Views.ApplicationView extends Backbone.View
       Locomotive.notify couple[1], couple[0]
 
   automatic_max_height: ->
-    $(window).on 'resize', => @set_max_height()
+    $(window).on 'resize', =>
+      height = @set_max_height()
+      PubSub.publish 'application_view.resize', height: height
 
   set_max_height: ->
     max_height  = $(window).height()
     height      = max_height - @header_view.height()
 
     @$('> .wrapper').height(height)
+
+    height

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

@@ -4,6 +4,17 @@ class Locomotive.Views.EditableElements.EditView extends Locomotive.Views.Shared
 
   el: '.content > .inner'
 
+  events:
+    'click .form-group.rte label':  'select_editable_text'
+    'click .form-group.text label': 'select_editable_text'
+
+  initialize: ->
+    _.bindAll(@, 'highlight_form_group')
+
+    @tokens = [
+      PubSub.subscribe 'editable_elements.highlighted_text', @highlight_form_group
+    ]
+
   render: ->
     super
 
@@ -14,12 +25,44 @@ class Locomotive.Views.EditableElements.EditView extends Locomotive.Views.Shared
         @refresh_inputs $(data)
 
     $('.info-row select[name=block]').select2().on 'change', (event) =>
+      PubSub.publish 'editable_elements.block_selected', name: event.val
       @filter_elements_by(event.val)
 
     # editable control elements
     $('.editable-elements .form-group.input.select select').select2().on 'change', (event) =>
       @need_reload = true
 
+  select_editable_text: (event) ->
+    element_id = $(event.target).parents('.form-group').attr('id').replace('editable-text-', '')
+    PubSub.publish 'editable_elements.form_group_selected', element_id: element_id
+
+  highlight_form_group: (msg, data) ->
+    $form_group = $(@el).find("#editable-text-#{data.element_id}")
+
+    return false if $form_group.size() == 0
+
+    @filter_elements_by('')
+
+    highlight_effect = =>
+      $form_group.clearQueue().queue (next) ->
+        $(this).addClass('highlighted')
+        next()
+      .delay(200).queue (next) ->
+        $(this).removeClass('highlighted').find('input[type=text],textarea').trigger('highlight')
+        next()
+
+    # scroll to the form group and then highlight the textarea/input/editor
+    $parent = @$('.scrollable')
+    offset  = $form_group.position().top
+
+    if offset == 0
+      $parent.animate { scrollTop: 0 }, 500, 'swing', highlight_effect
+    else if offset < 0 || offset > $parent.height()
+      offset = $parent.scrollTop() + offset if offset < 0
+      $parent.animate { scrollTop: offset }, 500, 'swing', highlight_effect
+    else
+      highlight_effect()
+
   refresh_inputs: ($html) ->
     @inputs = _.map @inputs, (view) =>
       return view unless view.need_refresh?
@@ -39,3 +82,7 @@ class Locomotive.Views.EditableElements.EditView extends Locomotive.Views.Shared
         $el.parent().show()
       else
         $el.parent().hide()
+
+  remove: ->
+    super
+    _.each @tokens, (token) -> PubSub.unsubscribe(token)

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

@@ -0,0 +1,59 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.IframeView extends Backbone.View
+
+  el: '.preview iframe'
+
+  startup: true
+
+  initialize: ->
+    # shortcut
+    @window = $(@el)[0].contentWindow
+
+    # when the url of the iframe changes, process
+    $(@el).load (event) => @on_load(event)
+
+  reload: ->
+    $(@el).attr('src', @preview_url)
+
+  on_load: (event) ->
+    # Able to get the path to the edit form?
+    if (path = @edit_view_path())?
+      @preview_url = @window.document.location.href
+
+      if !@startup
+        History.replaceState({ live_editing: true, url: @preview_url }, '', path)
+        @options.parent_view.replace_edit_view(path)
+      else
+        @startup = false
+
+    @build_and_render_page_view()
+
+  edit_view_path: ->
+    # the browser might be unable to load the iframe because of
+    # the 'X-Frame-Options' option which is set to 'SAMEORIGIN'.
+    try
+      $document = $(@window.document)
+      return $document.find('meta[name=locomotive-editable-elements-path]').attr('content')
+    catch e
+      # reload the iframe with the previous url and display an error message
+      @reload()
+      Locomotive.notify $(@el).data('redirection-error'), 'warning'
+      return null
+
+  build_and_render_page_view: ->
+    @page_view.remove() if @page_view?
+    @page_view = new Locomotive.Views.EditableElements.PageView
+      el:           $(@window.document.body)
+      parent_view:  @
+      button_labels:
+        edit: $(@el).data('edit-label')
+    @page_view.render()
+
+    # insert the highlighter CSS (path to the CSS in the iframe data)
+    window.addStylesheet(@window.document, $(@el).data('style-path'))
+
+  remove: ->
+    super()
+    @page_view.remove() if @page_view?
+    _.each @tokens, (token) -> PubSub.unsubscribe(token)

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

@@ -8,108 +8,35 @@ class Locomotive.Views.EditableElements.IndexView extends Backbone.View
     'click .content .expand-button': 'expand_preview'
     'click .content .close-button':  'shrink_preview'
 
-  expand_preview: (event) ->
-    $('body').addClass('full-width-preview')
-
-  shrink_preview: (event) ->
-    $('body').removeClass('full-width-preview')
-
   initialize: ->
-    _.bindAll(@, 'refresh_elements', 'refresh_image', 'refresh_image_on_remove', 'refresh_text', 'reload_page')
-
     view_options = if $('body').hasClass('live-editing') then {} else { el: '.main' }
 
-    @startup            = true
-    @edit_view          = new Locomotive.Views.EditableElements.EditView(view_options)
-    @pubsub_text_token  = PubSub.subscribe('inputs.text_changed', @refresh_text)
+    @tokens = [
+      PubSub.subscribe 'editable_elements.highlighted_text', @shrink_preview
+    ]
 
-    @pubsub_image_changed_token = PubSub.subscribe('inputs.image_changed', @refresh_image)
-    @pubsub_image_removed_token = PubSub.subscribe('inputs.image_removed', @refresh_image_on_remove)
-    @pubsub_pages_sorted_token  = PubSub.subscribe('pages.sorted', @reload_page)
-
-    $('.preview iframe').load (event) => @on_iframe_load(event)
+    # order is important here
+    @views = [
+      new Locomotive.Views.EditableElements.EditView(view_options),
+      new Locomotive.Views.EditableElements.IframeView(parent_view: @)
+    ]
 
   render: ->
     super()
-    @edit_view.render()
-
-  refresh_elements: (type, view, callback) ->
-    $parent_view  = $(view.el).parent()
-    element_id    = $parent_view.find('input[name*="[id]"]').val()
-
-    $iframe_document = $($('iframe')[0].contentWindow.document)
-
-    callback($iframe_document.find("*[data-element-id=#{element_id}]"), element_id, $iframe_document)
-
-  refresh_image_on_remove: (msg, data) ->
-    data.url = $(data.view.el).parent().find('input[name*="[default_source_url]"]').val()
-    @refresh_image(msg, data)
-
-  refresh_image: (msg, data) ->
-    @refresh_elements 'image', data.view, ($elements, element_id, $iframe_document) ->
-      current_image_url = data.view.$('input[name*="[content]"]').val()
-      image_url         = data.url || current_image_url
+    _.invoke @views, 'render'
 
-      if $elements.size() > 0
-        $elements.each ->
-          if this.nodeName == 'IMG'
-            $(this).attr('src', image_url)
-          else
-            $(this).css("background-image", "url('" + image_url + "')")
-      else
-        # looking for DIVs with background-url property matching the previous image url
-        $el = $iframe_document.find("*[style*='#{current_image_url}']").attr('data-element-id', element_id)
-        $el.css("background-image", "url('" + image_url + "')")
-
-        # looking for IMGs with src attribute matching the previous image url
-        $el = $iframe_document.find("img[src*='#{current_image_url}']").attr('data-element-id', element_id)
-        $el.attr('src', image_url)
-
-  refresh_text: (msg, data) ->
-    @refresh_elements 'text', data.view, ($elements) ->
-      $elements.each -> $(this).html(data.content)
-
-  reload_page: (event) ->
-    $iframe = $('.preview iframe')
-    $target_window = $iframe[0].contentWindow
-    $iframe.attr('src', @preview_url)
-
-  on_iframe_load: (event) ->
-    $iframe = $('.preview iframe')
-    $target_window = $iframe[0].contentWindow
-    editable_elements_path = null
-
-    # unable to display the iframe in the frame because it set 'X-Frame-Options' to 'SAMEORIGIN'
-    try
-      $iframe_document = $($target_window.document)
-      editable_elements_path = $iframe_document.find('meta[name=locomotive-editable-elements-path]').attr('content')
-    catch e
-      # reload the iframe with the previous url and display an error message
-      $iframe.attr('src', @preview_url)
-      Locomotive.notify $iframe.data('redirection-error'), 'warning'
-      return
-
-    # store the url
-    @preview_url = $('.preview iframe')[0].contentWindow.document.location.href
+  expand_preview: (event) ->
+    $('body').addClass('full-width-preview')
 
-    if editable_elements_path? && @startup == false
-      History.replaceState({ live_editing: true, url: @preview_url }, '', editable_elements_path)
-      @replace_edit_view(editable_elements_path)
-    else
-      @startup = false
+  shrink_preview: (event) ->
+    $('body').removeClass('full-width-preview')
 
   replace_edit_view: (url) ->
-    $(@edit_view.el).load url, =>
-      @edit_view.remove()
-      @edit_view = new Locomotive.Views.EditableElements.EditView()
-      @edit_view.render()
+    $(@views[0].el).load url, =>
+      @views[0].remove()
+      (@views[0] = new Locomotive.Views.EditableElements.EditView()).render()
 
   remove: ->
-    super
-
-    @edit_view.remove()
-
-    PubSub.unsubscribe(@pubsub_image_changed_token)
-    PubSub.unsubscribe(@pubsub_image_removed_token)
-    PubSub.unsubscribe(@pubsub_text_token)
-    PubSub.unsubscribe(@pubsub_pages_sorted_token)
+    super()
+    _.each @tokens, (token) -> PubSub.unsubscribe(token)
+    _.invoke @views, 'remove'

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

@@ -0,0 +1,81 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.PageView extends Backbone.View
+
+  initialize: ->
+    _.bindAll(@, 'refresh_all', 'refresh_text', 'refresh_image', 'refresh_image_on_remove', 'scroll_to_block', 'scroll_to_element')
+
+    # Global event subscriptions
+    @tokens = [
+      PubSub.subscribe 'editable_elements.block_selected',      @scroll_to_block
+      PubSub.subscribe 'editable_elements.form_group_selected', @scroll_to_element
+      PubSub.subscribe 'inputs.text_changed',                   @refresh_text,
+      PubSub.subscribe 'inputs.image_changed',                  @refresh_image,
+      PubSub.subscribe 'inputs.image_removed',                  @refresh_image_on_remove,
+      PubSub.subscribe 'pages.sorted',                          @refresh_all
+    ]
+
+    # create the highlighter view
+    @views = [new Locomotive.Views.EditableElements.TextHighLighterView(el: @el, button_labels: @options.button_labels)]
+
+  render: ->
+    # render the highlighter view
+    _.invoke @views, 'render'
+
+  scroll_to_block: (msg, data) ->
+    @_scroll_to @$("span.locomotive-block-anchor[data-element-id=\"#{data.name}\"]")
+
+  scroll_to_element: (msg, data) ->
+    @_scroll_to @$("span.locomotive-editable-text[data-element-id=\"#{data.element_id}\"]")
+
+  _scroll_to: (element) ->
+    return false if element.size() == 0
+    $(@el).animate({ scrollTop: element.offset().top }, 500)
+
+  refresh_all: (msg, data) ->
+    @options.parent_view.reload()
+
+  refresh_text: (msg, data) ->
+    @refresh_elements 'text', data.view, ($elements) ->
+      $elements.each -> $(this).html(data.content)
+
+  refresh_image_on_remove: (msg, data) ->
+    data.url = $(data.view.el).parent().find('input[name*="[default_source_url]"]').val()
+    @refresh_image(msg, data)
+
+  refresh_image: (msg, data) ->
+    @refresh_elements 'image', data.view, ($elements, element_id) =>
+      current_image_url = data.view.$('input[name*="[content]"]').val()
+      image_url         = data.url || current_image_url
+
+      if $elements.size() > 0
+        @replace_images($elements, image_url)
+      else
+        @replace_images_identified_by_url(current_image_url, image_url, element_id)
+
+  refresh_elements: (type, view, callback) ->
+    $form_view  = $(view.el).parent()
+    element_id  = $form_view.find('input[name*="[id]"]').val()
+
+    callback($(@el).find("*[data-element-id=#{element_id}]"), element_id)
+
+  replace_images: (images, new_image_url) ->
+    images.each ->
+      if this.nodeName == 'IMG'
+        $(this).attr('src', new_image_url)
+      else
+        $(this).css("background-image", "url('" + new_image_url + "')")
+
+  replace_images_identified_by_url: (current_image_url, new_image_url, element_id) ->
+    # looking for DIVs with background-url property matching the previous image url
+    $el = $(@el).find("*[style*='#{current_image_url}']").attr('data-element-id', element_id)
+    $el.css("background-image", "url('" + new_image_url + "')")
+
+    # looking for IMGs with src attribute matching the previous image url
+    $el = $(@el).find("img[src*='#{current_image_url}']").attr('data-element-id', element_id)
+    $el.attr('src', new_image_url)
+
+  remove: ->
+    super()
+    _.each @tokens, (token) -> PubSub.unsubscribe(token)
+    _.invoke @views, 'remove'