dante-editor 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73da3d8fd1e1f91d98447623572bc34f01875b6c
-  data.tar.gz: 119bfee12fff5d4ed905ff0bf3a2b96c32bc1eb4
+  metadata.gz: 12b6c008cc84a81f332ce2b097e0def68fbff62f
+  data.tar.gz: 3153ed57f204d5830ce368f354a4bde3ebb3661b
 SHA512:
-  metadata.gz: 5ee9aa76441e57c48f1076c7a15fe89b7fd487e556c4f468a566ca2ed4143274e2c1fc2a631aa6e270c6c5ea7b5c3692583123630b6ff2edfd5851521f22eaa3
-  data.tar.gz: 2fabadbecdae53b7fd83614bae1cd41cbe8fa39ee8d1abb8520521b7effb960e4234b614f2a93ea55243cac62b9cc72881698440937bc3335dcadac129b8a64a
+  metadata.gz: f2e0d936ebb9e121109f6b2eb59fd3aa69d0a7456e6d9ace4ba7e505104454d023680a8a469da200ecc4001cd04dfebe0655cd357145e1f3dda36cd869d43cd8
+  data.tar.gz: d833dea6b440331f16b254e3ab7835b0460a604fd0ce11ce592033bc9c0cfff66ce090061fb3dadc8eb3a1dec271710ca81ab8d0623d337bc1aca5632e2f07ee

data/Gemfile.lock

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

data/app/assets/javascripts/dante/behaviors/image.js.coffee

@@ -4,7 +4,7 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
 
   events:
     "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
-    "click .graf--figure figcaption" : "handleGrafFigureSelectCaption"
+    "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
     "keyup .graf--figure figcaption"   : "handleGrafCaptionTyping"
 
     # TODO: this is from embed! move this to embed behavior
@@ -25,7 +25,7 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
 
   showAlignPopover: (ev)->
     target = $(ev.currentTarget)
-    @editor.pop_over_align.positionPopOver(target) unless $(".popover--Aligntooltip").hasClass('is-active')
+    @editor.pop_over_align.positionPopOver(target)
 
   handleGrafFigureSelectCaption: (ev)->
     utils.log "FIGCAPTION"

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

@@ -339,15 +339,21 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
     @findSelectedImage().removeClass("graf--layoutOutsetLeft")
     @repositionWithActiveImage()
 
-  activateLink: (element)->
+  handleActiveClass: ->
     @findElement().find(".dante-menu-button").removeClass("active")
-    element.addClass("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: ->
-    @positionPopOver(@findSelectedImage())
+    # pass the same element that is passed from click event
+    @positionPopOver(@findSelectedImage().find("div") )
 
   template: ()->
     "<div class='dante-popover popover--Aligntooltip popover--top'>
@@ -363,11 +369,12 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
           <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'>
+          <li class='dante-menu-button align-center'>
             <span class='tooltip-icon icon-image-center'></span>
           </li>
 
@@ -381,15 +388,16 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
 
   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 -30 else 30
+    pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then 52 else 54
 
-    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)
+    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)
@@ -397,7 +405,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
       .show()
       .addClass("is-active")
 
-    # @handleDirection(target)
+    @handleActiveClass()
 
   hide: (ev)->
     @cancelHide()
@@ -408,7 +416,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
     , @settings.timeout
 
   findSelectedImage: ->
-    $(".graf--figure").addClass("is-selected is-mediaFocused")
+    $(".graf--figure.is-mediaFocused")
 
   render: ()->
     $(@template()).insertAfter(@editor.$el)

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.0.14",
+  "version" : "0.1.1",
   "keywords": [
     "css",
     "sass",
@@ -37,7 +37,7 @@
     "source"
   ],
   "dependencies": {
-    "jquery": "*",
+    "jquery": "2.1.1",
     "underscore" : "*",
     "sanitize.js" : "*"
   }

data/dist/js/dante-editor.js

@@ -8,7 +8,7 @@
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.1.0"
+    version: "0.1.1"
   };
 
 }).call(this);
@@ -1975,9 +1975,7 @@
     Image.prototype.showAlignPopover = function(ev) {
       var target;
       target = $(ev.currentTarget);
-      if (!$(".popover--Aligntooltip").hasClass('is-active')) {
-        return this.editor.pop_over_align.positionPopOver(target);
-      }
+      return this.editor.pop_over_align.positionPopOver(target);
     };
 
     Image.prototype.handleGrafFigureSelectCaption = function(ev) {
@@ -3265,9 +3263,16 @@
       return this.repositionWithActiveImage();
     };
 
