dante-editor 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e5f8c0fc81095096da19c3e387d79bedab7a3ec3
-  data.tar.gz: f11b2bc0404231a18de30c42b59169ae674db5af
+  metadata.gz: b5dcd7a183c79a6f6271bbae21e2a1ec3a615252
+  data.tar.gz: 4f54e71e88490742c38c48143f053bb1a12460ce
 SHA512:
-  metadata.gz: 61923bfbcb46e98d3314997362b4f13a3041a60e34b8dc97b4ab4c91c8f436a7a7e1c76c751fa3d55148cfe30746c6fd4be68fa7d5479a73f89145ebe03169a4
-  data.tar.gz: 3bca3b2e85212118e3f6dcb114fa7ed75cca273cc58d75f9cdd1f7843837dd507a69446e679792d696340796071b022e82ba8bfeab6535813f824f473984bc56
+  metadata.gz: 0317884b66ddf24193390df958943c6b05594e0304ffaa935571f6b4602362b2319d770ae6cfab7209376d1d25f28817d4619ac776d0fe06485aa7420d4c6a9b
+  data.tar.gz: 45458e4453f33a46da6ae21493be5411d6c6e65e70af57df9bd98e4810a802af07d9bed087749b14c30ca715c1575feb5536d98e890ff7e726b259f7ff45d344

data/Gemfile

@@ -13,6 +13,7 @@ gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
 gem "github-markup"
 gem "redcarpet"
 gem "sinatra"
+gem 'sinatra-contrib'
 gem "pry"
 
 gemspec

data/README.md

@@ -1,5 +1,8 @@
 #Dante Editor
 
