[kupu-checkins] r43565 - in kupu/trunk/kupu: common default plone/kupu_plone_layer

duncan at codespeak.net duncan at codespeak.net
Tue May 22 17:29:34 CEST 2007


Author: duncan
Date: Tue May 22 17:29:33 2007
New Revision: 43565

Modified:
   kupu/trunk/kupu/common/kupudrawers.js
   kupu/trunk/kupu/common/kupudrawerstyles.css
   kupu/trunk/kupu/common/kupuhelpers.js
   kupu/trunk/kupu/default/drawers.kupu
   kupu/trunk/kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html
Log:
Added a tab to the external link drawer to insert 'external' html. This can be used to insert object/embed tags generate by sites such as youtube or picasa.

Modified: kupu/trunk/kupu/common/kupudrawers.js
==============================================================================
--- kupu/trunk/kupu/common/kupudrawers.js	(original)
+++ kupu/trunk/kupu/common/kupudrawers.js	Tue May 22 17:29:33 2007
@@ -39,7 +39,9 @@
         }
         this.current_drawer = drawer;
         if (args===undefined) args = [];
-        drawer.initMask(drawer.element);
+        if (this.isIE) {
+            drawer.initMask(drawer.element);
+        }
         drawer.createContent.apply(drawer, args);
         drawer.editor.suspendEditing();
         drawer.fixMask();
@@ -276,10 +278,25 @@
     DrawerWithAnchors.call(this, elementid, tool);
     
     var input = getBaseTagClass(this.element, 'input', 'kupu-linkdrawer-input');
+    var embed = getBaseTagClass(this.element, 'textarea', 'kupu-embed-input');
     var preview = getBaseTagClass(this.element, 'iframe', 'kupu-linkdrawer-preview');
     this.anchorframe = preview;
     this.anchorui = getBaseTagClass(this.element, 'tr', 'kupu-linkdrawer-anchors');
     this.target = '';
+    this.panel = getBaseTagClass(this.element, 'div', 'kupu-panels');
+    this.switchMode = function(event) {
+        event = event || window.event;
+        var target = event.currentTarget || event.srcElement;
+        this.panel.className = 'kupu-panels '+target.parentNode.className;
+        if (event.preventDefault) { event.preventDefault();}
+        event.returnValue = false;
+        return false;
+    };
+    var tabs = getBaseTagClass(this.element, 'ul', 'kupu-tabs').getElementsByTagName('a');
+    for (var i = 0; i < tabs.length; i++) {
+        addEventHandler(tabs[i], 'click', this.switchMode, this);
+    }
+    addEventHandler(embed, 'click', function() { if(embed.defaultValue==embed.value) {embed.select();} });
 
     this.selChange = function() {
         var anchor = this.getFragment();
@@ -293,8 +310,9 @@
 
     this.createContent = function() {
         /* display the drawer */
-        var currnode = this.editor.getSelectedNode();
-        var linkel = this.editor.getNearestParentOfType(currnode, 'a');
+        var ed = this.editor;
+        var currnode = ed.getSelectedNode();
+        var linkel = ed.getNearestParentOfType(currnode, 'a');
         input.value = "";
 
         this.preview();
@@ -303,6 +321,12 @@
         } else {
             input.value = 'http://';
         };
+        var obj = ed.getNearestParentOfType(currnode, 'object') || ed.getNearestParentOfType(currnode, 'embed');
+        if (obj) {
+            embed.value = getOuterHtml(obj);
+        } else {
+            embed.value = embed.defaultValue;
+        }
         this.element.style.display = 'block';
         this.hideAnchors();
         this.focusElement();
@@ -311,10 +335,22 @@
     this.save = function() {
         /* add or modify a link */
         this.editor.resumeEditing();
-        var url = input.value;
-        this.tool.createLink(url, null, null, this.target);
-        input.value = '';
-
+        if (this.getMode()) {
+            var url = input.value;
+            this.tool.createLink(url, null, null, this.target);
+            input.value = '';
+        } else {
+            // Import the html
+            var doc = this.editor.getInnerDocument();
+            var selection = this.editor.getSelection();
+            var dummy = doc.createElement("div");
+            dummy.innerHTML = embed.value;
+            try {
+                while (dummy.firstChild) {
+                    selection.replaceWithNode(dummy.firstChild, false);
+                };
+            } catch(e) {};
+        }
         // XXX when reediting a link, the drawer does not close for
         // some weird reason. BUG! Close the drawer manually until we
         // find a fix:
@@ -328,13 +364,18 @@
         return current;
     }
     
+    this.getMode = function() {
+        return !!(/addlink/.test(this.panel.className));
+    };
     this.preview = function() {
-        preview.src = input.value;
-        this.showAnchors(currentAnchor());
-        if (this.editor.getBrowserName() == 'IE') {
-            preview.width = "800";
-            preview.height = "365";
-            preview.style.zoom = "60%";
+        if (this.getMode()) {
+            preview.src = input.value;
+            this.showAnchors(currentAnchor());
+            if (this.editor.getBrowserName() == 'IE') {
+                preview.width = "800";
+                preview.height = "365";
+                preview.style.zoom = "60%";
+            };
         };
     };
 
@@ -1637,7 +1678,7 @@
         }
         event.cancelBubble = true;
         if (event.stopPropogation) event.stopPropogation();
-
+        event.returnValue = false;
         return false;
     }
     return true;

