dante-editor 0.0.10 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +4 -0
- data/app/assets/javascripts/dante.js +4 -0
- data/app/assets/javascripts/dante/editor.js.coffee +56 -25
- data/app/assets/javascripts/dante/tooltip.js.coffee +14 -304
- data/app/assets/javascripts/dante/tooltip_widget.js.coffee +10 -0
- data/app/assets/javascripts/dante/tooltip_widgets/embed.js.coffee +60 -0
- data/app/assets/javascripts/dante/tooltip_widgets/extract.js.coffee +64 -0
- data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee +224 -0
- data/app/assets/javascripts/dante/view.js.coffee +46 -1
- data/app/assets/stylesheets/{dante.css.scss → dante.scss} +0 -0
- data/bower.json +1 -1
- data/config.rb +2 -2
- data/dist/{0.0.10/css → css}/dante-editor.css +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.eot +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.svg +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.ttf +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/dante.woff +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.eot +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.svg +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.ttf +0 -0
- data/dist/{0.0.10/fonts → fonts}/dante/fontello.woff +0 -0
- data/dist/{0.0.10/images → images}/dante/media-loading-placeholder.png +0 -0
- data/dist/{0.0.10/js → js}/dante-editor.js +355 -138
- data/lib/dante-editor/version.rb +1 -1
- data/source/assets/javascripts/examples/custom_toolbar.js.coffee +30 -0
- data/source/custom_toolbar.erb +29 -0
- data/source/layouts/layout.erb +1 -1
- metadata +20 -47
- data/dist/0.0.7/css/dante-editor.css +0 -1077
- data/dist/0.0.7/fonts/dante/dante.eot +0 -0
- data/dist/0.0.7/fonts/dante/dante.svg +0 -14
- data/dist/0.0.7/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.7/fonts/dante/dante.woff +0 -0
- data/dist/0.0.7/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.7/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.7/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.7/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.7/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.7/js/dante-editor.js +0 -2610
- data/dist/0.0.8/css/dante-editor.css +0 -1116
- data/dist/0.0.8/fonts/dante/dante.eot +0 -0
- data/dist/0.0.8/fonts/dante/dante.svg +0 -14
- data/dist/0.0.8/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.8/fonts/dante/dante.woff +0 -0
- data/dist/0.0.8/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.8/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.8/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.8/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.8/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.8/js/dante-editor.js +0 -2532
- data/dist/0.0.9/css/dante-editor.css +0 -1116
- data/dist/0.0.9/fonts/dante/dante.eot +0 -0
- data/dist/0.0.9/fonts/dante/dante.svg +0 -14
- data/dist/0.0.9/fonts/dante/dante.ttf +0 -0
- data/dist/0.0.9/fonts/dante/dante.woff +0 -0
- data/dist/0.0.9/fonts/dante/fontello.eot +0 -0
- data/dist/0.0.9/fonts/dante/fontello.svg +0 -36
- data/dist/0.0.9/fonts/dante/fontello.ttf +0 -0
- data/dist/0.0.9/fonts/dante/fontello.woff +0 -0
- data/dist/0.0.9/images/dante/media-loading-placeholder.png +0 -0
- data/dist/0.0.9/js/dante-editor.js +0 -2575
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -8,7 +8,7 @@
|
|
8
8
|
defaults: {
|
9
9
|
image_placeholder: '../images/dante/media-loading-placeholder.png'
|
10
10
|
},
|
11
|
-
version: "0.0.
|
11
|
+
version: "0.0.11"
|
12
12
|
};
|
13
13
|
|
14
14
|
}).call(this);
|
@@ -317,6 +317,8 @@
|
|
317
317
|
|
318
318
|
}).call(this);
|
319
319
|
(function() {
|
320
|
+
var extend;
|
321
|
+
|
320
322
|
Dante.View = (function() {
|
321
323
|
function View(opts) {
|
322
324
|
if (opts == null) {
|
@@ -394,6 +396,32 @@
|
|
394
396
|
|
395
397
|
})();
|
396
398
|
|
399
|
+
extend = function(protoProps, staticProps) {
|
400
|
+
var Surrogate, child, parent;
|
401
|
+
parent = this;
|
402
|
+
child = void 0;
|
403
|
+
if (protoProps && _.has(protoProps, 'constructor')) {
|
404
|
+
child = protoProps.constructor;
|
405
|
+
} else {
|
406
|
+
child = function() {
|
407
|
+
return parent.apply(this, arguments);
|
408
|
+
};
|
409
|
+
}
|
410
|
+
_.extend(child, parent, staticProps);
|
411
|
+
Surrogate = function() {
|
412
|
+
this.constructor = child;
|
413
|
+
};
|
414
|
+
Surrogate.prototype = parent.prototype;
|
415
|
+
child.prototype = new Surrogate;
|
416
|
+
if (protoProps) {
|
417
|
+
_.extend(child.prototype, protoProps);
|
418
|
+
}
|
419
|
+
child.__super__ = parent.prototype;
|
420
|
+
return child;
|
421
|
+
};
|
422
|
+
|
423
|
+
Dante.View.extend = extend;
|
424
|
+
|
397
425
|
}).call(this);
|
398
426
|
(function() {
|
399
427
|
var utils,
|
@@ -461,6 +489,9 @@
|
|
461
489
|
this.disable_title = opts.disable_title || false;
|
462
490
|
this.store_interval = opts.store_interval || 15000;
|
463
491
|
this.paste_element_id = "#dante-paste-div";
|
492
|
+
this.tooltip_class = opts.tooltip_class || Dante.Editor.Tooltip;
|
493
|
+
opts.base_widgets || (opts.base_widgets = ["uploader", "embed", "embed_extract"]);
|
494
|
+
this.widgets = [];
|
464
495
|
window.debugMode = opts.debug || false;
|
465
496
|
if (window.debugMode) {
|
466
497
|
$(this.el).addClass("debug");
|
@@ -476,7 +507,38 @@
|
|
476
507
|
embedplaceholder = opts.embed_placeholder || 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter';
|
477
508
|
this.embed_placeholder = "<span class='defaultValue defaultValue--root'>" + embedplaceholder + "</span><br>";
|
478
509
|
extractplaceholder = opts.extract_placeholder || "Paste a link to embed content from another site (e.g. Twitter) and press Enter";
|
479
|
-
|
510
|
+
this.extract_placeholder = "<span class='defaultValue defaultValue--root'>" + extractplaceholder + "</span><br>";
|
511
|
+
return this.initializeWidgets(opts);
|
512
|
+
};
|
513
|
+
|
514
|
+
Editor.prototype.initializeWidgets = function(opts) {
|
515
|
+
var base_widgets;
|
516
|
+
base_widgets = opts.base_widgets;
|
517
|
+
if (base_widgets.indexOf("uploader") >= 0) {
|
518
|
+
this.uploader_widget = new Dante.View.TooltipWidget.Uploader({
|
519
|
+
current_editor: this
|
520
|
+
});
|
521
|
+
this.widgets.push(this.uploader_widget);
|
522
|
+
}
|
523
|
+
if (base_widgets.indexOf("embed") >= 0) {
|
524
|
+
this.embed_widget = new Dante.View.TooltipWidget.Embed({
|
525
|
+
current_editor: this
|
526
|
+
});
|
527
|
+
this.widgets.push(this.embed_widget);
|
528
|
+
}
|
529
|
+
if (base_widgets.indexOf("embed_extract") >= 0) {
|
530
|
+
this.embed_extract_widget = new Dante.View.TooltipWidget.EmbedExtract({
|
531
|
+
current_editor: this
|
532
|
+
});
|
533
|
+
this.widgets.push(this.embed_extract_widget);
|
534
|
+
}
|
535
|
+
if (opts.extra_tooltip_widgets) {
|
536
|
+
return _.each(opts.extra_tooltip_widgets, (function(_this) {
|
537
|
+
return function(w) {
|
538
|
+
return _this.widgets.push(w);
|
539
|
+
};
|
540
|
+
})(this));
|
541
|
+
}
|
480
542
|
};
|
481
543
|
|
482
544
|
Editor.prototype.store = function() {
|
@@ -536,8 +598,9 @@
|
|
536
598
|
this.editor_menu = new Dante.Editor.Menu({
|
537
599
|
editor: this
|
538
600
|
});
|
539
|
-
this.tooltip_view = new
|
540
|
-
editor: this
|
601
|
+
this.tooltip_view = new this.tooltip_class({
|
602
|
+
editor: this,
|
603
|
+
widgets: this.widgets
|
541
604
|
});
|
542
605
|
this.pop_over = new Dante.Editor.PopOver({
|
543
606
|
editor: this
|
@@ -1017,7 +1080,7 @@
|
|
1017
1080
|
return _.each(elements.find("img"), (function(_this) {
|
1018
1081
|
return function(image) {
|
1019
1082
|
utils.log("process image here!");
|
1020
|
-
return _this.
|
1083
|
+
return _this.uploader_widget.uploadExistentImage(image);
|
1021
1084
|
};
|
1022
1085
|
})(this));
|
1023
1086
|
};
|
@@ -1119,10 +1182,10 @@
|
|
1119
1182
|
};
|
1120
1183
|
|
1121
1184
|
Editor.prototype.handleKeyDown = function(e) {
|
1122
|
-
var
|
1185
|
+
var anchor_node, li, parent, utils_anchor_node;
|
1123
1186
|
utils.log("KEYDOWN");
|
1124
1187
|
anchor_node = this.getNode();
|
1125
|
-
|
1188
|
+
parent = $(anchor_node);
|
1126
1189
|
if (anchor_node) {
|
1127
1190
|
this.markAsSelected(anchor_node);
|
1128
1191
|
}
|
@@ -1132,21 +1195,23 @@
|
|
1132
1195
|
}
|
1133
1196
|
if (e.which === 13) {
|
1134
1197
|
$(this.el).find(".is-selected").removeClass("is-selected");
|
1135
|
-
parent = $(anchor_node);
|
1136
1198
|
utils.log(this.isLastChar());
|
1137
|
-
if (
|
1138
|
-
li = this.handleSmartList(
|
1199
|
+
if (parent.hasClass("graf--p")) {
|
1200
|
+
li = this.handleSmartList(parent, e);
|
1139
1201
|
if (li) {
|
1140
1202
|
anchor_node = li;
|
1141
1203
|
}
|
1142
|
-
} else if (
|
1143
|
-
this.handleListLineBreak(
|
1144
|
-
}
|
1145
|
-
if (parent.hasClass("is-embedable")) {
|
1146
|
-
this.tooltip_view.getEmbedFromNode($(anchor_node));
|
1147
|
-
} else if (parent.hasClass("is-extractable")) {
|
1148
|
-
this.tooltip_view.getExtractFromNode($(anchor_node));
|
1204
|
+
} else if (parent.hasClass("graf--li")) {
|
1205
|
+
this.handleListLineBreak(parent, e);
|
1149
1206
|
}
|
1207
|
+
utils.log("HANDLING WIDGET KEYDOWNS");
|
1208
|
+
_.each(this.widgets, (function(_this) {
|
1209
|
+
return function(w) {
|
1210
|
+
if (w.handleEnterKey) {
|
1211
|
+
return w.handleEnterKey(e, parent);
|
1212
|
+
}
|
1213
|
+
};
|
1214
|
+
})(this));
|
1150
1215
|
if (parent.hasClass("graf--mixtapeEmbed") || parent.hasClass("graf--iframe") || parent.hasClass("graf--figure")) {
|
1151
1216
|
utils.log("supress linebreak from embed !(last char)");
|
1152
1217
|
if (!this.isLastChar()) {
|
@@ -1206,8 +1271,8 @@
|
|
1206
1271
|
utils.log("pass initial validations");
|
1207
1272
|
anchor_node = this.getNode();
|
1208
1273
|
utils_anchor_node = utils.getNode();
|
1209
|
-
if (
|
1210
|
-
return this.handleListBackspace(
|
1274
|
+
if (parent.hasClass("graf--li") && this.getCharacterPrecedingCaret().length === 0) {
|
1275
|
+
return this.handleListBackspace(parent, e);
|
1211
1276
|
}
|
1212
1277
|
if ($(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")) {
|
1213
1278
|
utils.log("SECTION DETECTED FROM KEYDOWN " + (_.isEmpty($(utils_anchor_node).text())));
|
@@ -1241,8 +1306,8 @@
|
|
1241
1306
|
}
|
1242
1307
|
if (e.which === 32) {
|
1243
1308
|
utils.log("SPACEBAR");
|
1244
|
-
if (
|
1245
|
-
this.handleSmartList(
|
1309
|
+
if (parent.hasClass("graf--p")) {
|
1310
|
+
this.handleSmartList(parent, e);
|
1246
1311
|
}
|
1247
1312
|
}
|
1248
1313
|
if (_.contains([38, 40], e.which)) {
|
@@ -1415,7 +1480,7 @@
|
|
1415
1480
|
break;
|
1416
1481
|
case "img":
|
1417
1482
|
utils.log("images");
|
1418
|
-
this.
|
1483
|
+
this.uploader_widget.uploadExistentImage(n);
|
1419
1484
|
break;
|
1420
1485
|
case "a":
|
1421
1486
|
case 'strong':
|
@@ -1751,131 +1816,74 @@
|
|
1751
1816
|
|
1752
1817
|
}).call(this);
|
1753
1818
|
(function() {
|
1754
|
-
var
|
1755
|
-
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
1819
|
+
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
1756
1820
|
__hasProp = {}.hasOwnProperty,
|
1757
1821
|
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
1758
1822
|
|
1759
|
-
|
1760
|
-
|
1761
|
-
Dante.Editor.Tooltip = (function(_super) {
|
1762
|
-
__extends(Tooltip, _super);
|
1823
|
+
Dante.View.TooltipWidget = (function(_super) {
|
1824
|
+
__extends(TooltipWidget, _super);
|
1763
1825
|
|
1764
|
-
function
|
1826
|
+
function TooltipWidget() {
|
1765
1827
|
this.hide = __bind(this.hide, this);
|
1766
|
-
|
1767
|
-
this.getExtractFromNode = __bind(this.getExtractFromNode, this);
|
1768
|
-
this.getEmbedFromNode = __bind(this.getEmbedFromNode, this);
|
1769
|
-
this.uploadCompleted = __bind(this.uploadCompleted, this);
|
1770
|
-
this.updateProgressBar = __bind(this.updateProgressBar, this);
|
1771
|
-
this.uploadFile = __bind(this.uploadFile, this);
|
1772
|
-
this.uploadFiles = __bind(this.uploadFiles, this);
|
1773
|
-
this.toggleOptions = __bind(this.toggleOptions, this);
|
1774
|
-
this.render = __bind(this.render, this);
|
1775
|
-
this.initialize = __bind(this.initialize, this);
|
1776
|
-
return Tooltip.__super__.constructor.apply(this, arguments);
|
1828
|
+
return TooltipWidget.__super__.constructor.apply(this, arguments);
|
1777
1829
|
}
|
1778
1830
|
|
1779
|
-
|
1780
|
-
|
1781
|
-
Tooltip.prototype.events = {
|
1782
|
-
"click .inlineTooltip-button.control": "toggleOptions",
|
1783
|
-
"click .inlineTooltip-menu button": "handleClick"
|
1784
|
-
};
|
1785
|
-
|
1786
|
-
Tooltip.prototype.initialize = function(opts) {
|
1831
|
+
TooltipWidget.prototype.initialize = function(opts) {
|
1787
1832
|
if (opts == null) {
|
1788
1833
|
opts = {};
|
1789
1834
|
}
|
1790
|
-
this.
|
1791
|
-
|
1792
|
-
|
1793
|
-
icon: "icon-image",
|
1794
|
-
title: "Add an image",
|
1795
|
-
action: "image"
|
1796
|
-
}, {
|
1797
|
-
icon: "icon-video",
|
1798
|
-
title: "Add a video",
|
1799
|
-
action: "embed"
|
1800
|
-
}, {
|
1801
|
-
icon: "icon-embed",
|
1802
|
-
title: "Add an embed",
|
1803
|
-
action: "embed-extract"
|
1804
|
-
}
|
1805
|
-
];
|
1835
|
+
this.icon = opts.icon;
|
1836
|
+
this.title = opts.title;
|
1837
|
+
return this.actionEvent = opts.title;
|
1806
1838
|
};
|
1807
1839
|
|
1808
|
-
|
1809
|
-
|
1810
|
-
menu = "";
|
1811
|
-
_.each(this.buttons, function(b) {
|
1812
|
-
var data_action_value;
|
1813
|
-
data_action_value = b.action_value ? "data-action-value='" + b.action_value + "'" : "";
|
1814
|
-
return 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>";
|
1815
|
-
});
|
1816
|
-
return "<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>";
|
1840
|
+
TooltipWidget.prototype.hide = function() {
|
1841
|
+
return this.current_editor.tooltip_view.hide();
|
1817
1842
|
};
|
1818
1843
|
|
1819
|
-
|
1820
|
-
return "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='" + (utils.generateUniqueName()) + "' tabindex='0'> <div style='' class='aspectRatioPlaceholder is-locked'> <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div> <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''> </div> <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'> <span class='defaultValue'>Type caption for image (optional)</span> <br> </figcaption> </figure>";
|
1821
|
-
};
|
1844
|
+
return TooltipWidget;
|
1822
1845
|
|
1823
|
-
|
1824
|
-
return "<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>";
|
1825
|
-
};
|
1846
|
+
})(Dante.View);
|
1826
1847
|
|
1827
|
-
|
1828
|
-
|
1829
|
-
|
1848
|
+
}).call(this);
|
1849
|
+
(function() {
|
1850
|
+
var utils,
|
1851
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
1852
|
+
__hasProp = {}.hasOwnProperty,
|
1853
|
+
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
1830
1854
|
|
1831
|
-
|
1832
|
-
$(this.el).html(this.template());
|
1833
|
-
$(this.el).addClass("is-active");
|
1834
|
-
return this;
|
1835
|
-
};
|
1855
|
+
utils = Dante.utils;
|
1836
1856
|
|
1837
|
-
|
1838
|
-
|
1839
|
-
|
1840
|
-
|
1857
|
+
Dante.View.TooltipWidget.Uploader = (function(_super) {
|
1858
|
+
__extends(Uploader, _super);
|
1859
|
+
|
1860
|
+
function Uploader() {
|
1861
|
+
this.uploadCompleted = __bind(this.uploadCompleted, this);
|
1862
|
+
this.updateProgressBar = __bind(this.updateProgressBar, this);
|
1863
|
+
this.uploadFile = __bind(this.uploadFile, this);
|
1864
|
+
this.uploadFiles = __bind(this.uploadFiles, this);
|
1865
|
+
return Uploader.__super__.constructor.apply(this, arguments);
|
1866
|
+
}
|
1867
|
+
|
1868
|
+
Uploader.prototype.initialize = function(opts) {
|
1869
|
+
if (opts == null) {
|
1870
|
+
opts = {};
|
1871
|
+
}
|
1872
|
+
this.icon = opts.icon || "icon-image";
|
1873
|
+
this.title = opts.title || "Add an image";
|
1874
|
+
this.action = opts.action || "menu-image";
|
1875
|
+
return this.current_editor = opts.current_editor;
|
1841
1876
|
};
|
1842
1877
|
|
1843
|
-
|
1844
|
-
|
1845
|
-
tooltip = $(this.el);
|
1846
|
-
control_width = tooltip.find(".control").css("width");
|
1847
|
-
control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left");
|
1848
|
-
pull_size = parseInt(control_width.replace(/px/, "")) + parseInt(control_spacing.replace(/px/, ""));
|
1849
|
-
coord_left = coords.left - pull_size;
|
1850
|
-
coord_top = coords.top;
|
1851
|
-
return $(this.el).offset({
|
1852
|
-
top: coord_top,
|
1853
|
-
left: coord_left
|
1854
|
-
});
|
1878
|
+
Uploader.prototype.handleClick = function(ev) {
|
1879
|
+
return this.imageSelect(ev);
|
1855
1880
|
};
|
1856
1881
|
|
1857
|
-
|
1858
|
-
|
1859
|
-
name = $(ev.currentTarget).data('action');
|
1860
|
-
utils.log(name);
|
1861
|
-
switch (name) {
|
1862
|
-
case "inline-menu-image":
|
1863
|
-
this.placeholder = "<p>PLACEHOLDER</p>";
|
1864
|
-
this.imageSelect(ev);
|
1865
|
-
break;
|
1866
|
-
case "inline-menu-embed":
|
1867
|
-
this.displayEmbedPlaceHolder();
|
1868
|
-
break;
|
1869
|
-
case "inline-menu-embed-extract":
|
1870
|
-
this.displayExtractPlaceHolder();
|
1871
|
-
break;
|
1872
|
-
case "inline-menu-hr":
|
1873
|
-
this.splitSection();
|
1874
|
-
}
|
1875
|
-
return false;
|
1882
|
+
Uploader.prototype.insertTemplate = function() {
|
1883
|
+
return "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='" + (utils.generateUniqueName()) + "' tabindex='0'> <div style='' class='aspectRatioPlaceholder is-locked'> <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div> <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''> </div> <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'> <span class='defaultValue'>Type caption for image (optional)</span> <br> </figcaption> </figure>";
|
1876
1884
|
};
|
1877
1885
|
|
1878
|
-
|
1886
|
+
Uploader.prototype.uploadExistentImage = function(image_element, opts) {
|
1879
1887
|
var i, img, n, node, tmpl, _i, _ref;
|
1880
1888
|
if (opts == null) {
|
1881
1889
|
opts = {};
|
@@ -1910,7 +1918,7 @@
|
|
1910
1918
|
return utils.log("FIG");
|
1911
1919
|
};
|
1912
1920
|
|
1913
|
-
|
1921
|
+
Uploader.prototype.replaceImg = function(image_element, figure) {
|
1914
1922
|
var img, self;
|
1915
1923
|
utils.log(figure.attr("name"));
|
1916
1924
|
utils.log(figure);
|
@@ -1939,11 +1947,11 @@
|
|
1939
1947
|
};
|
1940
1948
|
};
|
1941
1949
|
|
1942
|
-
|
1950
|
+
Uploader.prototype.displayAndUploadImages = function(file) {
|
1943
1951
|
return this.displayCachedImage(file);
|
1944
1952
|
};
|
1945
1953
|
|
1946
|
-
|
1954
|
+
Uploader.prototype.imageSelect = function(ev) {
|
1947
1955
|
var $selectFile, self;
|
1948
1956
|
$selectFile = $('<input type="file" multiple="multiple">').click();
|
1949
1957
|
self = this;
|
@@ -1954,7 +1962,7 @@
|
|
1954
1962
|
});
|
1955
1963
|
};
|
1956
1964
|
|
1957
|
-
|
1965
|
+
Uploader.prototype.displayCachedImage = function(file) {
|
1958
1966
|
var reader;
|
1959
1967
|
this.current_editor.tooltip_view.hide();
|
1960
1968
|
reader = new FileReader();
|
@@ -1992,7 +2000,7 @@
|
|
1992
2000
|
return reader.readAsDataURL(file);
|
1993
2001
|
};
|
1994
2002
|
|
1995
|
-
|
2003
|
+
Uploader.prototype.getAspectRatio = function(w, h) {
|
1996
2004
|
var fill_ratio, height, maxHeight, maxWidth, ratio, result, width;
|
1997
2005
|
maxWidth = 700;
|
1998
2006
|
maxHeight = 700;
|
@@ -2018,14 +2026,14 @@
|
|
2018
2026
|
return result;
|
2019
2027
|
};
|
2020
2028
|
|
2021
|
-
|
2029
|
+
Uploader.prototype.formatData = function(file) {
|
2022
2030
|
var formData;
|
2023
2031
|
formData = new FormData();
|
2024
2032
|
formData.append('file', file);
|
2025
2033
|
return formData;
|
2026
2034
|
};
|
2027
2035
|
|
2028
|
-
|
2036
|
+
Uploader.prototype.uploadFiles = function(files) {
|
2029
2037
|
var acceptedTypes, file, i, _results;
|
2030
2038
|
acceptedTypes = {
|
2031
2039
|
"image/png": true,
|
@@ -2045,7 +2053,7 @@
|
|
2045
2053
|
return _results;
|
2046
2054
|
};
|
2047
2055
|
|
2048
|
-
|
2056
|
+
Uploader.prototype.uploadFile = function(file, node) {
|
2049
2057
|
var handleUp, n;
|
2050
2058
|
n = node;
|
2051
2059
|
handleUp = (function(_this) {
|
@@ -2084,7 +2092,7 @@
|
|
2084
2092
|
});
|
2085
2093
|
};
|
2086
2094
|
|
2087
|
-
|
2095
|
+
Uploader.prototype.updateProgressBar = function(e) {
|
2088
2096
|
var $progress, complete;
|
2089
2097
|
$progress = $('.progress:first', this.$el);
|
2090
2098
|
complete = "";
|
@@ -2098,11 +2106,56 @@
|
|
2098
2106
|
}
|
2099
2107
|
};
|
2100
2108
|
|
2101
|
-
|
2109
|
+
Uploader.prototype.uploadCompleted = function(url, node) {
|
2102
2110
|
return node.find("img").attr("src", url);
|
2103
2111
|
};
|
2104
2112
|
|
2105
|
-
|
2113
|
+
return Uploader;
|
2114
|
+
|
2115
|
+
})(Dante.View.TooltipWidget);
|
2116
|
+
|
2117
|
+
}).call(this);
|
2118
|
+
(function() {
|
2119
|
+
var utils,
|
2120
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
2121
|
+
__hasProp = {}.hasOwnProperty,
|
2122
|
+
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
2123
|
+
|
2124
|
+
utils = Dante.utils;
|
2125
|
+
|
2126
|
+
Dante.View.TooltipWidget.Embed = (function(_super) {
|
2127
|
+
__extends(Embed, _super);
|
2128
|
+
|
2129
|
+
function Embed() {
|
2130
|
+
this.getEmbedFromNode = __bind(this.getEmbedFromNode, this);
|
2131
|
+
return Embed.__super__.constructor.apply(this, arguments);
|
2132
|
+
}
|
2133
|
+
|
2134
|
+
Embed.prototype.initialize = function(opts) {
|
2135
|
+
if (opts == null) {
|
2136
|
+
opts = {};
|
2137
|
+
}
|
2138
|
+
this.icon = opts.icon || "icon-video";
|
2139
|
+
this.title = opts.title || "Add a video";
|
2140
|
+
this.action = opts.action || "embed";
|
2141
|
+
return this.current_editor = opts.current_editor;
|
2142
|
+
};
|
2143
|
+
|
2144
|
+
Embed.prototype.handleClick = function(ev) {
|
2145
|
+
return this.displayEmbedPlaceHolder(ev);
|
2146
|
+
};
|
2147
|
+
|
2148
|
+
Embed.prototype.handleEnterKey = function(ev, $node) {
|
2149
|
+
if ($node.hasClass("is-embedable")) {
|
2150
|
+
return this.getEmbedFromNode($node);
|
2151
|
+
}
|
2152
|
+
};
|
2153
|
+
|
2154
|
+
Embed.prototype.embedTemplate = function() {
|
2155
|
+
return "<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>";
|
2156
|
+
};
|
2157
|
+
|
2158
|
+
Embed.prototype.displayEmbedPlaceHolder = function() {
|
2106
2159
|
var ph;
|
2107
2160
|
ph = this.current_editor.embed_placeholder;
|
2108
2161
|
this.node = this.current_editor.getNode();
|
@@ -2112,7 +2165,7 @@
|
|
2112
2165
|
return false;
|
2113
2166
|
};
|
2114
2167
|
|
2115
|
-
|
2168
|
+
Embed.prototype.getEmbedFromNode = function(node) {
|
2116
2169
|
this.node = $(node);
|
2117
2170
|
this.node_name = this.node.attr("name");
|
2118
2171
|
this.node.addClass("spinner");
|
@@ -2131,10 +2184,60 @@
|
|
2131
2184
|
replaced_node.find(".markup--anchor").attr("href", url).text(url);
|
2132
2185
|
return _this.hide();
|
2133
2186
|
};
|
2187
|
+
})(this)).error((function(_this) {
|
2188
|
+
return function(res) {
|
2189
|
+
return _this.node.removeClass("spinner");
|
2190
|
+
};
|
2134
2191
|
})(this));
|
2135
2192
|
};
|
2136
2193
|
|
2137
|
-
|
2194
|
+
return Embed;
|
2195
|
+
|
2196
|
+
})(Dante.View.TooltipWidget);
|
2197
|
+
|
2198
|
+
}).call(this);
|
2199
|
+
(function() {
|
2200
|
+
var utils,
|
2201
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
2202
|
+
__hasProp = {}.hasOwnProperty,
|
2203
|
+
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
2204
|
+
|
2205
|
+
utils = Dante.utils;
|
2206
|
+
|
2207
|
+
Dante.View.TooltipWidget.EmbedExtract = (function(_super) {
|
2208
|
+
__extends(EmbedExtract, _super);
|
2209
|
+
|
2210
|
+
function EmbedExtract() {
|
2211
|
+
this.getExtract = __bind(this.getExtract, this);
|
2212
|
+
this.getExtractFromNode = __bind(this.getExtractFromNode, this);
|
2213
|
+
return EmbedExtract.__super__.constructor.apply(this, arguments);
|
2214
|
+
}
|
2215
|
+
|
2216
|
+
EmbedExtract.prototype.initialize = function(opts) {
|
2217
|
+
if (opts == null) {
|
2218
|
+
opts = {};
|
2219
|
+
}
|
2220
|
+
this.icon = opts.icon || "icon-embed";
|
2221
|
+
this.title = opts.title || "Add an embed";
|
2222
|
+
this.action = opts.action || "embed-extract";
|
2223
|
+
return this.current_editor = opts.current_editor;
|
2224
|
+
};
|
2225
|
+
|
2226
|
+
EmbedExtract.prototype.handleClick = function(ev) {
|
2227
|
+
return this.displayExtractPlaceHolder(ev);
|
2228
|
+
};
|
2229
|
+
|
2230
|
+
EmbedExtract.prototype.handleEnterKey = function(ev, $node) {
|
2231
|
+
if ($node.hasClass("is-extractable")) {
|
2232
|
+
return this.getExtractFromNode($node);
|
2233
|
+
}
|
2234
|
+
};
|
2235
|
+
|
2236
|
+
EmbedExtract.prototype.extractTemplate = function() {
|
2237
|
+
return "<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>";
|
2238
|
+
};
|
2239
|
+
|
2240
|
+
EmbedExtract.prototype.displayExtractPlaceHolder = function() {
|
2138
2241
|
var ph;
|
2139
2242
|
ph = this.current_editor.extract_placeholder;
|
2140
2243
|
this.node = this.current_editor.getNode();
|
@@ -2144,7 +2247,7 @@
|
|
2144
2247
|
return false;
|
2145
2248
|
};
|
2146
2249
|
|
2147
|
-
|
2250
|
+
EmbedExtract.prototype.getExtractFromNode = function(node) {
|
2148
2251
|
this.node = $(node);
|
2149
2252
|
this.node_name = this.node.attr("name");
|
2150
2253
|
this.node.addClass("spinner");
|
@@ -2168,15 +2271,125 @@
|
|
2168
2271
|
}
|
2169
2272
|
return _this.hide();
|
2170
2273
|
};
|
2274
|
+
})(this)).error((function(_this) {
|
2275
|
+
return function(data) {
|
2276
|
+
return _this.node.removeClass("spinner");
|
2277
|
+
};
|
2171
2278
|
})(this));
|
2172
2279
|
};
|
2173
2280
|
|
2174
|
-
|
2281
|
+
EmbedExtract.prototype.getExtract = function(url) {
|
2175
2282
|
return $.getJSON("" + this.current_editor.extract_url + url).done(function(data) {
|
2176
2283
|
return utils.log(data);
|
2177
2284
|
});
|
2178
2285
|
};
|
2179
2286
|
|
2287
|
+
return EmbedExtract;
|
2288
|
+
|
2289
|
+
})(Dante.View.TooltipWidget);
|
2290
|
+
|
2291
|
+
}).call(this);
|
2292
|
+
(function() {
|
2293
|
+
var utils,
|
2294
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
2295
|
+
__hasProp = {}.hasOwnProperty,
|
2296
|
+
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
2297
|
+
|
2298
|
+
utils = Dante.utils;
|
2299
|
+
|
2300
|
+
Dante.Editor.Tooltip = (function(_super) {
|
2301
|
+
__extends(Tooltip, _super);
|
2302
|
+
|
2303
|
+
function Tooltip() {
|
2304
|
+
this.hide = __bind(this.hide, this);
|
2305
|
+
this.toggleOptions = __bind(this.toggleOptions, this);
|
2306
|
+
this.render = __bind(this.render, this);
|
2307
|
+
this.initialize = __bind(this.initialize, this);
|
2308
|
+
return Tooltip.__super__.constructor.apply(this, arguments);
|
2309
|
+
}
|
2310
|
+
|
2311
|
+
Tooltip.prototype.el = ".inlineTooltip";
|
2312
|
+
|
2313
|
+
Tooltip.prototype.events = {
|
2314
|
+
"click .inlineTooltip-button.control": "toggleOptions",
|
2315
|
+
"click .inlineTooltip-menu button": "handleClick"
|
2316
|
+
};
|
2317
|
+
|
2318
|
+
Tooltip.prototype.initialize = function(opts) {
|
2319
|
+
if (opts == null) {
|
2320
|
+
opts = {};
|
2321
|
+
}
|
2322
|
+
this.current_editor = opts.editor;
|
2323
|
+
return this.widgets = opts.widgets;
|
2324
|
+
};
|
2325
|
+
|
2326
|
+
Tooltip.prototype.template = function() {
|
2327
|
+
var menu;
|
2328
|
+
menu = "";
|
2329
|
+
_.each(this.widgets, function(b) {
|
2330
|
+
var data_action_value;
|
2331
|
+
data_action_value = b.action_value ? "data-action-value='" + b.action_value + "'" : "";
|
2332
|
+
return 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>";
|
2333
|
+
});
|
2334
|
+
return "<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>";
|
2335
|
+
};
|
2336
|
+
|
2337
|
+
Tooltip.prototype.findWidgetByAction = function(name) {
|
2338
|
+
return _.find(this.widgets, function(e) {
|
2339
|
+
return e.action === name;
|
2340
|
+
});
|
2341
|
+
};
|
2342
|
+
|
2343
|
+
Tooltip.prototype.render = function() {
|
2344
|
+
$(this.el).html(this.template());
|
2345
|
+
$(this.el).addClass("is-active");
|
2346
|
+
return this;
|
2347
|
+
};
|
2348
|
+
|
2349
|
+
Tooltip.prototype.toggleOptions = function() {
|
2350
|
+
utils.log("Toggle Options!!");
|
2351
|
+
$(this.el).toggleClass("is-scaled");
|
2352
|
+
return false;
|
2353
|
+
};
|
2354
|
+
|
2355
|
+
Tooltip.prototype.move = function(coords) {
|
2356
|
+
var control_spacing, control_width, coord_left, coord_top, pull_size, tooltip;
|
2357
|
+
tooltip = $(this.el);
|
2358
|
+
control_width = tooltip.find(".control").css("width");
|
2359
|
+
control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left");
|
2360
|
+
pull_size = parseInt(control_width.replace(/px/, "")) + parseInt(control_spacing.replace(/px/, ""));
|
2361
|
+
coord_left = coords.left - pull_size;
|
2362
|
+
coord_top = coords.top;
|
2363
|
+
return $(this.el).offset({
|
2364
|
+
top: coord_top,
|
2365
|
+
left: coord_left
|
2366
|
+
});
|
2367
|
+
};
|
2368
|
+
|
2369
|
+
Tooltip.prototype.handleClick = function(ev) {
|
2370
|
+
var detected_widget, name, sub_name;
|
2371
|
+
name = $(ev.currentTarget).data('action');
|
2372
|
+
utils.log(name);
|
2373
|
+
|
2374
|
+
/*
|
2375
|
+
switch name
|
2376
|
+
when "inline-menu-image"
|
2377
|
+
@placeholder = "<p>PLACEHOLDER</p>"
|
2378
|
+
@imageSelect(ev)
|
2379
|
+
when "inline-menu-embed"
|
2380
|
+
@displayEmbedPlaceHolder()
|
2381
|
+
when "inline-menu-embed-extract"
|
2382
|
+
@displayExtractPlaceHolder()
|
2383
|
+
when "inline-menu-hr"
|
2384
|
+
@splitSection()
|
2385
|
+
*/
|
2386
|
+
sub_name = name.replace("inline-menu-", "");
|
2387
|
+
if (detected_widget = this.findWidgetByAction(sub_name)) {
|
2388
|
+
detected_widget.handleClick(ev);
|
2389
|
+
}
|
2390
|
+
return false;
|
2391
|
+
};
|
2392
|
+
|
2180
2393
|
Tooltip.prototype.cleanOperationClasses = function(node) {
|
2181
2394
|
return node.removeClass("is-embedable is-extractable");
|
2182
2395
|
};
|
@@ -2581,4 +2794,8 @@
|
|
2581
2794
|
|
2582
2795
|
|
2583
2796
|
|
2797
|
+
|
2798
|
+
|
2799
|
+
|
2800
|
+
|
2584
2801
|
;
|