dante-editor-seo 0.0.13

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

@@ -0,0 +1,216 @@
+utils = Dante.utils
+
+class Dante.Editor.Menu extends Dante.View
+  el: "#dante-menu"
+
+  events:
+    "mousedown li" : "handleClick"
+    "click .dante-menu-linkinput .dante-menu-button": "closeInput"
+    "keypress input": "handleInputEnter"
+
+  initialize: (opts={})=>
+    @config = opts.buttons || @default_config()
+    @current_editor = opts.editor
+
+    @commandsReg = {
+      block: /^(?:p|h[1-6]|blockquote|pre)$/
+      inline: /^(?:bold|italic|underline|insertorderedlist|insertunorderedlist|indent|outdent)$/,
+      source: /^(?:insertimage|createlink|unlink)$/
+      insert: /^(?:inserthorizontalrule|insert)$/
+      wrap: /^(?:code)$/
+    }
+
+    @lineBreakReg = /^(?:blockquote|pre|div|p)$/i;
+
+    @effectNodeReg = /(?:[pubia]|h[1-6]|blockquote|[uo]l|li)/i;
+
+    @strReg =
+      whiteSpace: /(^\s+)|(\s+$)/g,
+      mailTo: /^(?!mailto:|.+\/|.+#|.+\?)(.*@.*\..+)$/,
+      http: /^(?!\w+?:\/\/|mailto:|\/|\.\/|\?|#)(.*)$/
+
+  default_config: ()->
+    ###
+    buttons: [
+        'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule',
+        'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
+      ]
+    ###
+
+    buttons: ['bold', 'italic', 'h2', 'h3', 'h4', 'blockquote', 'createlink']
+
+  template: ()=>
+    html = "<div class='dante-menu-linkinput'><input class='dante-menu-input' placeholder='http://'><div class='dante-menu-button'>x</div></div>"
+    html += "<ul class='dante-menu-buttons'>"
+    _.each @config.buttons, (item)->
+      html += "<li class='dante-menu-button'><i class=\"dante-icon icon-#{item}\" data-action=\"#{item}\"></i></li>"
+    html += "</ul>"
+    html
+
+  render: ()=>
+    $(@el).html(@template())
+    @show()
+
+  handleClick: (ev)->
+    element   = $(ev.currentTarget).find('.dante-icon')
+    action    = element.data("action")
+    input     = $(@el).find("input.dante-menu-input")
+    utils.log("menu #{action} item clicked!")
+    @savedSel = utils.saveSelection()
+
+    if /(?:createlink)/.test(action)
+      if $(ev.currentTarget).hasClass("active")
+        @removeLink()
+      else
+        $(@el).addClass("dante-menu--linkmode")
+        input.focus()
+    else
+      @menuApply action
+
+    return false
+
+  closeInput: (e)->
+    $(@el).removeClass("dante-menu--linkmode")
+    false
+
+  handleInputEnter: (e)=>
+    if (e.which is 13)
+      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()
+      inputValue = input.val()
+      .replace(@strReg.whiteSpace, "")
+      .replace(@strReg.mailTo, "mailto:$1")
+      .replace(@strReg.http, "http://$1")
+      return @menuApply("createlink", inputValue)
+    action = "unlink"
+    @menuApply action
+
+  menuApply: (action, value)->
+
+    if @commandsReg.block.test(action)
+      utils.log "block here"
+      @commandBlock action
+    else if @commandsReg.inline.test(action) or @commandsReg.source.test(action)
+      utils.log "overall here"
+      @commandOverall action, value
+    else if @commandsReg.insert.test(action)
+      utils.log "insert here"
+      @commandInsert action
+    else if @commandsReg.wrap.test(action)
+      utils.log "wrap here"
+      @commandWrap action
+    else
+      utils.log "can't find command function for action: " + action
+
+    return false
+
+  setupInsertedElement: (element)->
+    n = @current_editor.addClassesToElement(element)
+    @current_editor.setElementName(n)
+    @current_editor.markAsSelected(n)
+
+  cleanContents: ()->
+    @current_editor.cleanContents()
+
+  commandOverall: (cmd, val) ->
+    message = " to exec 「" + cmd + "」 command" + ((if val then (" with value: " + val) else ""))
+
+    if document.execCommand(cmd, false, val)
+      utils.log "success" + message
+      n = @current_editor.getNode()
+      @current_editor.setupLinks($(n).find("a"))
+      @displayHighlights()
+      if $(n).parent().hasClass("section-inner")
+        n = @current_editor.addClassesToElement(n)
+        @current_editor.setElementName(n)
+      @current_editor.handleTextSelection(n)
+    else
+      utils.log "fail" + message, true
+    return
+
+  commandInsert: (name) ->
+    node = @current_editor.current_node
+    return unless node
+    @current_editor.current_range.selectNode node
+    @current_editor.current_range.collapse false
+    @commandOverall node, name
+
+  commandBlock: (name) ->
+    node = @current_editor.current_node
+    list = @effectNode(@current_editor.getNode(node), true)
+    name = "p" if list.indexOf(name) isnt -1
+    @commandOverall "formatblock", name
+
+  commandWrap: (tag) ->
+    node = @current_editor.current_node
+    val = "<" + tag + ">" + selection + "</" + tag + ">"
+    @commandOverall "insertHTML", val
+
+  # node effects
+  effectNode: (el, returnAsNodeName) ->
+    nodes = []
+    el = el or @current_editor.$el[0]
+    while el isnt @current_editor.$el[0]
+      if el.nodeName.match(@effectNodeReg)
+        nodes.push (if returnAsNodeName then el.nodeName.toLowerCase() else el)
+      el = el.parentNode
+    nodes
+
+  displayHighlights: ()->
+    #remove all active links
+    $(@el).find(".active").removeClass("active")
+
+    nodes = @effectNode(utils.getNode())
+    utils.log(nodes)
+    _.each nodes, (node)=>
+      tag = node.nodeName.toLowerCase()
+      switch tag
+        when "a"
+          $(@el).find('input').val $(node).attr("href")
+          tag = "createlink"
+        when "i"
+          tag = "italic"
+        when "u"
+          tag = "underline"
+        when "b"
+          tag = "bold"
+        when "code"
+          tag = "code"
+        when "ul"
+          tag = "insertunorderedlist"
+        when "ol"
+          tag = "insertorderedlist"
+        when "li"
+          tag = "indent"
+          utils.log "nothing to select"
+
+      if tag.match /(?:h[1-6])/i
+        $(@el).find(".icon-bold, .icon-italic, .icon-blockquote")
+        .parent("li").remove()
+      else if tag is "indent"
+        $(@el).find(".icon-h2, .icon-h3, .icon-h4, .icon-blockquote")
+        .parent("li").remove()
+        #.parent("li").hide()
+        #.addClass("hidden")
+
+      @highlight(tag)
+
+  highlight: (tag)->
+    $(".icon-#{tag}").parent("li").addClass("active")
+
+  show: ()->
+    $(@el).addClass("dante-menu--active")
+    @closeInput()
+    @displayHighlights()
+
+  hide: ()->
+    $(@el).removeClass("dante-menu--active")

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

@@ -0,0 +1,75 @@
+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()
+    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/tooltip.js.coffee

@@ -0,0 +1,82 @@
+utils = Dante.utils
+
+class Dante.Editor.Tooltip extends Dante.View
+  el: ".inlineTooltip"
+
+  events:
+    "click .inlineTooltip-button.control" : "toggleOptions"
+    "click .inlineTooltip-menu button" : "handleClick"
+
+  initialize: (opts = {})=>
+    @current_editor = opts.editor
+    @widgets        = opts.widgets
+
+  template: ()->
+    menu = ""
+
+    _.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>
+      </button>"
+
+    "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'>
+        <span class='tooltip-icon icon-plus'></span>
+    </button>
+    <div class='inlineTooltip-menu'>
+      #{menu}
+    </div>"
+
+  findWidgetByAction: (name)->
+
+    _.find @widgets, (e)->
+      e.action == name
+    
+
+  render: ()=>
+    $(@el).html(@template())
+    $(@el).addClass("is-active")
+    @
+
+  toggleOptions: ()=>
+    utils.log "Toggle Options!!"
+    $(@el).toggleClass("is-scaled")
+    return false
+
+  move: (coords)->
+    tooltip         = $(@el)
+    control_width   = tooltip.find(".control").css("width")
+    control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left")
+    pull_size       = parseInt(control_width.replace(/px/,"")) + parseInt(control_spacing.replace(/px/,""))
+    coord_left      = coords.left - pull_size
+    coord_top       = coords.top
+
+    $(@el).offset(top: coord_top, left: coord_left)
+
+  handleClick: (ev)->
+    name = $(ev.currentTarget).data('action')
+    utils.log name
+    ###
+    switch name
+      when "inline-menu-image"
+        @placeholder = "<p>PLACEHOLDER</p>"
+        @imageSelect(ev)
+      when "inline-menu-embed"
+        @displayEmbedPlaceHolder()
+      when "inline-menu-embed-extract"
+        @displayExtractPlaceHolder()
+      when "inline-menu-hr"
+        @splitSection()
+    ###
+    #debugger
+    sub_name = name.replace("inline-menu-", "")
+    if detected_widget = @findWidgetByAction(sub_name)
+      detected_widget.handleClick(ev)
+
+    return false
+
+  cleanOperationClasses: (node)->
+    node.removeClass("is-embedable is-extractable")
+
+  hide: ()=>
+    $(@el).removeClass("is-active is-scaled")

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

@@ -0,0 +1,10 @@
+class Dante.View.TooltipWidget extends Dante.View
+
+  initialize: (opts={})->
+    @icon        = opts.icon
+    @title       = opts.title
+    @actionEvent = opts.title
+
+  hide: ()=>
+    @.current_editor.tooltip_view.hide()
+

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

@@ -0,0 +1,60 @@
+utils = Dante.utils
+
+class Dante.View.TooltipWidget.Embed extends Dante.View.TooltipWidget
+
+  initialize: (opts={})->
+    @icon        = opts.icon  || "icon-video"
+    @title       = opts.title || "Add a video"
+    @action      = opts.action || "embed"
+    @current_editor = opts.current_editor
+
+  handleClick: (ev)->
+    @displayEmbedPlaceHolder(ev)
+
+  handleEnterKey: (ev, $node)->
+    if $node.hasClass("is-embedable")
+      @getEmbedFromNode($node);
+
+  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'>
+
+        </a>
+      </figcaption>
+    </figure>"
+
+  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()
+      .error (res)=>
+        @node.removeClass("spinner")
+

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

@@ -0,0 +1,64 @@
+utils = Dante.utils
+
+class Dante.View.TooltipWidget.EmbedExtract extends Dante.View.TooltipWidget
+
+  initialize: (opts={})->
+    @icon        = opts.icon  || "icon-embed"
+    @title       = opts.title || "Add an embed"
+    @action      = opts.action || "embed-extract"
+    @current_editor = opts.current_editor
+
+  handleClick: (ev)->
+    @displayExtractPlaceHolder(ev)
+
+  handleEnterKey: (ev, $node)->
+    if $node.hasClass("is-extractable")
+      @getExtractFromNode($node)
+
+  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>"
+
+  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()
+    .error (data)=>
+      @node.removeClass("spinner")
+
+  getExtract: (url)=>
+    $.getJSON("#{@current_editor.extract_url}#{url}").done (data)->
+      utils.log(data)