dante-editor 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b896bd119ce66604964b20e7e45e6d7547e26022
-  data.tar.gz: 4675935e48ee846eccbf5ba67f5c961d9343635b
+  metadata.gz: 2cfab9a7cc9692beab99dac0d5a60bae095b0317
+  data.tar.gz: 5665200f9948f8ef09ac040e941862240271ac95
 SHA512:
-  metadata.gz: 011a522973ef58cc5e486d70779f52dc876b65c3cb64478634e8b6fc6584a424dcab24b9c274390af0390e7f8c72cd72a3a99b9466c1eb5825b3c3653ad7918f
-  data.tar.gz: d994b05d927cb2059506b0d251252dc9dcf90b7413f6e677b1714697af3fecf8310ae9575403ae7e879ae120c2c9b4c0c42efdb5d8a8645a302e5a3501ef03b4
+  metadata.gz: 32c100555c921c8f70f318e8f1f8b4fcf5af68c7192f595a04f9d4b7ca8c77d44c42eb76957b4e1d842776e1582e3c8e979392a1e59e8f21258a8694aaf7d267
+  data.tar.gz: 17511f2883bb0b03a6614119ca4d1bd63f5e82f3f456cebe19f2d78d99c25af0da8f2d3218aecad31648f07672d86be14aa1ff5876743f492ba8706e2276bfc4

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

@@ -26,13 +26,14 @@ class Dante.Editor.PopOver extends Dante.View
   #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)
+    left_value       = target_offset.left + (target_width/2) - (popover_width/2) - wrapperOffset.left
 
     @findElement()
       .css("top", top_value)
@@ -147,13 +148,14 @@ class Dante.Editor.PopOverTypeAhead extends Dante.Editor.PopOver
   #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)
+    left_value       = target_offset.left + (target_width/2) - (popover_width/2) - wrapperOffset.left
 
     @findElement()
       .css("top", top_value)
@@ -394,7 +396,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
     popover_width    = @findElement().outerWidth()
 
     # hacky hack
-    pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then 52 else 54
+    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)

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

@@ -34,8 +34,20 @@ class Dante.Editor.Tooltip extends Dante.View
 
 
   render: ()=>
-    $(@el).html(@template())
-    $(@el).addClass("is-active")
+    tooltip = $(@el)
+    tooltip.html(@template())
+    tooltip.addClass("is-active")
+
+    # Set menu size
+    tooltip_menu           = tooltip.find(".inlineTooltip-menu")
+    tooltip_buttons        = tooltip_menu.find(".inlineTooltip-button")
+    tooltip_button_width   = $(tooltip_buttons[0]).css("width")
+    tooltip_button_spacing = $(tooltip_buttons[0]).css("margin-right")
+    tooltip_button_size    = parseInt(tooltip_button_width.replace(/px/,"")) + parseInt(tooltip_button_spacing.replace(/px/,""))
+    tooltip_menu_size      = tooltip_button_size * tooltip_buttons.length
+
+    # Add 1px on expanded tooltip to avoid colapsed buttons in FF
+    tooltip_menu.css("width", "#{tooltip_menu_size + 1}px")
     @
 
   toggleOptions: ()=>

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

@@ -20,17 +20,14 @@
   &.is-scaled {
     -webkit-transition-delay: 0;
     transition-delay: 0;
+    width: auto;
   }
 }
 
 // MENU
 .inlineTooltip-menu {
-  & {
-    width: $tooltip-size-expanded;
-  }
-  button {
-    margin-right: $tooltip-button-spacing;
-  }
+  display: inline-block;
+  margin-left: $tooltip-size + $tooltip-menu-spacing;
 }
 
 // BUTTON
@@ -39,7 +36,7 @@
   // BASE
   & {
     float: left;
-    margin-right: $tooltip-menu-spacing;
+    margin-right: $tooltip-button-spacing;
     display: inline-block;
     position: relative;
     outline: 0;
@@ -105,6 +102,11 @@
 
   // CONTROL
   &.control {
+    & {
+      display: block;
+      position: absolute;
+      margin-right: $tooltip-menu-spacing;
+    }
     & {
       -webkit-transition: -webkit-#{$tooltip-forward-transition}, $tooltip-default-transition;
               transition: $tooltip-forward-transition, $tooltip-default-transition;

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

@@ -80,15 +80,13 @@ $tooltip-border-radius:         999em;
 $tooltip-button-spacing:        9px;
 $tooltip-menu-spacing:          22px;
 
-$tooltip-items:                 3;
+$tooltip-items:                 10; // Fix this and remove it
 $tooltip-item-delay:            30;
 $tooltip-size:                  32px;
 $tooltip-line-height:           $tooltip-size;
 
 $tooltip-caret-size:            12px;
 
-// Add 1px on expanded tooltip to avoid colapsed buttons in FF
-$tooltip-size-expanded:         1 + ($tooltip-size + $tooltip-menu-spacing) + (($tooltip-size + $tooltip-button-spacing) * $tooltip-items);
 $tooltip-default-transition:    100ms border-color, 100ms color;
 $tooltip-forward-transition:    transform 100ms;
 $tooltip-backward-transition:   transform 250ms;

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.1.4",
+  "version" : "0.1.5",
   "keywords": [
     "css",
     "sass",

data/dist/css/dante-editor.css

@@ -435,16 +435,16 @@
     pointer-events: auto; }
   .inlineTooltip.is-scaled {
     -webkit-transition-delay: 0;
-    transition-delay: 0; }
+    transition-delay: 0;
+    width: auto; }
 
 .inlineTooltip-menu {
-  width: 178px; }
-.inlineTooltip-menu button {
-  margin-right: 9px; }
+  display: inline-block;
+  margin-left: 54px; }
 
 .inlineTooltip-button {
   float: left;
-  margin-right: 22px;
+  margin-right: 9px;
   display: inline-block;
   position: relative;
   outline: 0;
@@ -490,6 +490,27 @@
   transform: scale(1);
   -webkit-transition: -webkit-transform 250ms, 100ms border-color, 100ms color;
   transition: transform 250ms, 100ms border-color, 100ms color; }
+.inlineTooltip-button.scale:nth-child(11) {
+  -webkit-transition-delay: 300ms;
+  transition-delay: 300ms; }
+.inlineTooltip-button.scale:nth-child(10) {
+  -webkit-transition-delay: 270ms;
+  transition-delay: 270ms; }
+.inlineTooltip-button.scale:nth-child(9) {
+  -webkit-transition-delay: 240ms;
+  transition-delay: 240ms; }
+.inlineTooltip-button.scale:nth-child(8) {
+  -webkit-transition-delay: 210ms;
+  transition-delay: 210ms; }
+.inlineTooltip-button.scale:nth-child(7) {
+  -webkit-transition-delay: 180ms;
+  transition-delay: 180ms; }
+.inlineTooltip-button.scale:nth-child(6) {
+  -webkit-transition-delay: 150ms;
+  transition-delay: 150ms; }
+.inlineTooltip-button.scale:nth-child(5) {
+  -webkit-transition-delay: 120ms;
+  transition-delay: 120ms; }
 .inlineTooltip-button.scale:nth-child(4) {
   -webkit-transition-delay: 90ms;
   transition-delay: 90ms; }
@@ -499,6 +520,10 @@
 .inlineTooltip-button.scale:nth-child(2) {
   -webkit-transition-delay: 30ms;
   transition-delay: 30ms; }
+.inlineTooltip-button.control {
+  display: block;
+  position: absolute;
+  margin-right: 22px; }
 .inlineTooltip-button.control {
   -webkit-transition: -webkit-transform 100ms, 100ms border-color, 100ms color;
   transition: transform 100ms, 100ms border-color, 100ms color;

data/dist/js/dante-editor.js

@@ -8,7 +8,7 @@
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.1.4"
+    version: "0.1.5"
   };
 
 }).call(this);
@@ -2992,8 +2992,17 @@
     };
 
     Tooltip.prototype.render = function() {
-      $(this.el).html(this.template());
-      $(this.el).addClass("is-active");
+      var tooltip, tooltip_button_size, tooltip_button_spacing, tooltip_button_width, tooltip_buttons, tooltip_menu, tooltip_menu_size;
+      tooltip = $(this.el);
+      tooltip.html(this.template());
+      tooltip.addClass("is-active");
+      tooltip_menu = tooltip.find(".inlineTooltip-menu");
+      tooltip_buttons = tooltip_menu.find(".inlineTooltip-button");
+      tooltip_button_width = $(tooltip_buttons[0]).css("width");
+      tooltip_button_spacing = $(tooltip_buttons[0]).css("margin-right");
+      tooltip_button_size = parseInt(tooltip_button_width.replace(/px/, "")) + parseInt(tooltip_button_spacing.replace(/px/, ""));
+      tooltip_menu_size = tooltip_button_size * tooltip_buttons.length;
+      tooltip_menu.css("width", "" + (tooltip_menu_size + 1) + "px");
       return this;
     };
 
@@ -3093,15 +3102,16 @@
     };
 
     PopOver.prototype.positionAt = function(ev) {
-      var left_value, popover_width, target, target_height, target_offset, target_positions, target_width, top_value;
+      var left_value, popover_width, target, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
       target = $(ev.currentTarget);
+      wrapperOffset = target.closest('article.postArticle').offset();
       target_positions = this.resolveTargetPosition(target);
       target_offset = target.offset();
       target_width = target.outerWidth();
       target_height = target.outerHeight();
       popover_width = this.findElement().outerWidth();
       top_value = target_positions.top + target_height;
-      left_value = target_offset.left + (target_width / 2) - (popover_width / 2);
+      left_value = target_offset.left + (target_width / 2) - (popover_width / 2) - wrapperOffset.left;
       this.findElement().css("top", top_value).css("left", left_value).show();
       return this.handleDirection(target);
     };
@@ -3213,15 +3223,16 @@
     };
 
     PopOverTypeAhead.prototype.positionAt = function(target) {
-      var left_value, popover_width, target_height, target_offset, target_positions, target_width, top_value;
+      var left_value, popover_width, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
       target = $(target);
+      wrapperOffset = target.closest('article.postArticle').offset();
       target_positions = this.resolveTargetPosition(target);
       target_offset = target.offset();
       target_width = target.outerWidth();
       target_height = target.outerHeight();
       popover_width = this.findElement().outerWidth();
       top_value = target_positions.top + target_height;
-      left_value = target_offset.left + (target_width / 2) - (popover_width / 2);
+      left_value = target_offset.left + (target_width / 2) - (popover_width / 2) - wrapperOffset.left;
       this.findElement().css("top", top_value).css("left", left_value).show();
       return this.handleDirection(target);
     };
@@ -3452,7 +3463,7 @@
       target_width = target.outerWidth();
       target_height = target.outerHeight();
       popover_width = this.findElement().outerWidth();
-      pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ? 52 : 54;
+      pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ? 72 : 74;
       top_value = target_position.top - pad_top;
       left_value = target_offset.left + (target_width / 2) - (popover_width / 2);
       this.findElement().css("top", top_value).css("left", left_value).show().addClass("is-active");

data/lib/dante-editor/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.5
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-14 00:00:00.000000000 Z
+date: 2016-06-17 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email:
@@ -158,7 +158,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
 summary: dante-editor yet another Medium editor clone.