diff --git a/README.md b/README.md index 836fca3..2c300dd 100755 --- a/README.md +++ b/README.md @@ -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. ``` @@ -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( , 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 } @@ -58,14 +71,15 @@ React.render( , 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 } ] ``` @@ -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 ============ @@ -133,7 +162,7 @@ flounder can be attached to basically anything ``` new flounder( document.getElementById( 'example' ), { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { @@ -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, @@ -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 ----- diff --git a/demo/demo.js b/demo/demo.js index 8daa0fc..8c58ce0 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -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 @@ -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() { @@ -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 ) } ); } ); @@ -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() { @@ -114,7 +117,12 @@ 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' + } } ); @@ -122,7 +130,7 @@ new Flounder( document.getElementById( 'vanilla--select' ), { * react amulti-Flounder with tags attached to an div */ ReactDOM.render( React.createElement( FlounderReact, { - _default : 'placeholders!', + defaultValue : 'placeholders!', multiple : true, @@ -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, @@ -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, @@ -197,7 +205,7 @@ ReactDOM.render( React.createElement( FlounderReact, { requirejs.config( { paths : { - flounder : '../dist/amdFlounder' + flounder : '../dist/flounder.amd' } } ); @@ -207,7 +215,7 @@ requirejs.config( { requirejs( [ 'flounder' ], function( Flounder ) { new Flounder( document.getElementById( 'AMD--desc' ), { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { diff --git a/demo/demoDist.js b/demo/demoDist.js index 2c3fcb9..4c2ca22 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -15,11 +15,13 @@ var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _srcReactFlounderJsx = require('../src/reactFlounder.jsx'); +var _srcWrappersFlounderReactJsx = require('../src/wrappers/flounder.react.jsx'); -var _srcFlounderJsx = require('../src/flounder.jsx'); +var _srcCoreFlounderJsx = require('../src/core/flounder.jsx'); -var _srcFlounderJsx2 = _interopRequireDefault(_srcFlounderJsx); +var _srcCoreFlounderJsx2 = _interopRequireDefault(_srcCoreFlounderJsx); + +window.Flounder = _srcCoreFlounderJsx2['default']; var _slice = Array.prototype.slice; /** @@ -50,21 +52,23 @@ var options = [{ }]; /** - * vanilla amulti-Flounder with tags attached to an input + * vanilla multi-Flounder with tags attached to an input */ -new _srcFlounderJsx2['default'](document.getElementById('vanilla--input--tags'), { - _default: 'placeholders!', +new _srcCoreFlounderJsx2['default']('.vanilla--input--tags', { + defaultValue: 'placeholders!', onInit: function onInit() { var res = []; options.forEach(function (option) { res.push({ text: option.text, - value: option.id + value: option.id, + extraClass: 'vantar' + Math.ceil(Math.random() * 10) }); }); this.options = res; + console.log(this); }, multiple: true @@ -73,8 +77,8 @@ new _srcFlounderJsx2['default'](document.getElementById('vanilla--input--tags'), /** * vanilla Flounder attached to an input */ -new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { - _default: 2, +new _srcCoreFlounderJsx2['default'](document.getElementById('vanilla--input'), { + defaultValue: 2, onInit: function onInit() { var res = []; @@ -116,15 +120,20 @@ new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { /** * vanilla Flounder attached pre built select box */ -new _srcFlounderJsx2['default'](document.getElementById('vanilla--select'), { - _default: 'placeholders!' +new _srcCoreFlounderJsx2['default'](document.getElementById('vanilla--select'), { + defaultValue: 'placeholders!', + + classes: { + container: 'moon', + wrapper: 'doge' + } }); /** * react amulti-Flounder with tags attached to an div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { - _default: 'placeholders!', +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { + defaultValue: 'placeholders!', multiple: true, @@ -143,8 +152,8 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJ /** * react amulti-Flounder without tags attached to an div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { - _default: 'placeholders!', +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { + defaultValue: 'placeholders!', multiple: true, @@ -165,8 +174,8 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJ /** * react amulti-Flounder with description attached to div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { - _default: 'placeholders!', +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { + defaultValue: 'placeholders!', multiple: true, @@ -187,7 +196,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJ requirejs.config({ paths: { - flounder: '../dist/amdFlounder' + flounder: '../dist/flounder.amd' } }); @@ -196,7 +205,7 @@ requirejs.config({ */ requirejs(['flounder'], function (Flounder) { new Flounder(document.getElementById('AMD--desc'), { - _default: 'placeholders!', + defaultValue: 'placeholders!', onInit: function onInit() { var res = []; @@ -213,10 +222,10 @@ requirejs(['flounder'], function (Flounder) { }); }); -exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: _srcReactFlounderJsx.FlounderReact, Flounder: _srcFlounderJsx2['default'] }; +exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: _srcWrappersFlounderReactJsx.FlounderReact, Flounder: _srcCoreFlounderJsx2['default'] }; module.exports = exports['default']; -},{"../src/flounder.jsx":160,"../src/reactFlounder.jsx":161,"react":159,"react-dom":3}],2:[function(require,module,exports){ +},{"../src/core/flounder.jsx":160,"../src/wrappers/flounder.react.jsx":161,"react":159,"react-dom":3}],2:[function(require,module,exports){ // shim for using process in browser var process = module.exports = {}; @@ -19414,10 +19423,11 @@ var Flounder = (function () { var constructElement = this.constructElement; - var wrapper = constructElement({ className: 'flounder-wrapper flounder__input--select' }); + var wrapperClass = 'flounder-wrapper flounder__input--select'; + var wrapper = constructElement({ className: this.wrapperClass ? wrapperClass + ' ' + this.wrapperClass : wrapperClass }); + var flounderClass = 'flounder'; + var flounder = constructElement({ className: this.flounderClass ? flounderClass + ' ' + this.flounderClass : flounderClass }); - var flounderClass = 'flounder' + this.containerClass; - var flounder = constructElement({ className: flounderClass }); flounder.tabIndex = 0; wrapper.appendChild(flounder); @@ -19430,11 +19440,11 @@ var Flounder = (function () { var _options = this.options; - var _default = this._default = this.setDefaultOption(this._default, _options); + var defaultValue = this.defaultValue = this.setDefaultOption(this.defaultValue, _options); var selected = constructElement({ className: 'flounder__option--selected--displayed', - 'data-value': _default.value, 'data-index': _default.index || -1 }); - selected.innerHTML = _default.text; + 'data-value': defaultValue.value, 'data-index': defaultValue.index || -1 }); + selected.innerHTML = defaultValue.text; var multiTagWrapper = this.props.multiple ? constructElement({ className: 'multi--tag--list' }) : null; @@ -19455,7 +19465,7 @@ var Flounder = (function () { var search = this.addSearch(flounder); - var _buildOptions = this.buildOptions(_default, _options, optionsList, select); + var _buildOptions = this.buildOptions(defaultValue, _options, optionsList, select); var _buildOptions2 = _slicedToArray(_buildOptions, 2); @@ -19474,7 +19484,7 @@ var Flounder = (function () { * builds both the div and select based options. will skip the select box * if it already exists * - * @param {Mixed} _default default entry (string or number) + * @param {Mixed} defaultValue default entry (string or number) * @param {Array} _options array with optino information * @param {Object} optionsList reference to the div option wrapper * @param {Object} select reference to the select box @@ -19483,7 +19493,7 @@ var Flounder = (function () { */ }, { key: 'buildOptions', - value: function buildOptions(_default, _options, optionsList, select) { + value: function buildOptions(defaultValue, _options, optionsList, select) { var _this2 = this; _options = _options || []; @@ -19502,7 +19512,7 @@ var Flounder = (function () { _option.index = i; var escapedText = _this2.escapeHTML(_option.text); - var extraClass = i === _default.index ? ' ' + _this2.selectedClass : ''; + var extraClass = i === defaultValue.index ? ' ' + _this2.selectedClass : ''; var res = { className: 'flounder__option' + extraClass, @@ -19526,6 +19536,12 @@ var Flounder = (function () { addOptionDescription(options[i], description); } + var uniqueExtraClass = _option.extraClass; + + if (uniqueExtraClass) { + options[i].className += ' ' + uniqueExtraClass; + } + if (!_this2.refs.select) { selectOptions[i] = constructElement({ tagname: 'option', className: 'flounder--option--tag', @@ -19533,7 +19549,7 @@ var Flounder = (function () { selectOptions[i].innerHTML = escapedText; select.appendChild(selectOptions[i]); - if (i === _default.index) { + if (i === defaultValue.index) { selectOptions[i].selected = true; } } else { @@ -19561,8 +19577,8 @@ var Flounder = (function () { key: 'catchBodyClick', value: function catchBodyClick(e) { if (!this.checkClickTarget(e)) { - if (this.cancelFunc) { - this.cancelFunc(e); + if (this.onCancel) { + this.onCancel(e); } this.toggleList(e); } @@ -19651,7 +19667,7 @@ var Flounder = (function () { refs.selected.innerHTML = ''; } else { if (refs.multiTagWrapper && refs.multiTagWrapper.children.length === 0) { - this.refs.selected.innerHTML = this._default.text; + this.refs.selected.innerHTML = this.defaultValue.text; } } } @@ -19741,8 +19757,17 @@ var Flounder = (function () { }; if (target && target.length !== 0) { + if (target.jquery) { + return target.map(function (i, _el) { + return new _this3.constructor(_el, props); + }); + } else if (target.isMicrobe) { + return target.map(function (_el) { + return new _this3.constructor(_el, props); + }); + } + this.props = props; - target = target.jquery || target.isMicrobe ? target[0] : target; target = target.nodeType === 1 ? target : document.querySelector(target); this.originalTarget = target; @@ -19759,8 +19784,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -19769,13 +19794,15 @@ var Flounder = (function () { this.onRender(); - if (this.componentDidMountFunc) { - this.componentDidMountFunc(); + if (this.onComponentDidMount) { + this.onComponentDidMount(); } this.refs.select.flounder = this.refs.selected.flounder = this.target.flounder = this; return this; + } else if (!target && !props) { + return this.constructor; } } @@ -19873,11 +19900,11 @@ var Flounder = (function () { selected.innerHTML = selectedOption[0].innerHTML; value = selectedOption[0].value; } else if (selectedLength === 0) { - var _default = this._default; + var defaultValue = this.defaultValue; - index = _default.index || -1; - selected.innerHTML = _default.text; - value = _default.value; + index = defaultValue.index || -1; + selected.innerHTML = defaultValue.text; + value = defaultValue.value; } else { if (this.multipleTags) { selected.innerHTML = ''; @@ -20019,7 +20046,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -20040,6 +20067,21 @@ var Flounder = (function () { return opts; } + /** + * ## getSelectedValues + * + * returns the values of the currently selected options + * + * @return _Void_ + */ + }, { + key: 'getSelectedValues', + value: function getSelectedValues() { + return this.getSelectedOptions().map(function (_v) { + return _v.value; + }); + } + /** * hideElement * @@ -20067,12 +20109,11 @@ var Flounder = (function () { value: function initialzeOptions() { this.props = this.props || {}; var props = this.props; - this.initFunc = props.onInit !== undefined ? props.onInit : false; - this.openFunc = props.onOpen !== undefined ? props.onOpen : false; - this.selectFunc = props.onSelect !== undefined ? props.onSelect : false; - this.cancelFunc = props.onCancel !== undefined ? props.onCancel : false; - this.closeFunc = props.onClose !== undefined ? props.onClose : false; - this.componentDidMountFunc = props.onComponentDidMount !== undefined ? props.onComponentDidMount : false; + this.onInit = props.onInit !== undefined ? props.onInit : false; + this.onOpen = props.onOpen !== undefined ? props.onOpen : false; + this.onSelect = props.onSelect !== undefined ? props.onSelect : false; + this.onClose = props.onClose !== undefined ? props.onClose : false; + this.onComponentDidMount = props.onComponentDidMount !== undefined ? props.onComponentDidMount : false; this.multiple = props.multiple !== undefined ? props.multiple : false; this.multipleTags = props.multipleTags !== undefined ? props.multipleTags : true; @@ -20080,9 +20121,11 @@ var Flounder = (function () { this.multipleTags = false; } - this.containerClass = props['class'] && props['class'].container !== undefined ? ' ' + props['class'].container : ''; - this.hiddenClass = props['class'] && props['class'].hidden !== undefined ? props['class'].hidden : 'flounder--hidden'; - this.selectedClass = props['class'] && props['class'].selected !== undefined ? props['class'].selected : 'flounder__option--selected'; + var propsClass = props.classes; + this.wrapperClass = propsClass && propsClass.wrapper !== undefined ? ' ' + propsClass.wrapper : ''; + this.flounderClass = propsClass && propsClass.flounder !== undefined ? ' ' + propsClass.flounder : ''; + this.hiddenClass = propsClass && propsClass.hidden !== undefined ? propsClass.hidden : 'flounder--hidden'; + this.selectedClass = propsClass && propsClass.selected !== undefined ? propsClass.selected : 'flounder__option--selected'; this.multipleMessage = props.multipleMessage !== undefined ? props.multipleMessage : '(Multiple Items Selected)'; this.defaultTextIndent = props.defaultTextIndent !== undefined ? props.defaultTextIndent : 0; @@ -20092,9 +20135,9 @@ var Flounder = (function () { this.selectedClass += ' flounder__option--selected--hidden'; } - this._default = ''; - if (props._default || props._default === 0) { - this._default = props._default; + this.defaultValue = ''; + if (props.defaultValue || props.defaultValue === 0) { + this.defaultValue = props.defaultValue; } } @@ -20251,7 +20294,7 @@ var Flounder = (function () { var _select = refs.select; refs.select = false; - var _buildOptions3 = this.buildOptions(this._default, _options, refs.optionsList, _select); + var _buildOptions3 = this.buildOptions(this.defaultValue, _options, refs.optionsList, _select); var _buildOptions32 = _slicedToArray(_buildOptions3, 2); @@ -20344,7 +20387,7 @@ var Flounder = (function () { var select = refs.select; var selected = refs.selected; var target = e.target; - var _default = this._default; + var defaultValue = this.defaultValue; var targetIndex = target.getAttribute('data-index'); select[targetIndex].selected = false; @@ -20357,9 +20400,9 @@ var Flounder = (function () { span.parentNode.removeChild(span); if (selectedOptions.length === 0) { - index = _default.index || -1; - selected.innerHTML = _default.text; - value = _default.value; + index = defaultValue.index || -1; + selected.innerHTML = defaultValue.text; + value = defaultValue.value; } else { value = selectedOptions.map(function (option) { return option.value; @@ -20375,8 +20418,8 @@ var Flounder = (function () { selected.setAttribute('data-value', value); selected.setAttribute('data-index', index); - if (this.selectFunc) { - this.selectFunc(e); + if (this.onSelect) { + this.onSelect(e, this.getSelectedValues()); } } @@ -20470,19 +20513,19 @@ var Flounder = (function () { }, { key: 'setDefaultOption', value: function setDefaultOption(defaultProp, options) { - var _default = ''; + var defaultValue = ''; if (typeof defaultProp === 'number') { - _default = options[defaultProp]; - _default.index = defaultProp; + defaultValue = options[defaultProp]; + defaultValue.index = defaultProp; } else if (typeof defaultProp === 'string') { - _default = { + defaultValue = { text: defaultProp, value: defaultProp }; } - return _default; + return defaultValue; } /** @@ -20602,8 +20645,8 @@ var Flounder = (function () { if (selection) { this.displaySelected(refs.selected, refs); - if (this.selectFunc) { - this.selectFunc(e); + if (this.onSelect) { + this.onSelect(e, this.getSelectedValues()); } } } @@ -20799,8 +20842,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -20833,8 +20876,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); @@ -20872,9 +20915,9 @@ var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _flounderJsx = require('./flounder.jsx'); +var _coreFlounderJsx = require('../core/flounder.jsx'); -var _flounderJsx2 = _interopRequireDefault(_flounderJsx); +var _coreFlounderJsx2 = _interopRequireDefault(_coreFlounderJsx); var slice = Array.prototype.slice; @@ -20924,8 +20967,8 @@ var FlounderReact = (function (_Component) { this.onRender(); - if (this.componentDidMountFunc) { - this.componentDidMountFunc(); + if (this.onComponentDidMount) { + this.onComponentDidMount(); } this.setPlatform(); @@ -20999,7 +21042,6 @@ var FlounderReact = (function (_Component) { * * REACT FLOUNDER CAN NOT MOUNT TO INPUT OR SELECT TAGS. * - *
External Media
Case Study
Events
External Media
General
Infographic
News
Presentation
Press Release
RTB Blog
The Labs
White-Paper
Whitepaper
#dreamteam
agency
airlines
APAC
beauty
big data
branding
BRIC
CEE
classifieds
conference
CRM
cross-device
customer lifetime value
demand-side platform
digital
digital marketing
digital strategy
display advertising
dlang
dynamic creative optimization
ecommerce
EMEA
Facebook Exchange
fashion
finance
first-party data
growth stories
holiday
HTML5
LATAM
loyalty
Mariusz Pawelczyk
mobile
Nordics
North America
performance marketing
personalization
presentations
programmatic
programmatic display
real-time bidding
retail
retail and shopping
retargeting
Romania
segmentation
shopping clubs
Sociomantic
software development
startup
stream technology
tag1
tech talk
telecom
trade show
transparency
travel
tutorial
web development
August 2015
March 2015
February 2015
November 2014
May 2014
April 2014
February 2014
January 2014
December 2013
November 2013
October 2013
September 2013
August 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
June 2012
February 2012
January 2012
October 2011
September 2011
June 2011
May 2011
April 2011
March 2011
February 2011
January 2011
December 2010
November 2010
October 2010
September 2010
August 2010
July 2010
June 2010
May 2010
April 2010
January 2010
Brian Ferrario
Erika Soliven
Jason Kelly
Laura
Leandro Lucarella
Lothar Krause
Sarah Joy Murray
Sonja Dreher
Thomas Brandhoff
Thomas Nicolai
david
dilkrom
gavinnorman
josh
kristo
lars
maciej
mouse
*/ }, { key: 'render', @@ -21010,8 +21052,8 @@ var FlounderReact = (function (_Component) { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } var optionsCollection = []; @@ -21020,24 +21062,26 @@ var FlounderReact = (function (_Component) { var escapeHTML = this.escapeHTML; var props = this.props; var options = this.options = this.prepOptions(props.options || this.options); + var handleChange = this.handleChange.bind(this); var multiple = props.multiple; - var _default = this._default = this.setDefaultOption(props._default || this._default, options); - var containerClass = this.containerClass; + var defaultValue = this.defaultValue = this.setDefaultOption(props.defaultValue || this.defaultValue, options); + var wrapperClass = this.wrapperClass ? ' ' + this.wrapperClass : ''; + var flounderClass = this.flounderClass ? ' ' + this.flounderClass : ''; var _stateModifier = this.state.modifier; _stateModifier = _stateModifier.length > 0 ? '--' + _stateModifier : ''; return _react2['default'].createElement( 'div', - { ref: 'wrapper', className: 'flounder-wrapper flounder__input--select' }, + { ref: 'wrapper', className: 'flounder-wrapper flounder__input--select' + wrapperClass }, _react2['default'].createElement( 'div', - { ref: 'flounder', tabIndex: '0', className: 'flounder' + containerClass }, + { ref: 'flounder', tabIndex: '0', className: 'flounder' + flounderClass }, _react2['default'].createElement( 'div', - { ref: 'selected', className: 'flounder__option--selected--displayed', 'data-value': _default.value }, - _default.text + { ref: 'selected', className: 'flounder__option--selected--displayed', 'data-value': defaultValue.value }, + defaultValue.text ), props.multiple ? _react2['default'].createElement('div', { ref: 'multiTagWrapper', className: 'multi--tag--list', multiple: true }) : null, _react2['default'].createElement('div', { ref: 'arrow', className: 'flounder__arrow' }), @@ -21048,7 +21092,7 @@ var FlounderReact = (function (_Component) { 'div', { ref: 'optionsList', className: 'flounder__list' }, options.map(function (_option, i) { - var extraClass = i === props._default ? ' flounder__option--selected' : ''; + var extraClass = i === props.defaultValue ? ' flounder__option--selected' : ''; extraClass += _option.disabled ? ' flounder--disabled' : ''; if (typeof _option === 'string') { @@ -21074,7 +21118,7 @@ var FlounderReact = (function (_Component) { 'select', { ref: 'select', className: 'flounder--select--tag flounder--hidden', tabIndex: '-1', multiple: props.multiple }, options.map(function (_option, i) { - var extraClass = i === _default ? ' ' + _this2.selectedClass : ''; + var extraClass = i === defaultValue ? ' ' + _this2.selectedClass : ''; var res = { className: 'flounder__option' + extraClass, @@ -21095,57 +21139,57 @@ var FlounderReact = (function (_Component) { return FlounderReact; })(_react.Component); -FlounderReact.prototype.bindThis = _flounderJsx2['default'].prototype.bindThis; -FlounderReact.prototype.catchBodyClick = _flounderJsx2['default'].prototype.catchBodyClick; -FlounderReact.prototype.checkClickTarget = _flounderJsx2['default'].prototype.checkClickTarget; -FlounderReact.prototype.checkFlounderKeypress = _flounderJsx2['default'].prototype.checkFlounderKeypress; -FlounderReact.prototype.checkPlaceholder = _flounderJsx2['default'].prototype.checkPlaceholder; -FlounderReact.prototype.clickSet = _flounderJsx2['default'].prototype.clickSet; -FlounderReact.prototype.displayMultipleTags = _flounderJsx2['default'].prototype.displayMultipleTags; -FlounderReact.prototype.fuzzySearch = _flounderJsx2['default'].prototype.fuzzySearch; -FlounderReact.prototype.removeMultiTag = _flounderJsx2['default'].prototype.removeMultiTag; -FlounderReact.prototype.setKeypress = _flounderJsx2['default'].prototype.setKeypress; -FlounderReact.prototype.setSelectValue = _flounderJsx2['default'].prototype.setSelectValue; -FlounderReact.prototype.setSelectValueButton = _flounderJsx2['default'].prototype.setSelectValueButton; -FlounderReact.prototype.setSelectValueClick = _flounderJsx2['default'].prototype.setSelectValueClick; -FlounderReact.prototype.toggleClass = _flounderJsx2['default'].prototype.toggleClass; -FlounderReact.prototype.toggleList = _flounderJsx2['default'].prototype.toggleList; +FlounderReact.prototype.bindThis = _coreFlounderJsx2['default'].prototype.bindThis; +FlounderReact.prototype.catchBodyClick = _coreFlounderJsx2['default'].prototype.catchBodyClick; +FlounderReact.prototype.checkClickTarget = _coreFlounderJsx2['default'].prototype.checkClickTarget; +FlounderReact.prototype.checkFlounderKeypress = _coreFlounderJsx2['default'].prototype.checkFlounderKeypress; +FlounderReact.prototype.checkPlaceholder = _coreFlounderJsx2['default'].prototype.checkPlaceholder; +FlounderReact.prototype.clickSet = _coreFlounderJsx2['default'].prototype.clickSet; +FlounderReact.prototype.displayMultipleTags = _coreFlounderJsx2['default'].prototype.displayMultipleTags; +FlounderReact.prototype.fuzzySearch = _coreFlounderJsx2['default'].prototype.fuzzySearch; +FlounderReact.prototype.removeMultiTag = _coreFlounderJsx2['default'].prototype.removeMultiTag; +FlounderReact.prototype.setKeypress = _coreFlounderJsx2['default'].prototype.setKeypress; +FlounderReact.prototype.setSelectValue = _coreFlounderJsx2['default'].prototype.setSelectValue; +FlounderReact.prototype.setSelectValueButton = _coreFlounderJsx2['default'].prototype.setSelectValueButton; +FlounderReact.prototype.setSelectValueClick = _coreFlounderJsx2['default'].prototype.setSelectValueClick; +FlounderReact.prototype.toggleClass = _coreFlounderJsx2['default'].prototype.toggleClass; +FlounderReact.prototype.toggleList = _coreFlounderJsx2['default'].prototype.toggleList; // just your every day, run of the mill functions -FlounderReact.prototype.addClass = _flounderJsx2['default'].prototype.addClass; -FlounderReact.prototype.addOptionsListeners = _flounderJsx2['default'].prototype.addOptionsListeners; -FlounderReact.prototype.addSearch = _flounderJsx2['default'].prototype.addSearch; -FlounderReact.prototype.addSelectKeyListener = _flounderJsx2['default'].prototype.addSelectKeyListener; -FlounderReact.prototype.attachAttributes = _flounderJsx2['default'].prototype.attachAttributes; -FlounderReact.prototype.checkClickTarget = _flounderJsx2['default'].prototype.checkClickTarget; -FlounderReact.prototype.checkSelect = _flounderJsx2['default'].prototype.checkSelect; -FlounderReact.prototype.componentWillUnmount = _flounderJsx2['default'].prototype.componentWillUnmount; -FlounderReact.prototype.displaySelected = _flounderJsx2['default'].prototype.displaySelected; -FlounderReact.prototype.escapeHTML = _flounderJsx2['default'].prototype.escapeHTML; -FlounderReact.prototype.fuzzySearchReset = _flounderJsx2['default'].prototype.fuzzySearchReset; -FlounderReact.prototype.getActualWidth = _flounderJsx2['default'].prototype.getActualWidth; -FlounderReact.prototype.getOption = _flounderJsx2['default'].prototype.getOption; -FlounderReact.prototype.getSelectedOptions = _flounderJsx2['default'].prototype.getSelectedOptions; -FlounderReact.prototype.hideElement = _flounderJsx2['default'].prototype.hideElement; -FlounderReact.prototype.initialzeOptions = _flounderJsx2['default'].prototype.initialzeOptions; -FlounderReact.prototype.iosVersion = _flounderJsx2['default'].prototype.iosVersion; -FlounderReact.prototype.onRender = _flounderJsx2['default'].prototype.onRender; -FlounderReact.prototype.rebuildOptions = _flounderJsx2['default'].prototype.rebuildOptions; -FlounderReact.prototype.removeClass = _flounderJsx2['default'].prototype.removeClass; -FlounderReact.prototype.removeOptionsListeners = _flounderJsx2['default'].prototype.removeOptionsListeners; -FlounderReact.prototype.removeSelectKeyListener = _flounderJsx2['default'].prototype.removeSelectKeyListener; -FlounderReact.prototype.removeSelectedClass = _flounderJsx2['default'].prototype.removeSelectedClass; -FlounderReact.prototype.removeSelectedValue = _flounderJsx2['default'].prototype.removeSelectedValue; -FlounderReact.prototype.scrollMultiple = _flounderJsx2['default'].prototype.scrollMultiple; -FlounderReact.prototype.scrollTo = _flounderJsx2['default'].prototype.scrollTo; -FlounderReact.prototype.setDefaultOption = _flounderJsx2['default'].prototype.setDefaultOption; -FlounderReact.prototype.setPlatform = _flounderJsx2['default'].prototype.setPlatform; -FlounderReact.prototype.setTextMultiTagIndent = _flounderJsx2['default'].prototype.setTextMultiTagIndent; -FlounderReact.prototype.showElement = _flounderJsx2['default'].prototype.showElement; -FlounderReact.prototype.toggleClosed = _flounderJsx2['default'].prototype.toggleClosed; -FlounderReact.prototype.toggleOpen = _flounderJsx2['default'].prototype.toggleOpen; - -exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: FlounderReact, Flounder: _flounderJsx2['default'] }; +FlounderReact.prototype.addClass = _coreFlounderJsx2['default'].prototype.addClass; +FlounderReact.prototype.addOptionsListeners = _coreFlounderJsx2['default'].prototype.addOptionsListeners; +FlounderReact.prototype.addSearch = _coreFlounderJsx2['default'].prototype.addSearch; +FlounderReact.prototype.addSelectKeyListener = _coreFlounderJsx2['default'].prototype.addSelectKeyListener; +FlounderReact.prototype.attachAttributes = _coreFlounderJsx2['default'].prototype.attachAttributes; +FlounderReact.prototype.checkClickTarget = _coreFlounderJsx2['default'].prototype.checkClickTarget; +FlounderReact.prototype.checkSelect = _coreFlounderJsx2['default'].prototype.checkSelect; +FlounderReact.prototype.componentWillUnmount = _coreFlounderJsx2['default'].prototype.componentWillUnmount; +FlounderReact.prototype.displaySelected = _coreFlounderJsx2['default'].prototype.displaySelected; +FlounderReact.prototype.escapeHTML = _coreFlounderJsx2['default'].prototype.escapeHTML; +FlounderReact.prototype.fuzzySearchReset = _coreFlounderJsx2['default'].prototype.fuzzySearchReset; +FlounderReact.prototype.getActualWidth = _coreFlounderJsx2['default'].prototype.getActualWidth; +FlounderReact.prototype.getOption = _coreFlounderJsx2['default'].prototype.getOption; +FlounderReact.prototype.getSelectedOptions = _coreFlounderJsx2['default'].prototype.getSelectedOptions; +FlounderReact.prototype.hideElement = _coreFlounderJsx2['default'].prototype.hideElement; +FlounderReact.prototype.initialzeOptions = _coreFlounderJsx2['default'].prototype.initialzeOptions; +FlounderReact.prototype.iosVersion = _coreFlounderJsx2['default'].prototype.iosVersion; +FlounderReact.prototype.onRender = _coreFlounderJsx2['default'].prototype.onRender; +FlounderReact.prototype.rebuildOptions = _coreFlounderJsx2['default'].prototype.rebuildOptions; +FlounderReact.prototype.removeClass = _coreFlounderJsx2['default'].prototype.removeClass; +FlounderReact.prototype.removeOptionsListeners = _coreFlounderJsx2['default'].prototype.removeOptionsListeners; +FlounderReact.prototype.removeSelectKeyListener = _coreFlounderJsx2['default'].prototype.removeSelectKeyListener; +FlounderReact.prototype.removeSelectedClass = _coreFlounderJsx2['default'].prototype.removeSelectedClass; +FlounderReact.prototype.removeSelectedValue = _coreFlounderJsx2['default'].prototype.removeSelectedValue; +FlounderReact.prototype.scrollMultiple = _coreFlounderJsx2['default'].prototype.scrollMultiple; +FlounderReact.prototype.scrollTo = _coreFlounderJsx2['default'].prototype.scrollTo; +FlounderReact.prototype.setDefaultOption = _coreFlounderJsx2['default'].prototype.setDefaultOption; +FlounderReact.prototype.setPlatform = _coreFlounderJsx2['default'].prototype.setPlatform; +FlounderReact.prototype.setTextMultiTagIndent = _coreFlounderJsx2['default'].prototype.setTextMultiTagIndent; +FlounderReact.prototype.showElement = _coreFlounderJsx2['default'].prototype.showElement; +FlounderReact.prototype.toggleClosed = _coreFlounderJsx2['default'].prototype.toggleClosed; +FlounderReact.prototype.toggleOpen = _coreFlounderJsx2['default'].prototype.toggleOpen; + +exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: FlounderReact, Flounder: _coreFlounderJsx2['default'] }; module.exports = exports['default']; -},{"./flounder.jsx":160,"react":159,"react-dom":3}]},{},[1]); +},{"../core/flounder.jsx":160,"react":159,"react-dom":3}]},{},[1]); diff --git a/demo/index.html b/demo/index.html index c000617..b69c4a1 100755 --- a/demo/index.html +++ b/demo/index.html @@ -20,7 +20,7 @@
Vanilla from Input (multiple, tags) - +
Vanilla from Input (multiple, no tags, dynamic options) @@ -62,9 +62,9 @@
- + - +