dante-editor 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/app/assets/javascripts/dante/behaviors/image.js.coffee +2 -2
- data/app/assets/javascripts/dante/popover.js.coffee +17 -9
- data/bower.json +2 -2
- data/dist/js/dante-editor.js +20 -13
- data/lib/dante-editor/version.rb +1 -1
- data/source/api/suggest.json.erb +3 -3
- data/source/index.html.erb +1 -0
- data/source/partials/_readme.markdown +2 -2
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 12b6c008cc84a81f332ce2b097e0def68fbff62f
|
4
|
+
data.tar.gz: 3153ed57f204d5830ce368f354a4bde3ebb3661b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f2e0d936ebb9e121109f6b2eb59fd3aa69d0a7456e6d9ace4ba7e505104454d023680a8a469da200ecc4001cd04dfebe0655cd357145e1f3dda36cd869d43cd8
|
7
|
+
data.tar.gz: d833dea6b440331f16b254e3ab7835b0460a604fd0ce11ce592033bc9c0cfff66ce090061fb3dadc8eb3a1dec271710ca81ab8d0623d337bc1aca5632e2f07ee
|
data/Gemfile.lock
CHANGED
@@ -4,7 +4,7 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
|
|
4
4
|
|
5
5
|
events:
|
6
6
|
"click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
|
7
|
-
"click .graf--figure figcaption"
|
7
|
+
"click .graf--figure figcaption" : "handleGrafFigureSelectCaption"
|
8
8
|
"keyup .graf--figure figcaption" : "handleGrafCaptionTyping"
|
9
9
|
|
10
10
|
# TODO: this is from embed! move this to embed behavior
|
@@ -25,7 +25,7 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
|
|
25
25
|
|
26
26
|
showAlignPopover: (ev)->
|
27
27
|
target = $(ev.currentTarget)
|
28
|
-
@editor.pop_over_align.positionPopOver(target)
|
28
|
+
@editor.pop_over_align.positionPopOver(target)
|
29
29
|
|
30
30
|
handleGrafFigureSelectCaption: (ev)->
|
31
31
|
utils.log "FIGCAPTION"
|
@@ -339,15 +339,21 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
339
339
|
@findSelectedImage().removeClass("graf--layoutOutsetLeft")
|
340
340
|
@repositionWithActiveImage()
|
341
341
|
|
342
|
-
|
342
|
+
handleActiveClass: ->
|
343
343
|
@findElement().find(".dante-menu-button").removeClass("active")
|
344
|
-
|
344
|
+
if @findSelectedImage().hasClass("graf--layoutOutsetLeft")
|
345
|
+
@findElement().find(".icon-image-left").parent().addClass("active")
|
346
|
+
else
|
347
|
+
@findElement().find(".icon-image-center").parent().addClass("active")
|
348
|
+
|
349
|
+
activateLink: (element)->
|
345
350
|
setTimeout =>
|
346
351
|
@repositionWithActiveImage()
|
347
352
|
, 20
|
348
353
|
|
349
354
|
repositionWithActiveImage: ->
|
350
|
-
|
355
|
+
# pass the same element that is passed from click event
|
356
|
+
@positionPopOver(@findSelectedImage().find("div") )
|
351
357
|
|
352
358
|
template: ()->
|
353
359
|
"<div class='dante-popover popover--Aligntooltip popover--top'>
|
@@ -363,11 +369,12 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
363
369
|
<li class='dante-menu-button align-wide hidden'>
|
364
370
|
<span class='tooltip-icon icon-image-wide'></span>
|
365
371
|
</li>
|
372
|
+
|
366
373
|
<li class='dante-menu-button align-fill hidden'>
|
367
374
|
<span class='tooltip-icon icon-image-fill'></span>
|
368
375
|
</li>
|
369
376
|
|
370
|
-
<li class='dante-menu-button align-center
|
377
|
+
<li class='dante-menu-button align-center'>
|
371
378
|
<span class='tooltip-icon icon-image-center'></span>
|
372
379
|
</li>
|
373
380
|
|
@@ -381,15 +388,16 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
381
388
|
|
382
389
|
positionPopOver: (target)->
|
383
390
|
target_offset = target.offset()
|
391
|
+
target_position = target.parent().position()
|
384
392
|
target_width = target.outerWidth()
|
385
393
|
target_height = target.outerHeight()
|
386
394
|
popover_width = @findElement().outerWidth()
|
387
395
|
|
388
396
|
# hacky hack
|
389
|
-
pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then
|
397
|
+
pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then 52 else 54
|
390
398
|
|
391
|
-
top_value
|
392
|
-
left_value
|
399
|
+
top_value = target_position.top - pad_top # target_positions.top + target_height
|
400
|
+
left_value = target_offset.left + (target_width/2) - (popover_width/2)
|
393
401
|
|
394
402
|
@findElement()
|
395
403
|
.css("top", top_value)
|
@@ -397,7 +405,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
397
405
|
.show()
|
398
406
|
.addClass("is-active")
|
399
407
|
|
400
|
-
|
408
|
+
@handleActiveClass()
|
401
409
|
|
402
410
|
hide: (ev)->
|
403
411
|
@cancelHide()
|
@@ -408,7 +416,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
408
416
|
, @settings.timeout
|
409
417
|
|
410
418
|
findSelectedImage: ->
|
411
|
-
$(".graf--figure
|
419
|
+
$(".graf--figure.is-mediaFocused")
|
412
420
|
|
413
421
|
render: ()->
|
414
422
|
$(@template()).insertAfter(@editor.$el)
|
data/bower.json
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
"name" : "dante",
|
3
3
|
"description": "Just another Medium editor clone.",
|
4
4
|
"homepage": "michelson.github.io/Dante/",
|
5
|
-
"version" : "0.
|
5
|
+
"version" : "0.1.1",
|
6
6
|
"keywords": [
|
7
7
|
"css",
|
8
8
|
"sass",
|
@@ -37,7 +37,7 @@
|
|
37
37
|
"source"
|
38
38
|
],
|
39
39
|
"dependencies": {
|
40
|
-
"jquery": "
|
40
|
+
"jquery": "2.1.1",
|
41
41
|
"underscore" : "*",
|
42
42
|
"sanitize.js" : "*"
|
43
43
|
}
|
data/dist/js/dante-editor.js
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
defaults: {
|
9
9
|
image_placeholder: '../images/dante/media-loading-placeholder.png'
|
10
10
|
},
|
11
|
-
version: "0.1.
|
11
|
+
version: "0.1.1"
|
12
12
|
};
|
13
13
|
|
14
14
|
}).call(this);
|
@@ -1975,9 +1975,7 @@
|
|
1975
1975
|
Image.prototype.showAlignPopover = function(ev) {
|
1976
1976
|
var target;
|
1977
1977
|
target = $(ev.currentTarget);
|
1978
|
-
|
1979
|
-
return this.editor.pop_over_align.positionPopOver(target);
|
1980
|
-
}
|
1978
|
+
return this.editor.pop_over_align.positionPopOver(target);
|
1981
1979
|
};
|
1982
1980
|
|
1983
1981
|
Image.prototype.handleGrafFigureSelectCaption = function(ev) {
|
@@ -3265,9 +3263,16 @@
|
|
3265
3263
|
return this.repositionWithActiveImage();
|
3266
3264
|
};
|
3267
3265
|
|
3268
|
-
ImageTooltip.prototype.
|
3266
|
+
ImageTooltip.prototype.handleActiveClass = function() {
|
3269
3267
|
this.findElement().find(".dante-menu-button").removeClass("active");
|
3270
|
-
|
3268
|
+
if (this.findSelectedImage().hasClass("graf--layoutOutsetLeft")) {
|
3269
|
+
return this.findElement().find(".icon-image-left").parent().addClass("active");
|
3270
|
+
} else {
|
3271
|
+
return this.findElement().find(".icon-image-center").parent().addClass("active");
|
3272
|
+
}
|
3273
|
+
};
|
3274
|
+
|
3275
|
+
ImageTooltip.prototype.activateLink = function(element) {
|
3271
3276
|
return setTimeout((function(_this) {
|
3272
3277
|
return function() {
|
3273
3278
|
return _this.repositionWithActiveImage();
|
@@ -3276,23 +3281,25 @@
|
|
3276
3281
|
};
|
3277
3282
|
|
3278
3283
|
ImageTooltip.prototype.repositionWithActiveImage = function() {
|
3279
|
-
return this.positionPopOver(this.findSelectedImage());
|
3284
|
+
return this.positionPopOver(this.findSelectedImage().find("div"));
|
3280
3285
|
};
|
3281
3286
|
|
3282
3287
|
ImageTooltip.prototype.template = function() {
|
3283
|
-
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
|
3288
|
+
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>";
|
3284
3289
|
};
|
3285
3290
|
|
3286
3291
|
ImageTooltip.prototype.positionPopOver = function(target) {
|
3287
|
-
var left_value, pad_top, popover_width, target_height, target_offset, target_width, top_value;
|
3292
|
+
var left_value, pad_top, popover_width, target_height, target_offset, target_position, target_width, top_value;
|
3288
3293
|
target_offset = target.offset();
|
3294
|
+
target_position = target.parent().position();
|
3289
3295
|
target_width = target.outerWidth();
|
3290
3296
|
target_height = target.outerHeight();
|
3291
3297
|
popover_width = this.findElement().outerWidth();
|
3292
|
-
pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ?
|
3293
|
-
top_value =
|
3298
|
+
pad_top = this.findSelectedImage().hasClass("graf--layoutOutsetLeft") ? 52 : 54;
|
3299
|
+
top_value = target_position.top - pad_top;
|
3294
3300
|
left_value = target_offset.left + (target_width / 2) - (popover_width / 2);
|
3295
|
-
|
3301
|
+
this.findElement().css("top", top_value).css("left", left_value).show().addClass("is-active");
|
3302
|
+
return this.handleActiveClass();
|
3296
3303
|
};
|
3297
3304
|
|
3298
3305
|
ImageTooltip.prototype.hide = function(ev) {
|
@@ -3305,7 +3312,7 @@
|
|
3305
3312
|
};
|
3306
3313
|
|
3307
3314
|
ImageTooltip.prototype.findSelectedImage = function() {
|
3308
|
-
return $(".graf--figure
|
3315
|
+
return $(".graf--figure.is-mediaFocused");
|
3309
3316
|
};
|
3310
3317
|
|
3311
3318
|
ImageTooltip.prototype.render = function() {
|
data/lib/dante-editor/version.rb
CHANGED
data/source/api/suggest.json.erb
CHANGED
@@ -3,20 +3,20 @@
|
|
3
3
|
"type": "user",
|
4
4
|
"text": "John Lennon",
|
5
5
|
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg",
|
6
|
-
"href": "
|
6
|
+
"href": "api/resource.json",
|
7
7
|
"description": "@john"
|
8
8
|
}, {
|
9
9
|
"id": "2",
|
10
10
|
"type": "user",
|
11
11
|
"text": "Ringo Star",
|
12
12
|
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/iannnnn/128.jpg",
|
13
|
-
"href": "
|
13
|
+
"href": "api/resource.json",
|
14
14
|
"description": "@ringo"
|
15
15
|
}, {
|
16
16
|
"id": "3",
|
17
17
|
"type": "user",
|
18
18
|
"text": "Paul McCartney",
|
19
19
|
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg",
|
20
|
-
"href": "
|
20
|
+
"href": "api/resource.json",
|
21
21
|
"description": "@paul"
|
22
22
|
}]
|
data/source/index.html.erb
CHANGED
@@ -18,7 +18,7 @@ We don't have any intention to target all browsers versions, really... if you li
|
|
18
18
|
|
19
19
|
### MAINTAINERS:
|
20
20
|
|
21
|
-
+ <a href="#" data-type="user" data-href="
|
22
|
-
+ <a href="#" data-type="user" data-href="
|
21
|
+
+ <a href="#" data-type="user" data-href="api/miguel.json" data-id="1" class="markup--user markup--p-user"> Miguel Michelson </a>
|
22
|
+
+ <a href="#" data-type="user" data-href="api/cristian.json" data-id="1" class="markup--user markup--p-user"> Cristian Ferrari </a>
|
23
23
|
|
24
24
|
[Licensed under MIT.](./license.md) 2014
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: dante-editor
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Miguel Michelson
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2016-06-
|
12
|
+
date: 2016-06-14 00:00:00.000000000 Z
|
13
13
|
dependencies: []
|
14
14
|
description: dante-editor yet another Medium editor clone.
|
15
15
|
email:
|