Is it sane to include modernizr with patterns? Can we adjust patterns' behaviour according to modernizr classes?

what we need in my opinion is a script that.

1. scans for elements with .carousel on it.
2. bind jCarousel to that element
3. scan the IDs on the LI items within the carousel.
4. look for any href values that start with # in it. For instance a href="#foo" and see if foo matches with any of the ID values used on the carousel items.
5. Apply the jump-to pattern to those a href's.

Additionally, it would be handy to translate any Patterns style parameters the user could put as jCarousel parameters. Then the pattern could become part of Patterns.

caf6250

Injection passes on the ID and classes of the source element. I would like to have this not as a default, but as an option instead.

We needs automated tests and a testrunner, qunit in combination with jquery might do the job. Maybe there are better frameworks.

Aloha has been selected as first candidate. License allows us to stay BSD-like while Aloha changes need to be AGPLed. We want a custom menu bar instead of the floating "nervous" ;) default.

http://requirejs.org/docs/optimization.html

Would be great if a user could use any CSS selector for the identifier part of the string.

So instead of 'id='foo'' in the identifier part of the string, the user could use '#foo' instead.

Or '.foo' for all elements with a class 'foo'.

Or for instance 'body' to target the body tag.

In case there is no source ID present, injection should inject the complete content of the body tag of the source HTML.

anything against that?

e.g.: inject-content

https://github.com/cornae/Patterns/blob/master/docs/new-syntax.rst

All click triggered tooltips should close when user clicks outside the tooltip area. Except for sticky tooltips.

For one class: on/off
For two classes: toggle between them
For more: loop through, start with first after last

http://twitter.github.com/bootstrap/javascript.html#modals

special attention to modals triggered from forms - currently not possible

Tooltip is going out of whack on out-of-the-box.html. Click on the coloured triangle that's folded around the corner of the document and a tooltip should open.

I think this is because of the element Which remains their also after injection and it appears that the content for the injection is injected IN the progress element instead of replacing it.

Basic functionality: Reverse injection history step by step.

I'm testing the tooltips in a data entry system and we are seeing that tooltips do not disappear when needed. Possible reasons:

• user moves mouse out of trigger area before tooltip is shown. This can easily happen with AJAX-loaded tooltips. Due to the way the code works internally the mouseleave event is never noticed and the tooltip will never be removed.
• if screen space is very small the tooltip may be placed above the triggering element, effectively hiding the triggering element

The close button for sticky tooltips is still unstyled.

on the long run we need a year view.

@cornae: how happy are you with fullcalendars markup? Do you have a (way) simpler markup in mind. Currently fullcalendar is not doing much for us. We should consider writing something ourselves, iff the markup sucks anyway.

Otherwise people are talking about fullcalendar year view.

Currently, ajax tooltips work only with hover. Could there be click option for this one also @wichert ?

Rationale

Currently we are challenged by 3 UI problems that could be solved with one pattern.

1. The need for selects with a placeholder value without abusing an option for it
2. The need for an auto complete pattern
3. The need for a user friend multi select pattern

Suggested by @chaoflow to use the library http://harvesthq.github.com/chosen/

Markup

Suggested markup:

<select data-placeholder="Choose a country…">

Please check the requirejs branch. Can I merge this into master?

Tooltip positioning of the first tooltip on the tooltip demo page is broken. It appears in front of the trigger element instead of pointing at it.

http://html5boilerplate.com/

Is this something we can integrate / take into account? If yes, how?

just an idea...

All elements are loaded, setting/changing the data-groupby attribute results in regrouping:

<foo data-group-titles="a=GroupA!b=GroupB>
  <bar data-groupable="g1=a!g2=a">  1  </bar>
  <bar data-groupable="g1=a!g2=b">  2  </bar>
  <bar data-groupable="g1=b!g2=a">  3  </bar>
  <bar data-groupable="g1=b!g2=b">  4  </bar>
  <bar data-groupable="g1=a!g2=a">  5  </bar>
  <bar data-groupable="g1=a!g2=b">  6  </bar>
  <bar data-groupable="g1=b!g2=a">  7  </bar>
  <bar data-groupable="g1=b!g2=b">  8  </bar>
