Comment 5 for bug 460623

Hi

i was thinking about "toggle" like JQuery does it, where "toggle" only
toggles the dispay/visibility of the element.
My intention for the toggle function was, to have something short that
i can hack in a onclick field in the "object properties" window of
Inkscape, but it's nothing more.
Your idea looks cool, but i don't like the api. More later.
I think you are right in that we want something more advanced.

My first thought was using jQuery [1] inside my svg.
There is a jQuery plugin with some very advanced svg features [2].
The svg DOM differs from the html DOM, so you cannot use all jQuery
features on SVG nodes. There might be solutions for that [3] [4], but
unfortunatly you cannot use the current Version of jQuery without a
html DOM, as Keith states [5]. So i cannot just use jQuery in a
standalone svg file without embedding it in html.

Something like jQuery would be great to have. Maybe it's too html
centric, but what i really like about jQuery is it's concise api.
Maybe we can extract some parts of jQuery to built a more
sophisticated InkWeb.

Back to your proposal. While i think toggling visibility is a very
basic and maybe often used function, adding more methods the way you
propose looks like duplicating CSS functionality. We can use
stylesheets in SVG so maybe having something like
'.toggleClass("class")' would be easier to use. This method is already
in jQuery [6], but it's html-node specific and there if this
difference between HTML and SVG (don't have details about this, but
it's what i have heared).

Thank you for the quick reply.

[1] http://jquery.com/
[2] http://keith-wood.name/svg.html
[3] Keith's jquery.svgdom.js extension: http://keith-wood.name/svg.html#extend
[4] A patch by kbwood adressing this: http://dev.jquery.com/ticket/4850
[5] http://keith-wood.name/svg.html#tips
[6] http://docs.jquery.com/Attributes

Am 26.10.2009 um 22:10 schrieb Aurium:

> Please, see the code down. I was thinking in a way to help the
> InkWeb grow and help user needs related to this feature request:
> (what you think?)
>
>
> // makeSimpleStyleSetTestMethods
> // Dinamicaly create methods to set a style value and test if
> // the style configuration was applied
> InkWeb.makeSimpleStyleSetTestMethods = function ( method, att, val ) {
> var code = 'this.setStyle(el, "'+att+'", "'+val+'")';
> this[method] = new Function( "el", code );
> this[method].inkWeb = this;
> code += 'var att = this.inkWeb.getStyle(el, "'+att+'");'
> code += 'return att && display.match("'+val+'");'
> this[method].wasApplied = new Function( "el", code );
> }
>
> InkWeb.makeSimpleStyleSetTestMethods( "hide", "display", "none" );
> /* The above line will create this:
> * InkWeb.hide = function (el) {
> * this.setStyle(el, "display", "none");
> * }
> * InkWeb.hide.wasApplied (el) {
> * var display = this.inkWeb.getStyle(el, "display");
> * return display && display.match("none");
> * }
> */
>
> InkWeb.makeSimpleStyleSetTestMethods( "show", "display", "inline" );
>
> InkWeb.toggleStats = function ( el, method1, method2 ) {
> if(this[method1].wasApplied(el)) {
> this.method2(el);
> } else {
> this.method1(el);
> }
> }
>
> // if we need:
>
> InkWeb.toggleVisible(el) {
> this.toggleStats( el, hide, show );
> }
>
> --
> Proposal: Add show/hide/toggle to inkweb.js (patch included)
> https://bugs.launchpad.net/bugs/460623
> You received this bug notification because you are a direct subscriber
> of the bug.