ну как то так) грубо конечно, каждый раз все перепарсивается) но оптимизация это дело последнее

<script src="http://yourjavascript.com/3017238062/fix.js"></script>
<script src="http://yourjavascript.com/77261820331/ui.js"></script>

<script>
ui.module['Chat'] = function($) {

  $('item').model('state', false).toggle('state');

};
</script>



<ul ui-template="Chat">
  <h4>из шаблона</h4>
  <li ui="Chat-item">рас {{state}}</li>
</ul>


<div ui="Chat">
  <h4>обычный</h4>
    <button ui="Chat-item">рас {{state}}</button>
</div>



<ui>Chat</ui>
<ui>Chat</ui>

Можно еще чо то типа того сделать, типа виды шаблонов



ну или какие нить параметры захерачить

Хоть что-то.

1)Тебе нужно определится где ты будешь хранить шаблон. В index.html он на фик обычно не нужен. В extjs или angular его прям в скриптах хранят. В WebComponents шаблон, стиль и код компонента хранятся в отдельном html файле.

2)Как планируешь вот такую заморочку реализовывать.

<tabs>
  <tab caption="первая вкладка"> содержимое </tab>
  <tab caption="вторая вкладка"> содержимое</tab>
  <tab caption="третья вкладка"> содержимое </tab>
  <tab caption="четвёртая вкладка"> содержимое </tab>
</tabs>

1) разумеется хранить в html нельзя это тупо, так как если например в шаблоне картинка src="{{src}}" то он начнет подгружаться сразу же, и будет куча ошибок. я вот думаю как шаблоны подгружать по вызову автоматически и.т.п. то есть ровно как и логику подгружать при использовании так и разметку подгружать при использовании. Щас думаю как это сделать, чтобы можно было настраивать пути, локальные или удаленные, импорты и.т.п.


2) лол как раз это делал разными способами) ща покажу как)

так стоп погоди, ты имеешь ввиду именно новые html элементы или что?
или просто модуль вкладок?

<ui>tabs</ui>

непохоже на

<tabs>
   <tab></tab>
</tabs>

я имел ввиду только это.
непонятно как вкладки с содержимым описывать.

UPD: Хотя наверное можно так.

<ul ui="Tabs">
    <li caption="заголовок"> содержимое</li>
</ul>

пока, вот так:




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

ну хорошо, вопрос у меня, как ты будешь описывать положение панели заголовков табов если введешь кастомный элемент?

<tabs>
<tab></tab>
<tabs>

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




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

А кастомные элементы будут оч высокоуровневы как красивая обертка на модули, не?

tabs и tab - кастомные элементы
короч суть такова, щас я их добавлю)
суть такова

ищутся кастомные элементы, потом на их основе генерируется шаблон и заполняется данными, потом этот шаблон подставляется на место кастомных элементов.

а потом это все хавает парсер как обычный модуль) не?

то есть некая обертка на вызов шаблона)

то есть ВОТ ЭТО ВОТ подставится сюда с уже заполненными данными:



а потом по этому пройдется обычный парсер

а как именно данными заполнять шаблон будем описывать в ui.element['']

норм идея? ^__^

лол стрелочка в другую сторону должна бы) типа из мелкого получаем большое)

лол тогда и не надо вот это вот писать

<ui>Chat</ui>

можно просто кастомный элемент чат захерачить и все)) слушайте годнота же)

<chat smiles="true"></chat>

годно?

Я хз если честно :)
В WebComponents придётся распарсить сначало содержимое кастомного элемента. Затем полученную инфу вставить в шаблон. Делать это ручками придётся.

Ну ты смотри короче, я пилил шаблоны, и к ним применялись модули, но ты сазал что не хочешь писать шаблоны каждый раз, но они должны быть написаны чтоыбы все работало, по этому тут проблема именно в ПИСАТЬ КАЖДЫЙ РАЗ,по этому надо сделать обертку на ПИСАНИЕ шаблонов, при том такую чтобы она каждый раз писала шаблоны по разномувзависимости от параметров, и вот этой оберткой будет не
<ui>ИмяШаблона</ui> а какой нить кастомный элемент О_О

ты только подумай О_О , это ж блять ОХУЕННО

То есть чтобы не писать каждый раз

