Q.tis – micro port of jQuery for Sciter.

I’ve published today Sciter with q.tis – micro-port of essential jQuery features.
Here is the list of supported functions.

It is just enough to put include "t.tis"; in your code and any existing DOM function that returns array of elements will
“automagically” produce the q-collection.

In my implementation I am using the fact that functions like Element.selectAll("selector") return array object that is instanceof ElementList.
ElementList as any class is extensible in run-time. So I’ve just added bunch of function ElementList.jqueryMethod() {} to bring that functionality to the Sciter.

The beauty of the approach is that you can use as the q() function (analog of $() in jQuery) as Sciter’s standard $$() to write something like this:

var itemsWithLinks = $$(ul.topics > li).$has(a:link);

to get list of list items that have <a>’s inside.
The same but in classic style and without use of “stringizers”:

var itemsWithLinks = q("ul.topics > li").has("a:link");

You may also find handy jquery-alike event handling. Methods element.on(), element.off(), element.one() and element.trigger() are available as for q-collections as for DOM element instances.

Sciter is out with new TIScript features

One of such features added in is support of member variables declarations in classes.

By using this var name = value construction you can define member (instance) variables:

This code:

class Foo {
  this var one = 1, // member variable
           two = 2; // member variable

  function sum() { return this.one + this.two; }

var foo = new Foo();
stdout << foo.sum() << "\n";

will output ‘3’ even there is no constructor is defined in the class.
Each instance of the class is born with those this.one and this.two variables having their initial values.

If there is other class that inherits such Foo class then it gets member variables declared in its super class as the ones declared in the class iself.

This code:

class Bar: Foo {
  this var three = 3; // member variable

  function sum() { return this.three + super.sum(); }

var bar = new Bar();
stdout << bar.sum() << "\n";

will ouput ‘6’ as the bar instance contains this.one, this.two and this.three variables.

Making TIScript syntax compatible with CSS.

Time to time when I need to define some CSS constructs in script I feel myself non-comfortable – CSS and JavaScript/TIScript use different syntax’es.

Consider this code in JavaScript:

  function switchState() 
    element.style.backgroundColor = "rgb(126,0,0)";
    element.style.transform = "rotate(45deg) translate(10px,10px)";

Not so aesthetically pleasing. And not so effective as string parsing is involved.

And yet if for example you will need to get current rotation angle from style, increment it by some value and write it back then you will need to implement non trivial parsing using CSS rules and opposite toString translation for changed rule.

I’ve explored quite many JS frameworks that are capable working with styles – all they have good chunk of parsing CSS code.

But browser already parses the CSS and builds internal structures that represent CSS values. Code is there, why not to reuse it?

One way of dealing with this is to expose CSS internal structures using so called CSSOM. But that’s really too much work and result is still too narrative I would say.

Ideally that should look like this:

  function switchState() 
    element.style.set {
      background-color: rgb(126,0,0),
      transform: rotate(45deg) translate(10px,10px) 

And in principle JS syntax can be extended to support such constructions without conflicts with existing code:

  1. Allow names with hyphens like background-color in object literals.
  2. Allow values with units like 45deg, 10px and the like. That will require new data types in JS but they are handy anyway
  3. Add so called tagged tuples to the language. In terms of CSS this rotate(45deg) is not a function call but rather tuple (data structure with the name). In terms of TIScript this can be written as [rotate:45deg] – one element tuple with the tag ‘rotate’.
  4. Add whitespace as a valid list separator, at least in object literals, so this
       { transform: rotate(45deg) translate(10px,10px) }

    will be an equivalent of

       { transform:[rotate(45deg), translate(10px,10px)] }

    And that would be pretty much it.

In fact CSS syntax (that may look like a mess sometimes) uses in reality two types of lists and one tuple<2> (in order of precedence):

  1. comma separated lists: background: url(1.png),url(2.png);
  2. white-space separated lists: background: no-repeat url(1.png);
  3. pair-tuples: font: 12pt 10pt/14pt "arial";

But that would be next step. At the moment I am trying to add values with units and whitespace lists…