dante-editor 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 64b4e8827f1fd8a73d53ea8a3d2096428c512777
-  data.tar.gz: bfcca07541a5c1b66e5fb750fdb0eb0d9fc3cdd5
+  metadata.gz: 5df180cc7b05573d27375f1d68407eae113faafa
+  data.tar.gz: 0c20ba63a6873253fe41dee4b53ddbde40668793
 SHA512:
-  metadata.gz: 9e18ede5c0fcb9553798120b174c3cd05f17d8f785870b03c60e78d0e569783123cfcc3504af2b8dcb5a3d05fe5097aaa5d2dca06280e441b3df5304cbab9939
-  data.tar.gz: 890dfde37222b9741982b8c31f2b91b137a47bd1c6dea6902e4004c853d2916cd984bd893f109c118d401b46ecee365271058f18f19deab5378ecdb88aeaa234
+  metadata.gz: 7027a936bf5598765a5dc0f23ca29b9e8f024cb659f19efcfdb31c64418d3bbce8cb2545c167f7ac276f4ca77b84bda88e318bd3dd5c3a947a6a0b6ba4c90e3d
+  data.tar.gz: 6c4b90531e4971941b527324bf7b339d100aaf50a472c6827bbe0ea37272d8e4185fa196aa361d3c69220d51a1a004307227150717e375986806ba4fef05db1d

data/.gitignore

@@ -20,6 +20,7 @@
 /node_modules
 
 /tmp/images/**/*
+/app/assets/stylesheets/temp/**/*
 
 
 /.yardoc

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dante-editor (0.0.4)
+    dante-editor (0.0.5)
 
 GEM
   remote: http://rubygems.org/

data/README.md

@@ -1,5 +1,7 @@
 #Dante Editor
 
+[![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)
+
 ####Just another Medium editor clone.
 
 ##Motivation:

data/ROADMAP.md

@@ -1,6 +1,6 @@
 ## ROADMAP
 
-+ 0.0.5
++ 0.0.6
   + TODO LIST COMPLETE!
 + 0.0.7
   + implement Keyboard Shortcuts / word count / typing tricks

data/TODO.md

@@ -13,6 +13,7 @@
   + DELETE
     + handle remove from PRE tag, it set rare span, just remove it
     + clean node when remove one
+    + don't remove entire graf-image when delete text from caption
 
   + IMAGES:
     + upload, show progress, complete

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

@@ -1,6 +1,7 @@
 window.Dante = {
   Editor: {
     ToolTip: {}
+    PopOver: {}
     Menu: {}
   }
   defaults:

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

@@ -1,11 +1,9 @@
 
-selected_menu = false
 utils = Dante.utils
 
 class Dante.Editor extends Dante.View
 
   events:
-    #"blur"    : "handleBlur"
     "mouseup" : "handleMouseUp"
     "keydown" : "handleKeyDown"
     "keyup"   : "handleKeyUp"
@@ -15,6 +13,10 @@ class Dante.Editor extends Dante.View
     "drop"    : "handleDrag"
     "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
     "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
+    "keyup .graf--figure figcaption"   : "handleGrafCaptionTyping"
+
+    "mouseover .markup--anchor" : "displayPopOver"
+    "mouseout  .markup--anchor" : "hidePopOver"
 
   initialize: (opts = {})=>
     @editor_options = opts
@@ -81,7 +83,7 @@ class Dante.Editor extends Dante.View
       </div>
 
       <div class='section-content'>
-        <div class='section-inner'>
+        <div class='section-inner layoutSingleColumn'>
           #{if @disable_title then '' else @renderTitle()}
           <p class='graf graf--p'>#{@body_placeholder}<p>
         </div>
@@ -97,6 +99,8 @@ class Dante.Editor extends Dante.View
     $("<div class='inlineTooltip'></div>").insertAfter(@el)
     @editor_menu = new Dante.Editor.Menu(editor: @)
     @tooltip_view = new Dante.Editor.Tooltip(editor: @)
+    @pop_over = new Dante.Editor.PopOver(editor: @)
+    @pop_over.render().hide()
     @tooltip_view.render().hide()
 
   appendInitialContent: ()=>
@@ -107,12 +111,11 @@ class Dante.Editor extends Dante.View
     @render()
     $(@el).attr("contenteditable", "true")
     $(@el).addClass("postField postField--body editable smart-media-plugin")
-    $(@el).wrap("<div class='postContent'><div class='notesSource'></div></div>")
+    $(@el).wrap("<article class='postArticle'><div class='postContent'><div class='notesSource'></div></div></article>")
     @appendMenus()
     @appendInitialContent() unless _.isEmpty @initial_html.trim()
     @parseInitialMess()
 
-
   restart: ()=>
     @render()
 
@@ -175,7 +178,6 @@ class Dante.Editor extends Dante.View
     precedingChar
 
   isLastChar: ()->
-    #utils.log "#{$(@getNode()).text().trim().length} | #{@getCharacterPrecedingCaret().trim().length}"
     $(@getNode()).text().trim().length is @getCharacterPrecedingCaret().trim().length
 
   isFirstChar: ()->
@@ -197,7 +199,6 @@ class Dante.Editor extends Dante.View
     range.collapse(true)
     sel.removeAllRanges()
     sel.addRange(range)
-    #@el.focus()
     element.focus()
 
   #set focus and caret position on element
@@ -237,7 +238,6 @@ class Dante.Editor extends Dante.View
     (if root && root.contains(node) then node else null)
 
   displayMenu: (sel)->
-    #return if _.isUndefined sel
     setTimeout ()=>
       @editor_menu.render()
       pos = utils.getSelectionDimensions()
@@ -248,6 +248,13 @@ class Dante.Editor extends Dante.View
   handleDrag: ()->
     return false
 
+  handleGrafCaptionTyping: (ev)->
+    if _.isEmpty(utils.getNode().textContent.trim())
+      $(@getNode()).addClass("is-defaultValue")
+    else
+      $(@getNode()).removeClass("is-defaultValue")
+
+
   #get text of selected and displays menu
   handleTextSelection: (anchor_node)->
     @editor_menu.hide()
@@ -270,6 +277,12 @@ class Dante.Editor extends Dante.View
     $(".graf--first").html(@title_placeholder)
     $(".graf--last").html(@body_placeholder)
 
+  displayPopOver: (ev)->
+    @pop_over.displayAt(ev)
+
+  hidePopOver: (ev)->
+    @pop_over.hide(ev)
+
   handleGrafFigureSelectImg: (ev)->
     utils.log "FIGURE SELECT"
     element = ev.currentTarget
@@ -281,22 +294,10 @@ class Dante.Editor extends Dante.View
     utils.log "FIGCAPTION"
     element = ev.currentTarget
     $(element).parent(".graf--figure").removeClass("is-mediaFocused")
-    #return false
-    #@setRangeAt( $(element).find('.imageCaption')[0] )
-
-  handleBlur: (ev)=>
-    #hide menu only if is not in use
-    setTimeout ()=>
-      utils.log "not in use"
-      #@editor_menu.hide() unless selected_menu
-    , 200
-    false
 
   handleMouseUp: (ev)=>
     utils.log "MOUSE UP"
     anchor_node = @getNode()
-    #utils.log anchor_node
-    #utils.log ev.currentTarget
 
     return if _.isNull(anchor_node)
 
@@ -337,7 +338,6 @@ class Dante.Editor extends Dante.View
 
       when "Down"
         #when graff-image selected but none selection is found
-        #debugger
         if _.isUndefined(current_node) or !current_node.exists()
           if $(".is-selected").exists()
             current_node = $(".is-selected")
@@ -355,13 +355,12 @@ class Dante.Editor extends Dante.View
         #if next element is embed select & focus it
         if next_node.hasClass("graf--figure") && caret_node
           n = next_node.find(".imageCaption")
-          @setRangeAt n[0]
           @scrollTo(n)
           utils.log "1 down"
           utils.log n[0]
           @skip_keyup = true
           @selection().removeAllRanges()
-          #@markAsSelected(next_node)
+          @markAsSelected(next_node)
           next_node.addClass("is-mediaFocused is-selected")
           return false
         #if current node is embed
@@ -394,11 +393,11 @@ class Dante.Editor extends Dante.View
         if prev_node.hasClass("graf--figure")
           utils.log "1 up"
           n = prev_node.find(".imageCaption")
-          #@setRangeAt n[0]
           @scrollTo(n)
           @skip_keyup = true
           @selection().removeAllRanges()
-          prev_node.addClass("is-mediaFocused is-selected")
+          @markAsSelected(prev_node)
+          prev_node.addClass("is-mediaFocused")
           return false
 
         else if prev_node.hasClass("graf--mixtapeEmbed")
@@ -418,15 +417,12 @@ class Dante.Editor extends Dante.View
         else if prev_node.hasClass("graf")
           n = current_node.prev(".graf")
           num = n[0].childNodes.length
-          #@setRangeAt n[0], num
           @scrollTo(n)
           utils.log "4 up"
           @skip_keyup = true
-          #debugger
+          @markAsSelected(prev_node)
           return false
 
-        utils.log "noting"
-
   #parse text for initial mess
   parseInitialMess: ()->
     @setupElementsClasses $(@el).find('.section-inner') , ()=>
@@ -452,7 +448,7 @@ class Dante.Editor extends Dante.View
       cbd = ev.originalEvent.clipboardData
       pastedText = if _.isEmpty(cbd.getData('text/html')) then cbd.getData('text/plain') else cbd.getData('text/html')
 
-    #alert(pastedText) # Process and handle text...
+    utils.log(pastedText) # Process and handle text...
     #detect if is html
     if pastedText.match(/<\/*[a-z][^>]+?>/gi)
       utils.log("HTML DETECTED ON PASTE")
@@ -603,7 +599,6 @@ class Dante.Editor extends Dante.View
       else if parent.hasClass("is-extractable")
         @tooltip_view.getExtractFromNode($(anchor_node))
 
-
       #supress linebreak into embed page text unless last char
       if parent.hasClass("graf--mixtapeEmbed") or parent.hasClass("graf--iframe") or parent.hasClass("graf--figure")
         utils.log("supress linebreak from embed !(last char)")
@@ -626,17 +621,20 @@ class Dante.Editor extends Dante.View
       if (anchor_node && @editor_menu.lineBreakReg.test(anchor_node.nodeName))
         #new paragraph if it the last character
         if @isLastChar()
-          utils.log "new paragraph if it the last character"
+          utils.log "new paragraph if it's the last character"
           e.preventDefault()
           @handleLineBreakWith("p", parent)
 
       setTimeout ()=>
         node = @getNode()
-        @markAsSelected( @getNode() ) #if anchor_node
-        @setupFirstAndLast()
         #set name on new element
         @setElementName($(node))
 
+        if node.nodeName.toLowerCase() is "div"
+          node = @replaceWith("p", $(node))[0]
+        @markAsSelected( $(node) ) #if anchor_node
+        @setupFirstAndLast()
+
         #empty childs if text is empty
         if _.isEmpty $(node).text().trim()
           _.each $(node).children(), (n)->
@@ -682,15 +680,12 @@ class Dante.Editor extends Dante.View
       if $(anchor_node).prev().hasClass("graf--mixtapeEmbed")
         return false if @isFirstChar() && !_.isEmpty( $(anchor_node).text().trim() )
 
-      utils.log "sss"
       utils.log anchor_node
       if $(".is-selected").hasClass("graf--figure")
         @replaceWith("p", $(".is-selected"))
         @setRangeAt($(".is-selected")[0])
         return false
 
-
-
     #arrows key
     #if _.contains([37,38,39,40], e.which)
     #up & down
@@ -717,7 +712,7 @@ class Dante.Editor extends Dante.View
     if @skip_keyup
       @skip_keyup = null
       utils.log "SKIP KEYUP"
-      return
+      return false
 
     utils.log "KEYUP"
 
@@ -740,7 +735,13 @@ class Dante.Editor extends Dante.View
 
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYUP #{_.isEmpty($(utils_anchor_node).text())}"
-        return false if _.isEmpty($(utils_anchor_node).text())
+        if _.isEmpty($(utils_anchor_node).text())
+          next_graf =  $(utils_anchor_node).next(".graf")[0]
+          if next_graf
+            @setRangeAt next_graf
+            $(utils_anchor_node).remove()
+            @setupFirstAndLast()
+          return false
 
       if _.isNull(anchor_node)
         @handleNullAnchor()
@@ -748,14 +749,19 @@ class Dante.Editor extends Dante.View
 
       if $(anchor_node).hasClass("graf--first")
         utils.log "THE FIRST ONE! UP"
+
+        if @.getSelectedText() is @.getNode().textContent
+          utils.log "remove selection dectected"
+          @.getNode().innerHTML = "<br>"
+
         @markAsSelected(anchor_node)
         @setupFirstAndLast()
         false
 
-      if anchor_node
-        @markAsSelected(anchor_node)
-        @setupFirstAndLast()
-        @displayTooltipAt($(@el).find(".is-selected"))
+      #if anchor_node
+      #  @markAsSelected(anchor_node)
+      #  @setupFirstAndLast()
+      #  @displayTooltipAt($(@el).find(".is-selected"))
 
     #arrows key
     if _.contains([37,38,39,40], e.which)
@@ -778,6 +784,7 @@ class Dante.Editor extends Dante.View
     from_element.replaceWith(new_paragraph)
     @setRangeAt(new_paragraph[0])
     @scrollTo new_paragraph
+    new_paragraph
 
   #shows the (+) tooltip at current element
   displayTooltipAt: (element)->
@@ -798,20 +805,6 @@ class Dante.Editor extends Dante.View
     $(@el).find(".is-selected").removeClass("is-mediaFocused is-selected")
     $(element).addClass("is-selected")
 
-    ###
-    if $(element).prop("tagName").toLowerCase() is "figure"
-      $(element).addClass("is-mediaFocused")
-      n = utils.getNode()
-      utils.log n
-
-      n = utils.getNode()
-      utils.log n
-      if _.isUndefined n
-        $(element).addClass("is-mediaFocused")
-      else if $(n).prop("tagName").toLowerCase() is "figcaption"
-        $(element).removeClass("is-mediaFocused")
-    ###
-
     $(element).find(".defaultValue").remove()
     #set reached top if element is first!
     if $(element).hasClass("graf--first")

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

@@ -6,8 +6,6 @@ class Dante.Editor.Menu extends Dante.View
   events:
     "mousedown li" : "handleClick"
     "click .dante-menu-linkinput .dante-menu-button": "closeInput"
-    "mouseenter" : "handleOver"
-    "mouseleave" : "handleOut"
     "keypress input": "handleInputEnter"
 
   initialize: (opts={})=>
@@ -52,7 +50,6 @@ class Dante.Editor.Menu extends Dante.View
   render: ()=>
     $(@el).html(@template())
     @show()
-    #@delegateEvents()
 
   handleClick: (ev)->
     element   = $(ev.currentTarget).find('.dante-icon')
@@ -62,8 +59,11 @@ class Dante.Editor.Menu extends Dante.View
     @savedSel = utils.saveSelection()
 
     if /(?:createlink)/.test(action)
-      $(@el).addClass("dante-menu--linkmode")
-      input.focus()
+      if $(ev.currentTarget).hasClass("active")
+        @removeLink()
+      else
+        $(@el).addClass("dante-menu--linkmode")
+        input.focus()
     else
       @menuApply action
 
@@ -78,6 +78,11 @@ class Dante.Editor.Menu extends Dante.View
       utils.restoreSelection(@savedSel)
       return @createlink( $(e.target) )
 
+  removeLink: ()->
+    @menuApply "unlink"
+    elem = @current_editor.getNode()
+    @current_editor.cleanContents($(elem))
+
   createlink: (input) =>
     $(@el).removeClass("dante-menu--linkmode")
     if input.val()
@@ -160,12 +165,6 @@ class Dante.Editor.Menu extends Dante.View
       el = el.parentNode
     nodes
 
-  handleOut: ()->
-    selected_menu = false
-
-  handleOver: ()->
-    selected_menu = true
-
   displayHighlights: ()->
     #remove all active links
     $(@el).find(".active").removeClass("active")
@@ -207,6 +206,7 @@ class Dante.Editor.Menu extends Dante.View
 
   show: ()->
     $(@el).addClass("dante-menu--active")
+    @closeInput()
     @displayHighlights()
 
   hide: ()->

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

@@ -0,0 +1,76 @@
+utils = Dante.utils
+
+class Dante.Editor.PopOver extends Dante.View
+  el: "body"
+
+  events:
+    "mouseover .popover": "cancelHide"
+    "mouseout  .popover": "hide"
+
+  initialize: (opts = {})->
+    utils.log("initialized popover")
+    @editor = opts.editor
+    @hideTimeout
+    @settings = {timeout: 300}
+
+  template: ()->
+    "<div class='popover popover--tooltip popover--Linktooltip popover--bottom is-active'>
+      <div class='popover-inner'>
+        <a href='#' target='_blank'> Link </a>
+      </div>
+      <div class='popover-arrow'>
+      </div>
+    </div>"
+
+  #display & copy original link
+  positionAt: (ev)->
+    target           = $(ev.currentTarget)
+    target_positions = @resolveTargetPosition(target)
+    target_offset    = target.offset()
+    target_width     = target.outerWidth()
+    target_height    = target.outerHeight()
+    popover_width    = $(@el).find(".popover").outerWidth()
+    top_value        = target_positions.top + target_height
+    left_value       = target_offset.left + (target_width/2) - (popover_width/2)
+
+    $(@el).find(".popover")
+      .css("top", top_value)
+      .css("left",  left_value )
+      .show()
+
+    @handleDirection(target)
+
+  displayAt: (ev)->
+    @cancelHide()
+    #debugger
+    target = $(ev.currentTarget)
+    $(@el).find(".popover-inner a").text( target.attr('href') ).attr('href', target.attr("href") )
+    @positionAt(ev)
+    $(@el).find(".popover--tooltip").css("pointer-events", "auto")
+    $(@el).show()
+
+  cancelHide: ()->
+    utils.log "Cancel Hide"
+    clearTimeout @hideTimeout
+
+  hide: (ev)->
+    @cancelHide()
+    @hideTimeout = setTimeout ()=>
+      $(@el).find(".popover").hide()
+    , @settings.timeout
+
+  resolveTargetPosition: (target)->
+    if target.parents(".graf--mixtapeEmbed").exists()
+      target.parents(".graf--mixtapeEmbed").position()
+    else
+      target.position()
+
+
+  handleDirection: (target)->
+    if target.parents(".graf--mixtapeEmbed").exists()
+      $(@el).find(".popover").removeClass("popover--bottom").addClass("popover--top")
+    else
+      $(@el).find(".popover").removeClass("popover--top").addClass("popover--bottom")
+
+  render: ()->
+    $(@template()).insertAfter(@editor.$el)

data/app/assets/javascripts/dante.js

@@ -4,4 +4,5 @@
 //= require dante/view
 //= require dante/editor
 //= require dante/tooltip
+//= require dante/popover
 //= require dante/menu

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

@@ -0,0 +1,52 @@
+.imageCaption {
+  & {
+    position: absolute;
+    left: -172px;
+    width: 150px;
+    top: 0;
+    text-align: right;
+    margin-top: 0;
+    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
+    letter-spacing: 0.01rem;
+    font-weight: 400;
+    font-style: italic;
+    font-size: 14px;
+    line-height: 1.4;
+    color: rgba(0,0,0,0.6);
+    outline: 0;
+    z-index: 300;
+  }
+  &:before {
+    width: 25%;
+    margin-left: 75%;
+    border-top: 1px solid rgba(0,0,0,0.15);
+    display: block;
+    content: "";
+    margin-bottom: 10px;
+  }
+}
+@media (max-width: 1200px) {
+  .imageCaption,
+  .postField--outsetCenterImage > .imageCaption {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    margin-top: 10px;
+  }
+  .imageCaption:before {
+    display: none;
+  }
+}
+
+figure.is-defaultValue .imageCaption,
+.graf--sectionCaption.is-defaultValue {
+  display: none;
+}
+
+.graf--figure.is-mediaFocused .imageCaption,
+.graf--figure.is-defaultValue.is-selected .imageCaption,
+section.is-mediaFocused .graf--sectionCaption,
+.graf--sectionCaption.is-defaultValue.is-selected {
+  display: block;
+}