dante-editor 0.0.12 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c9de1d8d9a9c05a633a0b47d59b4762f7a568440
-  data.tar.gz: a4ee6debde48072bafb683d2583d13027a27023e
+  metadata.gz: eba2467b8be034552237cb54293358466332638c
+  data.tar.gz: 0dae2099d83d79aaf498b58e6b9e28c8b2f4acde
 SHA512:
-  metadata.gz: 1ee1b7eddcbe0d0ecc2dfcfba17ec23bbd4c7dd51e516f637599fa21892ad28121bd241d938063087d245589e850e567a98e1b40ca7eef4c516b2420d4822d37
-  data.tar.gz: a6419b79bda3b8009678e08ce15777aa914ad58773e857e5b58fb0e6f05c0dc3921dbfe13baa587177d5d49beda88336cbfe82cb4ce9a54b08f2cfd2c0abe9fb
+  metadata.gz: a54f3a0c8308f70be7bd76404878dff6d61407f1100c859f4aca0564819dcb0b37c788c287f3d53bf7a584ce419050aedd1cd067d61ce8b8a0921f5738cacc4f
+  data.tar.gz: bdba4aa9e98ac3e9b4480ed039f56772663ff6e5111dde4cc548bf4472a924bb1d0957f069b22ebd6082f9aca26dabf962766669c36284b81a1b883ff2e4f7c7

data/.gitignore

@@ -37,3 +37,4 @@
 *.a
 mkmf.log
 log
+.idea

data/README.md

@@ -75,12 +75,26 @@ Until now I´ve been able to implement the following features:
 + **default_loading_placeholder:** image placeholder to show when uploaded/pasted images are loading , defaults to a grey background
 + **disable_title** default: false, will hide the initial heading placeholder for initial text
 + **title_placeholder** default: 'Title'
++ **title** default: none, pass a pre-existing title to the editor here
 + **body_placeholder** default: 'Tell your story…'
 + **embed_placeholder** default: 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter'
 + **extract_placeholder** default: 'Paste a link to embed content from another site (e.g. Twitter) and press Enter'
 + **base_widgets:** default: ["uploader", "embed", "embed-extract"],
 + **extra_tooltip_widgets:** and array of new Dante.TooltipWidget instances.
 
+### Initialization
+
+#### title
+ Use the title option in the initializer to pass a title to Dante.
+   
+#### body
+  Use the following code to get your text into the Dante editor's body:
+```html
+
+  <div id="editor editable" > <%= clean_dante_post( @post.excerpt ).try(:html_safe) %> </div>
+
+```
+
 ### Rails / AssetPippeline
 
 in Gemfile

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

@@ -3,6 +3,16 @@ utils = Dante.utils
 
 class Dante.Editor extends Dante.View
 
+  #Named constants for javascript key codes
+  BACKSPACE  = 8
+  TAB        = 9
+  ENTER      = 13
+  SPACEBAR   = 32
+  LEFTARROW  = 37
+  UPARROW    = 38
+  RIGHTARROW = 39
+  DOWNARROW  = 40
+
   events:
     "mouseup"  : "handleMouseUp"
     "keydown"  : "handleKeyDown"
@@ -56,6 +66,8 @@ class Dante.Editor extends Dante.View
 
     titleplaceholder    = opts.title_placeholder  || 'Title'
     @title_placeholder  = "<span class='defaultValue defaultValue--root'>#{titleplaceholder}</span><br>"
+    title               = opts.title              || ''
+    @title              = title
     bodyplaceholder     = opts.body_placeholder   || 'Tell your story…'
     @body_placeholder   = "<span class='defaultValue defaultValue--root'>#{bodyplaceholder}</span><br>"
     embedplaceholder    = opts.embed_placeholder  || 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter'
@@ -70,6 +82,7 @@ class Dante.Editor extends Dante.View
     #TODO: this could be a hash to access widgets without var
     #Base widgets
     base_widgets = opts.base_widgets
+    self = @
 
     if base_widgets.indexOf("uploader") >= 0
       @uploader_widget      = new Dante.View.TooltipWidget.Uploader(current_editor: @)
@@ -86,6 +99,8 @@ class Dante.Editor extends Dante.View
     #add extra widgets
     if opts.extra_tooltip_widgets
       _.each opts.extra_tooltip_widgets, (w)=>
