Show/Hide the Stylist Panel

danpro · 2010-03-31 19:33:44

Hi..... I have been using the -format- dropdown for a while but I want to try the Stylist panel to add lots of dynamic styles.

I've managed to activate it, and it puts a large panel down the side. This reduces the editor size a lot. Can I have a button to toggle it?
I see there's a command editor.hidePanel(editor._stylist); and one for showPanel - is there already a button built in or would I need to create one?

thanks in advance!

gogo · 2010-04-01 19:29:16

You'd need to create one I think, but that should be easy to add.

Also from memory, I think there is editor.hidePanels() and editor.showPanels() which would be easier, but I may be misremembering that.

rad14701 · 2010-04-27 10:32:35

I am also attempting to use a button to toggle the Stylist panel inXinha 0.96 Phoenix beta2 in the same manner as I had it working in older releases... Unfortunately, I have thus far been unable to duplicate the functionality... Any help in duplicating this functionality would be greatly appreciated...

rad14701 · 2010-04-27 23:51:45

Here is how I ended up incorporating the Stylist panel to toggle on and off via toolbar button... Adapt the code to suit your needs... Note the use of editor.hidePanels(['right']); and editor.showPanels(['right']); instead of editor.hidePanel(editor._stylist); and editor.showPanel(editor._stylist);... While not the most elegant solution, it appears to be working fine for several different integrations... The code shown here will run if saved as an HTML file within the xinha/ directory...

Please note that you will need to create your own xinha/plugins/Stylist/img/ directory and provide an appropriate ed_style.gif file for the button...

// This contains the names of textareas we will make into Xinha editors
xinha_init = xinha_init ? xinha_init : function()
{
/** STEP 1 ***************************************************************
* First, specify the textareas that shall be turned into Xinhas.
* For each one add the respective id to the xinha_editors array.
* I you want add more than on textarea, keep in mind that these
* values are comma seperated BUT there is no comma after the last value.
* If you are going to use this configuration on several pages with different
* textarea ids, you can add them all. The ones that are not found on the
* current page will just be skipped.
************************************************************************/

xinha_editors = xinha_editors ? xinha_editors :
[
'myTextArea'
];

/** STEP 2 ***************************************************************
* Now, what are the plugins you will be using in the editors on this
* page. List all the plugins you will need, even if not all the editors
* will use all the plugins.
*
* The list of plugins below is a good starting point, but if you prefer
* a simpler editor to start with then you can use the following
*
* xinha_plugins = xinha_plugins ? xinha_plugins : [ ];
*
* which will load no extra plugins at all.
************************************************************************/

xinha_plugins = xinha_plugins ? xinha_plugins :
[
'CharacterMap',
'ContextMenu',
'ListType',
'Stylist',
'Linker',
'SuperClean',
'TableOperations',
'ImageManager'
];

// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;

/** STEP 3 ***************************************************************
* We create a default configuration to be used by all the editors.
* If you wish to configure some of the editors differently this will be
* done in step 5.
*
* If you want to modify the default config you might do something like this.
*
* xinha_config = new Xinha.Config();
* xinha_config.width = '640px';
* xinha_config.height = '420px';
*
*************************************************************************/

xinha_config = xinha_config ? xinha_config() : new Xinha.Config();

//this is the standard toolbar, feel free to remove buttons as you like
xinha_config.toolbar =
[
["popupeditor"],
["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"],
["separator","forecolor","hilitecolor","textindicator"],
["separator","subscript","superscript"],
["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"],
["separator","insertorderedlist","insertunorderedlist","outdent","indent"],
["separator","inserthorizontalrule","createlink","insertimage","inserttable"],
["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
["separator","killword","clearfonts","removeformat","toggleborders","splitblock","lefttoright", "righttoleft"],
["separator","htmlmode","showhelp","about"]
];

// To adjust the styling inside the editor, we can load an external stylesheet like this
// NOTE : YOU MUST GIVE AN ABSOLUTE URL

xinha_config.pageStyleSheets = [ _editor_url + "examples/files/stylist.css" ];

//xinha_config.stylistLoadStylesheet('/MyStyle.css');

xinha_config.stylistLoadStylesheet( _editor_url + "examples/files/stylist.css");

// Add a button to toggle the stylist panel.
xinha_config.registerButton({
id : "stylist",
tooltip : "Toggle Stylist",
image : _editor_url + "plugins/Stylist/img/ed_style.gif",
textMode : false,
action : function(editor) { editor._toggleStylist(editor); }
});

xinha_config.toolbar[1].splice(1, 0, "separator");
xinha_config.toolbar[1].splice(1, 0, "stylist");

// the button action function code
Xinha.prototype._toggleStylist = function(editor) {
if (editor._stylistVisible == true) {
editor.hidePanels(['right']);
editor._stylistVisible = false;
} else {
editor.showPanels(['right']);
editor._stylistVisible = true;
}
};
// initial visibility setting
Xinha.prototype._stylistVisible = true;

/** STEP 4 ***************************************************************
* We first create editors for the textareas.
*
* You can do this in two ways, either
*
* xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
*
* if you want all the editor objects to use the same set of plugins, OR;
*
* xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
* xinha_editors.myTextArea.registerPlugins(['Stylist']);
* xinha_editors.anotherOne.registerPlugins(['CSS','SuperClean']);
*
* if you want to use a different set of plugins for one or more of the
* editors.
************************************************************************/

xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);

/** STEP 5 ***************************************************************
* If you want to change the configuration variables of any of the
* editors, this is the place to do that, for example you might want to
* change the width and height of one of the editors, like this...
*
* xinha_editors.myTextArea.config.width = '640px';
* xinha_editors.myTextArea.config.height = '480px';
*
************************************************************************/

/** STEP 6 ***************************************************************
* Finally we "start" the editors, this turns the textareas into
* Xinha editors.
************************************************************************/

Xinha.startEditors(xinha_editors);
}

