dante-editor 0.0.15 → 0.1.0

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

@@ -4,17 +4,18 @@ class Dante.Editor.PopOver extends Dante.View
   el: "body"
 
   events:
-    "mouseover .popover": "cancelHide"
-    "mouseout  .popover": "hide"
+    "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='popover popover--tooltip popover--Linktooltip popover--bottom is-active'>
+    "<div class='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'>
       <div class='popover-inner'>
         <a href='#' target='_blank'> Link </a>
       </div>
@@ -29,11 +30,11 @@ class Dante.Editor.PopOver extends Dante.View
     target_offset    = target.offset()
     target_width     = target.outerWidth()
     target_height    = target.outerHeight()
-    popover_width    = $(@el).find(".popover").outerWidth()
+    popover_width    = @findElement().outerWidth()
     top_value        = target_positions.top + target_height
     left_value       = target_offset.left + (target_width/2) - (popover_width/2)
 
-    $(@el).find(".popover")
+    @findElement()
       .css("top", top_value)
       .css("left",  left_value )
       .show()
@@ -43,9 +44,12 @@ class Dante.Editor.PopOver extends Dante.View
   displayAt: (ev)->
     @cancelHide()
     target = $(ev.currentTarget)
-    $(@el).find(".popover-inner a").text( target.attr('href') ).attr('href', target.attr("href") )
+    @findElement()
+      .find(".popover-inner a")
+      .text( target.attr('href') )
+      .attr('href', target.attr("href") )
     @positionAt(ev)
-    $(@el).find(".popover--tooltip").css("pointer-events", "auto")
+    @findElement().css("pointer-events", "auto")
     $(@el).show()
 
   cancelHide: ()->
@@ -55,7 +59,7 @@ class Dante.Editor.PopOver extends Dante.View
   hide: (ev)->
     @cancelHide()
     @hideTimeout = setTimeout ()=>
-      $(@el).find(".popover").hide()
+      @findElement().hide()
     , @settings.timeout
 
   resolveTargetPosition: (target)->
@@ -64,12 +68,347 @@ class Dante.Editor.PopOver extends Dante.View
     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)
+    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)
+
+    @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()
-      $(@el).find(".popover").removeClass("popover--bottom").addClass("popover--top")
+      @findElement().removeClass("popover--bottom").addClass("popover--top")
     else
-      $(@el).find(".popover").removeClass("popover--top").addClass("popover--bottom")
+      @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: 300}
+
+  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()
+
+  activateLink: (element)->
+    @findElement().find(".dante-menu-button").removeClass("active")
+    element.addClass("active")
+    setTimeout =>
+      @repositionWithActiveImage()
+    , 20
+
+  repositionWithActiveImage: ->
+    @positionPopOver(@findSelectedImage())
+
+  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 active'>
+            <span class='tooltip-icon icon-image-center'></span>
+          </li>
+
+        </ul>
+
+      </div>
+
+      <div class='popover-arrow'>
+      </div>
+    </div>"
+
+  positionPopOver: (target)->
+    target_offset    = target.offset()
+    target_width     = target.outerWidth()
+    target_height    = target.outerHeight()
+    popover_width    = @findElement().outerWidth()
+
+    # hacky hack
+    pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then -30 else 30
+
+    top_value        = target_offset.top - target_height - 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")
+
+    # @handleDirection(target)
+
+  hide: (ev)->
+    @cancelHide()
+    @hideTimeout = setTimeout ()=>
+      @findElement()
+      .hide()
+      .removeClass("is-active")
+    , @settings.timeout
+
+  findSelectedImage: ->
+    $(".graf--figure").addClass("is-selected is-mediaFocused")
 
   render: ()->
-    $(@template()).insertAfter(@editor.$el)
+    $(@template()).insertAfter(@editor.$el)

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

@@ -26,8 +26,8 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
     </figure>"
 
   #UPLOADER
-  #replace existing img tag , and wrap it in insertTamplate
-  #TODO: take the url and upload it
+  # replaces 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())

data/app/assets/javascripts/dante.js

@@ -3,6 +3,11 @@
 //= require dante/utils
 //= require dante/view
 //= require dante/editor
+//= require dante/behavior
+//= require dante/behaviors/suggest
+//= require dante/behaviors/image
+//= require dante/behaviors/list
+//= require dante/behaviors/save
 //= require dante/tooltip_widget
 //= require dante/tooltip_widgets/uploader
 //= require dante/tooltip_widgets/embed

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