+> Hey!, Did you know there is a new version of Dante?, check it out at https://github.com/michelson/dante2
+
+
 [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/michelson/Dante?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 (This library is free and will stay free, but needs your support to sustain its development. There are lots of desirable new features and maintenance to do. If you work for a company using Dante or have the means to do so, please consider financial support)
@@ -10,14 +13,13 @@
 
 ##Motivation:
 
-So far I have tried all the Medium.com wysiwyg clones out there, these are really great, and each have their pros and cons. [But none of them has all the features that the real medium editor provides.](http://howtox.com/medium-editor-clones-in-js/)
-so I wonder, How complicated could it be to write my own Medium wysiwyg clone?
+So far we have tried all the Medium.com wysiwyg clones out there, those are really great, and each have their pros and cons. [But none of them has all the features that the real medium editor provides.](http://howtox.com/medium-editor-clones-in-js/) So we wondered, How complicated could be write our own version of Medium's wysiwyg?
 
 ## Demo:
 
 [http://michelson.github.io/Dante/](http://michelson.github.io/Dante/)
 
-Until now I´ve been able to implement the following features:
+Until now We´ve implemented the following features:
 
 ## Features:
 
@@ -89,12 +91,16 @@ Until now I´ve been able to implement the following features:
 + **store_url:**   default: to none , url to store data with interval
 + **store_method** default: to POST , http verb to use when store_url is present.
 + **store_success_handler** default: to none. Option to set a function to handle success response for save operation, works only if store_url is present.
++ **failure_xhr_handler**: handles ajax store failure
 + **store_interval:** default: 1500 (1.5 secs), used when store_url is present.
 
++ **before_xhr_handler:** default: none, callback for handle beforeSend on **all** ajax calls 
++ **success_xhr_handler:** default: none, callback for handle success event on **all** ajax calls 
+
 #### Uploader:
 
 + **upload_url:**  default: /uploads.json
-+ **upload_callback** default: empty, allows optional way to handle the server response when image is uploaded This is useful when you don't have control on the backend response.
++ **upload_callback:** default: empty, allows optional way to handle the server response when image is uploaded This is useful when you don't have control on the backend response. the callback will return the xhr response , the node and the context. **When this option is empty the default behavior will expect a json response with the url `{url: "path/to/img.jpg"}`** (before 0.1.8 the expected reponse was a  string containing the url)
 + **image_delete_callback**: default: none, returns the image data before deletion. use this if you want to destroy image from the server.
 + **image_caption_placeholder** default: "Type caption for image (optional)"
 
@@ -136,6 +142,11 @@ in Gemfile
 
 ```gem "dante-editor"```
 
+Sanitize.js and Underscore.js are Dante dependencies- If you don't already have those installed, add those to your gemfile as well.
+
+```gem 'underscore-rails'```
+```gem 'rails-sanitize-js'```
+
 ### stylesheets:
 
 ```@import "dante";```
@@ -144,6 +155,9 @@ in Gemfile
 
 ```//= require 'dante'```
 
+If you just added the Underscore.js and Sanitize.js gems, add this as well:
+```//= require sanitize```
+```//= require underscore```
 
 ## Donate
 

data/app/assets/javascripts/dante/behaviors/save.js.coffee

@@ -16,13 +16,26 @@ class Dante.View.Behavior.Save extends Dante.View.Behavior
   store: ()->
     return unless @editor.store_url
     utils.log "HANDLE DATA STORE"
+    
     clearTimeout(@timeout)
+    
     @timeout = setTimeout =>
       @checkforStore()
     , @editor.store_interval
 
+  getLocks: ->
+    @editor.locks
+
   checkforStore: ()->
     utils.log "ENTER DATA STORE"
+
+    return unless @editor.store_url
+
+    # check upload in progress
+    if @getLocks() > 0
+      Debug "LOCKED!!"
+    return if @getLocks() > 0
+
     if @content is @editor.getContent()
       utils.log "content not changed skip store"
       @store()
@@ -35,6 +48,12 @@ class Dante.View.Behavior.Save extends Dante.View.Behavior
         dataType: "json"
         data:
           body: @editor.getContent()
+        beforeSend: (res)=>
+          @editor.before_xhr_handler(res) if @editor.before_xhr_handler
         success: (res)=>
           utils.log "STORING CONTENT"
           @editor.store_success_handler(res) if @editor.store_success_handler
+          @editor.success_xhr_handler(res) if @editor.success_xhr_handler
+        error: (status)=>
+          utils.log "FAIL STORING CONTENT"
+          @editor.failure_xhr_handler(status) if @editor.failure_xhr_handler

data/app/assets/javascripts/dante/behaviors/suggest.js.coffee

@@ -57,14 +57,20 @@ class Dante.View.Behavior.Suggest extends Dante.View.Behavior
         method: "get"
         dataType: "json"
         #data: { "#{@editor.suggest_query_param}": q }
-      .success (data)=>
-        if @editor.suggest_handler
-          @fetch_results = @editor.suggest_handler(data)
-        else
-          @fetch_results = data
-        cb(e) if cb
-      .error (data, err)=>
-        console.log "error fetching results"
+        beforeSend: (res)=>
+          @editor.before_xhr_handler(res) if @editor.before_xhr_handler
+        success: (data)=>
+          if @editor.suggest_handler
+            @fetch_results = @editor.suggest_handler(data)
+          else
+            @fetch_results = data
+          cb(e) if cb
+          
+          @editor.success_xhr_handler(data) if @editor.success_xhr_handler
+
+        error: (data, err)=>
+          console.log "error fetching results"
+
     , @editor.suggest_query_timeout
 
   insideQuery: ()->

data/app/assets/javascripts/dante/editor.js.coffee

@@ -49,6 +49,9 @@ class Dante.Editor extends Dante.View
     @store_url       = opts.store_url
     @store_method    = opts.store_method || "POST"
     @store_success_handler = opts.store_success_handler
+    @before_xhr_handler = opts.before_xhr_handler
+    @success_xhr_handler = opts.success_xhr_handler
+    @failure_xhr_handler = opts.failure_xhr_handler
     
     @spell_check     = opts.spellcheck || false
     @disable_title   = opts.disable_title || false
@@ -71,6 +74,8 @@ class Dante.Editor extends Dante.View
     @behaviors = []
     @popovers  = []
 
+    @locks = 0
+
     window.debugMode = opts.debug || false
 
     $(@el).addClass("debug") if window.debugMode

data/app/assets/javascripts/dante/menu.js.coffee

@@ -46,7 +46,7 @@ class Dante.Editor.Menu extends Dante.View
       if item == "divider"
         html += "<li class='dante-menu-divider'></li>"
       else
-        html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+        html += "<li class='dante-menu-button'><i class=\"dante-icon dante-icon-#{item}\" data-action=\"#{item}\"></i></li>"
 
     html += "</ul>"
     html
@@ -202,15 +202,15 @@ class Dante.Editor.Menu extends Dante.View
           utils.log "nothing to select"
 
       if tag.match /(?:h[1-6])/i
-        @toggleMenuButtons(@el, ".icon-bold, .icon-italic")
+        @toggleMenuButtons(@el, ".dante-icon-bold, .dante-icon-italic")
 
       else if tag is "indent"
-        @toggleMenuButtons(@el, ".icon-h3, .icon-h4, .icon-blockquote")
+        @toggleMenuButtons(@el, ".dante-icon-h3, .dante-icon-h4, .dante-icon-blockquote")
 
       @highlight(tag)
 
   highlight: (tag)->
-    $(".icon-#{tag}").parent("li").addClass("active")
+    $(".dante-icon-#{tag}").parent("li").addClass("active")
 
   toggleMenuButtons: (el,buttons)->
     $(el).find(buttons).parent("li").addClass("dante-menu-button--disabled")

data/app/assets/javascripts/dante/popovers/image.js.coffee

@@ -32,9 +32,9 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
   handleActiveClass: ->
     @findElement().find(".dante-menu-button").removeClass("active")
     if @findSelectedImage().hasClass("graf--layoutOutsetLeft")
-      @findElement().find(".icon-image-left").parent().addClass("active")
+      @findElement().find(".dante-icon-image-left").parent().addClass("active")
     else
-      @findElement().find(".icon-image-center").parent().addClass("active")
+      @findElement().find(".dante-icon-image-center").parent().addClass("active")
 
   activateLink: (element)->
     setTimeout =>
@@ -53,19 +53,19 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
         <ul class='dante-menu-buttons'>
 
           <li class='dante-menu-button align-left'>
-            <span class='tooltip-icon icon-image-left'></span>
+            <span class='tooltip-icon dante-icon-image-left'></span>
           </li>
 
           <li class='dante-menu-button align-wide hidden'>
-            <span class='tooltip-icon icon-image-wide'></span>
+            <span class='tooltip-icon dante-icon-image-wide'></span>
           </li>
 
           <li class='dante-menu-button align-fill hidden'>
-            <span class='tooltip-icon icon-image-fill'></span>
+            <span class='tooltip-icon dante-icon-image-fill'></span>
           </li>
 
           <li class='dante-menu-button align-center'>
-            <span class='tooltip-icon icon-image-center'></span>
+            <span class='tooltip-icon dante-icon-image-center'></span>
           </li>
 
         </ul>

data/app/assets/javascripts/dante/popovers/typeahead.js.coffee

@@ -53,7 +53,9 @@ class Dante.Editor.PopOverTypeAhead extends Dante.Editor.PopOver
     data = $(ev.currentTarget).data()
     $(".markup--query").replaceWith(@linkTemplate(data))
     @hide(0)
-    #@setRangeAt(new_paragraph[0])
+    # save content to server
+    @editor.save_behavior.store()
+
 
   linkTemplate: (data)->
     "<a href='#'

data/app/assets/javascripts/dante/tooltip.js.coffee

@@ -17,11 +17,11 @@ class Dante.Editor.Tooltip extends Dante.View
     _.each @widgets, (b)->
       data_action_value = if b.action_value then "data-action-value='#{b.action_value}'" else  ""
       menu += "<button class='inlineTooltip-button scale' title='#{b.title}' data-action='inline-menu-#{b.action}' #{data_action_value}>
-        <span class='tooltip-icon #{b.icon}'></span>
+        <span class='tooltip-icon dante-#{b.icon}'></span>
       </button>"
 
     "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'>
-        <span class='tooltip-icon icon-plus'></span>
+        <span class='tooltip-icon dante-icon-plus'></span>
     </button>
     <div class='inlineTooltip-menu'>
       #{menu}

data/app/assets/javascripts/dante/tooltip_widgets/embed.js.coffee

@@ -40,7 +40,7 @@ class Dante.View.TooltipWidget.Embed extends Dante.View.TooltipWidget
   getEmbedFromNode: (node)=>
     @node = $(node)
     @node_name = @node.attr("name")
-    @node.addClass("spinner")
+    @node.addClass("dante--spinner")
     url = "#{@current_editor.oembed_url}#{$(@node).text()}&scheme=https"
     $.getJSON(url)
       .success (data)=>
@@ -56,5 +56,5 @@ class Dante.View.TooltipWidget.Embed extends Dante.View.TooltipWidget
         replaced_node.find(".markup--anchor").attr("href", url ).text(url)
         @hide()
       .error (res)=>
-        @node.removeClass("spinner")
+        @node.removeClass("dante--spinner")
 

data/app/assets/javascripts/dante/tooltip_widgets/extract.js.coffee

@@ -46,7 +46,7 @@ class Dante.View.TooltipWidget.EmbedExtract extends Dante.View.TooltipWidget
   getExtractFromNode: (node)=>
     @node = $(node)
     @node_name = @node.attr("name")
-    @node.addClass("spinner")
+    @node.addClass("dante--spinner")
 
     $.getJSON("#{@current_editor.extract_url}#{$(@node).text()}")
     .success (data)=>
@@ -66,7 +66,7 @@ class Dante.View.TooltipWidget.EmbedExtract extends Dante.View.TooltipWidget
         image_node.removeClass("mixtapeImage--empty u-ignoreBlock")
       @hide()
     .error (data)=>
-      @node.removeClass("spinner")
+      @node.removeClass("dante--spinner")
 
   getExtract: (url)=>
     $.getJSON("#{@current_editor.extract_url}#{url}").done (data)->

data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee

@@ -183,8 +183,8 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
 
   uploadFile: (file, node)=>
     n = node
-    handleUp = (jqxhr)=>
-      @uploadCompleted jqxhr, n
+    handleUp = (json_response)=>
+      @uploadCompleted json_response, n
 
     $.ajax
       type: "post"
@@ -196,11 +196,24 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
       cache: false
       contentType: false
 
+      beforeSend: (res)=>
+        @current_editor.locks += 1
+
+        @current_editor.before_xhr_handler(res) if @current_editor.before_xhr_handler
+
       success: (response) =>
-        response = @current_editor.upload_callback(response) if @current_editor.upload_callback
-        handleUp(response)
+        @current_editor.locks -= 1
+
+        if @current_editor.upload_callback
+          @current_editor.upload_callback(response, n, @)
+        else
+          handleUp(response)
+        
+        @current_editor.success_xhr_handler(response) if @current_editor.success_xhr_handler
+
         return
-      error: (jqxhr)=>
+      error: (jqxhr, status)=>
+        @current_editor.locks -= 1
         utils.log("ERROR: got error uploading file #{jqxhr.responseText}")
 
       processData: false
@@ -218,42 +231,8 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
       utils.log "complete"
       utils.log complete
 
-  uploadCompleted: (url, node)=>
+  uploadCompleted: (json, node)=>
     node.find("img")
-    .attr("src", url)
-    .data("src", url)
-    #return false
-
-  ###
-  # Handles the behavior of deleting images when using the backspace key
-  #
-  # @param {Event} e    - The backspace event that is being handled
-  # @param {Node}  node - The node the backspace was used in, assumed to be from te editor's getNode() function
-  #
-  # @return {Boolean} true if this function should scape the default behavior
-  ###
-  handleBackspaceKey: (e, node) =>
-    # this is not needed here since we are handling backspace for images in image behavior
-    ###
-    utils.log "handleBackspaceKey on uploader widget"
-   
-    # remove graf figure if is selected but not in range (not focus on caption)
-    if $(node).hasClass("is-selected") && $(node).hasClass("graf--figure")
-      # exit if selection is on caption
-      anchor_node = @current_editor.selection().anchorNode
-      
-      # return false unless backspace is in the first char
-      if ( anchor_node? && $(anchor_node.parentNode).hasClass("imageCaption"))
-        if @current_editor.isFirstChar()
-          return true
-        else
-          return false
-
-    else if $(".is-selected").hasClass("is-mediaFocused")
-      # assume that select node is the current media element
-      # if it's focused when backspace it means that it should be removed
-      utils.log("Replacing selected node")
-      @current_editor.replaceWith("p", $(".is-selected"))
-      @current_editor.setRangeAt($(".is-selected")[0])
-      return true
-    ###
+    .attr("src", json.url)
+    .data("src", json.url)
+    #return false

data/app/assets/stylesheets/dante/_graf.scss

@@ -24,7 +24,7 @@
   margin-bottom: 30px;
 }
 
-.graf--p.spinner{
+.graf--p.dante--spinner{
   position:relative;
 }
 

data/app/assets/stylesheets/dante/_icons.scss

@@ -12,25 +12,25 @@
   }
 }
 
-.icon-h2:before                   { content: ""; }
-.icon-h3:before                   { content: "H1"; }
-.icon-h4:before                   { content: "H2"; }
-.icon-p:before                    { content:  "P"; }
-.icon-code:before                 { content: ""; }
-.icon-insertorderedlist:before    { content: ""; }
-.icon-insertunorderedlist:before  { content: ""; }
-.icon-inserthorizontalrule:before { content: ""; }
-.icon-indent:before               { content: ""; }
-.icon-outdent:before              { content: ""; }
-.icon-bold:before                 { content: ""; }
-.icon-italic:before               { content: ""; }
-.icon-underline:before            { content: ""; }
-.icon-createlink:before           { content: ""; }
-.icon-blockquote:before           { content: ""; }
+.dante-icon-h2:before                   { content: ""; }
+.dante-icon-h3:before                   { content: "H1"; }
+.dante-icon-h4:before                   { content: "H2"; }
+.dante-icon-p:before                    { content:  "P"; }
+.dante-icon-code:before                 { content: ""; }
+.dante-icon-insertorderedlist:before    { content: ""; }
+.dante-icon-insertunorderedlist:before  { content: ""; }
+.dante-icon-inserthorizontalrule:before { content: ""; }
+.dante-icon-indent:before               { content: ""; }
+.dante-icon-outdent:before              { content: ""; }
+.dante-icon-bold:before                 { content: ""; }
+.dante-icon-italic:before               { content: ""; }
+.dante-icon-underline:before            { content: ""; }
+.dante-icon-createlink:before           { content: ""; }
+.dante-icon-blockquote:before           { content: ""; }
 
-.icon-h2:before,
-.icon-h3:before,
-.icon-h4:before {
+.dante-icon-h2:before,
+.dante-icon-h3:before,
+.dante-icon-h4:before {
   font-weight: bold;
 }
 
@@ -50,13 +50,13 @@
   }
 }
 
-.icon-image-center:before { content: "\e900"; }
-.icon-image-fill:before   { content: "\e901"; }
-.icon-image-left:before   { content: "\e902"; }
-.icon-image-wide:before   { content: "\e903"; }
+.dante-icon-image-center:before { content: "\e900"; }
+.dante-icon-image-fill:before   { content: "\e901"; }
+.dante-icon-image-left:before   { content: "\e902"; }
+.dante-icon-image-wide:before   { content: "\e903"; }
 
-.icon-video:before        { content: "\e600"; }
-.icon-image:before        { content: "\e601"; }
-.icon-plus:before         { content: "\e602"; }
-.icon-embed:before        { content: "\e603"; }
+.dante-icon-video:before        { content: "\e600"; }
+.dante-icon-image:before        { content: "\e601"; }
+.dante-icon-plus:before         { content: "\e602"; }
+.dante-icon-embed:before        { content: "\e603"; }
 

data/app/assets/stylesheets/dante/_menu.scss

@@ -115,6 +115,7 @@
     text-align: center;
     color: $dante-menu-icon-color;
     cursor: pointer;
+    vertical-align: top;
     font-size: $dante-menu-icon-size;
     line-height: $dante-menu-height;
     //height: $menu-button-height;

data/app/assets/stylesheets/dante/_utilities.scss

@@ -29,12 +29,12 @@
     to {-webkit-transform: rotate(360deg);}
 }
 
