dev.enekoalonso.com » element http://dev.enekoalonso.com having fun with code Sat, 31 Jul 2010 05:51:28 +0000 en hourly 1 Mooml: Mootools markup language (intro) http://dev.enekoalonso.com/2010/01/17/mooml-mootools-markup-language-intro/ http://dev.enekoalonso.com/2010/01/17/mooml-mootools-markup-language-intro/#comments Mon, 18 Jan 2010 05:38:56 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=392 It was a month ago when I found about Jaml, an excellent small Javascript library created by Ed Spencer which allows generating HTML code using very nice and clean templates. At work we use Mootools in most of our projects, so I thought it would be nice to improve Jaml by taking advantage of the power of Mootools. And this is the result.

Mooml: Mootools markup language

What is Mooml? Mooml is a templating system that allows generating HTML snippets very easily, without all the ugly nested “new Element” calls or string concatenation. With Mooml you can save templates for later use or evaluate snippets on the fly.

Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml

Let’s see an example

Required HTML:

  1. <div class="node">
  2.   <h2>Node Title</h2>
  3.   <p>Node body here.</p>
  4. </div>

Node title and body are variables, so let’s save them on a Json format for now.

  1. var data = {
  2.   title: 'Node Title',
  3.   body: 'Node body here'
  4. }

Using Mootools “new Element” we would have to code something like this:

  1. var el = new Element('div', {'class': 'node'}).adopt([
  2.   new Element('h2', {text: data.title}),
  3.   new Element('p', {text: data.body})
  4. ]);

That code is much better than plain Javascript, but still messy. We could use the new Elements.from included in Mootools More 1.2.4, but that would require us writing the html as a string, which rapidly gets messy concatenating variables, etc.

  1. var el = Elements.from('<div class="node"><h2>' + data.title + '</h2><p>' + data.body + '</p></div>');

With Mooml…

With Mooml, we can create a template for that piece of code, and reuse it later as many times as we need:

  1. Mooml.register('node', function(data) {
  2.   div({'class': 'node'},
  3.     h2(data.title),
  4.     p(data.body)
  5.   )
  6. });
  7. document.body.grab(Mooml.render('node', data));

We can also execute the template directly as a function:

  1. document.body.grab(Mooml.templates.node(data));

Finally, with Mooml we can evaluate templates on the fly, without having to store them for later:

  1. document.body.grab(Mooml.evaluate(function(data) {
  2.   div({'class': 'node'},
  3.     h2(data.title),
  4.     p(data.body)
  5.   )
  6. }, data));

More examples soon :)

Related Posts:

]]> http://dev.enekoalonso.com/2010/01/17/mooml-mootools-markup-language-intro/feed/ 7 Dojo sucks, Mootools rocks http://dev.enekoalonso.com/2008/12/09/dojo-sucks-mootools-rocks/ http://dev.enekoalonso.com/2008/12/09/dojo-sucks-mootools-rocks/#comments Tue, 09 Dec 2008 22:32:36 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=109 Today I got disappointed about Dojo. I had never used it before although I had seen code and I had hear good things about it. Bad things too, but I never though it was that bad. Currently I am working on a project for a client which has decided to normalize all their websites. And they have chosen Dojo. Since the website I was building was for the iPhone I decided not to use any library. It was none or Dojo. And everything went fine, because Safari is a very good browser and does things right.

But after that I had to build a desktop page for the same project. Of course, this will have to be compatible with all browsers, including IE6. And the pain started because IE6 doesn’t support the same functions than other browsers. That’s why using frameworks is so helpful. You forget about incompatibility issues. Well, that happens if you choose a good framework.

It happens than the only thing I haven’t found how to do is to get the absolute position of an element relative to its offset parent in IE6. So I said, well… let’s give it a try and use Dojo for this. After all, it would be a single line command:

  1. var position = dojo.query(myelement).coords()[0];

Well… surprise! There is a bug in Dojo that makes it return the wrong coordinates on IE6. F%$K! The one thing I needed from Dojo does not work.

Long life Mootools!

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/09/dojo-sucks-mootools-rocks/feed/ 3 Very basic $ function to deal with element classes http://dev.enekoalonso.com/2008/12/04/very-basic-function-to-deal-with-element-classes/ http://dev.enekoalonso.com/2008/12/04/very-basic-function-to-deal-with-element-classes/#comments Fri, 05 Dec 2008 05:36:37 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=78 If you are working with plain Javascript but still want to have some advantajes when dealing with element classes (element.className) you can write a small $ function like this:

  1. var $ = function(element) {
  2.    this.element = element;
  3.    this.getClasses = function() {
  4.      return this.element.className.replace(/\s+/,' ').split(' ');
  5.    }
  6.    this.hasClass = function(className) {
  7.      var classes = this.getClasses();
  8.      return (classes.indexOf(className) > -1);
  9.    }
  10.    this.addClass = function(className) {
  11.      if (!this.hasClass(className)) {
  12.        this.element.className += (this.element.className ? ' ' :'') + className;
  13.      }
  14.    }
  15.    this.removeClass = function(className) {
  16.      if (this.hasClass(className)) {
  17.        var classes = this.getClasses();
  18.        classes.splice(classes.indexOf(className), 1);
  19.        this.element.className = classes.join(' ');
  20.      }
  21.    }
  22.    return this;
  23. }

Then, once you have a variable that contains a DOM element, you can use it like this:

  1.   $(mydomelement).addClass('test');
  2.   if ($(mydomelement).hasClass('test')) alert('element has class test');
  3.   $(mydomelement).removeClass('test');
  4.   var classes = $(mydomelement).getClasses();

This will let you work with elements that have multiple classes very easily.

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/04/very-basic-function-to-deal-with-element-classes/feed/ 0