Xinha._addEvent(window,'load', xinha_init); // this executes the xinha_init function on page load
// and does not interfere with window.onload properties set by other scripts
</script>

Last edited by rad14701 (2010-04-27 23:58:58)

rad14701 · 2010-05-13 09:46:55

As a follow-up, the code in the previous post does not work properly with the 0.96.1 release using IE 7 or IE8... It appears that there may have been changes made to the modules/InternetExplorer/InternetExplorer.js file... The stylist panel plugin will work but once toggled off it cannot be toggle back on using the toolbar button... I've wasted two days trying to get 0.96.x integrated into my code base only to find that I was spinning my wheels because first 0.96 was broken and then known working integration code didn't work due to this problem using 0.96.1...

The IE8 error information is as follows:

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 13 May 2010 13:47:33 UTC

Message: Unspecified error.
Line: 824
Char: 3
Code: 0
URI: http://<url removed>/xinha/modules/InternetExplorer/InternetExplorer.js

Message: Invalid argument.
Line: 693
Char: 3
Code: 0
URI: http://<url removed>/xinha/plugins/Stylist/Stylist.js

Last edited by rad14701 (2010-05-13 09:54:08)

gogo · 2010-05-13 20:27:22

Try uncommenting that line in InternetExplorer.js

rad14701 · 2010-05-14 23:38:21

No luck... Un-remarking if(sel.type == 'None') this.focusEditor(); does not resolve the problem... I honestly don't have any more time to invest into the issue myself right now yet feel that having a Stylist toggle button is a very important feature... I have deadlines to meet on other projects and need to replenish my now depleted bank account... If nobody gets to it before I do I'll try to re-familiarize myself with the code again and take another stab at it...

The remaining error, whether the crux of the problem or not, is the line 693 error in the following block of code... The line in question is rootElem.style.height = newSize-5 + 'px';...

Stylist.prototype.resize = function()
{
  var editor = this.editor;
  var rootElem = this.dialog.rootElem;

  if (rootElem.style.display == 'none') return;

  var panelContainer = rootElem.parentNode;

  var newSize = panelContainer.offsetHeight;
  for (var i=0; i < panelContainer.childNodes.length;++i)
  {
    if (panelContainer.childNodes[i] == rootElem || !panelContainer.childNodes[i].offsetHeight)
    {
      continue;
    }
    newSize -= panelContainer.childNodes[i].offsetHeight;
  }
  rootElem.style.height = newSize-5 + 'px';
  this.dialog.main.style.height = newSize - this.dialog.captionBar.offsetHeight -5 + 'px';
}

Last edited by rad14701 (2010-05-14 23:44:33)

rad14701 · 2010-07-27 15:34:02

Bump...

Any ideas on how to resolve this one...???

gogo · 2010-07-27 20:20:19

You will need to use your browser's developer tools/javascript debugger to investigate further. My GUESS is that it is something to do with the change to the selection model in IE and the changes done in Xinha to work with it.

It's not a big enough issue to put my time into at the moment. Patches very welcome though.

nkzle · 2010-10-08 11:46:29

works fine in chrome, ftw

rad14701 · 2010-11-23 17:21:26

From what testing I have done, I have this working in the 0.96.1 release...

Xinha Discussion Forum

Announcement

#1 2010-03-31 19:33:44

Show/Hide the Stylist Panel

#2 2010-04-01 19:29:16

Re: Show/Hide the Stylist Panel

#3 2010-04-27 10:32:35

Re: Show/Hide the Stylist Panel

#4 2010-04-27 23:51:45

Re: Show/Hide the Stylist Panel

#5 2010-05-13 09:46:55

Re: Show/Hide the Stylist Panel

#6 2010-05-13 20:27:22

Re: Show/Hide the Stylist Panel

#7 2010-05-14 23:38:21

Re: Show/Hide the Stylist Panel

#8 2010-07-27 15:34:02

Re: Show/Hide the Stylist Panel

#9 2010-07-27 20:20:19

Re: Show/Hide the Stylist Panel

#10 2010-10-08 11:46:29

Re: Show/Hide the Stylist Panel

#11 2010-11-23 17:21:26

Re: Show/Hide the Stylist Panel

Board footer