Proposal: Add show/hide/toggle to inkweb.js (patch included)

[Andreas Haller]

Changing the visibilty of elements might be the most basic functionality one needs to build interactive presentations, mockups or the like using Inkscape.

To simplify this, this patch adds hide(el), show(el), toogle(el) functions to inkscape.js.

I am using this to build mockups with Inkscape and find it very useful.

[Andreas Haller (ahaller)]

here's the patch

[Aurium (aurium)]

Thanks Andreas! I like your patch, but may be better to make the toggle usable for all toggleable things.
Do you want to make a new proposal on this way?

[Aurium (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 );
}

[Andreas Haller (ahaller)]

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);
> }
> }...

[Aurium (aurium)]

Good points Andreas. I like the jQuery too, and have one js DOM lib for all XML based formats may be the best for all.

May we must research how to make the jQuery format independent and add the InkWeb as a plugin.

I think is a good idea to give a help here: http://dev.jquery.com/search?q=svg

Anyway... by now the InkWeb usage is not equal to jQuery, so we may take to do what we think that is needed to svg usage on the web and make something different if it may be cool.

[jazzynico (jazzynico)]

@Aurium - Are you still working on this patch?

[Aurium (aurium)]

Hi JazzyNico, i let the way open to Andreas to collaborate.
I only think more talk may be a good thing.

Have you a new patch (or ideas) Andreas?