dante-editor 0.1.6 → 0.1.7

data/lib/dante-editor/version.rb

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

data/source/non_editable.erb

@@ -0,0 +1,45 @@
+---
+title: Dante Editor example
+---
+
+
+<article class="postArticle">
+  <div class="postContent">
+
+    <div class="notesSource">
+
+      <div class="debug postField postField--body smart-media-plugin">
+
+        <section class="section--first section--last"> 
+
+          <div class="section-divider layoutSingleColumn"> 
+            <hr class="section-divider"> 
+          </div> 
+
+          <div class="section-content"> 
+            <div class="section-inner layoutSingleColumn">
+
+              <%= partial "partials/existing_content" %>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</article>
+
+
+
+<script type="text/javascript">
+  article = new Dante.Article({ el: ".postField--body" })
+  article.start()
+</script>
+
+

data/source/partials/_existing_content.erb

@@ -0,0 +1,35 @@
+
+<h3 class="graf graf--h3 graf--first" name="mmvdzpc52t4479fi529">Dante Editor</h3>
+
+<h4 class="graf graf--h4" name="osd5p3nu17etutyb9">Just another Medium editor clone.</h4>
+
+<p class="graf graf--p" name="a1ffkj6snfqkwzjv2t9"><strong>Motivation:</strong><br></p>
+
+<blockquote class="graf graf--blockquote" name="vb1qp19ubnbx1qcnxw29">
+  <p>So far we have tried all the Medium.com wysiwyg clones out there, those are really great, and each have their pros and cons. <a href="http://howtox.com/medium-editor-clones-in-js/" class="markup--anchor markup--p-anchor" data-href="http://howtox.com/medium-editor-clones-in-js/">But none of them has all the features that the real medium editor provides.</a> So we wondered, How complicated could be write our own version of Medium's wysiwyg?</p>
+</blockquote>
+
+<h3 class="graf graf--h3" name="x99z80r16pibtjoflxr">This is a live demo:</h3>
+<p class="graf graf--p" name="ng6qy18yt8no76hfflxr">Please click the image or type everywere. Use it as you were using Medium. Have fun!<br></p>
+
+<figure contenteditable="false" class="graf graf--figure is-selected" name="mg4tfk9ud8e0cnmi" tabindex="0"> <div style="max-width: 245px; max-height: 184px;" class="aspectRatioPlaceholder is-locked"> <div style="padding-bottom: 75.102%;" class="aspect-ratio-fill"></div> <img src="http://i.imgur.com/0erQFLu.gif" data-height="184" data-width="245" data-image-id="" class="graf-image" data-delayed-src=""> </div> <figcaption contenteditable="true" data-default-value="Type caption for image (optional)" class="imageCaption">this is a text</figcaption> </figure><p class="graf graf--p" name="xyif2a1piq5ffb9be29">
+This Library will <em>work</em> fine on modern browsers, such as Chrome, Safari, FF and IE.
+We don't have any intentions to target all browsers versions. Really… If you like this library and you need backward compatibility for an specific version, you can submit a patch to help with the development or just upgrade your shitty browser :D<br></p>
+
+<pre class="graf graf--pre" name="l44ayschy478wa5rk9">Dante is being at active development, so the internal api could change a lot but is good to use.
+</pre>
+
+<p class="graf graf--p" name="v1qyjusgoj13y8sq0k9">(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)<br></p>
+
+<p class="graf graf--p" name="uuajflrkzboaxyxh6w29"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QVH5DXB326YQG" class="markup--anchor markup--p-anchor" data-href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QVH5DXB326YQG">Donate at paypal.</a><br></p>
+
+<h4 class="graf graf--h4" name="kseec8atv22n4b1emi">MAINTAINERS:</h4>
+
+<ul class="postList" name="r9iluzwo1lb2617nwmi">
+  <li class="graf graf--li"><a data-id="1" data-type="user" data-href="api/miguel.json" class="markup--user markup--p-user"> Miguel Michelson </a></li>
+  <li class="graf graf--li"><a data-id="1" data-type="user" data-href="api/cristian.json" class="markup--user markup--p-user"> Cristian Ferrari </a></li>
+</ul>
+
+<p class="graf graf--p graf--last" name="saehi6q7u2jc2ph0vn29"><a class="markup--anchor markup--p-anchor">Licensed under MIT.</a> 2014<br></p>
+
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-18 00:00:00.000000000 Z
+date: 2016-06-19 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email:
@@ -38,6 +38,7 @@ files:
 - app/assets/fonts/dante/fontello.woff
 - app/assets/images/dante/media-loading-placeholder.png
 - app/assets/javascripts/dante.js
+- app/assets/javascripts/dante/article.js.coffee
 - app/assets/javascripts/dante/behavior.js.coffee
 - app/assets/javascripts/dante/behaviors/image.js.coffee
 - app/assets/javascripts/dante/behaviors/list.js.coffee
@@ -47,7 +48,10 @@ files:
 - app/assets/javascripts/dante/dante.js.coffee.erb
 - app/assets/javascripts/dante/editor.js.coffee
 - app/assets/javascripts/dante/menu.js.coffee
-- app/assets/javascripts/dante/popover.js.coffee
+- app/assets/javascripts/dante/popovers/anchor.js.coffee
+- app/assets/javascripts/dante/popovers/card.js.coffee
+- app/assets/javascripts/dante/popovers/image.js.coffee
+- app/assets/javascripts/dante/popovers/typeahead.js.coffee
 - app/assets/javascripts/dante/tooltip.js.coffee
 - app/assets/javascripts/dante/tooltip_widget.js.coffee
 - app/assets/javascripts/dante/tooltip_widgets/embed.js.coffee
@@ -129,10 +133,12 @@ files:
 - source/layouts/layout.erb
 - source/layouts/spec.html.erb
 - source/lists.html.erb
+- source/non_editable.erb
 - source/partials/_content.erb
 - source/partials/_example_1.erb
 - source/partials/_example_2.erb
 - source/partials/_example_3.erb
+- source/partials/_existing_content.erb
 - source/partials/_lists.erb
 - source/partials/_readme.markdown
 - source/partials/test/_example_1.erb

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

