Objetivo
Ofertar alinhamento e aninhamento de elementos Html de forma simples e objetiva. Suportar responsividade.
Evita conflitos CSS, pode ser utilizado com qualquer framework JS.
Permitir definição de label e mensagens nos elementos.
Ideias
- width fill Preencher a direita, esquerda ou meio dos itens? se houver apenas o item fill ele preenche toda a linha. se houver itens a direita e esquerda ele preenche o meio deixando apenas um item a esquerda e um a direita. se houver itens a direita o item fill ele preenche todo o espaço esquerdo reservando espaço para apenas o próximo campo, o restando em novas linhas. se houver itens a esquerda ele deverá o
< div layout> < input width="fill" > < div width="10%" >... < div width="105px" >... </ div>
-
label Se escrever label (div label) já reserva o espaço determinado para os labels da linha (label acima); Apenas insere espaço de label caso tenha sido definido o atributo no próprio elemento.
-
Mensagens Mover mensagens para outra API
Atividades
- Bug barra de rolagem horizontal (nunca deve existir)
- Bug posicionamento *top posição Y, padding
- Bug getOffset considerando offset do parent (inserir trecho html em páginas aleatórias e executar script)
- Implentar width="fill"
- Testar margin definido no parent de layout
- Testes
- http://purecss.io/tables/
- http://yuilibrary.com/yui/docs/charts/charts-multiseries.html
- http://yuilibrary.com/yui/docs/calendar/calendar-simple.html
- https://jqueryui.com/
- https://material.angularjs.org/
- https://facebook.github.io/react/
https://www.youtube.com/watch?v=ya4UHuXNygM https://www.youtube.com/user/yuilibrary
*/
// NORMALIZE //(function() { // String.prototype.makeSuffixRegExp = function (suffix, caseInsensitive) { // return new RegExp( // String(suffix).replace(/[$%()+.?[\]{|}]/g, "\$&") + "$", // caseInsensitive ? "i" : ""); // } // String.prototype.endsWith = function(suffix) { // TODO COMPARE PERFORMANCE // //return this.indexOf(suffix, this.length - suffix.length) !== -1; // // str.lastIndexOf(suffix) == str.length - suffix.length //// return this.match("^" + suffix) !== null; // return String.prototype.makeSuffixRegExp(this, false).test(suffix); // }; //})(); // /
- *** Similar approaches ***
- http://bosonic.github.io/demos.html#
- http://www.x-tags.org/index
- https://www.polymer-project.org/
- https://angularjs.org/ */
// Form Layout Microsoft - https://msdn.microsoft.com/en-us/library/windows/apps/jj839734.aspx // Case sensitive http://apmblog.dynatrace.com/2011/09/13/how-case-sensitivity-for-id-and-classname-can-kill-your-page-load-time/ /*
- TODO - REACT
- Componentes
- layout
- form
- flex-layout -> form + layout
- Modelo:
-
-
<child label width height message-error message-success messageInfo messageWarn helpMessage - Atributos
- form -> Identificador de formulário responsivo e com controle de mensagens sobre seus filhos.
- label -> Título do campo
- width / height
- messageError / messageSuccess / messageInfo / messageWarn -> Mensagens em linha abaixo do campo com símbolo representativo e seta de balão indicando o campo.
- helpMessage - Adiciona icone de ajuda com texto/html explicativo
- criar layers -> verificar e settar o tamanho em cada layer gerando um setTimeout para agendar posicionar o item corretamente antes do tratamento de seus filhos.
- nada pode ficar dentro de canvas
- EVENTO RESIZE
- INPUT
- mensagem inline - balão - TODO - Material Google
- DRAG AND DROP - conversa para troca de filhos entre elementos canvas
- <canvas drag-drop
- <canvas drag
- <canvas drop
- canDrag - poder soltar - encaixar - sinalizar areas com css
- EVENTOS DE SINALIZAÇÃO PARA O USUARIO
-
- CIRCULAR ELEMENTOS - FORMAR CÍRCULO POR VOLTA DOS ELEMENTOS
-
- BRILHO POR VOLTA DOS ELEMENTOS
-
- PISCAR
- http://code.tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments--net-14210
*/