Modified: kupu/trunk/kupu/common/kupudrawerstyles.css
==============================================================================
--- kupu/trunk/kupu/common/kupudrawerstyles.css	(original)
+++ kupu/trunk/kupu/common/kupudrawerstyles.css	Tue May 22 17:29:33 2007
@@ -72,8 +72,12 @@
 .kupu-linkdrawer-input {
    width: 500px;
 }
+.kupu-embed-input {
+   width: 500px;
+   height: 20em;
+}
 iframe.kupu-linkdrawer-preview {
-   width: 100%;
+  width: 100%; height:20em;
 }
 .kupu-preview-row {
   float: right;
@@ -273,9 +277,14 @@
   display: inline; padding: 2px; border: 1px solid; margin: 0 5px 0 0;
 }
 .kupu-tabs a { text-decoration: none; }
-.kupu-ins-bm li.kupu-ins-bm, .kupu-toc li.kupu-toc { background: white; border-bottom: none !IMPORTANT; padding-bottom: 3px;}
+.kupu-ins-bm li.kupu-ins-bm, .kupu-toc li.kupu-toc,
+.kupu-linkdrawer-addlink li.kupu-linkdrawer-addlink,
+.kupu-linkdrawer-embed li.kupu-linkdrawer-embed { background: white; border-bottom: none !IMPORTANT; padding-bottom: 3px;}
 table.kupu-tabbed { border-spacing: 0;}
 
+.kupu-linkdrawer-addlink .kupu-embed { display: none; }
+.kupu-linkdrawer-embed .kupu-addlink { display: none; }
+
 .kupu-ins-bm #kupu-bm-sel2, .kupu-ins-bm .kupu-bm-heading {
    display:none;
 }

Modified: kupu/trunk/kupu/common/kupuhelpers.js
==============================================================================
--- kupu/trunk/kupu/common/kupuhelpers.js	(original)
+++ kupu/trunk/kupu/common/kupuhelpers.js	Tue May 22 17:29:33 2007
@@ -1519,4 +1519,22 @@
         var fld = document.getElementById(label.htmlFor);
         if(fld) { fld.style.display = vis; }
     }
-}
\ No newline at end of file
+}
+
+function getOuterHtml(node) {
+    var html = '<';
+    html += node.nodeName.toLowerCase();
+    var attrs = node.attributes;
+    for (var a = 0; a < attrs.length; a++) {
+        var att = attrs[a];
+        if (att.specified) {
+            html += ' ' + att.nodeName.toLowerCase() + '="' + att.nodeValue + '"';
+        }
+    }
+    html += '>';
+    if (!(/hr|br|img|input/i.test(node.nodeName))) {
+        html += node.innerHTML;
+        html += '<\/' + node.nodeName.toLowerCase() + '>';
+    }
+    return html;
+}

Modified: kupu/trunk/kupu/default/drawers.kupu
==============================================================================
--- kupu/trunk/kupu/default/drawers.kupu	(original)
+++ kupu/trunk/kupu/default/drawers.kupu	Tue May 22 17:29:33 2007
@@ -47,37 +47,63 @@
       <h1 class="kupu-drawer-title" i18n:translate="">External Link</h1>
 
       <div id="kupu-linkdrawer-addlink" class="kupu-panels kupu-linkdrawer-addlink">
