Added feature #13795: htmlArea RTE: Extjize About dialogue
authorStanislas Rolland <typo3@sjbr.ca>
Wed, 10 Mar 2010 23:28:27 +0000 (23:28 +0000)
committerStanislas Rolland <typo3@sjbr.ca>
Wed, 10 Mar 2010 23:28:27 +0000 (23:28 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@7096 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/rtehtmlarea/ChangeLog
typo3/sysext/rtehtmlarea/htmlarea/locallang_dialogs.xml
typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/about-editor.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/popups/about.html [deleted file]
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index fc0fce3..9a7cabf 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-03-10  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #13795: htmlArea RTE: Extjize About dialogue
+
 2010-03-10  Steffen Kamper  <info@sk-typo3.de>
 
        * Fixed bug #11576: Colorpicker has no usable icon (Thanks to Stefan Geith)
index f81dd90..e2d2add 100644 (file)
@@ -1,3 +1,7 @@
+2010-03-10  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #13795: htmlArea RTE: Extjize About dialogue
+
 2010-03-09  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Added feature #13785: htmlArea RTE: Extjize Find & Replace dialogue
index 284f8d6..37bf8a1 100644 (file)
@@ -87,6 +87,7 @@
                        <label index="About HTMLArea">About htmlArea RTE</label>
                        <label index="About">About</label>
                        <label index="free_editor">A free and open-source editor for &lt;textarea&gt; fields, featuring integration with TYPO3.</label>
+                       <label index="Browser support">Browser support</label>
                        <label index="Mozilla_or_IE">For Firefox 1.5+, SeaMonkey 1.0+, Safari 3.0.4+, Google Chrome 1.0+ and Opera 9.62+ on any platform, and for Internet Explorer 6.0+ on Windows.</label>
                        <label index="product_documentation">For more information, please visit:</label>
                        <label index="All rights reserved.">All Rights Reserved.</label>
index 8644827..5545a7a 100644 (file)
@@ -1,7 +1,7 @@
 /***************************************************************
 *  Copyright notice
 *
-*  (c) 2008-2009 Stanislas Rolland <stanislas.rolland(arobas)fructifor.ca>
+*  (c) 2008-2010 Stanislas Rolland <typo3(arobas)sjbr.ca>
 *  All rights reserved
 *
 *  This script is part of the TYPO3 project. The TYPO3 project is
 *  This copyright notice MUST APPEAR in all copies of the script!
 ***************************************************************/
 /*
- * Character Map Plugin for TYPO3 htmlArea RTE
+ * About Plugin for TYPO3 htmlArea RTE
  *
  * TYPO3 SVN ID: $Id$
  */
 AboutEditor = HTMLArea.Plugin.extend({
-
-       constructor : function(editor, pluginName) {
+       constructor: function(editor, pluginName) {
                this.base(editor, pluginName);
        },
-
        /*
         * This function gets called by the class constructor
         */
-       configurePlugin : function(editor) {
-
+       configurePlugin: function(editor) {
                /*
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : "1.0",
-                       developer       : "Stanislas Rolland",
-                       developerUrl    : "http://www.fructifor.ca/",
-                       copyrightOwner  : "Stanislas Rolland",
-                       sponsor         : "Fructifor Inc.",
-                       sponsorUrl      : "http://www.fructifor.ca/",
-                       license         : "GPL"
+                       version         : '2.0',
+                       developer       : 'Stanislas Rolland',
+                       developerUrl    : 'http://www.sjbr.ca/',
+                       copyrightOwner  : 'Stanislas Rolland',
+                       sponsor         : 'SJBR',
+                       sponsorUrl      : 'http://www.sjbr.ca/',
+                       license         : 'GPL'
                };
                this.registerPluginInformation(pluginInformation);
-
                /*
                 * Registering the button
                 */
-               var buttonId = "About";
+               var buttonId = 'About';
                var buttonConfiguration = {
                        id              : buttonId,
                        tooltip         : this.localize(buttonId.toLowerCase()),
-                       action          : "onButtonPress",
+                       action          : 'onButtonPress',
                        textMode        : true,
                        dialog          : true
                };
                this.registerButton(buttonConfiguration);
-
                return true;
         },
-
+       /*
+        * Supported browsers
+        */
+       browsers: [
+                'Firefox 1.5+',
+                'Google Chrome 1.0+',
+                'Internet Explorer 6.0+',
+                'Opera 9.62+',
+                'Safari 3.0.4+',
+                'SeaMonkey 1.0+'
+       ],
        /*
         * This function gets called when the button was pressed.
         *
@@ -80,14 +85,140 @@ AboutEditor = HTMLArea.Plugin.extend({
         *
         * @return      boolean         false if action is completed
         */
-       onButtonPress : function(editor, id) {
-
-                                       // Could be a button or its hotkey
+       onButtonPress: function (editor, id) {
+                       // Could be a button or its hotkey
                var buttonId = this.translateHotKey(id);
                buttonId = buttonId ? buttonId : id;
-
-               this.dialog = this.openDialog("About", this.makeUrlFromPopupName("about"), null, null, {width:475, height:350});
+               this.openDialogue(
+                       buttonId,
+                       'About HTMLArea',
+                       this.getWindowDimensions({width:450, height:350}, buttonId),
+                       this.buildTabItems()
+               );
                return false;
+       },
+       /*
+        * Open the dialogue window
+        *
+        * @param       string          buttonId: the button id
+        * @param       string          title: the window title
+        * @param       integer         dimensions: the opening width of the window
+        * @param       object          tabItems: the configuration of the tabbed panel
+        *
+        * @return      void
+        */
+       openDialogue: function (buttonId, title, dimensions, tabItems) {
+               this.dialog = new Ext.Window({
+                       title: this.localize(title),
+                       cls: 'htmlarea-window',
+                       border: false,
+                       width: dimensions.width,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
+                       iconCls: buttonId,
+                       listeners: {
+                               close: {
+                                       fn: this.onClose,
+                                       scope: this
+                               }
+                       },
+                       items: {
+                               xtype: 'tabpanel',
+                               activeTab: 0,
+                               listeners: {
+                                       activate: {
+                                               fn: this.resetFocus,
+                                               scope: this
+                                       },
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
+                                       }
+                               },
+                               items: tabItems
+                       },
+                       buttons: [
+                               this.buildButtonConfig('Close', this.onCancel)
+                       ]
+               });
+               this.show();
+       },
+       /*
+        * Build the configuration of the the tab items
+        *
+        * @return      array   the configuration array of tab items
+        */
+       buildTabItems: function () {
+               var tabItems = [];
+                       // About tab
+               tabItems.push({
+                       xtype: 'panel',
+                       cls: 'about',
+                       title: this.localize('About'),
+                       html: '<h1 id="version">htmlArea RTE ' +  RTEarea[0].version + '</h1>'
+                               + '<p>' + this.localize('free_editor').replace('<', '&lt;').replace('>', '&gt;') + '</p>'
+                               + '<p><br />' + this.localize('Browser support') + ': ' + this.browsers.join(', ') + '.</p>'
+                               + '<p><br />' + this.localize('product_documentation') + '&nbsp;<a href="http://typo3.org/extensions/repository/view/rtehtmlarea_manual/current/">typo3.org</a></p>'
+                               + '<p style="text-align: center;">'
+                                       + '<br />'
+                                       + '&copy; 2002-2004 <a href="http://interactivetools.com" target="_blank">interactivetools.com, inc.</a><br />'
+                                       + '&copy; 2003-2004 <a href="http://dynarch.com" target="_blank">dynarch.com LLC.</a><br />'
+                                       + '&copy; 2004-2010 <a href="http://www.sjbr.ca" target="_blank">Stanislas Rolland</a><br />'
+                                       + this.localize('All rights reserved.')
+                               + '</p>'
+               });
+                       // Plugins tab
+               if (!this.store) {
+                       this.store = new Ext.data.ArrayStore({
+                               fields: [{ name: 'name'}, { name: 'developer'},  { name: 'sponsor'}],
+                               sortInfo: {
+                                       field: 'name',
+                                       direction: 'ASC'
+                               },
+                               data: this.getPluginsInfo()
+                       });
+               }
+               tabItems.push({
+                       xtype: 'panel',
+                       cls: 'about-plugins',
+                       height: 200,
+                       title: this.localize('Plugins'),
+                       autoScroll: true,
+                       items: {
+                               xtype: 'listview',
+                               store: this.store,
+                               reserveScrollOffset: true,
+                               columns: [{
+                                       header: this.localize('Name'),
+                                       dataIndex: 'name',
+                                       width: .33
+                                   },{
+                                       header: this.localize('Developer'),
+                                       dataIndex: 'developer',
+                                       width: .33
+                                   },{
+                                       header: this.localize('Sponsored by'),
+                                       dataIndex: 'sponsor'
+                               }]
+                       }
+               });
+               return tabItems;
+       },
+       /*
+        * Format an arry of information on each configured plugin
+        *
+        * @return      array           array of data objects
+        */
+       getPluginsInfo: function () {
+               var pluginsInfo = [];
+               Ext.iterate(this.editor.plugins, function (pluginId, plugin) {
+                       pluginsInfo.push([
+                               plugin.name + ' ' + plugin.version,
+                               '<a href="' + plugin.developer_url + '" target="_blank">' + plugin.developer + '</a>',
+                               '<a href="' + plugin.sponsor_url + '" target="_blank">' + plugin.sponsor + '</a>'
+                       ]);
+               }, this);
+               return pluginsInfo;
        }
 });
-
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/popups/about.html b/typo3/sysext/rtehtmlarea/htmlarea/plugins/AboutEditor/popups/about.html
deleted file mode 100644 (file)
index 6041a1d..0000000
+++ /dev/null
@@ -1,166 +0,0 @@
-<!DOCTYPE html
-     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<!--
-/***************************************************************
-*  Copyright notice
-*
-*  (c) 2002-2004 interactivetools.com, inc.
-*  (c) 2003-2004 dynarch.com
-*  (c) 2004-2008 Stanislas Rolland <typo3(arobas)sjbr.ca>
-*  All rights reserved
-*
-*  This script is part of the TYPO3 project. The TYPO3 project is
-*  free software; you can redistribute it and/or modify
-*  it under the terms of the GNU General Public License as published by
-*  the Free Software Foundation; either version 2 of the License, or
-*  (at your option) any later version.
-*
-*  The GNU General Public License can be found at
-*  http://www.gnu.org/copyleft/gpl.html.
-*  A copy is found in the textfile GPL.txt and important notices to the license
-*  from the author is found in LICENSE.txt distributed with these scripts.
-*
-*
-*  This script is distributed in the hope that it will be useful,
-*  but WITHOUT ANY WARRANTY; without even the implied warranty of
-*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-*  GNU General Public License for more details.
-*
-*  This script is a modified version of a script published under the htmlArea License.
-*  A copy of the htmlArea License may be found in the textfile HTMLAREA_LICENSE.txt.
-*
-*  This copyright notice MUST APPEAR in all copies of the script!
-***************************************************************/
-/*
- * About window for TYPO3 htmlArea RTE
- *
- * TYPO3 SVN ID: $Id$
- */
- -->
-<head>
-       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-       <meta http-equiv="Content-Style-Type" content="text/css" />
-       <title>About HTMLArea</title>
-       <script type="text/javascript">
-               /*<![CDATA[*/
-               <!--
-               var HTMLArea = window.opener.HTMLArea;
-               var dialog = HTMLArea.Dialog.AboutEditor;
-
-               function Init() {
-                       initDocument();
-                       dialog.initialize();
-               }
-
-               var TABS = [];
-               var CURRENT_TAB = 0;
-
-               function selectTab(idx) {
-                       var ct = TABS[CURRENT_TAB];
-                       HTMLArea._removeClass(ct, "tab-current");
-                       ct = TABS[CURRENT_TAB = idx];
-                       HTMLArea._addClass(ct, "tab-current");
-                       for (var i = TABS.length; --i >= 0;) {
-                               var area = document.getElementById("tab-area-" + i);
-                               if (CURRENT_TAB == i) area.style.display = "block";
-                                       else area.style.display = "none";
-                       }
-                       document.body.style.visibility = "hidden";
-                       document.body.style.visibility = "visible";
-                       document.cookie = "HTMLAREA-ABOUT-TAB=" + idx;
-               }
-
-               function initDocument() {
-                       var editor = dialog.plugin.editor;
-                       var version = document.getElementById("version");
-                       version.innerHTML = "htmlArea RTE v " +  window.opener.RTEarea[0]["version"];
-                       var plugins = document.getElementById("plugins");
-                       var j = 0, i, info;
-                       var html = "<table width='99%' cellpadding='0' style='border-collapse: collapse; border: 1px solid #8b8;'>" +
-                               "<thead><tr>" +
-                               "<td>Name</td>" +
-                               "<td>Developer</td>" +
-                               "<td>Sponsored by</td>" +
-                               "</tr></thead><tbody>";
-                       for (i in editor.plugins) {
-                               info = editor.plugins[i];
-                               html += "<tr><td>" + info.name + " v" + info.version + "</td>" +
-                                       "<td><a href='" + info.developer_url + "' target='_blank' >" +
-                                       info.developer + "</a></td>" +
-                                       "<td><a href='" + info.sponsor_url + "' target='_blank' >" +
-                                       info.sponsor + "</a></td>" +
-                                       "</tr>";
-                               ++j;
-                       }
-
-                       if (j) {
-                               html += "</tbody></table>";
-                               plugins.innerHTML = "<p><span>The following plugins have been loaded.</span></p>" + html;
-                       } else {
-                               plugins.innerHTML = "<p><span>No plugins have been loaded.</span></p>";
-                       }
-                       plugins.innerHTML += "<p><span>User agent reports:</span><br/>" + navigator.userAgent + "</p>";
-
-                       var bar = document.getElementById("tabbar");
-                       j = 0;
-                       for (i = bar.firstChild; i; i = i.nextSibling) {
-                               if(i.nodeType == 1) {
-                                       TABS.push(i);
-                                       i.__msh_tab = j;
-                                       i.onmousedown = function(ev) { selectTab(this.__msh_tab); HTMLArea._stopEvent(ev || window.event); };
-                                       var area = document.getElementById("tab-area-" + j);
-                                       if (/tab-current/.test(i.className)) {
-                                               CURRENT_TAB = j;
-                                               area.style.display = "block";
-                                       } else {
-                                               area.style.display = "none";
-                                       }
-                                       ++j;
-                               }
-                       }
-                       if (document.cookie.match(/HTMLAREA-ABOUT-TAB=([0-1]+)/)) selectTab(RegExp.$1);
-               }
-               function onCancel() {
-                       dialog.close();
-                       return false;
-               }
-               // -->
-               /*]]>*/
-       </script>
-</head>
-<body class="popupwin htmlarea-about" onload="Init();">
-<div id="content">
-       <div class="title" style="cursor: pointer;" onclick="window.open('http://typo3.org/extensions/repository/view/rtehtmlarea_manual/current/');">About HTMLArea</div>
-       <div style="overflow: auto; height: 250px;" id="tab-areas-content">
-               <div id="tab-areas">
-                       <div id="tab-area-0">
-                               <h1 id="version">htmlArea RTE v 1.1.3</h1>
-                               <p><span>free_editor</span></p>
-                               <p><span>Mozilla_or_IE</span></p>
-                               <p><span>product_documentation</span>&nbsp;<a href="http://typo3.org/extensions/repository/view/rtehtmlarea_manual/current/">typo3.org</a></p>
-                               <p style="text-align: center;">
-                                       <br />
-                                       &copy; 2002-2004 <a href="http://interactivetools.com" target="_blank">interactivetools.com, inc.</a><br />
-                                       &copy; 2003-2004 <a href="http://dynarch.com" target="_blank">dynarch.com LLC.</a><br />
-                                       &copy; 2004-2008 <a href="http://www.fructifor.ca" target="_blank">Stanislas Rolland</a><br />
-                                       <span>All rights reserved.</span>
-                               </p>
-                       </div>
-                       <div id="tab-area-1">
-                               <h1>Plugins</h1>
-                               <div id="plugins"></div>
-                       </div>
-               </div>
-       </div>
-       <div class="buttons">
-               <div id="tabbar">
-                       <div class="tab tab-current">About</div>
-                       <div class="tab">Plugins</div>
-               </div>
-               <button type="button" onclick="onCancel();">Close</button>
-       </div>
-</div>
-</body>
-</html>
\ No newline at end of file
index 7ef0c54..d2fe84d 100644 (file)
 .popupwin input.shorter-value {
        width:17em;
 }
+/* Selectors for the About dialogue */
+.htmlarea-window .about-plugins .x-list-body dt {
+    overflow: auto;
+    white-space: normal;
+}
 /* Selectors for the Default Image dialogue */
 .htmlarea-default-image #image, .htmlarea-default-image #alt {
        white-space:nowrap;
index d05f860..81f626d 100644 (file)
 .popupwin input.shorter-value {
        width:17em;
 }
+/* Selectors for the About dialogue */
+.htmlarea-window .about-plugins .x-list-body dt {
+    overflow: auto;
+    white-space: normal;
+}
 /* Selectors for the Default Image dialogue */
 .htmlarea-default-image #image, .htmlarea-default-image #alt {
        white-space:nowrap;