dante-editor 0.1.3 → 0.1.4
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 +1 -1
- data/app/assets/javascripts/dante.js +1 -0
- data/app/assets/javascripts/dante/behaviors/image.js.coffee +235 -3
- data/app/assets/javascripts/dante/behaviors/paste.js.coffee +64 -0
- data/app/assets/javascripts/dante/editor.js.coffee +44 -191
- data/app/assets/javascripts/dante/popover.js.coffee +1 -1
- data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee +7 -2
- data/bower.json +1 -1
- data/dist/js/dante-editor.js +357 -199
- data/lib/dante-editor/version.rb +1 -1
- data/source/partials/_readme.markdown +15 -10
- metadata +2 -1
@@ -324,7 +324,7 @@ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
|
|
324
324
|
@pop_over_element = ".popover--Aligntooltip"
|
325
325
|
@editor = opts.editor
|
326
326
|
@hideTimeout
|
327
|
-
@settings = {timeout:
|
327
|
+
@settings = {timeout: 100}
|
328
328
|
|
329
329
|
alignLeft: (ev)->
|
330
330
|
@activateLink $(ev.currentTarget)
|
@@ -74,7 +74,7 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
|
|
74
74
|
utils.log(this.width + 'x' + this.height);
|
75
75
|
|
76
76
|
ar = self.getAspectRatio(this.width, this.height)
|
77
|
-
|
77
|
+
|
78
78
|
figure.find(".aspectRatioPlaceholder").css
|
79
79
|
'max-width': ar.width
|
80
80
|
'max-height': ar.height
|
@@ -219,7 +219,9 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
|
|
219
219
|
utils.log complete
|
220
220
|
|
221
221
|
uploadCompleted: (url, node)=>
|
222
|
-
node.find("img")
|
222
|
+
node.find("img")
|
223
|
+
.attr("src", url)
|
224
|
+
.data("src", url)
|
223
225
|
#return false
|
224
226
|
|
225
227
|
###
|
@@ -231,6 +233,8 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
|
|
231
233
|
# @return {Boolean} true if this function should scape the default behavior
|
232
234
|
###
|
233
235
|
handleBackspaceKey: (e, node) =>
|
236
|
+
# this is not needed here since we are handling backspace for images in image behavior
|
237
|
+
###
|
234
238
|
utils.log "handleBackspaceKey on uploader widget"
|
235
239
|
|
236
240
|
# remove graf figure if is selected but not in range (not focus on caption)
|
@@ -252,3 +256,4 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
|
|
252
256
|
@current_editor.replaceWith("p", $(".is-selected"))
|
253
257
|
@current_editor.setRangeAt($(".is-selected")[0])
|
254
258
|
return true
|
259
|
+
###
|
data/bower.json
CHANGED
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.4"
|
12
12
|
};
|
13
13
|
|
14
14
|
}).call(this);
|
@@ -440,8 +440,7 @@
|
|
440
440
|
this.setupFirstAndLast = __bind(this.setupFirstAndLast, this);
|
441
441
|
this.addClassesToElement = __bind(this.addClassesToElement, this);
|
442
442
|
this.handlePaste = __bind(this.handlePaste, this);
|
443
|
-
this.
|
444
|
-
this.handleArrow = __bind(this.handleArrow, this);
|
443
|
+
this.handleArrowForKeyUp = __bind(this.handleArrowForKeyUp, this);
|
445
444
|
this.handleMouseUp = __bind(this.handleMouseUp, this);
|
446
445
|
this.selection = __bind(this.selection, this);
|
447
446
|
this.render = __bind(this.render, this);
|
@@ -495,6 +494,7 @@
|
|
495
494
|
this.el = opts.el || "#editor";
|
496
495
|
this.upload_url = opts.upload_url || "/uploads.json";
|
497
496
|
this.upload_callback = opts.upload_callback;
|
497
|
+
this.image_delete_callback = opts.image_delete_callback;
|
498
498
|
this.oembed_url = opts.oembed_url || ("http://api.embed.ly/1/oembed?key=" + opts.api_key + "&url=");
|
499
499
|
this.extract_url = opts.extract_url || ("http://api.embed.ly/1/extract?key=" + opts.api_key + "&url=");
|
500
500
|
this.default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder;
|
@@ -512,7 +512,7 @@
|
|
512
512
|
this.suggest_handler = opts.suggest_handler || null;
|
513
513
|
this.suggest_resource_handler = opts.suggest_resource_handler || null;
|
514
514
|
opts.base_widgets || (opts.base_widgets = ["uploader", "embed", "embed_extract"]);
|
515
|
-
opts.base_behaviors || (opts.base_behaviors = ["save", "image", "list", "suggest"]);
|
515
|
+
opts.base_behaviors || (opts.base_behaviors = ["save", "image", "paste", "list", "suggest"]);
|
516
516
|
this.widgets = [];
|
517
517
|
this.behaviors = [];
|
518
518
|
window.debugMode = opts.debug || false;
|
@@ -550,19 +550,26 @@
|
|
550
550
|
});
|
551
551
|
this.behaviors.push(this.save_behavior);
|
552
552
|
}
|
553
|
+
if (base_behaviors.indexOf("paste") >= 0) {
|
554
|
+
this.paste_behavior = new Dante.View.Behavior.Paste({
|
555
|
+
current_editor: this,
|
556
|
+
el: this.el
|
557
|
+
});
|
558
|
+
this.behaviors.push(this.paste_behavior);
|
559
|
+
}
|
553
560
|
if (base_behaviors.indexOf("image") >= 0) {
|
554
|
-
this.
|
561
|
+
this.image_behavior = new Dante.View.Behavior.Image({
|
555
562
|
current_editor: this,
|
556
563
|
el: this.el
|
557
564
|
});
|
558
|
-
this.behaviors.push(this.
|
565
|
+
this.behaviors.push(this.image_behavior);
|
559
566
|
}
|
560
567
|
if (base_behaviors.indexOf("list") >= 0) {
|
561
|
-
this.
|
568
|
+
this.list_behavior = new Dante.View.Behavior.List({
|
562
569
|
current_editor: this,
|
563
570
|
el: this.el
|
564
571
|
});
|
565
|
-
this.behaviors.push(this.
|
572
|
+
this.behaviors.push(this.list_behavior);
|
566
573
|
}
|
567
574
|
if (opts.extra_behaviors) {
|
568
575
|
return _.each(opts.extra_behaviors, (function(_this) {
|
@@ -706,6 +713,9 @@
|
|
706
713
|
Editor.prototype.getSelectionStart = function() {
|
707
714
|
var node;
|
708
715
|
node = document.getSelection().anchorNode;
|
716
|
+
if (node === null) {
|
717
|
+
return;
|
718
|
+
}
|
709
719
|
if (node.nodeType === 3) {
|
710
720
|
return node.parentNode;
|
711
721
|
} else {
|
@@ -929,7 +939,7 @@
|
|
929
939
|
}, 20);
|
930
940
|
};
|
931
941
|
|
932
|
-
Editor.prototype.
|
942
|
+
Editor.prototype.handleArrowForKeyUp = function(ev) {
|
933
943
|
var current_node;
|
934
944
|
current_node = $(this.getNode());
|
935
945
|
if (current_node.length > 0) {
|
@@ -938,101 +948,6 @@
|
|
938
948
|
}
|
939
949
|
};
|
940
950
|
|
941
|
-
Editor.prototype.handleArrowForKeyDown = function(ev) {
|
942
|
-
var caret_node, current_node, ev_type, n, next_node, num, prev_node;
|
943
|
-
caret_node = this.getNode();
|
944
|
-
current_node = $(caret_node);
|
945
|
-
utils.log(ev);
|
946
|
-
ev_type = ev.originalEvent.key || ev.originalEvent.keyIdentifier;
|
947
|
-
utils.log("ENTER ARROW for key " + ev_type);
|
948
|
-
switch (ev_type) {
|
949
|
-
case "Down":
|
950
|
-
if (_.isUndefined(current_node) || !current_node.exists()) {
|
951
|
-
if ($(".is-selected").exists()) {
|
952
|
-
current_node = $(".is-selected");
|
953
|
-
}
|
954
|
-
}
|
955
|
-
next_node = current_node.next();
|
956
|
-
utils.log("NEXT NODE IS " + (next_node.attr('class')));
|
957
|
-
utils.log("CURRENT NODE IS " + (current_node.attr('class')));
|
958
|
-
if (!$(current_node).hasClass("graf")) {
|
959
|
-
return;
|
960
|
-
}
|
961
|
-
if (!(current_node.hasClass("graf--figure") || $(current_node).editableCaretOnLastLine())) {
|
962
|
-
return;
|
963
|
-
}
|
964
|
-
utils.log("ENTER ARROW PASSED RETURNS");
|
965
|
-
if (next_node.hasClass("graf--figure") && caret_node) {
|
966
|
-
n = next_node.find(".imageCaption");
|
967
|
-
this.scrollTo(n);
|
968
|
-
utils.log("1 down");
|
969
|
-
utils.log(n[0]);
|
970
|
-
this.skip_keyup = true;
|
971
|
-
this.selection().removeAllRanges();
|
972
|
-
this.markAsSelected(next_node);
|
973
|
-
next_node.addClass("is-mediaFocused is-selected");
|
974
|
-
return false;
|
975
|
-
} else if (next_node.hasClass("graf--mixtapeEmbed")) {
|
976
|
-
n = current_node.next(".graf--mixtapeEmbed");
|
977
|
-
num = n[0].childNodes.length;
|
978
|
-
this.setRangeAt(n[0], num);
|
979
|
-
this.scrollTo(n);
|
980
|
-
utils.log("2 down");
|
981
|
-
return false;
|
982
|
-
}
|
983
|
-
if (current_node.hasClass("graf--figure") && next_node.hasClass("graf")) {
|
984
|
-
this.scrollTo(next_node);
|
985
|
-
utils.log("3 down, from figure to next graf");
|
986
|
-
this.markAsSelected(next_node);
|
987
|
-
this.setRangeAt(next_node[0]);
|
988
|
-
return false;
|
989
|
-
}
|
990
|
-
break;
|
991
|
-
case "Up":
|
992
|
-
prev_node = current_node.prev();
|
993
|
-
utils.log("PREV NODE IS " + (prev_node.attr('class')) + " " + (prev_node.attr('name')));
|
994
|
-
utils.log("CURRENT NODE IS up " + (current_node.attr('class')));
|
995
|
-
if (!$(current_node).hasClass("graf")) {
|
996
|
-
return;
|
997
|
-
}
|
998
|
-
if (!$(current_node).editableCaretOnFirstLine()) {
|
999
|
-
return;
|
1000
|
-
}
|
1001
|
-
utils.log("ENTER ARROW PASSED RETURNS");
|
1002
|
-
if (prev_node.hasClass("graf--figure")) {
|
1003
|
-
utils.log("1 up");
|
1004
|
-
n = prev_node.find(".imageCaption");
|
1005
|
-
this.scrollTo(n);
|
1006
|
-
this.skip_keyup = true;
|
1007
|
-
this.selection().removeAllRanges();
|
1008
|
-
this.markAsSelected(prev_node);
|
1009
|
-
prev_node.addClass("is-mediaFocused");
|
1010
|
-
return false;
|
1011
|
-
} else if (prev_node.hasClass("graf--mixtapeEmbed")) {
|
1012
|
-
n = current_node.prev(".graf--mixtapeEmbed");
|
1013
|
-
num = n[0].childNodes.length;
|
1014
|
-
this.setRangeAt(n[0], num);
|
1015
|
-
this.scrollTo(n);
|
1016
|
-
utils.log("2 up");
|
1017
|
-
return false;
|
1018
|
-
}
|
1019
|
-
if (current_node.hasClass("graf--figure") && prev_node.hasClass("graf")) {
|
1020
|
-
this.setRangeAt(prev_node[0]);
|
1021
|
-
this.scrollTo(prev_node);
|
1022
|
-
utils.log("3 up");
|
1023
|
-
return false;
|
1024
|
-
} else if (prev_node.hasClass("graf")) {
|
1025
|
-
n = current_node.prev(".graf");
|
1026
|
-
num = n[0].childNodes.length;
|
1027
|
-
this.scrollTo(n);
|
1028
|
-
utils.log("4 up");
|
1029
|
-
this.skip_keyup = true;
|
1030
|
-
this.markAsSelected(prev_node);
|
1031
|
-
return false;
|
1032
|
-
}
|
1033
|
-
}
|
1034
|
-
};
|
1035
|
-
|
1036
951
|
Editor.prototype.parseInitialMess = function() {
|
1037
952
|
return this.setupElementsClasses($(this.el).find('.section-inner'), (function(_this) {
|
1038
953
|
return function(e) {
|
@@ -1051,42 +966,19 @@
|
|
1051
966
|
return false;
|
1052
967
|
};
|
1053
968
|
|
1054
|
-
Editor.prototype.handlePaste = function(
|
1055
|
-
var
|
1056
|
-
|
1057
|
-
|
1058
|
-
|
1059
|
-
|
1060
|
-
|
1061
|
-
|
1062
|
-
|
1063
|
-
|
1064
|
-
|
1065
|
-
|
1066
|
-
if (
|
1067
|
-
utils.log("HTML DETECTED ON PASTE");
|
1068
|
-
pastedText = pastedText.replace(/&.*;/g, "");
|
1069
|
-
pastedText = pastedText.replace(/<div>([\w\W]*?)<\/div>/gi, '<p>$1</p>');
|
1070
|
-
document.body.appendChild($("<div id='" + (this.paste_element_id.replace('#', '')) + "' class='dante-paste'></div>")[0]);
|
1071
|
-
$(this.paste_element_id).html("<span>" + pastedText + "</span>");
|
1072
|
-
this.setupElementsClasses($(this.paste_element_id), (function(_this) {
|
1073
|
-
return function(e) {
|
1074
|
-
var last_node, new_node, nodes, num, top;
|
1075
|
-
nodes = $(e.html()).insertAfter($(_this.aa));
|
1076
|
-
e.remove();
|
1077
|
-
last_node = nodes.last()[0];
|
1078
|
-
num = last_node.childNodes.length;
|
1079
|
-
_this.setRangeAt(last_node, num);
|
1080
|
-
new_node = $(_this.getNode());
|
1081
|
-
_this.markAsSelected(new_node);
|
1082
|
-
_this.displayTooltipAt($(_this.el).find(".is-selected"));
|
1083
|
-
_this.handleUnwrappedImages(nodes);
|
1084
|
-
top = new_node.offset().top;
|
1085
|
-
return $('html, body').animate({
|
1086
|
-
scrollTop: top
|
1087
|
-
}, 20);
|
1088
|
-
};
|
1089
|
-
})(this));
|
969
|
+
Editor.prototype.handlePaste = function(e) {
|
970
|
+
var parent;
|
971
|
+
this["continue"] = true;
|
972
|
+
utils.log("HANDLING PASTE");
|
973
|
+
parent = this.getNode();
|
974
|
+
_.each(this.behaviors, (function(_this) {
|
975
|
+
return function(b) {
|
976
|
+
if (b.handlePaste) {
|
977
|
+
return b.handlePaste(e, parent);
|
978
|
+
}
|
979
|
+
};
|
980
|
+
})(this));
|
981
|
+
if (!this["continue"]) {
|
1090
982
|
return false;
|
1091
983
|
}
|
1092
984
|
};
|
@@ -1202,6 +1094,7 @@
|
|
1202
1094
|
Editor.prototype.handleKeyDown = function(e) {
|
1203
1095
|
var anchor_node, eventHandled, parent, utils_anchor_node;
|
1204
1096
|
utils.log("KEYDOWN");
|
1097
|
+
this["continue"] = true;
|
1205
1098
|
anchor_node = this.getNode();
|
1206
1099
|
parent = $(anchor_node);
|
1207
1100
|
if (anchor_node) {
|
@@ -1215,6 +1108,9 @@
|
|
1215
1108
|
}
|
1216
1109
|
};
|
1217
1110
|
})(this));
|
1111
|
+
if (!this["continue"]) {
|
1112
|
+
return false;
|
1113
|
+
}
|
1218
1114
|
if (e.which === TAB) {
|
1219
1115
|
this.handleTab(anchor_node);
|
1220
1116
|
return false;
|
@@ -1222,7 +1118,7 @@
|
|
1222
1118
|
if (e.which === ENTER) {
|
1223
1119
|
$(this.el).find(".is-selected").removeClass("is-selected");
|
1224
1120
|
utils.log(this.isLastChar());
|
1225
|
-
utils.log("HANDLING WIDGET
|
1121
|
+
utils.log("HANDLING WIDGET ENTER");
|
1226
1122
|
_.each(this.widgets, (function(_this) {
|
1227
1123
|
return function(w) {
|
1228
1124
|
if (w.handleEnterKey) {
|
@@ -1306,13 +1202,6 @@
|
|
1306
1202
|
utils.log("SCAPE FROM BACKSPACE HANDLER");
|
1307
1203
|
return false;
|
1308
1204
|
}
|
1309
|
-
if ($(anchor_node).hasClass("graf--p") && this.isFirstChar()) {
|
1310
|
-
if ($(anchor_node).prev().hasClass("graf--figure") && this.getSelectedText().length === 0) {
|
1311
|
-
e.preventDefault();
|
1312
|
-
$(anchor_node).prev().find("img").click();
|
1313
|
-
utils.log("Focus on the previous image");
|
1314
|
-
}
|
1315
|
-
}
|
1316
1205
|
if ($(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")) {
|
1317
1206
|
utils.log("SECTION DETECTED FROM KEYDOWN " + (_.isEmpty($(utils_anchor_node).text())));
|
1318
1207
|
if (_.isEmpty($(utils_anchor_node).text())) {
|
@@ -1322,41 +1211,18 @@
|
|
1322
1211
|
if (anchor_node && anchor_node.nodeType === 3) {
|
1323
1212
|
utils.log("TextNode detected from Down!");
|
1324
1213
|
}
|
1325
|
-
if ($(anchor_node).hasClass("graf--mixtapeEmbed") || $(anchor_node).hasClass("graf--iframe")) {
|
1326
|
-
if (_.isEmpty($(anchor_node).text().trim() || this.isFirstChar())) {
|
1327
|
-
utils.log("Check for inmediate deletion on empty embed text");
|
1328
|
-
this.inmediateDeletion = this.isSelectingAll(anchor_node);
|
1329
|
-
if (this.inmediateDeletion) {
|
1330
|
-
this.handleInmediateDeletion($(anchor_node));
|
1331
|
-
}
|
1332
|
-
return false;
|
1333
|
-
}
|
1334
|
-
}
|
1335
|
-
if ($(anchor_node).prev().hasClass("graf--mixtapeEmbed")) {
|
1336
|
-
if (this.isFirstChar() && !_.isEmpty($(anchor_node).text().trim())) {
|
1337
|
-
return false;
|
1338
|
-
}
|
1339
|
-
}
|
1340
|
-
}
|
1341
|
-
if (_.contains([UPARROW, DOWNARROW], e.which)) {
|
1342
|
-
utils.log(e.which);
|
1343
|
-
this.handleArrowForKeyDown(e);
|
1344
1214
|
}
|
1345
1215
|
if (anchor_node) {
|
1346
1216
|
if (!_.isEmpty($(anchor_node).text())) {
|
1347
1217
|
this.tooltip_view.hide();
|
1348
|
-
$(anchor_node).removeClass("graf--empty");
|
1218
|
+
return $(anchor_node).removeClass("graf--empty");
|
1349
1219
|
}
|
1350
1220
|
}
|
1351
|
-
if (_.isUndefined(anchor_node) && $(".is-selected").hasClass("is-mediaFocused")) {
|
1352
|
-
this.setRangeAt($(".is-selected").find("figcaption")[0]);
|
1353
|
-
$(".is-selected").removeClass("is-mediaFocused");
|
1354
|
-
return false;
|
1355
|
-
}
|
1356
1221
|
};
|
1357
1222
|
|
1358
1223
|
Editor.prototype.handleKeyUp = function(e, node) {
|
1359
1224
|
var anchor_node, next_graf, utils_anchor_node;
|
1225
|
+
this["continue"] = true;
|
1360
1226
|
if (this.skip_keyup) {
|
1361
1227
|
this.skip_keyup = null;
|
1362
1228
|
utils.log("SKIP KEYUP");
|
@@ -1376,6 +1242,9 @@
|
|
1376
1242
|
}
|
1377
1243
|
};
|
1378
1244
|
})(this));
|
1245
|
+
if (!this["continue"]) {
|
1246
|
+
return false;
|
1247
|
+
}
|
1379
1248
|
if (e.which === BACKSPACE) {
|
1380
1249
|
if ($(utils_anchor_node).hasClass("postField--body")) {
|
1381
1250
|
utils.log("ALL GONE from UP");
|
@@ -1413,7 +1282,7 @@
|
|
1413
1282
|
}
|
1414
1283
|
}
|
1415
1284
|
if (_.contains([LEFTARROW, UPARROW, RIGHTARROW, DOWNARROW], e.which)) {
|
1416
|
-
return this.
|
1285
|
+
return this.handleArrowForKeyUp(e);
|
1417
1286
|
}
|
1418
1287
|
};
|
1419
1288
|
|
@@ -1468,13 +1337,12 @@
|
|
1468
1337
|
};
|
1469
1338
|
|
1470
1339
|
Editor.prototype.markAsSelected = function(element) {
|
1471
|
-
utils.log(
|
1340
|
+
utils.log("MARK AS SELECTED");
|
1472
1341
|
if (_.isUndefined(element)) {
|
1473
1342
|
return;
|
1474
1343
|
}
|
1475
1344
|
$(this.el).find(".is-selected").removeClass("is-mediaFocused is-selected");
|
1476
1345
|
$(element).addClass("is-selected");
|
1477
|
-
$(element).find(".defaultValue").remove();
|
1478
1346
|
if ($(element).hasClass("graf--first")) {
|
1479
1347
|
this.reachedTop = true;
|
1480
1348
|
if ($(element).find("br").length === 0) {
|
@@ -1723,7 +1591,7 @@
|
|
1723
1591
|
Editor.prototype.setupFirstAndLast = function() {
|
1724
1592
|
var childs;
|
1725
1593
|
childs = $(this.el).find(".section-inner").children();
|
1726
|
-
childs.removeClass("graf--last
|
1594
|
+
childs.removeClass("graf--last, graf--first");
|
1727
1595
|
childs.first().addClass("graf--first");
|
1728
1596
|
return childs.last().addClass("graf--last");
|
1729
1597
|
};
|
@@ -1935,18 +1803,107 @@
|
|
1935
1803
|
}).call(this);
|
1936
1804
|
(function() {
|
1937
1805
|
var utils,
|
1806
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
1807
|
+
__hasProp = {}.hasOwnProperty,
|
1808
|
+
__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; };
|
1809
|
+
|
1810
|
+
utils = Dante.utils;
|
1811
|
+
|
1812
|
+
Dante.View.Behavior.Paste = (function(_super) {
|
1813
|
+
__extends(Paste, _super);
|
1814
|
+
|
1815
|
+
function Paste() {
|
1816
|
+
this.handlePaste = __bind(this.handlePaste, this);
|
1817
|
+
return Paste.__super__.constructor.apply(this, arguments);
|
1818
|
+
}
|
1819
|
+
|
1820
|
+
Paste.prototype.initialize = function(opts) {
|
1821
|
+
if (opts == null) {
|
1822
|
+
opts = {};
|
1823
|
+
}
|
1824
|
+
return this.editor = opts.current_editor;
|
1825
|
+
};
|
1826
|
+
|
1827
|
+
Paste.prototype.handlePaste = function(ev, parent) {
|
1828
|
+
var cbd, pastedText;
|
1829
|
+
utils.log("pasted!");
|
1830
|
+
pastedText = void 0;
|
1831
|
+
if (window.clipboardData && window.clipboardData.getData) {
|
1832
|
+
pastedText = window.clipboardData.getData('Text');
|
1833
|
+
} else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData) {
|
1834
|
+
cbd = ev.originalEvent.clipboardData;
|
1835
|
+
pastedText = _.isEmpty(cbd.getData('text/html')) ? cbd.getData('text/plain') : cbd.getData('text/html');
|
1836
|
+
}
|
1837
|
+
utils.log("Process and handle text...");
|
1838
|
+
if (pastedText.match(/<\/*[a-z][^>]+?>/gi)) {
|
1839
|
+
utils.log("HTML DETECTED ON PASTE");
|
1840
|
+
pastedText = pastedText.replace(/&.*;/g, "");
|
1841
|
+
pastedText = pastedText.replace(/<div>([\w\W]*?)<\/div>/gi, '<p>$1</p>');
|
1842
|
+
document.body.appendChild($("<div id='" + (this.editor.paste_element_id.replace('#', '')) + "' class='dante-paste'></div>")[0]);
|
1843
|
+
$(this.editor.paste_element_id).html("<span>" + pastedText + "</span>");
|
1844
|
+
this.editor.setupElementsClasses($(this.editor.paste_element_id), (function(_this) {
|
1845
|
+
return function(e) {
|
1846
|
+
var last_node, new_node, nodes, num, top;
|
1847
|
+
nodes = $(e.html()).insertAfter($(parent));
|
1848
|
+
e.remove();
|
1849
|
+
last_node = nodes.last()[0];
|
1850
|
+
num = last_node.childNodes.length;
|
1851
|
+
_this.editor.setRangeAt(last_node, num);
|
1852
|
+
new_node = $(_this.editor.getNode());
|
1853
|
+
_this.editor.markAsSelected(new_node);
|
1854
|
+
_this.editor.displayTooltipAt($(_this.editor.el).find(".is-selected"));
|
1855
|
+
_this.editor.handleUnwrappedImages(nodes);
|
1856
|
+
top = new_node.offset().top;
|
1857
|
+
return $('html, body').animate({
|
1858
|
+
scrollTop: top
|
1859
|
+
}, 20);
|
1860
|
+
};
|
1861
|
+
})(this));
|
1862
|
+
this.editor["continue"] = false;
|
1863
|
+
return false;
|
1864
|
+
}
|
1865
|
+
};
|
1866
|
+
|
1867
|
+
return Paste;
|
1868
|
+
|
1869
|
+
})(Dante.View.Behavior);
|
1870
|
+
|
1871
|
+
}).call(this);
|
1872
|
+
(function() {
|
1873
|
+
var utils,
|
1874
|
+
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
1938
1875
|
__hasProp = {}.hasOwnProperty,
|
1939
1876
|
__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; };
|
1940
1877
|
|
1941
1878
|
utils = Dante.utils;
|
1942
1879
|
|
1943
1880
|
Dante.View.Behavior.Image = (function(_super) {
|
1881
|
+
var BACKSPACE, DOWNARROW, ENTER, LEFTARROW, RIGHTARROW, SPACEBAR, TAB, UPARROW;
|
1882
|
+
|
1944
1883
|
__extends(Image, _super);
|
1945
1884
|
|
1946
1885
|
function Image() {
|
1886
|
+
this.handleArrowForKeyUp = __bind(this.handleArrowForKeyUp, this);
|
1887
|
+
this.handleArrowForKeyDown = __bind(this.handleArrowForKeyDown, this);
|
1947
1888
|
return Image.__super__.constructor.apply(this, arguments);
|
1948
1889
|
}
|
1949
1890
|
|
1891
|
+
BACKSPACE = 8;
|
1892
|
+
|
1893
|
+
TAB = 9;
|
1894
|
+
|
1895
|
+
ENTER = 13;
|
1896
|
+
|
1897
|
+
SPACEBAR = 32;
|
1898
|
+
|
1899
|
+
LEFTARROW = 37;
|
1900
|
+
|
1901
|
+
UPARROW = 38;
|
1902
|
+
|
1903
|
+
RIGHTARROW = 39;
|
1904
|
+
|
1905
|
+
DOWNARROW = 40;
|
1906
|
+
|
1950
1907
|
Image.prototype.events = {
|
1951
1908
|
"click .graf--figure .aspectRatioPlaceholder": "handleGrafFigureSelectImg",
|
1952
1909
|
"click .graf--figure figcaption": "handleGrafFigureSelectCaption",
|
@@ -1978,18 +1935,26 @@
|
|
1978
1935
|
return this.editor.pop_over_align.positionPopOver(target);
|
1979
1936
|
};
|
1980
1937
|
|
1938
|
+
Image.prototype.placeHolderDiv = function(target) {
|
1939
|
+
return target.find(".aspectRatioPlaceholder");
|
1940
|
+
};
|
1941
|
+
|
1981
1942
|
Image.prototype.handleGrafFigureSelectCaption = function(ev) {
|
1982
1943
|
var element;
|
1983
1944
|
utils.log("FIGCAPTION");
|
1984
1945
|
element = ev.currentTarget;
|
1985
|
-
|
1946
|
+
$(element).parent(".graf--figure").removeClass("is-mediaFocused");
|
1947
|
+
return this.editor.pop_over_align.hide();
|
1986
1948
|
};
|
1987
1949
|
|
1988
1950
|
Image.prototype.handleGrafCaptionTyping = function(ev) {
|
1951
|
+
var node;
|
1952
|
+
this.editor.pop_over_align.hide();
|
1953
|
+
node = $(this.editor.getNode());
|
1989
1954
|
if (_.isEmpty(utils.getNode().textContent.trim())) {
|
1990
|
-
return $(
|
1955
|
+
return $(node).addClass("is-defaultValue");
|
1991
1956
|
} else {
|
1992
|
-
return $(
|
1957
|
+
return $(node).removeClass("is-defaultValue");
|
1993
1958
|
}
|
1994
1959
|
};
|
1995
1960
|
|
@@ -2011,6 +1976,191 @@
|
|
2011
1976
|
return $(element).removeClass("is-selected is-mediaFocused");
|
2012
1977
|
};
|
2013
1978
|
|
1979
|
+
Image.prototype.handleKeyDown = function(e, parent) {
|
1980
|
+
var node;
|
1981
|
+
if (_.contains([UPARROW, DOWNARROW], e.which)) {
|
1982
|
+
utils.log(e.which);
|
1983
|
+
this.handleArrowForKeyDown(e);
|
1984
|
+
}
|
1985
|
+
if (e.which === BACKSPACE) {
|
1986
|
+
if ($(e.target).hasClass("graf--figure")) {
|
1987
|
+
e.preventDefault();
|
1988
|
+
if (this.editor.image_delete_callback) {
|
1989
|
+
this.editor.image_delete_callback($(".is-selected").find("img").data());
|
1990
|
+
}
|
1991
|
+
utils.log("Replacing selected node");
|
1992
|
+
this.editor.replaceWith("p", $(".is-selected"));
|
1993
|
+
this.editor.setRangeAt($(".is-selected")[0]);
|
1994
|
+
this.editor.pop_over_align.hide();
|
1995
|
+
utils.log("Focus on the previous graf");
|
1996
|
+
this.editor["continue"] = false;
|
1997
|
+
return false;
|
1998
|
+
}
|
1999
|
+
if (parent.hasClass("graf--p") && this.editor.isFirstChar()) {
|
2000
|
+
if (parent.prev().hasClass("graf--figure") && this.editor.getSelectedText().length === 0) {
|
2001
|
+
e.preventDefault();
|
2002
|
+
parent.prev().find("img").click();
|
2003
|
+
this.editor.pop_over_align.positionPopOver(parent.prev());
|
2004
|
+
utils.log("Focus on the previous image");
|
2005
|
+
this.editor["continue"] = false;
|
2006
|
+
return false;
|
2007
|
+
}
|
2008
|
+
}
|
2009
|
+
if (parent.hasClass("graf--mixtapeEmbed") || parent.hasClass("graf--iframe")) {
|
2010
|
+
if (_.isEmpty(parent.text().trim() || this.isFirstChar())) {
|
2011
|
+
utils.log("Check for inmediate deletion on empty embed text");
|
2012
|
+
this.editor.inmediateDeletion = this.editor.isSelectingAll(anchor_node);
|
2013
|
+
if (this.editor.inmediateDeletion) {
|
2014
|
+
this.editor.handleInmediateDeletion(parent);
|
2015
|
+
}
|
2016
|
+
e.preventDefault();
|
2017
|
+
this.editor["continue"] = false;
|
2018
|
+
return false;
|
2019
|
+
}
|
2020
|
+
}
|
2021
|
+
if (parent.prev().hasClass("graf--mixtapeEmbed")) {
|
2022
|
+
if (this.editor.isFirstChar() && !_.isEmpty(parent.text().trim())) {
|
2023
|
+
this.editor["continue"] = false;
|
2024
|
+
return false;
|
2025
|
+
}
|
2026
|
+
}
|
2027
|
+
}
|
2028
|
+
if (_.isUndefined(parent) || parent.length === 0 && $(".is-selected").hasClass("is-mediaFocused")) {
|
2029
|
+
node = $(".is-selected").find("figcaption");
|
2030
|
+
node.find(".defaultValue").remove();
|
2031
|
+
this.editor.setRangeAt(node[0]);
|
2032
|
+
$(".is-selected").removeClass("is-mediaFocused");
|
2033
|
+
this.editor.pop_over_align.hide();
|
2034
|
+
return false;
|
2035
|
+
}
|
2036
|
+
};
|
2037
|
+
|
2038
|
+
Image.prototype.handleArrowForKeyDown = function(ev) {
|
2039
|
+
var caret_node, current_node, ev_type, n, next_node, num, prev_node;
|
2040
|
+
caret_node = this.editor.getNode();
|
2041
|
+
current_node = $(caret_node);
|
2042
|
+
utils.log(ev);
|
2043
|
+
ev_type = ev.originalEvent.key || ev.originalEvent.keyIdentifier;
|
2044
|
+
utils.log("ENTER ARROW for key " + ev_type);
|
2045
|
+
switch (ev_type) {
|
2046
|
+
case "ArrowDown":
|
2047
|
+
case "Down":
|
2048
|
+
if (_.isUndefined(current_node) || !current_node.exists()) {
|
2049
|
+
if ($(".is-selected").exists()) {
|
2050
|
+
current_node = $(".is-selected");
|
2051
|
+
}
|
2052
|
+
}
|
2053
|
+
next_node = current_node.next();
|
2054
|
+
utils.log("NEXT NODE IS " + (next_node.attr('class')));
|
2055
|
+
utils.log("CURRENT NODE IS " + (current_node.attr('class')));
|
2056
|
+
if (!$(current_node).hasClass("graf")) {
|
2057
|
+
return;
|
2058
|
+
}
|
2059
|
+
if (!(current_node.hasClass("graf--figure") || $(current_node).editableCaretOnLastLine())) {
|
2060
|
+
return;
|
2061
|
+
}
|
2062
|
+
utils.log("ENTER ARROW PASSED RETURNS");
|
2063
|
+
if (next_node.hasClass("graf--figure") && caret_node) {
|
2064
|
+
n = next_node.find(".imageCaption");
|
2065
|
+
this.editor.scrollTo(n);
|
2066
|
+
utils.log("1 down");
|
2067
|
+
utils.log(n[0]);
|
2068
|
+
this.editor.skip_keyup = true;
|
2069
|
+
this.editor.selection().removeAllRanges();
|
2070
|
+
this.editor.markAsSelected(next_node);
|
2071
|
+
next_node.addClass("is-mediaFocused is-selected");
|
2072
|
+
this.editor.pop_over_align.positionPopOver(this.placeHolderDiv(next_node));
|
2073
|
+
this.editor["continue"] = false;
|
2074
|
+
return false;
|
2075
|
+
} else if (next_node.prev().hasClass("graf--figure")) {
|
2076
|
+
this.editor.pop_over_align.hide();
|
2077
|
+
} else if (next_node.hasClass("graf--mixtapeEmbed")) {
|
2078
|
+
n = current_node.next(".graf--mixtapeEmbed");
|
2079
|
+
num = n[0].childNodes.length;
|
2080
|
+
this.editor.setRangeAt(n[0], num);
|
2081
|
+
utils.log("2 down");
|
2082
|
+
this.editor["continue"] = false;
|
2083
|
+
return false;
|
2084
|
+
}
|
2085
|
+
if (current_node.hasClass("graf--figure") && next_node.hasClass("graf")) {
|
2086
|
+
this.editor.scrollTo(next_node);
|
2087
|
+
utils.log("3 down, from figure to next graf");
|
2088
|
+
this.editor.skip_keyup = true;
|
2089
|
+
this.editor.markAsSelected(next_node);
|
2090
|
+
this.editor.setRangeAt(next_node[0]);
|
2091
|
+
this.editor["continue"] = false;
|
2092
|
+
return false;
|
2093
|
+
}
|
2094
|
+
break;
|
2095
|
+
case "ArrowUp":
|
2096
|
+
case "Up":
|
2097
|
+
prev_node = current_node.prev();
|
2098
|
+
utils.log("PREV NODE IS " + (prev_node.attr('class')) + " " + (prev_node.attr('name')));
|
2099
|
+
utils.log("CURRENT NODE IS up " + (current_node.attr('class')));
|
2100
|
+
if (prev_node.length === 0 && $(ev.target).hasClass("graf--figure")) {
|
2101
|
+
n = $(ev.target).prev(".graf");
|
2102
|
+
this.editor["continue"] = false;
|
2103
|
+
this.editor.markAsSelected(n[0]);
|
2104
|
+
this.editor.pop_over_align.hide();
|
2105
|
+
return false;
|
2106
|
+
} else if (prev_node.length > 0 && $(".graf--figure.is-mediaFocused").length > 0) {
|
2107
|
+
n = $(".graf--figure.is-mediaFocused").prev(".graf");
|
2108
|
+
this.editor["continue"] = false;
|
2109
|
+
this.editor.markAsSelected(n[0]);
|
2110
|
+
this.editor.pop_over_align.hide();
|
2111
|
+
return false;
|
2112
|
+
}
|
2113
|
+
if (!$(current_node).hasClass("graf")) {
|
2114
|
+
return;
|
2115
|
+
}
|
2116
|
+
if (!$(current_node).editableCaretOnFirstLine()) {
|
2117
|
+
return;
|
2118
|
+
}
|
2119
|
+
utils.log("ENTER ARROW PASSED RETURNS");
|
2120
|
+
if (prev_node.hasClass("graf--figure")) {
|
2121
|
+
utils.log("1 up");
|
2122
|
+
n = prev_node.find(".imageCaption");
|
2123
|
+
this.editor.scrollTo(n);
|
2124
|
+
this.editor.skip_keyup = true;
|
2125
|
+
this.editor.selection().removeAllRanges();
|
2126
|
+
this.editor.markAsSelected(prev_node);
|
2127
|
+
prev_node.addClass("is-mediaFocused");
|
2128
|
+
this.editor.pop_over_align.positionPopOver(this.placeHolderDiv(prev_node));
|
2129
|
+
this.editor["continue"] = false;
|
2130
|
+
return false;
|
2131
|
+
} else if (prev_node.hasClass("graf--mixtapeEmbed")) {
|
2132
|
+
n = current_node.prev(".graf--mixtapeEmbed");
|
2133
|
+
num = n[0].childNodes.length;
|
2134
|
+
this.editor.setRangeAt(n[0], num);
|
2135
|
+
utils.log("2 up");
|
2136
|
+
this.editor["continue"] = false;
|
2137
|
+
return false;
|
2138
|
+
}
|
2139
|
+
if (current_node.hasClass("graf--figure") && prev_node.hasClass("graf")) {
|
2140
|
+
this.editor.setRangeAt(prev_node[0]);
|
2141
|
+
utils.log("3 up");
|
2142
|
+
this.editor["continue"] = false;
|
2143
|
+
return false;
|
2144
|
+
} else if (prev_node.hasClass("graf")) {
|
2145
|
+
n = current_node.prev(".graf");
|
2146
|
+
num = n[0].childNodes.length;
|
2147
|
+
utils.log("4 up");
|
2148
|
+
this.editor.skip_keyup = true;
|
2149
|
+
this.editor.markAsSelected(prev_node);
|
2150
|
+
return false;
|
2151
|
+
}
|
2152
|
+
}
|
2153
|
+
};
|
2154
|
+
|
2155
|
+
Image.prototype.handleArrowForKeyUp = function(ev) {
|
2156
|
+
var current_node;
|
2157
|
+
current_node = $(this.editor.editor.getNode());
|
2158
|
+
if (current_node.length > 0) {
|
2159
|
+
this.editor.markAsSelected(current_node);
|
2160
|
+
return this.editor.displayTooltipAt(current_node);
|
2161
|
+
}
|
2162
|
+
};
|
2163
|
+
|
2014
2164
|
return Image;
|
2015
2165
|
|
2016
2166
|
})(Dante.View.Behavior);
|
@@ -2571,7 +2721,7 @@
|
|
2571
2721
|
};
|
2572
2722
|
|
2573
2723
|
Uploader.prototype.uploadCompleted = function(url, node) {
|
2574
|
-
return node.find("img").attr("src", url);
|
2724
|
+
return node.find("img").attr("src", url).data("src", url);
|
2575
2725
|
};
|
2576
2726
|
|
2577
2727
|
|
@@ -2585,23 +2735,30 @@
|
|
2585
2735
|
*/
|
2586
2736
|
|
2587
2737
|
Uploader.prototype.handleBackspaceKey = function(e, node) {
|
2588
|
-
|
2589
|
-
|
2590
|
-
|
2591
|
-
|
2592
|
-
|
2593
|
-
|
2594
|
-
|
2595
|
-
|
2596
|
-
|
2597
|
-
|
2598
|
-
|
2599
|
-
|
2600
|
-
|
2601
|
-
|
2602
|
-
|
2603
|
-
|
2604
|
-
|
2738
|
+
|
2739
|
+
/*
|
2740
|
+
utils.log "handleBackspaceKey on uploader widget"
|
2741
|
+
|
2742
|
+
* remove graf figure if is selected but not in range (not focus on caption)
|
2743
|
+
if $(node).hasClass("is-selected") && $(node).hasClass("graf--figure")
|
2744
|
+
* exit if selection is on caption
|
2745
|
+
anchor_node = @current_editor.selection().anchorNode
|
2746
|
+
|
2747
|
+
* return false unless backspace is in the first char
|
2748
|
+
if ( anchor_node? && $(anchor_node.parentNode).hasClass("imageCaption"))
|
2749
|
+
if @current_editor.isFirstChar()
|
2750
|
+
return true
|
2751
|
+
else
|
2752
|
+
return false
|
2753
|
+
|
2754
|
+
else if $(".is-selected").hasClass("is-mediaFocused")
|
2755
|
+
* assume that select node is the current media element
|
2756
|
+
* if it's focused when backspace it means that it should be removed
|
2757
|
+
utils.log("Replacing selected node")
|
2758
|
+
@current_editor.replaceWith("p", $(".is-selected"))
|
2759
|
+
@current_editor.setRangeAt($(".is-selected")[0])
|
2760
|
+
return true
|
2761
|
+
*/
|
2605
2762
|
};
|
2606
2763
|
|
2607
2764
|
return Uploader;
|
@@ -3240,7 +3397,7 @@
|
|
3240
3397
|
this.editor = opts.editor;
|
3241
3398
|
this.hideTimeout;
|
3242
3399
|
return this.settings = {
|
3243
|
-
timeout:
|
3400
|
+
timeout: 100
|
3244
3401
|
};
|
3245
3402
|
};
|
3246
3403
|
|
@@ -3637,4 +3794,5 @@
|
|
3637
3794
|
|
3638
3795
|
|
3639
3796
|
|
3797
|
+
|
3640
3798
|
;
|