-         <ul>
-            <li><a href="#">Link to url</a></li>
-            <li><a href="#">Embed external object</a></li>
+         <ul class="kupu-tabs">
+            <li class="kupu-linkdrawer-addlink"><a href="#">Link to url</a></li>
+            <li class="kupu-linkdrawer-embed"><a href="#">Embed external object</a></li>
          </ul>
-        <table cellspacing="0">
-        <tr><td><div class="kupu-toolbox-label">
-          <!-- Link to items matching the keyword  -->
-          <span i18n:translate="">
-            Link the highlighted text to this URL:
-          </span>
-        </div>
-
-        <input class="kupu-toolbox-st kupu-linkdrawer-input" type="text"
-                onkeypress="return HandleDrawerEnter(event, 'linkdrawer-preview');" />
-        </td>
-        <td class="kupu-preview-button">
-          <button class="kupu-dialog-button"
-                  type="button" id="linkdrawer-preview" onclick="drawertool.current_drawer.preview()"
-                  i18n:translate="">Preview</button>
-        </td></tr>
-        <tr class="kupu-linkdrawer-anchors" style="display:none">
-          <td colspan="2">
-            <label i18n:translate="" for="anchorselect">Anchor</label>
-            <select id="anchorselect"><option i18n:translate="" value="">(none)</option></select>
-          </td>
-        </tr>
-        <tr><td colspan="2" align="center">
-        <iframe frameborder="1" scrolling="auto" width="440" height="198"
-                class="kupu-linkdrawer-preview" src="javascript:''">
-        </iframe>
-        </td></tr>
+         <table class="kupu-tabbed">
+            <tbody class="kupu-addlink">
+               <tr>
+                  <td>
+                     <div class="kupu-toolbox-label">
+                        <!-- Link to items matching the keyword  -->
+                        <span i18n:translate="">
+                           Link the highlighted text to this URL:
+                        </span>
+                     </div>
+                     <input class="kupu-toolbox-st kupu-linkdrawer-input" type="text"
+                            onkeypress="return HandleDrawerEnter(event, 'linkdrawer-preview');" />
+                  </td>
+                  <td class="kupu-preview-button">
+                     <button class="kupu-dialog-button"
+                             type="button" id="linkdrawer-preview" onclick="drawertool.current_drawer.preview()"
+                             i18n:translate="">Preview</button>
+                  </td>
+               </tr>
+               <tr class="kupu-linkdrawer-anchors" style="display:none">
+                  <td colspan="2">
+                     <label i18n:translate="" for="anchorselect">Anchor</label>
+                     <select id="anchorselect"><option i18n:translate="" value="">(none)</option></select>
+                  </td>
+               </tr>
+               <tr><td colspan="2" align="center">
+                  <iframe frameborder="1" scrolling="auto" width="440" height="198"
+                          class="kupu-linkdrawer-preview" src="javascript:''">
+                  </iframe>
+                  </td>
+               </tr>
+            </tbody>
+            <tbody class="kupu-embed">
+               <tr>
+                  <td>
+                     <div class="kupu-toolbox-label">
+                        <!-- Link to items matching the keyword  -->
+                        <span i18n:translate="">
+                           Paste &lt;object&gt; or &lt;embed&gt; tag here:
+                        </span>
+                     </div>
+                     <textarea class="kupu-toolbox-st kupu-embed-input">[insert arbitrary HTML code here]</textarea>
+                  </td>
+               </tr>
+               <tr>
+                  <td>
+                  You may use this box to insert custom snippets of
+                  HTML code. There is no guarantee that any code
+                  inserted in this way will be preserved when you save
+                  your edits.
+                  </td>
+               </tr>
+            </tbody>
         </table>
 
         <div class="kupu-dialogbuttons">

Modified: kupu/trunk/kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html
==============================================================================
--- kupu/trunk/kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html	(original)
+++ kupu/trunk/kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html	Tue May 22 17:29:33 2007
@@ -16,7 +16,7 @@
     <!--$Id: toolboxes.kupu 37754 2007-02-01 17:24:29Z yuppie $-->
     <!--$Id: colorchooser.kupu 35491 2006-12-08 15:41:49Z duncan $-->
     <!--$Id: save.kupu 9520 2005-02-26 16:30:23Z duncan $-->
-    <!--$Id: drawers.kupu 41836 2007-04-03 08:36:10Z duncan $-->
+    <!--$Id: drawers.kupu 43562 2007-05-22 13:03:41Z duncan $-->
     <!--$Id: include.kupu 39202 2007-02-19 12:06:45Z duncan $-->
     <!--$Id: wire.kupu 25247 2006-04-03 11:23:02Z fschulze $-->
     <!--$Id: head.kupu 34332 2006-11-07 14:50:40Z duncan $-->
@@ -227,33 +227,59 @@
       <h1 class="kupu-drawer-title" i18n:translate="">External Link</h1>
 
       <div id="kupu-linkdrawer-addlink" class="kupu-panels kupu-linkdrawer-addlink">
-         <ul>
-            <li><a href="#">Link to url</a></li>
-            <li><a href="#">Embed external object</a></li>
+         <ul class="kupu-tabs">
+            <li class="kupu-linkdrawer-addlink"><a href="#">Link to url</a></li>
+            <li class="kupu-linkdrawer-embed"><a href="#">Embed external object</a></li>
          </ul>
-        <table cellspacing="0">
-        <tr><td><div class="kupu-toolbox-label">
-          
-          <span i18n:translate="">
-            Link the highlighted text to this URL:
-          </span>
-        </div>
-
-        <input class="kupu-toolbox-st kupu-linkdrawer-input" type="text" onkeypress="return HandleDrawerEnter(event, 'linkdrawer-preview');"/>
-        </td>
-        <td class="kupu-preview-button">
-          <button class="kupu-dialog-button" type="button" id="linkdrawer-preview" onclick="drawertool.current_drawer.preview()" i18n:translate="">Preview</button>
-        </td></tr>
-        <tr class="kupu-linkdrawer-anchors" style="display:none">
-          <td colspan="2">
-            <label i18n:translate="" for="anchorselect">Anchor</label>
-            <select id="anchorselect"><option i18n:translate="" value="">(none)</option></select>
-          </td>
-        </tr>
-        <tr><td colspan="2" align="center">
-        <iframe frameborder="1" scrolling="auto" width="440" height="198" class="kupu-linkdrawer-preview" src="javascript:''">
-        </iframe>
-        </td></tr>
+         <table class="kupu-tabbed">
+            <tbody class="kupu-addlink">
+               <tr>
+                  <td>
+                     <div class="kupu-toolbox-label">
+                        
+                        <span i18n:translate="">
+                           Link the highlighted text to this URL:
+                        </span>
+                     </div>
+                     <input class="kupu-toolbox-st kupu-linkdrawer-input" type="text" onkeypress="return HandleDrawerEnter(event, 'linkdrawer-preview');"/>
+                  </td>
+                  <td class="kupu-preview-button">
+                     <button class="kupu-dialog-button" type="button" id="linkdrawer-preview" onclick="drawertool.current_drawer.preview()" i18n:translate="">Preview</button>
+                  </td>
+               </tr>
+               <tr class="kupu-linkdrawer-anchors" style="display:none">
+                  <td colspan="2">
+                     <label i18n:translate="" for="anchorselect">Anchor</label>
+                     <select id="anchorselect"><option i18n:translate="" value="">(none)</option></select>
+                  </td>
+               </tr>
+               <tr><td colspan="2" align="center">
+                  <iframe frameborder="1" scrolling="auto" width="440" height="198" class="kupu-linkdrawer-preview" src="javascript:''">
+                  </iframe>
+                  </td>
+               </tr>
+            </tbody>
+            <tbody class="kupu-embed">
+               <tr>
+                  <td>
+                     <div class="kupu-toolbox-label">
+                        
+                        <span i18n:translate="">
+                           Paste &lt;object&gt; or &lt;embed&gt; tag here:
+                        </span>
+                     </div>
+                     <textarea class="kupu-toolbox-st kupu-embed-input">[insert arbitrary HTML code here]</textarea>
+                  </td>
+               </tr>
+               <tr>
+                  <td>
+                  You may use this box to insert custom snippets of
+                  HTML code. There is no guarantee that any code
+                  inserted in this way will be preserved when you save
+                  your edits.
+                  </td>
+               </tr>
+            </tbody>
         </table>
 
         <div class="kupu-dialogbuttons">


More information about the kupu-checkins mailing list