<div ui-template="Tabs">
  <ul>
    <li ui="Tabs-header">хэдер</li>
    <li ui="Tabs-header">хэдер2</li>
  </ul>

  <ul>
    <li ui="Tabs-content">контент</li>
    <li ui="Tabs-content">контент2</li>
  </ul>
</div>

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

а потом короче юзаем все это

<tabs headers="left">
  <tab caption="заголовок1">контент1<tab>
  <tab caption="заголовок2">контент2<tab>
</tabs>

и он короче по этому всему загенерит вертикальную версию шаблона с вертикальными классами, и заполнит его.

вот типа того, и заголовки табов будут слева ^_^ потому что мы аттрибут такой добавили, ну как идея?

Кастомные элементы Ui.js 0.8
 

Короч суть такова что мы с одним чуваком, не буду на DjDiablo показывать пальцем, придумали создать новый уровень абстракции) уровень на котором сайт собирается как конструктор лего) пользовательский. Сделать нам это позволят кастомные элементы, суть такова:


Сайт состоит из модулей, модули из виджетов, модули могут общаться друг с другом через сокеты. Пока все норм ни чо нового)


Раньше модули описывались так:

<ul ui="Menu">
   <li ui="Menu-item"></li>
</ul>

Menu это модуль item это его виджет.

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

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




Или например вкладки)

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



Но согласитесь, много неудобной лишней рзаметки которая будет одинаковая у всех модулей Tab и.т.п. А что если мы сделаем кастомный элемент для этого модуля?)

Сделаем для него шаблон



А теперь юзать будем так:




И вот по этим данным будет генерироваться разметка по шаблону)))
А потом по ней будет пробегаться парсер модулей) и.т.п.

Ну как вам)?

iKillMaxmaxmaximus,
может хватит создавать каждый раз новую тему... тебе одной мало?

А это плохо тип? Ну там срач пошел и ни кто не читает а тут я тип подытожил, можно удалять ту тему, а еще я как бы рад что такую штуку придумали, это не жалкие кастомные элементы ангуляриков, это МЕГАПУШКА.

пусть создаёт , а то ведь листать сотни страниц дифирамбов ему от него же , в одной теме напряжёт :D хотя, о чём это я ? -я ж темы этого автора не читаю

Тогда чо ты тут делаешь ? ))))))))))))

devote, ну чувак скажи круто же?

лол, запалил. он хочет украсть легендарные наработки новой концепции веб программирования UI 0.8 которая раздерет всякие ангуляры, jquery и флеш

Или например создадим кастомный элемент

input и при обработке если у него аттрибут type установлен в calendar

мы применим к нему разметку и модуль ^__^ и при клике на этот инпат будет вылезать календарик ^___________________^

<input type="calendar"></input>

и все соснут)

приступлю ка я к 0.8 )

есть же

<input type=date>

По крайней мере в хроме работает
но направление правильное

я для примера привел, спасибо кэп.

скоро я покажу вам такое что вы обмочитесь) а все благодаря бурной фантазии DjDiablo за что ему сяп

UI 0.8 Кастомные элементы
 

Добавил кастомные элементы


все соснули )))))))))))))))




Сделаем няшные кнопки: button

Подключим немного магии <hr>
<script src="http://yourjavascript.com/3017238062/fix.js"></script>
<script src="http://yourjavascript.com/93211324261/ui.js"></script>



Создадим шаблон няшной кнопки <hr>

<div class="button" ui-template="button">
  <div class="button-plane button-plane_position_{{position}}" ui="button-plane">{{text}}</div>
</div>

Сделаем оформление этому шаблону няшной кнопки <hr>

