dante-editor 0.0.10 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7456f5632a27d75dad5e0f84de2e2c29110df0a3
-  data.tar.gz: e8b977537e5797a5dc5de59dc7666514cbb5a38f
+  metadata.gz: ce93b6b016e569966678e24ff82312b27125a136
+  data.tar.gz: 4bc7081e9e6a17785e9f752ca7369001e82b9f5c
 SHA512:
-  metadata.gz: f5c4603214ec83eba2c7df7bc5102b557524afb524db6a65a0fac70fd004725bc24c8787849622c5c07b64e34926f08b8fc9b0f4dc7206c3cea229d3003eccef
-  data.tar.gz: 7c74ad5a1d3a1d29fdc2036ec9d1c8310e103c4978c20254b18adc8d72583bbf718f76dfa56ed468d813415ccf9b37b9f29dd36c2c98593284d10c544f500fe9
+  metadata.gz: 43c7c63ad8b016a22839fa7e7ccbf2def26ae11f1934466902dd8a4e0d9a38157a94f2f31b9d836f1388ba1ead630b8bef1772530ff6af3acaddb7629f164f7f
+  data.tar.gz: d0fb16dcc13f2b5956215328ebcc3c657b9fd4cc779ea0729f26dec30f426892b1a5abfbf2de26ff19476f7d1f659e49b9cd1e59337e43fe301db741fc905fed

data/README.md

@@ -26,7 +26,9 @@ Until now I´ve been able to implement the following features:
   + Image Uploader with *preview* and caption option.
   + Embed data for pasted link through OEmbed services.
   + Embed media information for pasted links through OEmbed services.
+  + Add or remove tooltip buttons with ease with plugin system.
 + List creation with shorcuts ie:. 1. , - , 1) with spacebar or return key
++ Custom tooltip bottons support
 + CSS tries to use the same fonts used in Medium, (if you have already setup those fonts) or fallbacks to open fonts (by Google fonts) or system fonts.
   + serif: freight-text-pro fallbacks to Merriweather or Georgia,
   + sans:  jaf-bernino-sans fallbacks to Open Sans or Lucida Grande
@@ -75,6 +77,8 @@ Until now I´ve been able to implement the following features:
 + **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.
 
 ### Rails / AssetPippeline
 

data/app/assets/javascripts/dante.js

@@ -3,6 +3,10 @@
 //= require dante/utils
 //= require dante/view
 //= require dante/editor
+//= 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 dante/menu

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

@@ -4,13 +4,13 @@ utils = Dante.utils
 class Dante.Editor extends Dante.View
 
   events:
-    "mouseup" : "handleMouseUp"
-    "keydown" : "handleKeyDown"
-    "keyup"   : "handleKeyUp"
-    "paste"   : "handlePaste"
+    "mouseup"  : "handleMouseUp"
+    "keydown"  : "handleKeyDown"
+    "keyup"    : "handleKeyUp"
+    "paste"    : "handlePaste"
     "dblclick" : "handleDblclick"
     "dragstart": "handleDrag"
-    "drop"    : "handleDrag"
+    "drop"     : "handleDrag"
     "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
     "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
 
@@ -38,8 +38,16 @@ class Dante.Editor extends Dante.View
     @disable_title   = opts.disable_title || false
     @store_interval  = opts.store_interval || 15000
     @paste_element_id = "#dante-paste-div"
+    @tooltip_class   = opts.tooltip_class || Dante.Editor.Tooltip
+
+    opts.base_widgets ||= ["uploader", "embed", "embed_extract"]
+
+    @widgets = []
+
     window.debugMode = opts.debug || false
+
     $(@el).addClass("debug") if window.debugMode
+
     if (localStorage.getItem('contenteditable'))
       $(@el).html  localStorage.getItem('contenteditable')
 
@@ -54,6 +62,31 @@ class Dante.Editor extends Dante.View
     extractplaceholder  = opts.extract_placeholder|| "Paste a link to embed content from another site (e.g. Twitter) and press Enter"
     @extract_placeholder= "<span class='defaultValue defaultValue--root'>#{extractplaceholder}</span><br>"
 
+    @initializeWidgets(opts)
+
+
+  initializeWidgets: (opts)->
+    #TODO: this could be a hash to access widgets without var
+    #Base widgets
+    base_widgets = opts.base_widgets
+
+    if base_widgets.indexOf("uploader") >= 0
+      @uploader_widget      = new Dante.View.TooltipWidget.Uploader(current_editor: @)
+      @widgets.push @uploader_widget
+
+    if base_widgets.indexOf("embed") >= 0
+      @embed_widget         = new Dante.View.TooltipWidget.Embed(current_editor: @)
+      @widgets.push @embed_widget
+
+    if base_widgets.indexOf("embed_extract") >= 0
+      @embed_extract_widget = new Dante.View.TooltipWidget.EmbedExtract(current_editor: @)
+      @widgets.push @embed_extract_widget
+
+    #add extra widgets
+    if opts.extra_tooltip_widgets
+      _.each opts.extra_tooltip_widgets, (w)=>
+        @widgets.push w
+
   store: ()->
     #localStorage.setItem("contenteditable", $(@el).html() )
     return unless @store_url
@@ -107,7 +140,7 @@ class Dante.Editor extends Dante.View
     $("<div id='dante-menu' class='dante-menu'></div>").insertAfter(@el)
     $("<div class='inlineTooltip'></div>").insertAfter(@el)
     @editor_menu = new Dante.Editor.Menu(editor: @)
-    @tooltip_view = new Dante.Editor.Tooltip(editor: @)
+    @tooltip_view = new @tooltip_class(editor: @ , widgets: @widgets)
     @pop_over = new Dante.Editor.PopOver(editor: @)
     @pop_over.render().hide()
     @tooltip_view.render().hide()
@@ -269,7 +302,6 @@ class Dante.Editor extends Dante.View
     else
       $(@getNode()).removeClass("is-defaultValue")
 
-
   #get text of selected and displays menu
   handleTextSelection: (anchor_node)->
     @editor_menu.hide()
@@ -511,7 +543,7 @@ class Dante.Editor extends Dante.View
     #http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
     _.each elements.find("img"), (image)=>
       utils.log ("process image here!")
-      @tooltip_view.uploadExistentImage(image)
+      @uploader_widget.uploadExistentImage(image)
 
   handleInmediateDeletion: (element)->
     @inmediateDeletion = false
@@ -607,7 +639,8 @@ class Dante.Editor extends Dante.View
     utils.log "KEYDOWN"
 
     anchor_node = @getNode() #current node on which cursor is positioned
-    $node = $(anchor_node);
+    parent = $(anchor_node)
+
 
     @markAsSelected( anchor_node ) if anchor_node
 
@@ -621,22 +654,20 @@ class Dante.Editor extends Dante.View
       #removes previous selected nodes
       $(@el).find(".is-selected").removeClass("is-selected")
 
-      parent = $(anchor_node)
-
       utils.log @isLastChar()
 
       #smart list support
-      if $node.hasClass("graf--p")
-        li = @handleSmartList($node, e)
+      if parent.hasClass("graf--p")
+        li = @handleSmartList(parent, e)
         anchor_node = li if li
-      else if $node.hasClass("graf--li")
-        @handleListLineBreak($node, e)
+      else if parent.hasClass("graf--li")
+        @handleListLineBreak(parent, e)
 
-      #embeds or extracts
-      if parent.hasClass("is-embedable")
-        @tooltip_view.getEmbedFromNode($(anchor_node))
-      else if parent.hasClass("is-extractable")
-        @tooltip_view.getExtractFromNode($(anchor_node))
+      #handle keydowns for each widget
+      utils.log("HANDLING WIDGET KEYDOWNS");
+      _.each @widgets, (w)=>
+        if w.handleEnterKey
+          w.handleEnterKey(e, parent);
 
       #supress linebreak into embed page text unless last char
       if parent.hasClass("graf--mixtapeEmbed") or parent.hasClass("graf--iframe") or parent.hasClass("graf--figure")
@@ -695,8 +726,8 @@ class Dante.Editor extends Dante.View
       anchor_node = @getNode()
       utils_anchor_node = utils.getNode()
 
