fj - elements constructor

[Gozar]

fj - сокращение от fiji

Конструктор html элементов. Фреймворк. Не описаны в документации динамическое добавление и удаление вложенных элементов и мало тестовых примеров. Нашлепаю в ближайшем будущем.

Суть:
Добавляем шаблон. Указываем: методы работы с шаблоном, стили, родителя к которому крепить элемент, обработчики. Есть встроенная модель.

Пример файла pages.js

/js/min/fj.min.js  //взять с git
/css/fj-pages.css  //нарисовать свои стили

var gui,
    totalPages,
    dataPages = [],
    i;

gui = new fj();

totalPages = 14; // количество кнопок

for (i = 1; i <= totalPages; i += 1) {
    dataPages.push({page: i});
}

gui.addElement({
    pages: {
        tpl: '<div class="fj-pages-block {cls}" data-fj-id="{this.id}" data-fj-name="{name}" style="{style}">\
                  <ul class="fj-pages-link">\
                      <li class="fj-pages-range">Страница {from} из {total}</li>\
                      % foreach %\
                          <li class="fj-pages" data-fj-item="page">{data.page}</li>\
                      % foreach; %\
                  </ul>\
              </div>'
    }
});

gui.ui({
    type: 'pages',
    name: 'pages',
    parent: '#pages-wrap',
    from: 1,
    total: totalPages,
    data: dataPages,
    dataEvents: {
        click: function () {
            var page = this.innerHTML;
            console.log(page);
        }
    }
});

[Gozar]

Плюшки:

Если указывать у fj-элементов имена, то в parent можно писать эти имена и элементы будут крепиться к ним. По сути name это id для fj. При сборке html страницы целиком из fj-элементов (разметка тоже fj-элементы) это удобно.

Можно добавлять элементы пачкой(все сразу, а можно поштучно). Таким образом можно собрать SPA или выпадающее меню на сайте или вложенный каталог и загрузить его сразу развернутым на любое количество уровней.

[Gozar]

Добавил наглядный пример. Элемент графического просмотровщика наподобии ACDSee или FastStone - image thumbnail.

preview git

Глянуть сразу можно тут:
Рабочий пример

zoom кликабелен, он часть примера использования.

[Viral]

тыркнул дважды на лупу, и "большой яндекс" отказался закрываться..
извините я борюсь с тестерскими привычками, но пока никак..

[Gozar]

тыркнул дважды на лупу, и "большой яндекс" отказался закрываться..

Пример сильно порезан.

извините я борюсь с тестерскими привычками, но пока никак..

Не переживай ... все норм, это тест, а не продакшн. Ты сам должен описать логику работы программы, я лишь показываю, как создавать элементы и что ими можно управлять. Если в программе будут ошибки, то конструктор виноват не во всех

В данном случае создалось 2 элемента с одинаковым name="zoom" при клике на крест, один из них закрылся, второй остался. Нужно отслеживать, чтобы элемент создавался только один и все будет ок.

Проблему можно решить добавив уникальное имя:
http://learn.javascript.ru/play/lwT9

Но повторю, что это скорее проблема не конструктора, а реализации данного примера.

Спасибо за отзыв, я подумаю над тем чтобы упростить задачу в будущем и если придумаю удобное, но не мудреное решение, то внесу его во фреймворк.

[Gozar]

1. Обернул fj в функцию:

window.fj