-.spinner {
+.dante--spinner {
   min-width: 24px;
   min-height: 24px;
 }
 
-.spinner:before {
+.dante--spinner:before {
   content: 'Loading…';
   position: absolute;
   top: 50%;
@@ -45,7 +45,7 @@
   margin-left: -10px;
 }
 
-.spinner:not(:required):before {
+.dante--spinner:not(:required):before {
   content: '';
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, .3);

data/config.ru

@@ -1,5 +1,7 @@
 require 'rubygems'
 require 'middleman/rack'
+require "sinatra/base"
+require "sinatra/json"
 
 class UploadServer < Sinatra::Base
 
@@ -11,14 +13,15 @@ class UploadServer < Sinatra::Base
 
   # Handle POST-request (Receive and save the uploaded file)
   post "/new.?:format?" do
-
+    content_type :json
+    
     name = [Time.now.to_i , params['file'][:filename]].join("-")
     path = File.join(File.dirname(__FILE__), 'tmp/images', name)
     File.open(path, "wb") do |f|
       f.write(params['file'][:tempfile].read)
     end
 
-    return "/uploads/images/#{name}"
+    json :url=> "/uploads/images/#{name}"
   end
 
 end

data/dist/css/dante-editor.css

@@ -21,11 +21,11 @@
 @-webkit-keyframes spinner {
   to {
     -webkit-transform: rotate(360deg); } }
-.spinner {
+.dante--spinner {
   min-width: 24px;
   min-height: 24px; }
 
-.spinner:before {
+.dante--spinner:before {
   content: 'Loading…';
   position: absolute;
   top: 50%;
@@ -35,7 +35,7 @@
   margin-top: -10px;
   margin-left: -10px; }
 
-.spinner:not(:required):before {
+.dante--spinner:not(:required):before {
   content: '';
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, 0.3);
@@ -201,54 +201,54 @@
   text-decoration: inherit;
   text-transform: none; }
 
-.icon-h2:before {
+.dante-icon-h2:before {
   content: ""; }
 
-.icon-h3:before {
+.dante-icon-h3:before {
   content: "H1"; }
 
-.icon-h4:before {
+.dante-icon-h4:before {
   content: "H2"; }
 
-.icon-p:before {
+.dante-icon-p:before {
   content: "P"; }
 
-.icon-code:before {
+.dante-icon-code:before {
   content: ""; }
 
-.icon-insertorderedlist:before {
+.dante-icon-insertorderedlist:before {
   content: ""; }
 
-.icon-insertunorderedlist:before {
+.dante-icon-insertunorderedlist:before {
   content: ""; }
 
-.icon-inserthorizontalrule:before {
+.dante-icon-inserthorizontalrule:before {
   content: ""; }
 
-.icon-indent:before {
+.dante-icon-indent:before {
   content: ""; }
 
-.icon-outdent:before {
+.dante-icon-outdent:before {
   content: ""; }
 
-.icon-bold:before {
+.dante-icon-bold:before {
   content: ""; }
 
-.icon-italic:before {
+.dante-icon-italic:before {
   content: ""; }
 
-.icon-underline:before {
+.dante-icon-underline:before {
   content: ""; }
 
-.icon-createlink:before {
+.dante-icon-createlink:before {
   content: ""; }
 
-.icon-blockquote:before {
+.dante-icon-blockquote:before {
   content: ""; }
 
-.icon-h2:before,
-.icon-h3:before,
-.icon-h4:before {
+.dante-icon-h2:before,
+.dante-icon-h3:before,
+.dante-icon-h4:before {
   font-weight: bold; }
 
 .tooltip-icon:before {
@@ -262,28 +262,28 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
-.icon-image-center:before {
+.dante-icon-image-center:before {
   content: "\e900"; }
 
-.icon-image-fill:before {
+.dante-icon-image-fill:before {
   content: "\e901"; }
 
-.icon-image-left:before {
+.dante-icon-image-left:before {
   content: "\e902"; }
 
-.icon-image-wide:before {
+.dante-icon-image-wide:before {
   content: "\e903"; }
 
-.icon-video:before {
+.dante-icon-video:before {
   content: "\e600"; }
 
-.icon-image:before {
+.dante-icon-image:before {
   content: "\e601"; }
 
-.icon-plus:before {
+.dante-icon-plus:before {
   content: "\e602"; }
 
-.icon-embed:before {
+.dante-icon-embed:before {
   content: "\e603"; }
 
 .dante-menu {
@@ -359,6 +359,7 @@
   text-align: center;
   color: #FFFFFF;
   cursor: pointer;
+  vertical-align: top;
   font-size: 16px;
   line-height: 42px;
   -webkit-user-select: none;
@@ -695,7 +696,7 @@
 .graf--pullquote {
   margin-bottom: 30px; }
 
-.graf--p.spinner {
+.graf--p.dante--spinner {
   position: relative; }
 
 .graf--h2 {

data/dist/js/dante-editor.js

@@ -9,7 +9,7 @@
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.1.7"
+    version: "0.1.8"
   };
 
 }).call(this);
@@ -504,6 +504,9 @@
       this.store_url = opts.store_url;
       this.store_method = opts.store_method || "POST";
       this.store_success_handler = opts.store_success_handler;
+      this.before_xhr_handler = opts.before_xhr_handler;
+      this.success_xhr_handler = opts.success_xhr_handler;
+      this.failure_xhr_handler = opts.failure_xhr_handler;
       this.spell_check = opts.spellcheck || false;
       this.disable_title = opts.disable_title || false;
       this.store_interval = opts.store_interval || 1500;
@@ -520,6 +523,7 @@
       this.widgets = [];
       this.behaviors = [];
       this.popovers = [];
+      this.locks = 0;
       window.debugMode = opts.debug || false;
       if (window.debugMode) {
         $(this.el).addClass("debug");
@@ -2376,8 +2380,21 @@
       })(this), this.editor.store_interval);
     };
 
+    Save.prototype.getLocks = function() {
+      return this.editor.locks;
+    };
+
     Save.prototype.checkforStore = function() {
       utils.log("ENTER DATA STORE");
+      if (!this.editor.store_url) {
+        return;
+      }
+      if (this.getLocks() > 0) {
+        Debug("LOCKED!!");
+      }
+      if (this.getLocks() > 0) {
+        return;
+      }
       if (this.content === this.editor.getContent()) {
         utils.log("content not changed skip store");
         return this.store();
@@ -2391,11 +2408,29 @@
           data: {
             body: this.editor.getContent()
           },
+          beforeSend: (function(_this) {
+            return function(res) {
+              if (_this.editor.before_xhr_handler) {
+                return _this.editor.before_xhr_handler(res);
+              }
+            };
+          })(this),
           success: (function(_this) {
             return function(res) {
               utils.log("STORING CONTENT");
               if (_this.editor.store_success_handler) {
-                return _this.editor.store_success_handler(res);
+                _this.editor.store_success_handler(res);
+              }
+              if (_this.editor.success_xhr_handler) {
+                return _this.editor.success_xhr_handler(res);
+              }
+            };
+          })(this),
+          error: (function(_this) {
+            return function(status) {
+              utils.log("FAIL STORING CONTENT");
+              if (_this.editor.failure_xhr_handler) {
+                return _this.editor.failure_xhr_handler(status);
               }
             };
           })(this)
@@ -2492,18 +2527,28 @@
           return _this.json_request = $.ajax({
             url: "" + _this.editor.suggest_url + "?" + _this.editor.suggest_query_param + "=" + q,
             method: "get",
-            dataType: "json"
-          }).success(function(data) {
-            if (_this.editor.suggest_handler) {
-              _this.fetch_results = _this.editor.suggest_handler(data);
-            } else {
-              _this.fetch_results = data;
-            }
-            if (cb) {
-              return cb(e);
+            dataType: "json",
+            beforeSend: function(res) {
+              if (_this.editor.before_xhr_handler) {
+                return _this.editor.before_xhr_handler(res);
+              }
+            },
+            success: function(data) {
+              if (_this.editor.suggest_handler) {
+                _this.fetch_results = _this.editor.suggest_handler(data);
+              } else {
+                _this.fetch_results = data;
+              }
+              if (cb) {
+                cb(e);
+              }
+              if (_this.editor.success_xhr_handler) {
+                return _this.editor.success_xhr_handler(data);
+              }
+            },
+            error: function(data, err) {
+              return console.log("error fetching results");
             }
-          }).error(function(data, err) {
-            return console.log("error fetching results");
           });
         };
       })(this), this.editor.suggest_query_timeout);
@@ -2608,7 +2653,6 @@
     __extends(Uploader, _super);
 
     function Uploader() {
-      this.handleBackspaceKey = __bind(this.handleBackspaceKey, this);
       this.uploadCompleted = __bind(this.uploadCompleted, this);
       this.updateProgressBar = __bind(this.updateProgressBar, this);
       this.uploadFile = __bind(this.uploadFile, this);
@@ -2808,8 +2852,8 @@
       var handleUp, n;
       n = node;
       handleUp = (function(_this) {
-        return function(jqxhr) {
-          return _this.uploadCompleted(jqxhr, n);
+        return function(json_response) {
+          return _this.uploadCompleted(json_response, n);
         };
       })(this);
       return $.ajax({
@@ -2825,16 +2869,30 @@
         })(this),
         cache: false,
         contentType: false,
+        beforeSend: (function(_this) {
+          return function(res) {
+            _this.current_editor.locks += 1;
+            if (_this.current_editor.before_xhr_handler) {
+              return _this.current_editor.before_xhr_handler(res);
+            }
+          };
+        })(this),
         success: (function(_this) {
           return function(response) {
+            _this.current_editor.locks -= 1;
             if (_this.current_editor.upload_callback) {
-              response = _this.current_editor.upload_callback(response);
+              _this.current_editor.upload_callback(response, n, _this);
+            } else {
+              handleUp(response);
+            }
+            if (_this.current_editor.success_xhr_handler) {
+              _this.current_editor.success_xhr_handler(response);
             }
-            handleUp(response);
           };
         })(this),
         error: (function(_this) {
-          return function(jqxhr) {
+          return function(jqxhr, status) {
+            _this.current_editor.locks -= 1;
             return utils.log("ERROR: got error uploading file " + jqxhr.responseText);
           };
         })(this),
@@ -2857,45 +2915,8 @@
       }
     };
 
-    Uploader.prototype.uploadCompleted = function(url, node) {
-      return node.find("img").attr("src", url).data("src", url);
-    };
-
-
-    /*
-     * Handles the behavior of deleting images when using the backspace key
-     *
-     * @param {Event} e    - The backspace event that is being handled
-     * @param {Node}  node - The node the backspace was used in, assumed to be from te editor's getNode() function
-     *
-     * @return {Boolean} true if this function should scape the default behavior
-     */
-
-    Uploader.prototype.handleBackspaceKey = function(e, node) {
-
-      /*
-      utils.log "handleBackspaceKey on uploader widget"
-         
-       * remove graf figure if is selected but not in range (not focus on caption)
-      if $(node).hasClass("is-selected") && $(node).hasClass("graf--figure")
-         * exit if selection is on caption
-        anchor_node = @current_editor.selection().anchorNode
-        
-         * return false unless backspace is in the first char
-        if ( anchor_node? && $(anchor_node.parentNode).hasClass("imageCaption"))
-          if @current_editor.isFirstChar()
-            return true
-          else
-            return false
-      
-      else if $(".is-selected").hasClass("is-mediaFocused")
-         * assume that select node is the current media element
-         * if it's focused when backspace it means that it should be removed
-        utils.log("Replacing selected node")
-        @current_editor.replaceWith("p", $(".is-selected"))
-        @current_editor.setRangeAt($(".is-selected")[0])
-        return true
-       */
+    Uploader.prototype.uploadCompleted = function(json, node) {
+      return node.find("img").attr("src", json.url).data("src", json.url);
     };
 
     return Uploader;
@@ -2957,7 +2978,7 @@
       var url;
       this.node = $(node);
       this.node_name = this.node.attr("name");
-      this.node.addClass("spinner");
+      this.node.addClass("dante--spinner");
       url = "" + this.current_editor.oembed_url + ($(this.node).text()) + "&scheme=https";
       return $.getJSON(url).success((function(_this) {
         return function(data) {
@@ -2976,7 +2997,7 @@
         };
       })(this)).error((function(_this) {
         return function(res) {
-          return _this.node.removeClass("spinner");
+          return _this.node.removeClass("dante--spinner");
         };
       })(this));
     };
@@ -3040,7 +3061,7 @@
     EmbedExtract.prototype.getExtractFromNode = function(node) {
       this.node = $(node);
       this.node_name = this.node.attr("name");
-      this.node.addClass("spinner");
+      this.node.addClass("dante--spinner");
       return $.getJSON("" + this.current_editor.extract_url + ($(this.node).text())).success((function(_this) {
         return function(data) {
           var iframe_src, image_node, replaced_node, tmpl;
@@ -3063,7 +3084,7 @@
         };
       })(this)).error((function(_this) {
         return function(data) {
-          return _this.node.removeClass("spinner");
+          return _this.node.removeClass("dante--spinner");
         };
       })(this));
     };
@@ -3119,9 +3140,9 @@
       _.each(this.widgets, function(b) {
         var data_action_value;
         data_action_value = b.action_value ? "data-action-value='" + b.action_value + "'" : "";
-        return menu += "<button class='inlineTooltip-button scale' title='" + b.title + "' data-action='inline-menu-" + b.action + "' " + data_action_value + "> <span class='tooltip-icon " + b.icon + "'></span> </button>";
+        return menu += "<button class='inlineTooltip-button scale' title='" + b.title + "' data-action='inline-menu-" + b.action + "' " + data_action_value + "> <span class='tooltip-icon dante-" + b.icon + "'></span> </button>";
       });
-      return "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'> <span class='tooltip-icon icon-plus'></span> </button> <div class='inlineTooltip-menu'> " + menu + " </div>";
+      return "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'> <span class='tooltip-icon dante-icon-plus'></span> </button> <div class='inlineTooltip-menu'> " + menu + " </div>";
     };
 
     Tooltip.prototype.findWidgetByAction = function(name) {
@@ -3461,9 +3482,9 @@
     ImageTooltip.prototype.handleActiveClass = function() {
       this.findElement().find(".dante-menu-button").removeClass("active");
       if (this.findSelectedImage().hasClass("graf--layoutOutsetLeft")) {
-        return this.findElement().find(".icon-image-left").parent().addClass("active");
+        return this.findElement().find(".dante-icon-image-left").parent().addClass("active");
       } else {
-        return this.findElement().find(".icon-image-center").parent().addClass("active");
+        return this.findElement().find(".dante-icon-image-center").parent().addClass("active");
       }
     };
 
@@ -3480,7 +3501,7 @@
     };
 
     ImageTooltip.prototype.template = function() {
-      return "<div class='dante-popover popover--Aligntooltip popover--top'> <div class='popover-inner'> <ul class='dante-menu-buttons'> <li class='dante-menu-button align-left'> <span class='tooltip-icon icon-image-left'></span> </li> <li class='dante-menu-button align-wide hidden'> <span class='tooltip-icon icon-image-wide'></span> </li> <li class='dante-menu-button align-fill hidden'> <span class='tooltip-icon icon-image-fill'></span> </li> <li class='dante-menu-button align-center'> <span class='tooltip-icon icon-image-center'></span> </li> </ul> </div> <div class='popover-arrow'> </div> </div>";
+      return "<div class='dante-popover popover--Aligntooltip popover--top'> <div class='popover-inner'> <ul class='dante-menu-buttons'> <li class='dante-menu-button align-left'> <span class='tooltip-icon dante-icon-image-left'></span> </li> <li class='dante-menu-button align-wide hidden'> <span class='tooltip-icon dante-icon-image-wide'></span> </li> <li class='dante-menu-button align-fill hidden'> <span class='tooltip-icon dante-icon-image-fill'></span> </li> <li class='dante-menu-button align-center'> <span class='tooltip-icon dante-icon-image-center'></span> </li> </ul> </div> <div class='popover-arrow'> </div> </div>";
     };
 
     ImageTooltip.prototype.positionPopOver = function(target) {
@@ -3573,7 +3594,8 @@
       console.log("Select option here!");
       data = $(ev.currentTarget).data();
       $(".markup--query").replaceWith(this.linkTemplate(data));
-      return this.hide(0);
+      this.hide(0);
+      return this.editor.save_behavior.store();
     };
 
     PopOverTypeAhead.prototype.linkTemplate = function(data) {
@@ -3726,7 +3748,7 @@
         if (item === "divider") {
           return html += "<li class='dante-menu-divider'></li>";
         } else {
-          return html += "<li class='dante-menu-button'><i class=\"dante-icon icon-" + item + "\" data-action=\"" + item + "\"></i></li>";
+          return html += "<li class='dante-menu-button'><i class=\"dante-icon dante-icon-" + item + "\" data-action=\"" + item + "\"></i></li>";
         }
       });
       html += "</ul>";
@@ -3919,9 +3941,9 @@
               utils.log("nothing to select");
           }
           if (tag.match(/(?:h[1-6])/i)) {
-            _this.toggleMenuButtons(_this.el, ".icon-bold, .icon-italic");
+            _this.toggleMenuButtons(_this.el, ".dante-icon-bold, .dante-icon-italic");
           } else if (tag === "indent") {
-            _this.toggleMenuButtons(_this.el, ".icon-h3, .icon-h4, .icon-blockquote");
+            _this.toggleMenuButtons(_this.el, ".dante-icon-h3, .dante-icon-h4, .dante-icon-blockquote");
           }
           return _this.highlight(tag);
         };
@@ -3929,7 +3951,7 @@
     };
 
     Menu.prototype.highlight = function(tag) {
-      return $(".icon-" + tag).parent("li").addClass("active");
+      return $(".dante-icon-" + tag).parent("li").addClass("active");
     };
 
     Menu.prototype.toggleMenuButtons = function(el, buttons) {

data/lib/dante-editor/version.rb

@@ -1,5 +1,5 @@
 require "dante-editor/version"
 
 module DanteEditor
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-19 00:00:00.000000000 Z
+date: 2016-11-25 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email: