dante-editor 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 42a79ee4be9f59793dce73ca060ce2cf8b8edc3e
-  data.tar.gz: caf812a9e82f5130b042ebd42b26bf739984fed2
+  metadata.gz: e5f8c0fc81095096da19c3e387d79bedab7a3ec3
+  data.tar.gz: f11b2bc0404231a18de30c42b59169ae674db5af
 SHA512:
-  metadata.gz: 10ce2589c5954b40265a03f0b5563b87286ae926a196c2edb4e9cb38d642b205f4489d561efc631b77d542ef6d3eda83556e6abdc4473302b37209bea1977fc0
-  data.tar.gz: 7f7c6aa3f7c8870db6fd09dd67698db896b9d573acc2eed2a261323fb16bbc6a463f9c73a0ef6d88328377056c91802ca61393bb7e79b354fb3476a713cd2b87
+  metadata.gz: 61923bfbcb46e98d3314997362b4f13a3041a60e34b8dc97b4ab4c91c8f436a7a7e1c76c751fa3d55148cfe30746c6fd4be68fa7d5479a73f89145ebe03169a4
+  data.tar.gz: 3bca3b2e85212118e3f6dcb114fa7ed75cca273cc58d75f9cdd1f7843837dd507a69446e679792d696340796071b022e82ba8bfeab6535813f824f473984bc56

data/README.md

@@ -92,13 +92,19 @@ Until now I´ve been able to implement the following features:
 + **store_interval:** default: 1500 (1.5 secs), used when store_url is present.
 
 #### 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.
 + **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)"
+
+
 #### Embed tool:
+
 + **oembed_url:**  default: http://api.embed.ly/1/oembed?url="
 + **extract_url:** default: http://api.embed.ly/1/extract?url="
 + **embed_placeholder** default: 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter'
++ **embed_caption_placeholder** default: "Type caption for embed (optional)"
 + **extract_placeholder** default: 'Paste a link to embed content from another site (e.g. Twitter) and press Enter'
 
 #### Suggest Behavior (new!)

data/app/assets/javascripts/dante.js

@@ -3,16 +3,17 @@
 //= require dante/utils
 //= require dante/view
 //= require dante/editor
+
+//= require dante/article
+
 //= require dante/behavior
-//= require dante/behaviors/suggest
-//= require dante/behaviors/paste
-//= require dante/behaviors/image
-//= require dante/behaviors/list
-//= require dante/behaviors/save
+//= require_tree ./dante/behaviors
+
 //= require dante/tooltip_widget
 //= require dante/tooltip_widgets/uploader
 //= require dante/tooltip_widgets/embed
 //= require dante/tooltip_widgets/extract
 //= require dante/tooltip
-//= require dante/popover
+
+//= require_tree ./dante/popovers
 //= require dante/menu

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

@@ -0,0 +1,56 @@
+class Dante.Article extends Dante.View
+  
+  el: "body"
+
+  events:
+    # TODO: this events should be in tooltip class
+    "mouseover .markup--anchor" : "displayPopOver"
+    "mouseout  .markup--anchor" : "hidePopOver"
+
+  initialize: (opts={})->
+    @options = opts
+    @popovers  = []
+    opts.base_popovers ||= ["anchor", "card"]
+
+  start: ()=>
+    @render()
+    @appendMenus()
+
+  appendMenus: ->
+    @intializePopOvers(@options)
+    @removeEditables()
+
+  render: ->
+
+  removeEditables: ->
+    $(@el).find("[contenteditable]").removeAttr("contenteditable")
+
+  intializePopOvers: (opts)->
+
+    base_popovers = opts.base_popovers
+    self = @
+
+    if base_popovers.indexOf("anchor") >= 0
+      @pop_over = new Dante.Editor.PopOver(editor: @)
+      @popovers.push @pop_over
+
+    if base_popovers.indexOf("card") >= 0
+      @pop_over_card = new Dante.Editor.PopOverCard(editor: @)
+      @popovers.push @pop_over_card
+
+    # add extra widgets
+    if opts.extra_popovers
+      _.each opts.extra_popovers, (w)=>
+        if !w.current_editor
+          w.current_editor = self
+        @popovers.push w
+
+    # render and hide
+    @popovers.forEach (p)->
+      p.render().hide()
+
+  displayPopOver: (ev)->
+    @pop_over.displayAt(ev)
+
+  hidePopOver: (ev)->
+    @pop_over.hide(ev)

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

@@ -85,11 +85,11 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
 
         # call callback for image delete 
         if @editor.image_delete_callback
-          @editor.image_delete_callback( $(".is-selected").find("img").data() )
+          @editor.image_delete_callback( @editor.findSelected().find("img").data() )
         
         utils.log("Replacing selected node")
-        @editor.replaceWith("p", $(".is-selected"))
-        @editor.setRangeAt($(".is-selected")[0])
+        @editor.replaceWith("p", @editor.findSelected())
+        @editor.setRangeAt(@editor.findSelected()[0])
         @editor.pop_over_align.hide()
         utils.log("Focus on the previous graf")
         @editor.continue = false
@@ -123,13 +123,13 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
 
     # when user types over a selected image (graf--figure)
     # unselect image , and set range on caption
-    if _.isUndefined(parent) or parent.length is 0 && $(".is-selected").hasClass("is-mediaFocused")
+    if _.isUndefined(parent) or parent.length is 0 && @editor.findSelected().hasClass("is-mediaFocused")
       # will remove default value on typing
-      node = $(".is-selected").find("figcaption")
+      node = @editor.findSelected().find("figcaption")
       node.find(".defaultValue").remove()
     
       @editor.setRangeAt node[0]
-      $(".is-selected").removeClass("is-mediaFocused")
+      @editor.findSelected().removeClass("is-mediaFocused")
       @editor.pop_over_align.hide()
       #@editor.continue = false
       return false
@@ -153,8 +153,8 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
       when "ArrowDown", "Down"
         # when graff-image selected but none selection is found
         if _.isUndefined(current_node) or !current_node.exists()
-          if $(".is-selected").exists()
-            current_node = $(".is-selected")
+          if @editor.findSelected().exists()
+            current_node = @editor.findSelected()
 
         next_node = current_node.next()
         
@@ -274,7 +274,7 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
           num = n[0].childNodes.length
           #@editor.scrollTo(n)
           utils.log "4 up"
-          @editor.skip_keyup = true
+          # @editor.skip_keyup = true
           @editor.markAsSelected(prev_node)
           # @editor.continue = false
           return false

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

@@ -60,7 +60,7 @@ class Dante.View.Behavior.List extends Dante.View.Behavior
 
     @editor.addClassesToElement($list[0])
     @editor.replaceWith("li", $paragraph)
-    $li = $(".is-selected")
+    $li = @editor.findSelected()
 
     @editor.setElementName($li[0])
 
@@ -141,7 +141,7 @@ class Dante.View.Behavior.List extends Dante.View.Behavior
       $list.before($li)
       content = $li.html()
       @editor.replaceWith("p", $li)
-      $paragraph = $(".is-selected")
+      $paragraph = @editor.findSelected()
       $paragraph.removeClass("graf--empty").html(content).attr("name", utils.generateUniqueName());
 
       if($list.children().length is 0)

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

@@ -13,6 +13,9 @@ class Dante.View.Behavior.Paste extends Dante.View.Behavior
   handlePaste: (ev, parent)=>
     
     utils.log("pasted!")
+    
+    # hide default value if it's any
+    @editor.hidePlaceholder($(parent))
 
     pastedText = undefined
     if (window.clipboardData && window.clipboardData.getData) #IE

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

@@ -4,6 +4,8 @@ window.Dante = {
     PopOver: {}
     Menu: {}
   }
+  Article: {}
+
   defaults:
     image_placeholder: '<%= image_path("dante/media-loading-placeholder.png") %>'
   version: "<%= DanteEditor::VERSION %>"

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

@@ -39,11 +39,13 @@ class Dante.Editor extends Dante.View
     @upload_url      = opts.upload_url  || "/uploads.json"
     @upload_callback = opts.upload_callback
     @image_delete_callback = opts.image_delete_callback
+    @image_caption_placeholder = opts.image_caption_placeholder || "Type caption for image (optional)"
 
     @oembed_url      = opts.oembed_url  || "http://api.embed.ly/1/oembed?key=#{opts.api_key}&url="
     @extract_url     = opts.extract_url || "http://api.embed.ly/1/extract?key=#{opts.api_key}&url="
     @default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder
-    
+    @embed_caption_placeholder = opts.embed_caption_placeholder || "Type caption for embed (optional)"
+
     @store_url       = opts.store_url
     @store_method    = opts.store_method || "POST"
     @store_success_handler = opts.store_success_handler
@@ -63,9 +65,11 @@ class Dante.Editor extends Dante.View
     
     opts.base_widgets   ||= ["uploader", "embed", "embed_extract"]
     opts.base_behaviors ||= ["save", "image", "paste", "list", "suggest"]
+    opts.base_popovers  ||= ["anchor", "typeahead", "card", "align"]
 
     @widgets   = []
     @behaviors = []
+    @popovers  = []
 
     window.debugMode = opts.debug || false
 
@@ -73,8 +77,7 @@ 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
+    @title              = opts.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'
@@ -108,7 +111,7 @@ class Dante.Editor extends Dante.View
       @list_behavior = new Dante.View.Behavior.List(current_editor: @, el: @el)
       @behaviors.push @list_behavior
 
-    #add extra behaviors
+    # add extra behaviors
     if opts.extra_behaviors
       _.each opts.extra_behaviors, (w)=>
         if !w.current_editor
@@ -116,8 +119,8 @@ class Dante.Editor extends Dante.View
         @behaviors.push w
 
   initializeWidgets: (opts)->
-    #TODO: this could be a hash to access widgets without var
-    #Base widgets
+    # TODO: this could be a hash to access widgets without var
+    # Base widgets
     base_widgets = opts.base_widgets
     self = @
 
@@ -133,13 +136,45 @@ class Dante.Editor extends Dante.View
       @embed_extract_widget = new Dante.View.TooltipWidget.EmbedExtract(current_editor: @)
       @widgets.push @embed_extract_widget
 
-    #add extra widgets
+    # 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
 
+  intializePopOvers: (opts)->
+
+    base_popovers = opts.base_popovers
+    self = @
+
+    if base_popovers.indexOf("anchor") >= 0
+      @pop_over = new Dante.Editor.PopOver(editor: @)
+      @pop_over.render().hide()
+
+    if base_popovers.indexOf("typeahead") >= 0
+      @pop_over_typeahead  = new Dante.Editor.PopOverTypeAhead(editor: @)
+      @popovers.push @pop_over_typeahead
+
+    if base_popovers.indexOf("card") >= 0
+      @pop_over_card = new Dante.Editor.PopOverCard(editor: @)
+      @popovers.push @pop_over_card
+
+    if base_popovers.indexOf("align") >= 0
+      @pop_over_align = new Dante.Editor.ImageTooltip(editor: @)
+      @popovers.push @pop_over_align
+
+    # add extra widgets
+    if opts.extra_popovers
+      _.each opts.extra_popovers, (w)=>
+        if !w.current_editor
+          w.current_editor = self
+        @popovers.push w
+
+    # render and hide
+    @popovers.forEach (p)->
+      p.render().hide()
+
   getContent: ()->
     $(@el).find(".section-inner").html()
 
@@ -170,18 +205,8 @@ class Dante.Editor extends Dante.View
     $("<div class='inlineTooltip'></div>").insertAfter(@el)
     @editor_menu = new Dante.Editor.Menu(editor: @)
     @tooltip_view = new @tooltip_class(editor: @ , widgets: @widgets)
-    @pop_over = new Dante.Editor.PopOver(editor: @)
-    @pop_over.render().hide()
     
-    # TODO: this has to be pluggable too!
-    @pop_over_typeahead = new Dante.Editor.PopOverTypeAhead(editor: @)
-    @pop_over_typeahead.render().hide()
-
-    @pop_over_card = new Dante.Editor.PopOverCard(editor: @)
-    @pop_over_card.render().hide()
-
-    @pop_over_align = new Dante.Editor.ImageTooltip(editor: @)
-    @pop_over_align.render().hide()
+    @intializePopOvers(@editor_options)
 
     @tooltip_view.render().hide()
 
@@ -488,7 +513,7 @@ class Dante.Editor extends Dante.View
       else if !prev
         @.setRangeAt(@.$el.find(".section-inner p")[0])
 
-      @displayTooltipAt($(@el).find(".is-selected"))
+      @displayTooltipAt(@findSelected())
 
   #used when all the content is removed, then it re render
   handleCompleteDeletion: (element)->
@@ -525,6 +550,7 @@ class Dante.Editor extends Dante.View
     @scrollTo $(next)
 
   handleKeyDown: (e)->
+    
     utils.log "KEYDOWN"
 
     @continue = true
@@ -536,12 +562,6 @@ class Dante.Editor extends Dante.View
 
     #handle keyups for each widget
     utils.log("HANDLING Behavior KEYDOWN");
-    
-    _.each @behaviors, (b)=>
-      if b.handleKeyDown
-        b.handleKeyDown(e, parent);
-
-    return false unless @continue
 
     if e.which is TAB
       @handleTab(anchor_node)
@@ -550,7 +570,7 @@ class Dante.Editor extends Dante.View
     if e.which is ENTER
 
       #removes previous selected nodes
-      $(@el).find(".is-selected").removeClass("is-selected")
+      @findSelected().removeClass("is-selected")
 
       utils.log @isLastChar()
 
@@ -569,9 +589,9 @@ class Dante.Editor extends Dante.View
       if parent.hasClass("graf--iframe") or parent.hasClass("graf--figure")
         if @isLastChar()
           @handleLineBreakWith("p", parent)
-          @setRangeAtText($(".is-selected")[0])
+          @setRangeAtText(@findSelected()[0])
 
-          $(".is-selected").trigger("mouseup") #is not making any change
+          @findSelected().trigger("mouseup") #is not making any change
           return false
         else
           return false
@@ -603,7 +623,7 @@ class Dante.Editor extends Dante.View
           $(node).append("<br>")
 
         # shows tooltip
-        @displayTooltipAt($(@el).find(".is-selected"))
+        @displayTooltipAt(@findSelected())
       , 2
 
     # delete key
@@ -651,10 +671,16 @@ class Dante.Editor extends Dante.View
     
     #hides tooltip if anchor_node text is empty
     if anchor_node
-      unless _.isEmpty($(anchor_node).text())
+      if !_.isEmpty($(anchor_node).text())
         @tooltip_view.hide()
         $(anchor_node).removeClass("graf--empty")
 
+    _.each @behaviors, (b)=>
+      if b.handleKeyDown
+        b.handleKeyDown(e, parent);
+
+    return false unless @continue
+
   handleKeyUp: (e , node)->
 
     @continue = true
@@ -673,14 +699,6 @@ class Dante.Editor extends Dante.View
 
     @handleTextSelection(anchor_node)
 
-    # handle keyups for each widget
-    utils.log("HANDLING Behavior KEYUPS");
-    _.each @behaviors, (b)=>
-      if b.handleKeyUp
-        b.handleKeyUp(e)
-
-    return false unless @continue
-
     if (e.which == BACKSPACE)
 
       #if detect all text deleted , re render
@@ -726,10 +744,21 @@ class Dante.Editor extends Dante.View
       @handleArrowForKeyUp(e)
       #return false
 
+    # handle keyups for each widget
+    utils.log("HANDLING Behavior KEYUPS");
+    _.each @behaviors, (b)=>
+      if b.handleKeyUp
+        b.handleKeyUp(e)
+
+    return false unless @continue
+
   handleKeyPress: (e, node)->
     anchor_node = @getNode()
     parent = $(anchor_node)
-    #handle keyups for each widget
+
+    @hidePlaceholder(parent)
+
+    # handle keyups for each widget
     utils.log("HANDLING Behavior KEYPRESS");
     _.each @behaviors, (b)=>
       if b.handleKeyPress
@@ -770,7 +799,7 @@ class Dante.Editor extends Dante.View
 
     return if _.isUndefined element
 
-    $(@el).find(".is-selected").removeClass("is-mediaFocused is-selected")
+    @findSelected().removeClass("is-mediaFocused is-selected")
 
     $(element).addClass("is-selected")
 
@@ -990,3 +1019,5 @@ class Dante.Editor extends Dante.View
     $(span).replaceWith($(span).html()) for span in $spans when not $(span).hasClass("defaultValue")
     $item
 
+  findSelected: ->
+    $(@el).find(".is-selected")