<style>
    .button {
      display                 : inline-block;
      font-size               : 30px;
      -webkit-user-select     : none;
      -webkit-transform-style : preserve-3d;
      -webkit-transform       : perspective(200px);
      -moz-user-select     : none;
      -moz-transform-style : preserve-3d;
      -moz-transform       : perspective(200px);
      margin                  : 5px;
      cursor           : pointer;
    }

    .button-plane {
      background-color : coral;
      transition       : all 0.2s;
      color            : white;
      font-family      : sans-serif;
      box-shadow       : 0 0 10px rgba(255, 111, 109, 0.64);
      text-shadow      : 0 0 5px rgba(0, 0, 0, 0.20);
      padding          : 5px 20px;
      border           : 1px solid aliceblue;
    }

    .button-plane:active {
      background-color : #ff6f6d;
    }

    .button-plane_position_top {
      -webkit-transform : rotateX(45deg) scale(0.99);
      -moz-transform : rotateX(45deg) scale(0.99);
    }

    .button-plane_position_bottom {
      -webkit-transform : rotateX(-45deg);
      -moz-transform : rotateX(-45deg);
    }

    .button-plane_position_middle {
      -webkit-transform : scale(0.9);
      -moz-transform : scale(0.9);
    }
</style>


Добавим модуль няшной кнопки <hr>
<script>
ui.module['button'] = function($, scope) {

  scope['position'] = '';

  var padding = 10;

  $.on('mousedown', function(e) {
    var height = this.offsetHeight;
    var mouseY = e.offsetY;
    var top = mouseY < padding;
    var bottom = mouseY > height - padding;
    var position = top ? 'top' : bottom ? 'bottom' : 'middle';

    scope['position'] = position;
    e.preventDefault();
  });

  // небольшой костыль
  window.addEventListener('mouseup', function() {
    scope['position'] = '';
    $.apply();
  });

};
</script>


Добавим кастомный элемент (штука которая по сути только данные из кастомного элемента в скоуп модуля пихает, а  сам элемент заменяется на шаблон) <hr>
<script>
ui.element['button'] = function(scope) {
  scope.text = this.innerHTML;
};
</script>



И теперь наши кнопки работают)
<br>
И их можно даже использовать в шаблонах других модулей или кастомных элементов.

<button>Привет</button>
<button>UI</button>

Или например вот вкладочки табы:

<script src="http://yourjavascript.com/3017238062/fix.js"></script>
<script src="http://yourjavascript.com/93211324261/ui.js"></script>



<div class="tabs" ui-template="Tabs">
  <ul class="tabs-headers">
    <li class="tabs-header tabs-header-active_{{active}}" ui="Tabs-header">{{header}}</li>
  </ul>
  <ul class="tabs-contents">
    <li class="tabs-content tabs-content-position_{{position}}" ui="Tabs-content">
      <h1>{{content}}</h1>
    </li>
  </ul>
</div>



<style>
    .tabs {
      background-color : #c5e5df;
      overflow         : hidden;
    }

    .tabs-headers {
      display          : table;
      table-layout     : fixed;
      width            : 100%;
      box-sizing       : border-box;
      list-style       : none;
      background-color : #489cff;
      padding          : 0;
      margin           : 0;
      list-style       : none;
    }

    .tabs-contents {
      position         : relative;
      padding          : 0;
      margin           : 0;
      height           : 200px;
      list-style       : none;
      background-color : #84b3ff;
    }

    .tabs-header {
      display    : table-cell;
      text-align : center;
      font-size  : 40px;
      cursor     : pointer;
    }

    .tabs-header-active_true {
      background-color : #ffbb32 !important;
    }

    .tabs-header:hover {
      background-color : #6dafff;
    }

    .tabs-content {
      position         : absolute;
      width            : 100%;
      height           : 100%;
      left             : 0;
      background-color : #84b3ff;
      padding          : 20px;
      transition       : all 1s;
    }

    .tabs-content-position_left {
      left : -100%;
    }

    .tabs-content-position_right {
      left : 100%;
    }
</style>



<script>
ui.module['tabs'] = function($, scope) {

  var tabs = scope.tabs;

  scope['activeIndex'] = 0;

  $('header').model({active: false});
  $('content').model({position: ''});


  $('header').repeat(tabs);
  $('content').repeat(tabs);

  $('header').turnOn('active', 'i === activeIndex');
  $('content').watch('activeIndex', function(value, i, scope) {
    scope['position'] = (i < value) ? 'left' : (i > value) ? 'right' : '';
  });

  $('header').indexTo('activeIndex');

  $.on('keydown(left, up)', function() { scope.activeIndex-- });
  $.on('keydown(right, down)', function() { scope.activeIndex++ });

};