2. Теперь в качестве parent можно указывать не только name(fj-name /[a-z0-9]+/), css selector вида className, id, сложные селекторы(если в строке parent есть точка, решетка или пробел, то это css selector /[\.# ]/), но также и DOM node

[melky]

шаблоны какого-то уже известного формата или что-то новое? можно заюзать, скажем, snakeskin\jade\что-то ещё?
как вложить 2 или больше элемента внутри одного?
можно ли отрендерить разметку на сервере?

[Gozar]

шаблоны какого-то уже известного формата или что-то новое?

Нельзя назвать это новым, т.к. это готовый html с возможностью вставки в него конструкции foreach, для многократного повторения внутренних частей html. Кроме % foreach % ничего нет и наверное не будет. Есть еще три типа фиг. скобок {MyName} {this.id} и {data.MyDataName}

{MyName} - пишем туда что-нужно и называем как удобно {title}, {btnName} ...
(есть еще {style} {cls} {name} нужны проге дя работы) и {this.id} нужно программе, поэтому просто копипастим
{data.name} {data.id} ... это дата данные обычно то, что летит с сервера: [{id: "1", name:"Вася"}, {id: "2", name:"Петя"} ...]

То, что вставляется находиться в фигурных скобках. {MyPersoanlValue}
При создании элемента на странице указывается значение

g.ui({
MyPersonalValue: 'Тут мой текст'
})

Вот так можно сделать свой alert

app.alert('Вы не заполнили поле Имя!')

var app={};

    /*
     * add Elements
     */
    gui.addElement({
        alert: {
            tpl: '<div class="fj-alert {cls}" data-fj-id="{this.id}" data-fj-name="{name}">\
                  <div class="fj-alert__wrap"></div>\
                      <div class="fj-alert__box" style="{style}">\
                          <div class="fj-line"><div class="fj-alert__msg">{msg}</div></div>\
                          <div class="fj-line"><div class="fj-btn fj-alert__btn" data-fj-item="btn">{btnTitle}</div></div>\
                      </div>\
                  </div>',
            methods: {
                delete: function (fjID) {
                    this.remove(fjID);
                }
            }
        }
    });

app.alert = function (msg) {

        var uid = app.uniqId(), //функция возвращает уникальный (int)
            w = 600,
            h = 200;

        gui.ui({
            type: 'alert',
            name: 'alert'+uid,
            btnTitle: 'закрыть',
            msg: msg,
            style: {
                width: w+'px',
                height: h+'px'
            },
            events: {
                click: function (e) {
                    gui.method('delete', 'alert'+uid);
                }
            }
        });
    }

как вложить 2 или больше элемента внутри одного?

У каждого элемента есть name и parent, указываем parent и элемент вставиться как append внутрь родителя. Если parent не указан, то добавиться к body - удобно для разметки SPA

Теперь в качестве parent можно указывать не только name(fj-name /[a-z0-9]+/) родителя, css selector вида className, id, сложные селекторы(если в строке parent есть точка, решетка или пробел, то это css selector /[\.# ]/), но также и DOM node

1. name
2. .class, #id, body :first-child ... //если класс или id иначе лучше 3.
3. DOM node element (ссылка на дом элемент)

можно ли отрендерить разметку на сервере?

Нельзя и наверное никогда не будет можно. Только если ты сможешь показать мне что это нужно.

Я не понимаю смысла рендерить на сервере, даже на допотопном ноуте элементы строятся без зависаний. Если же в backgroundImage напихать картинок размером в 1мб штук 500 и построить любым способом на странице то тормоза будут гарантированны, но не из-за способа создания элементов.

Фреймворк в первую очередь создавался для того, чтобы быстро создавать нужные HTML элементы, которых очень мало в HTML или совсем нет. И для того, чтобы в будущем можно было рулить этим добром, без запарок. Сервер в данную концепцию не вписывается.

[Gozar]

как вложить 2 или больше элемента внутри одного?

Тут такое дело. Т.к. этот фреймворк придуман для создания элементов, иногда удобнее сразу создать элемент с нужным поведением, чем вкладывать одно в другое. Поэтому лучше бы спросить менее абстрактно.

Когда добавляем элемент, то указываем и методы работы с ним, таким образом описывая его поведение. Например:

delete, //удалить элемент
addItem, //добавить вложенный (из блока % foreach %)
addChildren //добавить пачку вложенных элементов
clear //удалить все вложенные элементы 
...
и т.д.

Добавление элемента состоит из 2 частей:
1. Создание шаблона и методов для работы с ним (см выше delete ...)
2. Привязка пользовательских данных и обработчиков событий и рендеринг на страницу

[Gozar]

Проведено небольшое тестирование на боевом сайте, средних размеров. Проверялись утечки памяти. Фреймворк показал себя хорошо и память очищалась в штатном режиме, посредством сборщика мусора. В следующий раз проведу проверку на более сложном приложении.

Сайт: fj, jquery 1.8.2, localforage
Chrome Dev Tools: 37.0 x64 Linux

ps: добавил callback срабатывающий после добавления элемента на страницу. Может пригодиться для передачи фокуса и чтобы закрывать app.alert по нажатию клавиши enter. ( чтобы передать фокус на любой элемент, например div ему нужно добавить аттрибут <div tabindex="-1">. Это на случай если вы этого не знали (-1) доступ только из js)