tapquo / atoms-app Goto Github PK

At this moment the documentation is like:

name       : String [REQUIRED]
options    : String [OPTIONAL]
id         : String [OPTIONAL]
value      : String [OPTIONAL]
required   : Boolean [OPTIONAL]
disabled   : Boolean [OPTIONAL]
style      : String tiny|small|big [OPTIONAL]

but actually is wrong! options need to be an array of String that is the options of the select.

Or maybe can be more useful do this more easy for the user, like pass strings of options separate by commas.

(https://github.com/tapquo/atoms-app/blob/master/atom/select.coffee#L33)[I saw the code but I don't udnerstand this line]. It is possible to pass and label too?

the style of the atom select is broken too.

I detect that is not possible create tables. (yes, tables :P)

I think that can be a complete molecule, that support:

• Table head
• Table footer
• Tabble cells
• Order elements by cells

link related:

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/table
http://www.datatables.net/examples/advanced_init/html5-data-attributes.html

This issue is about default template in elements and how to set the css for this elements.

I feel that, in some elements, the default template is too restrictive. For example is not possible create a button with a id, or in a list.

I think you're trying to promote CSS-OO, but some times I feel that is a little stupid declare a css class just for a button that in really should be a id (but is not possible to set up).

Must be the template so restrictive? why you don't like id?

For example, Molecule.Div is the only molecule that support id by default. (for divititis!)

When I'm working with Atoms I feel that I need to do some hacks to convert the elements into input, recover the user information and render the origin template for the element.

I purpose that all Atom elements have a @template, but also @editTemplate

How works?

The idea is make easy change the representation of the element. All elements have two new functions: done() and edit().

• When you call edit() the element dynamically render the @editTemplate.
• When you call done() the element dynamically render the @template.

An example of scaffold for Atom.Heading can be this:

class Atoms.Atom.HeadingEdit extends Atoms.Atom.Heading

  @base     : "Heading"

  @template : """
    <{{size}} {{#if.style}}class="{{style}}"{{/if.style}}>
      {{#if.image}}<img src="image" />{{/if.image}}
      {{#if.value}}{{value}}{{/if.value}}
    </{{size}}>"""

  @editTemplate: """
    <input type="{{type}}" value="{{value}}"
    {{#if.required}}{{required}}{{/if.required}}>
    """

  @default  :
    size     : "h1"
    required : false
    type     : 'text'

  constructor: ->
    super

  edit: ->
    # When the edit function is called, the @template is changed to
    # @editTemplate.

  done: ->
    # When the edit function is called, the @editTemplate is changed to
    # @template.

This make easy change the template of each element and maintain the inheritance for rewrite the methods and/or the templates for new elements. And maintain your workflow clean.

In molecules the methods call each method in the atoms that is inside in the molecule. Maybe if you want to make not editable a particular Atom you can indicate with a flag (like edit: false).

I tried as string and as a number and the YAML parser explote :-S

- Atom.Textarea:
style: edit-context
maxlength:10
value: sample test

YAML report message:

message: 'JS-YAML: can not read a block mapping entry; a multiline key may not be an implicit key.

Maybe the problem is in the core, not in atoms-app.... I don't know, its very strange.

When I referenced a custom Atom with different namespace in the YAML file is not possible reference the real namespace.

When you add an id to a label, it dont appears when rendered:

Yml(is not the complete code):

- Atom.Label:
  value: "Couldn't login!"
  style: align center
  id: error

Rendered html:

<label class="align center" data-atom-label="">
  Couldn't login!
</label>

Exist a little conflict that doesn't permit adjust the size

h1 is all time 1.17rem (because is the size by default and h1 is the default heading, I think):

h2:

I declared a Dialog in different namespace than Atoms.App, but is only accesible for Atoms.App object