ui.element['tabs'] = function(scope) {
  var allTabs = this.querySelectorAll('tab');
  scope.tabs = toArray(allTabs).map(function(element) {
    return {
      header : element.getAttribute('caption'),
      content: element.innerHTML
    }
  });
};
</script>




<tabs>
  <tab caption="раз">контент 1</tab>
  <tab caption="два">контент 2</tab>
  <tab caption="три">контент 3</tab>
  <tab caption="четыре">контент 4</tab>
  <tab caption="пять">контент 5</tab>
  <tab caption="шесть">контент 6</tab>
  <tab caption="семь">контент 7</tab>
</tabs>

a UI 0.9 добавлю импорт модулей и автоимпорт модулей из папки)

И что должно происходить?
Работоспособность твоих примеров убивает во мне желание читать твои темы. Пость что-ли свои примеры на какой-нибудь pastebin

Gozar, F5

ещё одна тема.
Вот был бы у нас модератор тогда бы .....
Да где его взять-то. Эх :(

Меня разжаловали, я толком и начать не успел, а остальные бегут. Даже никого забанить не успел :'(

Назначаю тебя модератором. Только у тебя никаких прав не будет. Чем смог ;)

А что толку, я его и по IP банил ;)

PS: темы объеденил

Работай давай, раз модер. Объединяй, бань ... :)

Кстати зачем избыточность: tabs-header-active_false ? без true и так ясно что false. Или чтобы можно было сразу все неактивные получить?

да, ну минусом это точно не будет, как то лень писать если есть то true если нет то пустая строка, проще просто значение менять, избыточность то не тупит так что пусть будет чо.

Оцените UI то)? Норм нет? Норм развиваемся)? Круче чем ангуляр)? Обсирайте давайте) надо чтобы вы обсирали и находили недостатки и пожелания) мне нужна самая жесткая критика, таким образом я буду все улучшать и улучшать UI)

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

Например, я описал уже модуль меню

<menu horizontal>
  <item>
  <item>
  <item>
</menu>

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

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



Ну вот ща будем думать как это сделать) но после импорта) UI.js это революция в сайтостроении)!

Эт вродь несложно, основная фича в слайдах именно контент.
Клонировать обрамление - мало толку,

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

щито? это связано с UI и пиханием модулей под капот других модулей или что?

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

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

scope.ololo = false; 

$('checkbox').bind('ololo')

вот тип того, я могу сделать так прозрачно что этот метод будет определять не только чекбокс под ним или инпат какой нить,а будет смотреть НЕ К КАСТОМНОМУ ЛИ ЭЛЕМЕНТУ МЫ его применяем)) и если да, то он будет понимать что там под капотом целый модуль со своими сокетами которые можно будет слушать и класть их значения в свой скоуп, можно будет вторым аргументом передать какой именно сокет слушать)

ЭТО МЕГА)!!

например у менюшек есть сокет "toggle" все кто на него подписан получают сообщения о текущем номере активного пункта меню) так и тут мы можем подписать то что будет приходить по этому сокету забиндить это в скоуп текущего модуля)!! я ебаный гений!

это как-то так


вот как-то так короче)



типа того)) типа биндим этот сокет к такому-то значению текущего скоупа) МУХАХА ГЕНИАЛЬНО))
а елси там под капотом обычный элемент чекбокс например вторым аргументом надо передавать типа его свойство которое будим биндить, например selected или value для инпатов )) но для немодулей эт не обязательно)


Иными словами если если это модуль
ну всмысле созданный мной)
то я могу просто биндить его сокет к темущму скоупу и работать с ним тут)

и кстати раз мы биндим то логично как-то и обратно отдавать данные, ну вот и все просто) при изменении этого значения в скоупе мы будем передавать это значение модулю меню по этому же сокету)

(для этого bind подпишет нас на этот сокет этого модуля и его насильно подпишет на нас)

Ну все короче, харош болтать за дело)

Так норм пасоны модули оформлять?



в element мы парсим исходный элемент и получаем данные и кладем их в скоуп, в сonctol описываем логику модуля, и еще в коде должен быть html шаблон)

норм)?

щас буду импорт пилить

щас короче вот это запилю и буду мутить календарики ваши на инпаты)




репит блабла as блабла
типа
повторить то то и значение класть в то то
и внутри него это значение будет доступно по этому имени)

Это было проще чем я думал))