@@ -1,424 +0,0 @@
-utils = Dante.utils
-
-class Dante.Editor.PopOver extends Dante.View
-  el: "body"
-
-  events:
-    "mouseover .popover--tooltip": "cancelHide"
-    "mouseout  .popover--tooltip": "hide"
-
-  initialize: (opts = {})->
-    utils.log("initialized popover")
-    @pop_over_element = ".popover--tooltip"
-    @editor = opts.editor
-    @hideTimeout
-    @settings = {timeout: 300}
-
-  template: ()->
-    "<div class='dante-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)
-    wrapperOffset    = target.closest('article.postArticle').offset()
-    target_positions = @resolveTargetPosition(target)
-    target_offset    = target.offset()
-    target_width     = target.outerWidth()
-    target_height    = target.outerHeight()
-    popover_width    = @findElement().outerWidth()
-    top_value        = target_positions.top + target_height
-    left_value       = target_offset.left + (target_width/2) - (popover_width/2) - wrapperOffset.left
-
-    @findElement()
-      .css("top", top_value)
-      .css("left",  left_value )
-      .show()
-
-    @handleDirection(target)
-
-  displayAt: (ev)->
-    @cancelHide()
-    target = $(ev.currentTarget)
-    @findElement()
-      .find(".popover-inner a")
-      .text( target.attr('href') )
-      .attr('href', target.attr("href") )
-    @positionAt(ev)
-    @findElement().css("pointer-events", "auto")
-    $(@el).show()
-
-  cancelHide: ()->
-    utils.log "Cancel Hide"
-    clearTimeout @hideTimeout
-
-  hide: (ev)->
-    @cancelHide()
-    @hideTimeout = setTimeout ()=>
-      @findElement().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()
-      @findElement().removeClass("popover--bottom").addClass("popover--top")
-    else
-      @findElement().removeClass("popover--top").addClass("popover--bottom")
-
-  findElement: ()->
-    $(@el).find(@pop_over_element)
-
-  render: ()->
-    $(@template()).insertAfter(@editor.$el)
-
-class Dante.Editor.PopOverTypeAhead extends Dante.Editor.PopOver
-  el: "body"
-
-  events:
-    "mouseover .popover--typeahead": "cancelHide"
-    "mouseout  .popover--typeahead": "hide"
-
-    "click .typeahead-item": "handleOptionSelection"
-
-  initialize: (opts = {})->
-    @pop_over_element = "popover--typeahead"
-    utils.log("initialized popover")
-    @editor = opts.editor
-    @hideTimeout
-    @settings = {timeout: 300}
-    @typeaheadStyles()
-
-  template: ()->
-    "<div class='dante-popover popover--typeahead js-popover typeahead typeahead--mention popover--maxWidth360 popover--bottom is-active'>
-      <div class='popover-inner js-popover-inner'>
-        <ul></ul>
-      </div>
-      <div class='popover-arrow' style='left: 297px;'></div>
-    </div>"
-
-  popoverItem: (item)->
-    "<li class='typeahead-item'
-      data-action-value='#{item.text}'
-      data-action='typeahead-populate' data-id='#{item.id}'
-      data-type='#{item.type}'
-      data-href='#{item.href}'>
-
-      <div class='dante-avatar'>
-        <img src='#{item.avatar}'
-          class='avatar-image avatar-image--icon'
-          alt='#{item.text}'>
-
-        <span class='avatar-text'>#{item.text}</span>
-        <em class='avatar-description'>#{item.description}</em>
-
-      </div>
-
-    </li>"
-
-  typeaheadStyles: ->
-    @classesForCurrent = "typeahead typeahead--mention popover--maxWidth360"
-
-  handleOptionSelection: (ev)->
-    ev.preventDefault
-    console.log "Select option here!"
-    data = $(ev.currentTarget).data()
-    $(".markup--query").replaceWith(@linkTemplate(data))
-    @hide(0)
-    #@setRangeAt(new_paragraph[0])
-
-  linkTemplate: (data)->
-    "<a href='#'
-      data-type='#{data.type}'
-      data-href='#{data.href}'
-      data-id='#{data.id}'
-      class='markup--user markup--p-user'>
-      #{data.actionValue}
-    </a>"
-
-  #display & copy original link
-  positionAt: (target)->
-    target           = $(target)
-    wrapperOffset    = target.closest('article.postArticle').offset()
-    target_positions = @resolveTargetPosition(target)
-    target_offset    = target.offset()
-    target_width     = target.outerWidth()
-    target_height    = target.outerHeight()
-    popover_width    = @findElement().outerWidth()
-    top_value        = target_positions.top + target_height
-    left_value       = target_offset.left + (target_width/2) - (popover_width/2) - wrapperOffset.left
-
-    @findElement()
-      .css("top", top_value)
-      .css("left",  left_value )
-      .show()
-
-    @handleDirection(target)
-
-  displayAt: (ev)->
-    @cancelHide()
-    #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
-
-  findElement: ->
-    $(@el).find(".#{@pop_over_element}")
-
-  hide: (ev, timeout = @settings.timeout)->
-    @cancelHide()
-    @hideTimeout = setTimeout ()=>
-      @findElement().hide()
-    , timeout
-
-  appendData: (data)->
-    @findElement().find(".popover-inner ul").html("")
-    _.each data, (item)=>
-      @findElement().find(".popover-inner ul").append(@popoverItem(item))
-
-  resolveTargetPosition: (target)->
-    if target.parents(".graf--mixtapeEmbed").exists()
-      target.parents(".graf--mixtapeEmbed").position()
-    else
-      target.position()
-
-  handleDirection: (target)->
-    if target.parents(".graf--mixtapeEmbed").exists()
-      @findElement().removeClass("popover--bottom").addClass("popover--top")
-    else
-      @findElement().removeClass("popover--top").addClass("popover--bottom")
-
-  render: ()->
-    $(@template()).insertAfter(@editor.$el)
-
-class Dante.Editor.PopOverCard extends Dante.Editor.PopOver
-
-  el: "body"
-
-  events:
-    "mouseover .popover--card": "cancelHide"
-    "mouseout  .popover--card": "hide"
-    "mouseover .markup--user" : "displayPopOver"
-    "mouseout  .markup--user" : "hidePopOver"
-    #"click .typeahead-item": "handleOptionSelection"
-
-  initialize: (opts = {})->
-    @pop_over_element = ".popover--card"
-    utils.log("initialized popover")
-    @editor = opts.editor
-    @hideTimeout
-    @settings = {timeout: 300}
-    @card_data = {}
-
-  template: ()->
-    "<div class='dante-popover popover--card js-popover popover--animated popover--flexible popover--top is-active'>
-      <div class='popover-inner js-popover-inner'>
-      </div>
-    </div>"
-
-  cardTemplate: ->
-    "<div class='popoverCard'>
-        <div class='u-clearfix'>
-
-            <div class='u-floatLeft popoverCard-meta'>
-                <h4 class='popoverCard-title'>
-                    <a class='link u-baseColor--link'
-                      href='#{@card_data.href}'
-                      title='#{@card_data.text}'
-                      aria-label='#{@card_data.text}'
-                      data-user-id='#{@card_data.id}'
-                      dir='auto'>
-                      #{@card_data.text}
-                    </a>
-                </h4>
-                <div class='popoverCard-description'>
-                  #{@card_data.description}
-                </div>
-            </div>
-
-            <div class='u-floatRight popoverCard-avatar'>
-              <a class='link dante-avatar u-baseColor--link'
-                href='#{@card_data.href}'
-                title='#{@card_data.text}'
-                aria-label='#{@card_data.text}'
-                data-user-id='#{@card_data.id}'
-                dir='auto'>
-                <img src='#{@card_data.avatar}'
-                class='avatar-image avatar-image--small'
-                  alt='#{@card_data.text}'>
-              </a>
-            </div>
-        </div>
-        #{ @footerTemplate() }
-        <div class='popover-arrow'></div>
-
-    </div>"
-
-  # TODO: implement footer
-  footerTemplate: ->
-    ""
-    ###
-    "<div class='popoverCard-actions u-clearfix'>
-      <div class='u-floatLeft popoverCard-stats'>
-          <span class='popoverCard-stat'>
-              Following
-              <span class='popoverCard-count js-userFollowingCount'>124</span>
-          </span>
-          <span class='popoverCard-stat'>
-              Followers
-              <span class='popoverCard-count js-userFollowersCount'>79</span>
-          </span>
-      </div>
-    </div>"
-    ###
-
-  displayPopOver: (ev)->
-    @.displayAt(ev)
-
-  displayAt: (ev)->
-    @cancelHide()
-
-    $.getJSON($(ev.currentTarget).data().href)
-    .success (data)=>
-      if @editor.suggest_resource_handler
-        @card_data =  @editor.suggest_resource_handler(data)
-      else
-        @card_data = data
-
-      @refreshTemplate()
-      @positionAt(ev)
-
-  hidePopOver: (ev)->
-    @.hide(ev)
-
-  refreshTemplate: ->
-    $(".popover--card .popover-inner").html(@cardTemplate())
-
-class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
-
-  el: "body"
-
-  events:
-    "click .graf" : "handleHide"
-    "click .dante-menu-button.align-left": "alignLeft"
-    "click .dante-menu-button.align-center": "alignCenter"
-
-  #  #"click": ""
-  #  #"mouseover .popover--tooltip": "cancelHide"
-  #  #"mouseout  .popover--tooltip": "hide"
-
-  initialize: (opts = {})->
-    utils.log("initialized popover")
-    @pop_over_element = ".popover--Aligntooltip"
-    @editor = opts.editor
-    @hideTimeout
-    @settings = {timeout: 100}
-
-  alignLeft: (ev)->
-    @activateLink $(ev.currentTarget)
-    @findSelectedImage().addClass("graf--layoutOutsetLeft")
-
-  handleHide: (ev)->
-    target = $(ev.currentTarget)
-    @hide(ev) unless target.hasClass("graf--figure") and target.hasClass("is-mediaFocused")
-
-  alignCenter: (ev)->
-    @activateLink $(ev.currentTarget)
-    @findSelectedImage().removeClass("graf--layoutOutsetLeft")
-    @repositionWithActiveImage()
-
-  handleActiveClass: ->
-    @findElement().find(".dante-menu-button").removeClass("active")
-    if @findSelectedImage().hasClass("graf--layoutOutsetLeft")
-      @findElement().find(".icon-image-left").parent().addClass("active")
-    else
-      @findElement().find(".icon-image-center").parent().addClass("active")
-
-  activateLink: (element)->
-    setTimeout =>
-      @repositionWithActiveImage()
-    , 20
-
-  repositionWithActiveImage: ->
-    # pass the same element that is passed from click event
-    @positionPopOver(@findSelectedImage().find("div") )
-
-  template: ()->
-    "<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>"
-
-  positionPopOver: (target)->
-    target_offset    = target.offset()
-    target_position  = target.parent().position()
-    target_width     = target.outerWidth()
-    target_height    = target.outerHeight()
-    popover_width    = @findElement().outerWidth()
-
-    # hacky hack
-    pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then 72 else 74
-
-    top_value  = target_position.top - pad_top # target_positions.top + target_height
-    left_value = target_offset.left + (target_width/2) - (popover_width/2)
-
-    @findElement()
-      .css("top", top_value)
-      .css("left",  left_value )
-      .show()
-      .addClass("is-active")
-
-    @handleActiveClass()
-
-  hide: (ev)->
-    @cancelHide()
-    @hideTimeout = setTimeout ()=>
-      @findElement()
-      .hide()
-      .removeClass("is-active")
-    , @settings.timeout
-
-  findSelectedImage: ->
-    $(".graf--figure.is-mediaFocused")
-
-  render: ()->
-    $(@template()).insertAfter(@editor.$el)