+        if !w.current_editor
+          w.current_editor = self
         @widgets.push w
 
   store: ()->
@@ -117,7 +132,7 @@ class Dante.Editor extends Dante.View
     $(@el).find(".section-inner").html()
 
   renderTitle: ()->
-    "<h3 class='graf graf--h3'>#{@title_placeholder} </h3>"
+    "<h3 class='graf graf--h3'>#{if @title.length > 0 then @title else @title_placeholder}</h3>"
 
   template: ()=>
     "<section class='section--first section--last'>
@@ -646,12 +661,12 @@ class Dante.Editor extends Dante.View
 
     @markAsSelected( anchor_node ) if anchor_node
 
-    if e.which is 9
+    if e.which is TAB
 
       @handleTab(anchor_node)
       return false
 
-    if e.which == 13
+    if e.which == ENTER
 
       #removes previous selected nodes
       $(@el).find(".is-selected").removeClass("is-selected")
@@ -718,7 +733,8 @@ class Dante.Editor extends Dante.View
       , 2
 
     #delete key
-    if (e.which == 8)
+    if (e.which == BACKSPACE)
+      eventHandled = false;
       @tooltip_view.hide()
       utils.log("removing from down")
       utils.log "REACHED TOP" if @reachedTop
@@ -728,9 +744,29 @@ class Dante.Editor extends Dante.View
       anchor_node = @getNode()
       utils_anchor_node = utils.getNode()
 
+      utils.log(anchor_node);
+      utils.log(utils_anchor_node);
+
+      #check if any of the widgets can handle a backspace keydown
+      utils.log("HANDLING WIDGET BACKSPACES");
+      _.each @widgets, (w)=>
+        if w.handleBackspaceKey && !handled
+          handled = w.handleBackspaceKey(e, anchor_node);
+
+      if (eventHandled)
+        e.preventDefault();
+        return false;
+
       if(parent.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
           return this.handleListBackspace(parent, e);
 
+      #select an image if backspacing into it from a paragraph
+      if($(anchor_node).hasClass("graf--p") && @isFirstChar)
+          if($(anchor_node).prev().hasClass("graf--figure"))
+            e.preventDefault();
+            $(anchor_node).prev().find("img").click();
+            utils.log("Focus on the previous image")
+
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
         return false if _.isEmpty($(utils_anchor_node).text())
@@ -752,21 +788,15 @@ class Dante.Editor extends Dante.View
       if $(anchor_node).prev().hasClass("graf--mixtapeEmbed")
         return false if @isFirstChar() && !_.isEmpty( $(anchor_node).text().trim() )
 
-      #remove graf figure is is selected but not in range (not focus on caption)
-      if $(".is-selected").hasClass("graf--figure") && !anchor_node?
-        @replaceWith("p", $(".is-selected"))
-        @setRangeAt($(".is-selected")[0])
-        return false
-
     #spacebar
-    if (e.which == 32)
+    if (e.which == SPACEBAR)
       utils.log("SPACEBAR")
       if (parent.hasClass("graf--p"))
         @handleSmartList(parent, e)
     #arrows key
     #if _.contains([37,38,39,40], e.which)
     #up & down
-    if _.contains([38, 40], e.which)
+    if _.contains([UPARROW, DOWNARROW], e.which)
       utils.log e.which
       @handleArrowForKeyDown(e)
       #return false
@@ -800,11 +830,11 @@ class Dante.Editor extends Dante.View
 
     @handleTextSelection(anchor_node)
 
-    if (_.contains([8, 32, 13], e.which))
+    if (_.contains([BACKSPACE, SPACEBAR, ENTER], e.which))
       if $(anchor_node).hasClass("graf--li")
         @removeSpanTag($(anchor_node));
 
-    if (e.which == 8)
+    if (e.which == BACKSPACE)
 
       #if detect all text deleted , re render
       if $(utils_anchor_node).hasClass("postField--body")
@@ -846,7 +876,7 @@ class Dante.Editor extends Dante.View
 
 
     #arrows key
-    if _.contains([37,38,39,40], e.which)
+    if _.contains([LEFTARROW, UPARROW, RIGHTARROW, DOWNARROW], e.which)
       @handleArrow(e)
       #return false
 

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

@@ -222,3 +222,26 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
   uploadCompleted: (url, node)=>
     node.find("img").attr("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 handled the backspace event, otherwise false
+  ###
+  handleBackspaceKey: (e, node) =>
+
+    #remove graf figure is is selected but not in range (not focus on caption)
+    if $(".is-selected").hasClass("graf--figure") && !anchor_node?
+      utils.log("Replacing selected node")
+      @current_editor.replaceWith("p", $(".is-selected"))
+
+      e.preventDefault() #without this line, the browser may interpret the backspace as a "go pack a page" command
+      
+      @current_editor.setRangeAt($(".is-selected")[0])
+      return true
+
+    return false
+  

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.0.12",
+  "version" : "0.0.13",
   "keywords": [
     "css",
     "sass",

data/dist/js/dante-editor.js

@@ -8,7 +8,7 @@
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.0.12"
+    version: "0.0.13"
   };
 
 }).call(this);