</foo>

data-groupby is set by setattribute from somwhere or was set while loading:

<foo data-group-titles="a=GroupA!b=GroupB" data-groupby="g2:#g2_template g1:#g1_template">
  <x>
    <y>
  <bar data-groupable="g1=a!g2=a">  1  </bar>
  <bar data-groupable="g1=a!g2=a">  5  </bar>
    </y>
  </x>
  <x>
    <y>
  <bar data-groupable="g1=b!g2=a">  3  </bar>
  <bar data-groupable="g1=b!g2=a">  7  </bar>
    </y>
  </x>
  <x>
    <y>  
  <bar data-groupable="g1=a!g2=b">  2  </bar>
  <bar data-groupable="g1=a!g2=b">  6  </bar>
    </y>
  </x>
  <x>
    <y>  
  <bar data-groupable="g1=b!g2=b">  4  </bar>
  <bar data-groupable="g1=b!g2=b">  8  </bar>
    </y>
  </x>
</foo>

While doing a

git submodule update --init --recursive

I got this error

Clone of '[email protected]:chaoflow/jquery.mutation-events.git' into submodule path 'src/lib/jquery.mutations' failed

Which seems like the submodule was not registered in the usual git:// protocol.

When a tooltip uses AJAX it is initially shown with a progress indicator. The generated markup is described in the
tooltip pattern documentation.

Injection of form submit seems to do :replace the first time but :after all the times after. See auto-submit.html. @hsermeno, any ideas?

from discussion of ticket 6. Is this solved? What tooltips should disappear for clicks outside of the tooltip?

The current version of fancybox is no longer open source. We should look for an alternative with a permissive (MIT/BSD-style) license to replace it.

Currently tooltips don't work with injection. The following HTML should launch a tooltip based on injected content:

<a href="balloon-contents.html" data-injection="#myTip.tooltip">
    …
</a>

I reworked collapsible:

• pattern as jquery plugin

$('.some').collapsible()
$('.come').open() 
$('.come').close(0) 
$('.come').toggle()  

• pattern triggered via markup
• free the pattern code from generic stuff now handled in patterns
• use demo/collapsible.html as base for jasmine-jquery tests

Please review/comment the approach.

Automatic set of class current on A or LI items containing an A that has an href pointing the item the user has last navigated to is missing in new data-inject.

The pattern is triggered by the class .navigation on for instance an UL or a NAV element.

Thoughts about documentation structure.

For each pattern there are / will be:

• a documentation page
• a demo page
• a file implementing the pattern
• a library module for more complex patterns
• a test file
• test fixtures for the test
• auto-generated API documentation

The documentation page should show example markup. Maybe we can fully include the demo page for that purpose. But maybe it's also worthwhile to write small additional snippets.

Anyway there needs to be a mode to see the demo markup in source and below interpreted. This could be a pattern sourcedemo. If put on an element it will create something like:

<div class="sourcedemo">
  <div class="source">
    Previous content of the div in a quoted (with syntax highlighting) fashion
  </div>
  <div class="demo">
    Previous content of the div
  </div
</div>

Currently patterns puts a class 'current' on every LI that has an anchor in it with an href value equal to the URL of the page when the LI is a descendent of a tag with the class 'navigation'. It would be very helpful that  — in case no LI tag is available — the class would be set on the anchor tag instead.

Example of application:

<nav class="navigation tabs">
   <a href="project-landing.html#document-body#buttons-contextual" data-injection="#document-body#buttons-contextual" class="home current" title="Home">Home</a>
   <a href="project-landing.html#sidebar-content" data-injection="#sidebar-content" class="documents" title="Documents">Documents</a>
</nav>

we need a way to easily configure aspects of patterns, e.g. loglevels

for deployment we would include a different file than for development