@@ -0,0 +1,209 @@
+a[rel=token], .markup--query {
+    color: #00ab6b;
+    text-decoration: none;
+    background-image: none!important;
+}
+
+
+.typeahead--mention {
+    padding-top: 10px;
+}
+.typeahead .popover-inner {
+    padding: 0;
+    overflow: hidden;
+    min-width: 100px;
+}
+
+.typeahead .typeahead-item:first-child {
+  padding-top: 7px;
+}
+
+.typeahead--mention .typeahead-item {
+  padding: 6px 15px;
+  font-size: 13px;
+}
+
+.typeahead-item.is-active, .typeahead-item:hover  {
+  background: #02b875;
+  color: #fff;
+}
+.typeahead .typeahead-item {
+  cursor: pointer;
+  padding: 5px 10px;
+  line-height: 2;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.typeahead .dante-avatar {
+  //float: left;
+  margin: 0 6px 0 -2px;
+}
+
+.avatar-image--icon {
+  width: 32px;
+  height: 32px;
+}
+.avatar-image {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.typeahead-item .avatar-image {
+  width: 32px;
+  height: 32px;
+}
+
+.typeahead--mention .popover-arrow {
+    display: none;
+}
+
+.markup--user {
+  color: #00ab6b;
+  text-decoration: none;
+}
+
+
+
+//popover card styles
+
+.popover--card {
+  .popover-arrow{
+    top: -14px;
+  }
+
+  .popover--bottom .popover-arrow:after {
+      transform: rotate(45deg) translate(6px,6px);
+      box-shadow: -1px -1px 1px -1px rgba(0,0,0,.44);
+  }
+
+  .popover-arrow:after {
+      content: '';
+      display: block;
+      width: 14px;
+      height: 14px;
+      background: #fff;
+  }
+}
+
+.popover--animated.is-active {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s linear 0s,opacity .2s 0s;
+}
+
+.popover.is-active {
+  visibility: visible;
+}
+
+.popover--animated {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s linear .2s,opacity .2s 0s;
+}
+
+.popoverCard {
+  text-align: left;
+}
+
+.popoverCard-meta {
+  width: 192px;
+}
+.u-floatLeft {
+  float: left!important;
+}
+
+.u-floatRight {
+  float: right!important;
+}
+
+.popoverCard-title {
+  font-size: 18px;
+  margin-bottom: 5px;
+  margin-top: 0px;
+}
+
+.link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.popoverCard-description {
+  overflow: hidden;
+  color: rgba(0,0,0,.44);
+}
+
+.u-clearfix:after {
+    clear: both;
+}
+.u-clearfix:after, .u-clearfix:before {
+    display: table;
+    content: " ";
+}
+
+.dante-avatar {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.avatar-image--small {
+  width: 60px;
+  height: 60px;
+}
+.avatar-image {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.popoverCard-actions {
+  border-top: solid 1px rgba(0,0,0,.15);
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.popoverCard-stats {
+  font-size: 14px;
+  line-height: 36px;
+}
+
+.popoverCard-stat {
+  margin-right: 10px;
+  color: rgba(0,0,0,.44);
+}
+
+.popoverCard-count {
+  padding-left: 5px;
+  color: rgba(0,0,0,.6);
+}
+
+// popover-align
+
+
+
+
+// uploader tooltip
+
+.graf--layoutOutsetLeft {
+    margin-left: -160px;
+}
+
+.graf--layoutOutsetLeft {
+    width: 75%;
+}
+.graf--layoutInsetLeft, .graf--layoutOutsetLeft {
+    float: left;
+    margin-right: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+// .graf--layoutOutsetLeft

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

@@ -39,6 +39,20 @@
   }
 }
 
+figure.graf--layoutOutsetLeft {
+  .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;

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

@@ -34,7 +34,6 @@
   font-weight: bold;
 }
 
-
 .tooltip-icon {
   &:before {
     font-family: 'dante-tooltip';
@@ -51,7 +50,13 @@
   }
 }
 
-.icon-video:before { content: "\e600"; }
-.icon-image:before { content: "\e601"; }
-.icon-plus:before  { content: "\e602"; }
-.icon-embed:before { content: "\e603"; }
+.icon-image-center:before { content: "\e900"; }
+.icon-image-fill:before   { content: "\e901"; }
+.icon-image-left:before   { content: "\e902"; }
+.icon-image-wide:before   { content: "\e903"; }
+
+.icon-video:before        { content: "\e600"; }
+.icon-image:before        { content: "\e601"; }
+.icon-plus:before         { content: "\e602"; }
+.icon-embed:before        { content: "\e603"; }
+