@@ -432,6 +432,8 @@
   utils = Dante.utils;
 
   Dante.Editor = (function(_super) {
+    var BACKSPACE, DOWNARROW, ENTER, LEFTARROW, RIGHTARROW, SPACEBAR, TAB, UPARROW;
+
     __extends(Editor, _super);
 
     function Editor() {
@@ -452,6 +454,22 @@
       return Editor.__super__.constructor.apply(this, arguments);
     }
 
+    BACKSPACE = 8;
+
+    TAB = 9;
+
+    ENTER = 13;
+
+    SPACEBAR = 32;
+
+    LEFTARROW = 37;
+
+    UPARROW = 38;
+
+    RIGHTARROW = 39;
+
+    DOWNARROW = 40;
+
     Editor.prototype.events = {
       "mouseup": "handleMouseUp",
       "keydown": "handleKeyDown",
@@ -470,7 +488,7 @@
     };
 
     Editor.prototype.initialize = function(opts) {
-      var bodyplaceholder, embedplaceholder, extractplaceholder, titleplaceholder;
+      var bodyplaceholder, embedplaceholder, extractplaceholder, title, titleplaceholder;
       if (opts == null) {
         opts = {};
       }
@@ -503,6 +521,8 @@
       this.store();
       titleplaceholder = opts.title_placeholder || 'Title';
       this.title_placeholder = "<span class='defaultValue defaultValue--root'>" + titleplaceholder + "</span><br>";
+      title = opts.title || '';
+      this.title = title;
       bodyplaceholder = opts.body_placeholder || 'Tell your story…';
       this.body_placeholder = "<span class='defaultValue defaultValue--root'>" + bodyplaceholder + "</span><br>";
       embedplaceholder = opts.embed_placeholder || 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter';
@@ -513,8 +533,9 @@
     };
 
     Editor.prototype.initializeWidgets = function(opts) {
-      var base_widgets;
+      var base_widgets, self;
       base_widgets = opts.base_widgets;
+      self = this;
       if (base_widgets.indexOf("uploader") >= 0) {
         this.uploader_widget = new Dante.View.TooltipWidget.Uploader({
           current_editor: this
@@ -536,6 +557,9 @@
       if (opts.extra_tooltip_widgets) {
         return _.each(opts.extra_tooltip_widgets, (function(_this) {
           return function(w) {
+            if (!w.current_editor) {
+              w.current_editor = self;
+            }
             return _this.widgets.push(w);
           };
         })(this));
@@ -584,7 +608,7 @@
     };
 
     Editor.prototype.renderTitle = function() {
-      return "<h3 class='graf graf--h3'>" + this.title_placeholder + " </h3>";
+      return "<h3 class='graf graf--h3'>" + (this.title.length > 0 ? this.title : this.title_placeholder) + "</h3>";
     };
 
     Editor.prototype.template = function() {
@@ -1185,18 +1209,18 @@
     };
 
     Editor.prototype.handleKeyDown = function(e) {
-      var anchor_node, li, parent, utils_anchor_node;
+      var anchor_node, eventHandled, li, parent, utils_anchor_node;
       utils.log("KEYDOWN");
       anchor_node = this.getNode();
       parent = $(anchor_node);
       if (anchor_node) {
         this.markAsSelected(anchor_node);
       }
-      if (e.which === 9) {
+      if (e.which === TAB) {
         this.handleTab(anchor_node);
         return false;
       }
-      if (e.which === 13) {
+      if (e.which === ENTER) {
         $(this.el).find(".is-selected").removeClass("is-selected");
         utils.log(this.isLastChar());
         if (parent.hasClass("graf--p")) {
@@ -1262,7 +1286,8 @@
           };
         })(this), 2);
       }
-      if (e.which === 8) {
+      if (e.which === BACKSPACE) {
+        eventHandled = false;
         this.tooltip_view.hide();
         utils.log("removing from down");
         if (this.reachedTop) {
@@ -1274,9 +1299,31 @@
         utils.log("pass initial validations");
         anchor_node = this.getNode();
         utils_anchor_node = utils.getNode();
+        utils.log(anchor_node);
+        utils.log(utils_anchor_node);
+        utils.log("HANDLING WIDGET BACKSPACES");
+        _.each(this.widgets, (function(_this) {
+          return function(w) {
+            var handled;
+            if (w.handleBackspaceKey && !handled) {
+              return handled = w.handleBackspaceKey(e, anchor_node);
+            }
+          };
+        })(this));
+        if (eventHandled) {
+          e.preventDefault();
+          return false;
+        }
         if (parent.hasClass("graf--li") && this.getCharacterPrecedingCaret().length === 0) {
           return this.handleListBackspace(parent, e);
         }
+        if ($(anchor_node).hasClass("graf--p") && this.isFirstChar) {
+          if ($(anchor_node).prev().hasClass("graf--figure")) {
+            e.preventDefault();
+            $(anchor_node).prev().find("img").click();
+            utils.log("Focus on the previous image");
+          }
+        }
         if ($(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")) {
           utils.log("SECTION DETECTED FROM KEYDOWN " + (_.isEmpty($(utils_anchor_node).text())));
           if (_.isEmpty($(utils_anchor_node).text())) {
@@ -1301,19 +1348,14 @@
             return false;
           }
         }
-        if ($(".is-selected").hasClass("graf--figure") && (anchor_node == null)) {
-          this.replaceWith("p", $(".is-selected"));
-          this.setRangeAt($(".is-selected")[0]);
-          return false;
-        }
       }
-      if (e.which === 32) {
+      if (e.which === SPACEBAR) {
         utils.log("SPACEBAR");
         if (parent.hasClass("graf--p")) {
           this.handleSmartList(parent, e);
         }
       }
-      if (_.contains([38, 40], e.which)) {
+      if (_.contains([UPARROW, DOWNARROW], e.which)) {
         utils.log(e.which);
         this.handleArrowForKeyDown(e);
       }
@@ -1343,12 +1385,12 @@
       anchor_node = this.getNode();
       utils_anchor_node = utils.getNode();
       this.handleTextSelection(anchor_node);
-      if (_.contains([8, 32, 13], e.which)) {
+      if (_.contains([BACKSPACE, SPACEBAR, ENTER], e.which)) {
         if ($(anchor_node).hasClass("graf--li")) {
           this.removeSpanTag($(anchor_node));
         }
       }
-      if (e.which === 8) {
+      if (e.which === BACKSPACE) {
         if ($(utils_anchor_node).hasClass("postField--body")) {
           utils.log("ALL GONE from UP");
           this.handleCompleteDeletion($(this.el));
@@ -1384,7 +1426,7 @@
           false;
         }
       }
-      if (_.contains([37, 38, 39, 40], e.which)) {
+      if (_.contains([LEFTARROW, UPARROW, RIGHTARROW, DOWNARROW], e.which)) {
         return this.handleArrow(e);
       }
     };
@@ -1861,6 +1903,7 @@
     __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);
@@ -2113,6 +2156,27 @@
       return node.find("img").attr("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 handled the backspace event, otherwise false
+     */
+
+    Uploader.prototype.handleBackspaceKey = function(e, node) {
+      if ($(".is-selected").hasClass("graf--figure") && (typeof anchor_node === "undefined" || anchor_node === null)) {
+        utils.log("Replacing selected node");
+        this.current_editor.replaceWith("p", $(".is-selected"));
+        e.preventDefault();
+        this.current_editor.setRangeAt($(".is-selected")[0]);
+        return true;
+      }
+      return false;
+    };
+
     return Uploader;
 
   })(Dante.View.TooltipWidget);

data/lib/dante-editor/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.0.13
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-04-22 00:00:00.000000000 Z
+date: 2015-05-29 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email: