Skip to content

Commit

Permalink
Merge branch 'MilestoneSeadragon'
Browse files Browse the repository at this point in the history
  • Loading branch information
mouse committed Dec 14, 2015
2 parents 60204ae + 339ff28 commit 84419e2
Show file tree
Hide file tree
Showing 18 changed files with 1,262 additions and 888 deletions.
92 changes: 75 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
Flounder.js 0.1.5
Flounder.js 0.2.0
=================

(for modern browsers and ie9+)

Flounder is a styled select box replacement aimed at being easily configurable while conforming to native functionality and accessibility standards.

```
Expand All @@ -19,36 +21,47 @@ Flounder can be used in vanilla js or with react.

```
// vanilla
new Flounder( target, options );
new Flounder( target, configOptions );
// react
ReactDOM.render( React.createElement( FlounderReact, options ), target );
ReactDOM.render( React.createElement( FlounderReact, configOptions ), target );
// react (JSX)
React.render( <FlounderReact option1="" option2="">, target );
```
// requirejs
requirejs( [ 'flounder' ], function( Flounder )
{
new Flounder( target, configOptions );
} );
// jQuery plugin
$( '.example--class' ).flounder( configOptions );
// microbe plugin
µ( '.example--class' ).flounder( configOptions )
```

###Available options

###Available config options

```
{
_default : defaultValue,
defaultValue : defaultValue,
classes : {
container : 'extra--class',
flounder : 'class--to--give--the--main--flounder--element',
hidden : 'class--to--denote--hidden',
selected : 'class-to-denote-selected-option'
selected : 'class--to--denote--selected--option',
wrapper : 'additional--class--to--give--the--wrapper'
},
multiple : false,
multipleTags : true,
multipleMessage : '(Multiple Items Selected)',
onCancel : function( e ){},
onClose : function( e ){},
onClose : function( e, valueArray ){},
onComponentDidMount : function(){},
onInit : function(){},
onOpen : function( e ){},
onSelect : function( e ){}
onOpen : function( e, valueArray ){},
onSelect : function( e, valueArray ){}
options : dataObject,
search : true
}
Expand All @@ -58,14 +71,15 @@ React.render( <FlounderReact option1="" option2="">, target );
Building the select box
=======================

options must be passed as an array of objects
select options must be passed as an array of objects

```
[
{
text : 'probably the string you want to see',
value : 'return value',
description : 'a longer description of this option' // optional
description : 'a longer description of this option', // optional
extraClass : 'extra--classname' // optional
}
]
```
Expand All @@ -78,12 +92,27 @@ or an array.
'option 3'
]
```
in the case of an array, the passed text will be both the description and the value.

in the case of an array, the passed text will be both the text and the value. There would be no description in this case


all extra properties passed that are not shown here will be added as data attributes for the sake of reference later. The options can be accessed in the init (before building) as this.options if they need reformatting or filtering.


API
===

These functions are intended for use in the user provided event callbacks
```
destroy()
getOption( num )
getSelectedOptions()
getSelectedValues()
rebuildOptions( options )
disable( bool )
```


Contributing
============

Expand Down Expand Up @@ -133,7 +162,7 @@ flounder can be attached to basically anything
```
new flounder( document.getElementById( 'example' ), {
_default : 'placeholders!',
defaultValue : 'placeholders!',
onInit : function()
{
Expand All @@ -160,7 +189,7 @@ react flounder can only be attached to container elements (div, span, etc)
```
ReactDOM.render( React.createElement( FlounderReact, {
_default : 'placeholders!',
defaultValue : 'placeholders!',
multiple : true,
Expand Down Expand Up @@ -191,9 +220,38 @@ The result of either of these is shown here (only styled with the structural css

See more examples on the [demo page](./demo/index.html)


Public API
==========

```
destroy()
getOptions( num )
getSelectedOptions()
getSelectedValues()
rebuildOptions( options )
disable( bool )
```


Change Log
==========

0.2.0
-----

+ user callbacks now keep their name internally for dynamic changes
+ some users callback now give the array of selected values (see examples)
+ _default is now defaultValue
+ the constructor now accepts µ and $ objects and returns an array of flounders
+ a call to the constructor without and arguments now returns the constructor
+ added getSelectedValues() to API
+ added the ability to give options unique classes
+ added wrapper to the class options
+ changed the flounder class optoin from container to flounder
+ restructured folders and files


0.1.5
-----

Expand Down
32 changes: 20 additions & 12 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FlounderReact } from '../src/wrappers/reactFlounder.jsx';
import { FlounderReact } from '../src/wrappers/flounder.react.jsx';
import Flounder from '../src/core/flounder.jsx';

window.Flounder = Flounder;

var _slice = Array.prototype.slice;
/**
* example options object
Expand Down Expand Up @@ -38,10 +40,10 @@ var options = [


/**
* vanilla amulti-Flounder with tags attached to an input
* vanilla multi-Flounder with tags attached to an input
*/
new Flounder( document.getElementById( 'vanilla--input--tags' ), {
_default : 'placeholders!',
new Flounder( '.vanilla--input--tags', {
defaultValue : 'placeholders!',

onInit : function()
{
Expand All @@ -50,7 +52,8 @@ new Flounder( document.getElementById( 'vanilla--input--tags' ), {
{
res.push( {
text : option.text,
value : option.id
value : option.id,
extraClass : 'vantar' + Math.ceil( Math.random() * 10 )
} );
} );

Expand All @@ -65,7 +68,7 @@ new Flounder( document.getElementById( 'vanilla--input--tags' ), {
* vanilla Flounder attached to an input
*/
new Flounder( document.getElementById( 'vanilla--input' ), {
_default : 2,
defaultValue : 2,

onInit : function()
{
Expand Down Expand Up @@ -114,15 +117,20 @@ new Flounder( document.getElementById( 'vanilla--input' ), {
* vanilla Flounder attached pre built select box
*/
new Flounder( document.getElementById( 'vanilla--select' ), {
_default : 'placeholders!'
defaultValue : 'placeholders!',

classes : {
container : 'moon',
wrapper : 'doge'
}
} );


/**
* react amulti-Flounder with tags attached to an div
*/
ReactDOM.render( React.createElement( FlounderReact, {
_default : 'placeholders!',
defaultValue : 'placeholders!',

multiple : true,

Expand All @@ -146,7 +154,7 @@ ReactDOM.render( React.createElement( FlounderReact, {
* react amulti-Flounder without tags attached to an div
*/
ReactDOM.render( React.createElement( FlounderReact, {
_default : 'placeholders!',
defaultValue : 'placeholders!',

multiple : true,

Expand All @@ -172,7 +180,7 @@ ReactDOM.render( React.createElement( FlounderReact, {
* react amulti-Flounder with description attached to div
*/
ReactDOM.render( React.createElement( FlounderReact, {
_default : 'placeholders!',
defaultValue : 'placeholders!',

multiple : true,

Expand All @@ -197,7 +205,7 @@ ReactDOM.render( React.createElement( FlounderReact, {

requirejs.config( {
paths : {
flounder : '../dist/amdFlounder'
flounder : '../dist/flounder.amd'
}
} );

Expand All @@ -207,7 +215,7 @@ requirejs.config( {
requirejs( [ 'flounder' ], function( Flounder )
{
new Flounder( document.getElementById( 'AMD--desc' ), {
_default : 'placeholders!',
defaultValue : 'placeholders!',

onInit : function()
{
Expand Down
Loading

0 comments on commit 84419e2

Please sign in to comment.