-    ImageTooltip.prototype.activateLink = function(element) {
+    ImageTooltip.prototype.handleActiveClass = function() {
       this.findElement().find(".dante-menu-button").removeClass("active");
-      element.addClass("active");
+      if (this.findSelectedImage().hasClass("graf--layoutOutsetLeft")) {
+        return this.findElement().find(".icon-image-left").parent().addClass("active");
+      } else {
+        return this.findElement().find(".icon-image-center").parent().addClass("active");
+      }
+    };
+
+    ImageTooltip.prototype.activateLink = function(element) {
       return setTimeout((function(_this) {
         return function() {
           return _this.repositionWithActiveImage();
@@ -3276,23 +3281,25 @@
     };
 
     ImageTooltip.prototype.repositionWithActiveImage = function() {
-      return this.positionPopOver(this.findSelectedImage());
+      return this.positionPopOver(this.findSelectedImage().find("div"));
     };
 
     ImageTooltip.prototype.template = function() {
-      return "<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>";
+      return "<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>";
     };
 
     ImageTooltip.prototype.positionPopOver = function(target) {
-      var left_value, pad_top, popover_width, target_height, target_offset, target_width, top_value;
+      var left_value, pad_top, popover_width, target_height, target_offset, target_position, target_width, top_value;
       target_offset = target.offset();
+      target_position = target.parent().position();
       target_width = target.outerWidth();
       target_height = target.outerHeight();
       popover_width = this.findElement().outerWidth();
-      pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ? -30 : 30;
-      top_value = target_offset.top - target_height - pad_top;
+      pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ? 52 : 54;
+      top_value = target_position.top - pad_top;
       left_value = target_offset.left + (target_width / 2) - (popover_width / 2);
-      return this.findElement().css("top", top_value).css("left", left_value).show().addClass("is-active");
+      this.findElement().css("top", top_value).css("left", left_value).show().addClass("is-active");
+      return this.handleActiveClass();
     };
 
     ImageTooltip.prototype.hide = function(ev) {
@@ -3305,7 +3312,7 @@
     };
 
     ImageTooltip.prototype.findSelectedImage = function() {
-      return $(".graf--figure").addClass("is-selected is-mediaFocused");
+      return $(".graf--figure.is-mediaFocused");
     };
 
     ImageTooltip.prototype.render = function() {

data/lib/dante-editor/version.rb

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

data/source/api/suggest.json.erb

@@ -3,20 +3,20 @@
   "type": "user",
   "text": "John Lennon",
   "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg",
-  "href": "/api/resource.json",
+  "href": "api/resource.json",
   "description": "@john"
 }, {
   "id": "2",
   "type": "user",
   "text": "Ringo Star",
   "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/iannnnn/128.jpg",
-  "href": "/api/resource.json",
+  "href": "api/resource.json",
   "description": "@ringo"
 }, {
   "id": "3",
   "type": "user",
   "text": "Paul McCartney",
   "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg",
-  "href": "/api/resource.json",
+  "href": "api/resource.json",
   "description": "@paul"
 }]

data/source/index.html.erb

@@ -16,6 +16,7 @@ title: Dante Editor example
       el: "#editor",
       upload_url: "/uploads/new.json",
       store_url: "/api/save.json",
+      suggest_url: "api/suggest.json",
       store_success_handler: handler,
       debug: <%= build? ? false : true %>
     }

data/source/partials/_readme.markdown

@@ -18,7 +18,7 @@ We don't have any intention to target all browsers versions, really... if you li
 
 ### MAINTAINERS:
 
-+ <a href="#" data-type="user" data-href="/api/miguel.json" data-id="1" class="markup--user markup--p-user"> Miguel Michelson </a>
-+ <a href="#" data-type="user" data-href="/api/cristian.json" data-id="1" class="markup--user markup--p-user"> Cristian Ferrari </a>
++ <a href="#" data-type="user" data-href="api/miguel.json" data-id="1" class="markup--user markup--p-user"> Miguel Michelson </a>
++ <a href="#" data-type="user" data-href="api/cristian.json" data-id="1" class="markup--user markup--p-user"> Cristian Ferrari </a>
 
 [Licensed under MIT.](./license.md) 2014

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-13 00:00:00.000000000 Z
+date: 2016-06-14 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email: