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.
@@ -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: 300}
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
- #debugger
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").attr("src", url)
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
@@ -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.1.3",
5
+ "version" : "0.1.4",
6
6
  "keywords": [
7
7
  "css",
8
8
  "sass",
@@ -8,7 +8,7 @@
8
8
  defaults: {
9
9
  image_placeholder: '../images/dante/media-loading-placeholder.png'
10
10
  },
11
- version: "0.1.3"
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.handleArrowForKeyDown = __bind(this.handleArrowForKeyDown, 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.save_behavior = new Dante.View.Behavior.Image({
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.save_behavior);
565
+ this.behaviors.push(this.image_behavior);
559
566
  }
560
567
  if (base_behaviors.indexOf("list") >= 0) {
561
- this.save_behavior = new Dante.View.Behavior.List({
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.save_behavior);
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.handleArrow = function(ev) {
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(ev) {
1055
- var cbd, pastedText;
1056
- utils.log("pasted!");
1057
- this.aa = this.getNode();
1058
- pastedText = void 0;
1059
- if (window.clipboardData && window.clipboardData.getData) {
1060
- pastedText = window.clipboardData.getData('Text');
1061
- } else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData) {
1062
- cbd = ev.originalEvent.clipboardData;
1063
- pastedText = _.isEmpty(cbd.getData('text/html')) ? cbd.getData('text/plain') : cbd.getData('text/html');
1064
- }
1065
- utils.log("Process and handle text...");
1066
- if (pastedText.match(/<\/*[a-z][^>]+?>/gi)) {
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 KEYDOWNS");
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.handleArrow(e);
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(element);
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 , graf--first");
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
- return $(element).parent(".graf--figure").removeClass("is-mediaFocused");
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 $(this.editor.getNode()).addClass("is-defaultValue");
1955
+ return $(node).addClass("is-defaultValue");
1991
1956
  } else {
1992
- return $(this.editor.getNode()).removeClass("is-defaultValue");
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
- var anchor_node;
2589
- utils.log("handleBackspaceKey on uploader widget");
2590
- if ($(node).hasClass("is-selected") && $(node).hasClass("graf--figure")) {
2591
- anchor_node = this.current_editor.selection().anchorNode;
2592
- if ((anchor_node != null) && $(anchor_node.parentNode).hasClass("imageCaption")) {
2593
- if (this.current_editor.isFirstChar()) {
2594
- return true;
2595
- } else {
2596
- return false;
2597
- }
2598
- }
2599
- } else if ($(".is-selected").hasClass("is-mediaFocused")) {
2600
- utils.log("Replacing selected node");
2601
- this.current_editor.replaceWith("p", $(".is-selected"));
2602
- this.current_editor.setRangeAt($(".is-selected")[0]);
2603
- return true;
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: 300
3400
+ timeout: 100
3244
3401
  };
3245
3402
  };
3246
3403
 
@@ -3637,4 +3794,5 @@
3637
3794
 
3638
3795
 
3639
3796
 
3797
+
3640
3798
  ;