Item14288: working on dialogs as well as...

- new insert image dialog - more fixes to debug loggign - improved engine api to insert links and images
foswiki · May 16, 2017 · f17cef8 · f17cef8
1 parent 038b4ac
commit f17cef8
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 63 deletions.
diff --git a/NatEditPlugin/pub/System/NatEditPlugin/engine/base/engine.uncompressed.js b/NatEditPlugin/pub/System/NatEditPlugin/engine/base/engine.uncompressed.js
@@ -265,7 +265,7 @@ BaseEngine.prototype.insertTable = function(opts) {
 BaseEngine.prototype.insertLink = function(opts) {
   var self = this, markup;
 
-//console.log("insertLink opts=",opts);
+  self.shell.log("insertLink opts=",opts);
 
   if (typeof(opts.url) !== 'undefined') {
     // external link
@@ -286,35 +286,18 @@ BaseEngine.prototype.insertLink = function(opts) {
       return; // nop
     }
 
-    if (opts.file.match(/\.(bmp|png|jpe?g|gif|svg)$/i) && foswiki.getPreference("NatEditPlugin").ImagePluginEnabled) {
-      markup = '%IMAGE{"'+opts.file+'"';
-      if (opts.web !== self.shell.opts.web || opts.topic !== self.shell.opts.topic) {
-        markup += ' topic="';
-        if (opts.web !== self.shell.opts.web) {
-          markup += opts.web+'.';
-        }
-        markup += opts.topic+'"';
-      }
-      if (typeof(opts.text) !== 'undefined' && opts.text !== '') {
-        markup += ' caption="'+opts.text+'"';
-      }
-      markup += ' size="320"}%';
+    if (opts.web === self.shell.opts.web && opts.topic === self.shell.opts.topic) {
+      markup = "[[%ATTACHURLPATH%/"+opts.file+"]";
     } else {
-      // linking to an ordinary attachment
-
-      if (opts.web === self.shell.opts.web && opts.topic === self.shell.opts.topic) {
-        markup = "[[%ATTACHURLPATH%/"+opts.file+"]";
-      } else {
-        markup = "[[%PUBURLPATH%/"+opts.web+"/"+opts.topic+"/"+opts.file+"]";
-      }
+      markup = "[[%PUBURLPATH%/"+opts.web+"/"+opts.topic+"/"+opts.file+"]";
+    }
 
-      if (typeof(opts.text) !== 'undefined' && opts.text !== '') {
-        markup += "["+opts.text+"]";
-      } else {
-        markup += "["+opts.file+"]";
-      }
-      markup += "]";
+    if (typeof(opts.text) !== 'undefined' && opts.text !== '') {
+      markup += "["+opts.text+"]";
+    } else {
+      markup += "["+opts.file+"]";
     }
+    markup += "]";
 
   } else {
     // wiki link
@@ -339,6 +322,46 @@ BaseEngine.prototype.insertLink = function(opts) {
   self.insert(markup);
 };
 
+/***************************************************************************
+ * insert an image
+ *
+ * opts: {
+ *   web: "TheWeb",
+ *   topic: "TheTopic",
+ *   file: "TheAttachment.jpg",
+ *   width: number,
+ *   height: number,
+ *   align: "left" or "right" or "center"
+ * }
+ */
+BaseEngine.prototype.insertImage = function(opts) {
+  var self = this, markup;
+
+  self.shell.log("insertImage opts=",opts);
+
+  markup = '%IMAGE{"'+opts.file+'"';
+  if (opts.web !== self.shell.opts.web || opts.topic !== self.shell.opts.topic) {
+    markup += ' topic="';
+    if (opts.web !== self.shell.opts.web) {
+      markup += opts.web+'.';
+    }
+    markup += opts.topic+'"';
+  }
+
+  if (opts.width || opts.height) {
+    markup += ' size="'+opts.width+'x'+opts.height+'"';
+  }
+
+  if (opts.align) {
+    markup += ' align="'+opts.align+'"';
+  }
+
+  markup += '}%';
+
+  self.remove();
+  self.insert(markup);
+};
+
 /*****************************************************************************
  * parse the current selection into a two-dimensional array
  * to be used initializing a table. rows are separated by \n, columns by whitespace

diff --git a/NatEditPlugin/pub/System/NatEditPlugin/engine/codemirror/engine.uncompressed.js b/NatEditPlugin/pub/System/NatEditPlugin/engine/codemirror/engine.uncompressed.js
@@ -281,7 +281,7 @@ CodemirrorEngine.prototype.getSelectionLines = function() {
   end.ch = 0;
   end = doc.posFromIndex(doc.indexFromPos(end)-1);
 
-  //console.log("start=",start,"end=",end);
+  //self.shell.log("start=",start,"end=",end);
 
   doc.setSelection(start, end);
 
@@ -348,7 +348,7 @@ CodemirrorEngine.prototype.insertLineTag = function(markup) {
   start = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length);
   end = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length+selection.length);
 
-  //console.log("start=",start,"end=",end);
+  //self.shell.log("start=",start,"end=",end);
   doc.setSelection(start, end);
 
   self.cm.focus();
@@ -371,7 +371,7 @@ CodemirrorEngine.prototype.insertTag = function(markup) {
   start = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length);
   end = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length+selection.length);
 
-  //console.log("start=",start,"end=",end);
+  //self.shell.log("start=",start,"end=",end);
   doc.setSelection(start, end);
 };
 

diff --git a/NatEditPlugin/pub/System/NatEditPlugin/engine/prosemirror/engine.uncompressed.js b/NatEditPlugin/pub/System/NatEditPlugin/engine/prosemirror/engine.uncompressed.js
@@ -118,7 +118,7 @@ ProsemirrorEngine.prototype.getSelectionLines = function() {
   end.ch = 0;
   end = doc.posFromIndex(doc.indexFromPos(end)-1);
 
-  //console.log("start=",start,"end=",end);
+  //self.shell.log("start=",start,"end=",end);
 
   doc.setSelection(start, end);
 
@@ -175,7 +175,7 @@ ProsemirrorEngine.prototype.insertLineTag = function(markup) {
   start = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length);
   end = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length+selection.length);
 
-  console.log("start=",start,"end=",end);
+  self.shell.log("start=",start,"end=",end);
   self.setSelection(start, end);
 */
 
@@ -199,7 +199,7 @@ ProsemirrorEngine.prototype.insertTag = function(markup) {
   start = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length);
   end = doc.posFromIndex(doc.indexFromPos(doc.getCursor())+tagOpen.length+selection.length);
 
-  console.log("start=",start,"end=",end);
+  self.shell.log("start=",start,"end=",end);
   doc.setSelection(start, end);
 */
 };

diff --git a/NatEditPlugin/pub/System/NatEditPlugin/engine/tinymce/engine.uncompressed.js b/NatEditPlugin/pub/System/NatEditPlugin/engine/tinymce/engine.uncompressed.js
@@ -103,7 +103,7 @@ TinyMCEEngine.prototype.init = function() {
           });
         }
       });