-      if($node.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
-          return this.handleListBackspace($node, e);
+      if(parent.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
+          return this.handleListBackspace(parent, e);
 
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
@@ -728,8 +759,8 @@ class Dante.Editor extends Dante.View
     #spacebar
     if (e.which == 32)
       utils.log("SPACEBAR")
-      if ($node.hasClass("graf--p"))
-        @handleSmartList($node, e)
+      if (parent.hasClass("graf--p"))
+        @handleSmartList(parent, e)
     #arrows key
     #if _.contains([37,38,39,40], e.which)
     #up & down
@@ -894,7 +925,7 @@ class Dante.Editor extends Dante.View
 
       when "img"
         utils.log "images"
-        @tooltip_view.uploadExistentImage(n)
+        @uploader_widget.uploadExistentImage(n)
         #set figure non editable
 
       when "a", 'strong', 'em', 'br', 'b', 'u', 'i'

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

@@ -9,17 +9,12 @@ class Dante.Editor.Tooltip extends Dante.View
 
   initialize: (opts = {})=>
     @current_editor = opts.editor
-    @buttons = [
-      {icon: "icon-image", title: "Add an image", action: "image"},
-      {icon: "icon-video", title: "Add a video",  action: "embed"},
-      {icon: "icon-embed", title: "Add an embed", action: "embed-extract"}
-    ]
-    #TODO: include section splitter
-    #icon: "fa-minus", title: "Add a new part", action: "hr"
+    @widgets        = opts.widgets
 
   template: ()->
     menu = ""
-    _.each @buttons, (b)->
+
+    _.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>
@@ -32,40 +27,11 @@ class Dante.Editor.Tooltip extends Dante.View
       #{menu}
     </div>"
 
-  insertTemplate: ()->
-    "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='#{utils.generateUniqueName()}' tabindex='0'>
-      <div style='' class='aspectRatioPlaceholder is-locked'>
-        <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div>
-        <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''>
-      </div>
-      <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'>
-        <span class='defaultValue'>Type caption for image (optional)</span>
-        <br>
-      </figcaption>
-    </figure>"
-
-  extractTemplate: ()->
-    "<div class='graf graf--mixtapeEmbed is-selected' name=''>
-      <a target='_blank' data-media-id='' class='js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock' href=''>
-      </a>
-      <a data-tooltip-type='link' data-tooltip-position='bottom' data-tooltip='' title='' class='markup--anchor markup--mixtapeEmbed-anchor' data-href='' href='' target='_blank'>
-        <strong class='markup--strong markup--mixtapeEmbed-strong'></strong>
-        <em class='markup--em markup--mixtapeEmbed-em'></em>
-      </a>
-    </div>"
-
-  embedTemplate: ()->
-    "<figure contenteditable='false' class='graf--figure graf--iframe graf--first' name='504e' tabindex='0'>
-      <div class='iframeContainer'>
-        <iframe frameborder='0' width='700' height='393' data-media-id='' src='' data-height='480' data-width='854'>
-        </iframe>
-      </div>
-      <figcaption contenteditable='true' data-default-value='Type caption for embed (optional)' class='imageCaption'>
-        <a rel='nofollow' class='markup--anchor markup--figure-anchor' data-href='' href='' target='_blank'>
+  findWidgetByAction: (name)->
 
-        </a>
-      </figcaption>
-    </figure>"
+    _.find @widgets, (e)->
+      e.action == name
+    
 
   render: ()=>
     $(@el).html(@template())
@@ -90,6 +56,7 @@ class Dante.Editor.Tooltip extends Dante.View
   handleClick: (ev)->
     name = $(ev.currentTarget).data('action')
     utils.log name
+    ###
     switch name
       when "inline-menu-image"
         @placeholder = "<p>PLACEHOLDER</p>"
@@ -100,270 +67,13 @@ class Dante.Editor.Tooltip extends Dante.View
         @displayExtractPlaceHolder()
       when "inline-menu-hr"
         @splitSection()
-    return false
-  #UPLOADER
-
-  #replace existing img tag , and wrap it in insertTamplate
-  #TODO: take the url and upload it
-  uploadExistentImage: (image_element, opts = {})->
-
-    utils.log ("process image here!")
-    tmpl = $(@insertTemplate())
-    tmpl.find("img").attr('src', @current_editor.default_loading_placeholder )
-    #is a child element or a first level element ?
-
-    if $(image_element).parents(".graf").length > 0
-      #return if its already wrapped in graf--figure
-      if $(image_element).parents(".graf").hasClass("graf--figure")
-        return
-      utils.log "UNO"
-      tmpl.insertBefore( $(image_element).parents(".graf") )
-      node = @current_editor.getNode()
-      if node
-        @current_editor.preCleanNode($(node))
-        @current_editor.addClassesToElement(node)
-    else
-      utils.log "DOS"
-      img = $(image_element).parentsUntil(".section-inner").first()
-      $(img).replaceWith(tmpl)
-
-    utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
-    @replaceImg(image_element, $("[name='#{tmpl.attr('name')}']"))
-
-    #in case we found that graf--image is nested element, unwrap * nested times
-    n = $("[name='#{tmpl.attr('name')}']").parentsUntil(".section-inner").length
-    unless n is 0
-      for i in [0..n-1] by 1
-        $("[name='#{tmpl.attr('name')}']").unwrap()
-
-    utils.log "FIG"
-    #utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
-
-  replaceImg: (image_element, figure)->
-    utils.log figure.attr("name")
-    utils.log figure
-    $(image_element).remove()
-    img = new Image()
-    img.src = image_element.src
-    self = this
-    img.onload = ()->
-      utils.log "replace image with loaded info"
-      utils.log figure.attr("name")
-      utils.log(this.width + 'x' + this.height);
-
-      ar = self.getAspectRatio(this.width, this.height)
-      #debugger
-      figure.find(".aspectRatioPlaceholder").css
-        'max-width': ar.width
-        'max-height': ar.height
-
-      figure.find(".graf-image").attr
-        "data-height": this.height
-        "data-width": this.width
-
-      figure.find(".aspect-ratio-fill").css
-        "padding-bottom": "#{ar.ratio}%"
-
-      #TODO: upload file to server
-      #@uploadFile file, replaced_node
-
-      figure.find("img").attr("src", image_element.src)
-
-  displayAndUploadImages: (file)->
-    @displayCachedImage file
-
-  imageSelect: (ev)->
-    $selectFile = $('<input type="file" multiple="multiple">').click()
-    self = @
-    $selectFile.change ()->
-      t = this
-      self.uploadFiles(t.files)
-
-  displayCachedImage: (file)->
-    @current_editor.tooltip_view.hide()
-
-    reader = new FileReader()
-    reader.onload = (e)=>
-      img = new Image
-      img.src = e.target.result
-      node = @current_editor.getNode()
-      self = this
-      img.onload = ()->
-        new_tmpl = $(self.insertTemplate())
-
-        replaced_node = $( new_tmpl ).insertBefore($(node))
-
-        img_tag = new_tmpl.find('img.graf-image').attr('src', e.target.result)
-        img_tag.height = this.height
-        img_tag.width  = this.width
-
-        utils.log "UPLOADED SHOW FROM CACHE"
-
-        ar = self.getAspectRatio(this.width, this.height)
-
-        replaced_node.find(".aspectRatioPlaceholder").css
-          'max-width': ar.width
-          'max-height': ar.height
-
-        replaced_node.find(".graf-image").attr
-          "data-height": this.height
-          "data-width": this.width
+    ###
+    #debugger
+    sub_name = name.replace("inline-menu-", "")
+    if detected_widget = @findWidgetByAction(sub_name)
+      detected_widget.handleClick(ev)
 
-        replaced_node.find(".aspect-ratio-fill").css
-          "padding-bottom": "#{ar.ratio}%"
-
-        self.uploadFile file, replaced_node
-
-    reader.readAsDataURL(file)
-
-  getAspectRatio: (w , h)->
-    maxWidth = 700
-    maxHeight = 700
-    ratio = 0
-    width = w # Current image width
-    height = h # Current image height
-
-    # Check if the current width is larger than the max
-    if width > maxWidth
-      ratio = maxWidth / width # get ratio for scaling image
-      height = height * ratio # Reset height to match scaled image
-      width = width * ratio # Reset width to match scaled image
-
-    # Check if current height is larger than max
-    else if height > maxHeight
-      ratio = maxHeight / height # get ratio for scaling image
-      width = width * ratio # Reset width to match scaled image
-      height = height * ratio # Reset height to match scaled image
-
-    fill_ratio = height / width * 100
-    result = { width: width, height: height, ratio: fill_ratio }
-    utils.log result
-    result
-
-  formatData: (file)->
-    formData = new FormData()
-    formData.append('file', file)
-    return formData
-
-  uploadFiles: (files)=>
-    acceptedTypes =
-      "image/png": true
-      "image/jpeg": true
-      "image/gif": true
-
-    i = 0
-    while i < files.length
-      file = files[i]
-      if acceptedTypes[file.type] is true
-        $(@placeholder).append "<progress class=\"progress\" min=\"0\" max=\"100\" value=\"0\">0</progress>"
-        @displayAndUploadImages(file)
-      i++
-
-  uploadFile: (file, node)=>
-    n = node
-    handleUp = (jqxhr)=>
-      @uploadCompleted jqxhr, n
-
-    $.ajax
-      type: "post"
-      url: @current_editor.upload_url
-      xhr: =>
-        xhr = new XMLHttpRequest()
-        xhr.upload.onprogress = @updateProgressBar
-        xhr
-      cache: false
-      contentType: false
-
-      success: (response) =>
-        response = @current_editor.upload_callback(response) if @current_editor.upload_callback
-        handleUp(response)
-        return
-      error: (jqxhr)=>
-        utils.log("ERROR: got error uploading file #{jqxhr.responseText}")
-
-      processData: false
-      data: @formatData(file)
-
-  updateProgressBar: (e)=>
-    $progress = $('.progress:first', this.$el)
-    complete = ""
-
-    if (e.lengthComputable)
-      complete = e.loaded / e.total * 100
-      complete = complete ? complete : 0
-      #$progress.attr('value', complete)
-      #$progress.html(complete)
-      utils.log "complete"
-      utils.log complete
-
-  uploadCompleted: (url, node)=>
-    node.find("img").attr("src", url)
-    #return false
-
-  ## EMBED
-  displayEmbedPlaceHolder: ()->
-    ph = @current_editor.embed_placeholder
-    @node = @current_editor.getNode()
-    $(@node).html(ph).addClass("is-embedable")
-
-    @current_editor.setRangeAt(@node)
-    @hide()
-    false
-
-  getEmbedFromNode: (node)=>
-    @node = $(node)
-    @node_name = @node.attr("name")
-    @node.addClass("spinner")
-
-    $.getJSON("#{@current_editor.oembed_url}#{$(@node).text()}")
-      .success (data)=>
-        @node = $("[name=#{@node_name}]")
-        iframe_src = $(data.html).prop("src")
-        tmpl = $(@embedTemplate())
-        tmpl.attr("name", @node.attr("name"))
-        $(@node).replaceWith(tmpl)
-        replaced_node = $(".graf--iframe[name=#{@node.attr("name")}]")
-        replaced_node.find("iframe").attr("src", iframe_src)
-        url = data.url || data.author_url
-        utils.log "URL IS #{url}"
-        replaced_node.find(".markup--anchor").attr("href", url ).text(url)
-        @hide()
-
-  ##EXTRACT
-  displayExtractPlaceHolder: ()->
-    ph = @current_editor.extract_placeholder
-    @node = @current_editor.getNode()
-    $(@node).html(ph).addClass("is-extractable")
-
-    @current_editor.setRangeAt(@node)
-    @hide()
-    false
-
-  getExtractFromNode: (node)=>
-    @node = $(node)
-    @node_name = @node.attr("name")
-    @node.addClass("spinner")
-
-    $.getJSON("#{@current_editor.extract_url}#{$(@node).text()}").success (data)=>
-      @node = $("[name=#{@node_name}]")
-      iframe_src = $(data.html).prop("src")
-      tmpl = $(@extractTemplate())
-      tmpl.attr("name", @node.attr("name"))
-      $(@node).replaceWith(tmpl)
-      replaced_node = $(".graf--mixtapeEmbed[name=#{@node.attr("name")}]")
-      replaced_node.find("strong").text(data.title)
-      replaced_node.find("em").text(data.description)
-      replaced_node.append(data.provider_url)
-      replaced_node.find(".markup--anchor").attr("href", data.url )
-      unless _.isEmpty data.images
-        image_node = replaced_node.find(".mixtapeImage")
-        image_node.css("background-image", "url(#{data.images[0].url})")
-        image_node.removeClass("mixtapeImage--empty u-ignoreBlock")
-      @hide()
-
-  getExtract: (url)=>
-    $.getJSON("#{@current_editor.extract_url}#{url}").done (data)->
-      utils.log(data)
+    return false
 
   cleanOperationClasses: (node)->
     node.removeClass("is-embedable is-extractable")