-      self.on("GetContent", function() { console.log("got GetContent event"); });
+      self.on("GetContent", function() { self.shell.log("got GetContent event"); });
 */
     };
 
@@ -258,7 +258,7 @@ TinyMCEEngine.prototype.tml2html = function(tml) {
   var /*self = this,*/
       url = foswiki.getScriptUrl("rest", "WysiwygPlugin", "tml2html");
 
-  //console.log("called tml2html", tml);
+  //self.shell.log("called tml2html", tml);
 
   return $.post(url, {
     topic: foswiki.getPreference("WEB")+"."+foswiki.getPreference("TOPIC"),
@@ -458,7 +458,7 @@ TinyMCEEngine.prototype.insertTable = function(opts) {
 TinyMCEEngine.prototype.insertLink = function(opts) {
   var self = this, markup, link;
 
-  //console.log("called insertLink",opts);
+  //self.shell.log("called insertLink",opts);
 
   if (typeof(opts.url) !== 'undefined') {
     if (opts.url === '') {
@@ -514,7 +514,7 @@ TinyMCEEngine.prototype.insertLink = function(opts) {
     markup += "</a>";
   }
 
-  //console.log("markup=",markup);
+  //self.shell.log("markup=",markup);
 
   self.remove();
   self.insert(markup);

diff --git a/NatEditPlugin/pub/System/NatEditPlugin/jquery.natedit.uncompressed.js b/NatEditPlugin/pub/System/NatEditPlugin/jquery.natedit.uncompressed.js
@@ -910,7 +910,7 @@ $.NatEditor.prototype.handleToolbarAction = function(ev, ui) {
     return;
   }
 
-  //console.log("handleToolbarAction data=",itemData)
+  self.log("handleToolbarAction data=",itemData)
 
   // insert markup mode
   if (typeof(itemData.markup) !== 'undefined') {
@@ -968,19 +968,19 @@ $.NatEditor.prototype.handleToolbarAction = function(ev, ui) {
   // method mode 
   if (typeof(itemData.handler) !== 'undefined') {
     if (typeof(self.engine[itemData.handler]) === 'function') {
-      //console.log("found handler in engine for toolbar action",itemData.handler);
+      //self.log("found handler in engine for toolbar action",itemData.handler);
       self.engine[itemData.handler].call(self.engine, ev, ui);
       return;
     }
 
     if (typeof(self[itemData.handler]) === 'function') {
-      //console.log("found handler in shell for toolbar action",itemData.handler);
+      //self.log("found handler in shell for toolbar action",itemData.handler);
       self[itemData.handler].call(self, ev, ui);
       return;
     }
   }
 
-  //console.log("no action for ",ui);
+  //self.log("no action for ",ui);
 };
 
 /*************************************************************************
@@ -1239,10 +1239,10 @@ $.NatEditor.prototype.fixHeight = function() {
   }
 
   if (elem.is(":visible")) {
-    //console.log("fixHeight height=",newHeight,"container.height=",self.container.height());
+    //self.log("fixHeight height=",newHeight,"container.height=",self.container.height());
     self.setSize(undefined, newHeight);
   } else {
-    //console.log("not fixHeight elem not yet visible");
+    //self.log("not fixHeight elem not yet visible");
   }
 };
 
@@ -1265,7 +1265,7 @@ $.NatEditor.prototype.autoResize = function() {
       $txtarea = $(self.txtarea),
       now, text, height;
 
-  //console.log("called autoResize()");
+  //self.log("called autoResize()");
   now = new Date();
 
   // don't do it too often
@@ -1418,16 +1418,16 @@ $.NatEditor.prototype.dialog = function(opts) {
           text: opts.okayText,
           icon: opts.okayIcon,
           click: function() {
-            $(this).dialog("close");
             dfd.resolve(this);
+            $(this).dialog("close");
             return true;
           }
         }, {
           text: opts.cancelText,
           icon: opts.cancelIcon,
           click: function() {
-            $(this).dialog("close");
             dfd.reject();
+            $(this).dialog("close");
             return false;
           }
         }],
@@ -1444,16 +1444,20 @@ $.NatEditor.prototype.dialog = function(opts) {
             if (!$input.is(".ui-autocomplete-input") || !$input.data("ui-autocomplete").menu.element.is(":visible")) {
               if (ev.keyCode === 13) {
                 ev.preventDefault();
-                $this.dialog("close");
                 dfd.resolve($this);
+                $this.dialog("close");
               }
             }
           });
 
           opts.open.call(self, this, opts.data);
         },
         close: function() {
-          $(this).remove();
+          if (dfd.state() === 'pending') {
+            dfd.reject(); // resolve any pending dfd, such as is the case when ESC-aping a dialog
+          }
+          //self.log("destroying dialog");
+          $(this).dialog("destroy");
         },
         show: 'fade',
         modal: opts.modal,
@@ -1520,7 +1524,7 @@ $.NatEditor.prototype.handleInsertLink = function(elem) {
     opts = {},
     $currentTab = $dialog.find(".jqTab.current");
 
-  //self.log("called openInsertTable()", $dialog);
+  //self.log("called openInsertTable()", $currentTab);
 
   if ($currentTab.is(".topic")) {
     opts = {
@@ -1533,6 +1537,13 @@ $.NatEditor.prototype.handleInsertLink = function(elem) {
       url: $currentTab.find("input[name='url']").val(),
       text: $dialog.find("input[name='linktext_external']").val()
     };
+  } else if ($currentTab.is(".attachment")) {
+    opts = {
+      web: $currentTab.find("input[name='web']").val(),
+      topic: $currentTab.find("input[name='topic']").val(),
+      file: $currentTab.find("select[name='file']").val(),
+      text: $dialog.find("input[name='linktext_topic']").val()
+    };
   } else {
     return;
   }
@@ -1541,6 +1552,22 @@ $.NatEditor.prototype.handleInsertLink = function(elem) {
   return self.engine.insertLink(opts);
 };
 
+/*****************************************************************************
+  * handler for the insert image dialog
+  */
+$.NatEditor.prototype.handleInsertImage = function(elem) {
+  var self = this, $dialog = $(elem), opts = {
+    web: $dialog.find("[name=web]").val(),
+    topic: $dialog.find("[name=topic]").val(),
+    file: $dialog.find("[name=file]").val(),
+    width: $dialog.find("[name=width]").val(),
+    height: $dialog.find("[name=height]").val(),
+    align: $dialog.find("[name=align]:checked").val()
+  };
+
+  return self.engine.insertImage(opts);
+};
+
 /*****************************************************************************
   * handler for the insert attachment dialog
   */
@@ -1775,7 +1802,10 @@ $.NatEditor.prototype.initLinkDialog = function(elem, data) {
   }
 
   function loadAttachments(web, topic) {
-    var selection = $fileSelect.data("selection") || '';
+    var selection = $fileSelect.data("selection") || '',
+        filter = $fileSelect.data("filter") || ".*",
+        filterRegEx = new RegExp(filter, "i");
+
     web = web || $container.find("input[name='web']").val();
     topic = topic || $container.find("input[name='topic']").val();
     $.ajax({
@@ -1784,11 +1814,13 @@ $.NatEditor.prototype.initLinkDialog = function(elem, data) {
         topic: web+"."+topic
       },
       dataType: "json"
-    }).done(function(data) {
+    }).done(function(json) {
       var options = [];
       options.push("<option></option>");
-      $(data).each(function(i, item) {
-        options.push("<option"+(selection === item.name?" selected":"")+">"+item.name+"</option>");
+      $(json).each(function(i, item) {
+        if (filterRegEx.test(item.name)) {
+          options.push("<option"+(selection === item.name?" selected":"")+">"+item.name+"</option>");
+        }
       });
       $fileSelect.html(options.join(""));
     });
@@ -1856,19 +1888,16 @@ $.NatEditor.prototype.initLinkDialog = function(elem, data) {
 };
 
 /*****************************************************************************
-  * init the attachments dialog 
+  * init the image dialog 
   */
-$.NatEditor.prototype.initAttachmentsDialog = function(elem, data) {
-  var self = this,
-      $dialog = $(elem);
+$.NatEditor.prototype.initImageDialog = function(elem, data) {
+  var self = this;
 
-  self.log("initAttachmentsDialog on elem=",elem);
+  //self.log("initImageDialog on elem=",elem);
 
-  self.initLinkDialog(elem, data);
+  // TODO: extract width and height from rurrent selection
 
-  $dialog.on("dialogclose", function() {
-    self.hideMessages();
-  });
+  self.initLinkDialog(elem, data);
 };
 
 /*****************************************************************************

diff --git a/NatEditPlugin/templates/editdialog.natedit.tmpl b/NatEditPlugin/templates/editdialog.natedit.tmpl
@@ -105,7 +105,7 @@
 %TMPL:P{"insertlink::start"}%
 %TABPANE{class="plain"}%
 %TAB{"%MAKETEXT{"Topic"}%" id="topic"}%%TMPL:P{"insertlink::topic"}%%ENDTAB%
-%TAB{"%MAKETEXT{"Attachment"}%" id="topic"}%%TMPL:P{"insertlink::attachment"}%%ENDTAB%
+%TAB{"%MAKETEXT{"Attachment"}%" id="attachment"}%%TMPL:P{"insertlink::attachment"}%%ENDTAB%
 %TAB{"%MAKETEXT{"External"}%" id="external"}%%TMPL:P{"insertlink::external"}%%ENDTAB%
 %ENDTABPANE%
 %TMPL:P{"insertlink::end"}%