From 8dd29d667d0849c56d1e0a7940e4a433f19d7d51 Mon Sep 17 00:00:00 2001 From: mouse Date: Mon, 14 Dec 2015 15:54:05 +0100 Subject: [PATCH 01/10] fix for #16 bump version --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++------- demo/demo.js | 5 +++-- demo/demoDist.js | 8 ++++++-- demo/index.html | 2 +- package.json | 2 +- src/flounder.jsx | 4 ++++ 6 files changed, 61 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 836fca3..5cac78e 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -Flounder.js 0.1.5 +Flounder.js 0.1.6 ================= +(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,19 +21,30 @@ 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 ); +} ); -###Available options +// jQuery plugin +$( '.example--class' ).flounder( configOptions ); + +// microbe plugin +µ( '.example--class' ).flounder( configOptions ) +``` +###Available config options + ``` { _default : defaultValue, @@ -58,7 +71,7 @@ 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 ``` [ @@ -66,6 +79,7 @@ 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 + classname : 'extra--classname' // optional } ] ``` @@ -78,11 +92,23 @@ 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() +rebuildOptions( options ) +disable( bool ) +``` + Contributing ============ @@ -191,6 +217,19 @@ 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() + rebuildOptions( options ) + disable( bool ) +``` + + Change Log ========== diff --git a/demo/demo.js b/demo/demo.js index 5557666..7e24b6f 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { FlounderReact } from '../src/reactFlounder.jsx'; import Flounder from '../src/flounder.jsx'; +window.Flounder = Flounder; var _slice = Array.prototype.slice; /** @@ -38,9 +39,9 @@ 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' ), { +new Flounder( '.vanilla--input--tags', { _default : 'placeholders!', onInit : function() diff --git a/demo/demoDist.js b/demo/demoDist.js index 2c3fcb9..44b147b 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -21,6 +21,8 @@ var _srcFlounderJsx = require('../src/flounder.jsx'); var _srcFlounderJsx2 = _interopRequireDefault(_srcFlounderJsx); +window.Flounder = _srcFlounderJsx2['default']; + var _slice = Array.prototype.slice; /** * example options object @@ -50,9 +52,9 @@ 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'), { +new _srcFlounderJsx2['default']('.vanilla--input--tags', { _default: 'placeholders!', onInit: function onInit() { @@ -19776,6 +19778,8 @@ var Flounder = (function () { this.refs.select.flounder = this.refs.selected.flounder = this.target.flounder = this; return this; + } else if (!target && !props) { + return this.constructor; } } diff --git a/demo/index.html b/demo/index.html index c000617..b269883 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) diff --git a/package.json b/package.json index b01f51e..fa24e3b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flounder", - "version": "0.1.5", + "version": "0.1.6", "description": "a native friendly dropdown menu", "main": "./dist/flounder.js", "scripts": { diff --git a/src/flounder.jsx b/src/flounder.jsx index 5de6d2b..e9b898b 100755 --- a/src/flounder.jsx +++ b/src/flounder.jsx @@ -566,6 +566,10 @@ class Flounder return this; } + else if ( !target && !props ) + { + return this.constructor; + } } From aa6c6c212e8d2e129a67932fab5c756ed702b3fc Mon Sep 17 00:00:00 2001 From: Burak Son Date: Mon, 14 Dec 2015 17:22:39 +0100 Subject: [PATCH 02/10] Seperate core and wrapper source. --- demo/demo.js | 1 + gulpfile.js | 12 ++++++------ src/{ => core}/flounder.jsx | 0 src/{ => wrappers}/amdFlounder.jsx | 0 src/{ => wrappers}/jqueryFlounder.jsx | 0 src/{ => wrappers}/microbeFlounder.jsx | 0 src/{ => wrappers}/reactFlounder.jsx | 0 7 files changed, 7 insertions(+), 6 deletions(-) rename src/{ => core}/flounder.jsx (100%) rename src/{ => wrappers}/amdFlounder.jsx (100%) rename src/{ => wrappers}/jqueryFlounder.jsx (100%) rename src/{ => wrappers}/microbeFlounder.jsx (100%) rename src/{ => wrappers}/reactFlounder.jsx (100%) diff --git a/demo/demo.js b/demo/demo.js index 7e24b6f..2c685b9 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -4,6 +4,7 @@ import { FlounderReact } from '../src/reactFlounder.jsx'; import Flounder from '../src/flounder.jsx'; window.Flounder = Flounder; + var _slice = Array.prototype.slice; /** * example options object diff --git a/gulpfile.js b/gulpfile.js index 74b1897..55a7243 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -15,7 +15,7 @@ gulp.task( 'demo', function() gulp.task( 'vanilla', function() { - browserify( './src/flounder.jsx' ) + browserify( './src/core/flounder.jsx' ) .transform( babelify, { stage : 0 } ) .bundle() .pipe( fs.createWriteStream( __dirname + '/dist/flounder.js' ) ); @@ -24,7 +24,7 @@ gulp.task( 'vanilla', function() gulp.task( 'react', function() { - browserify( './src/reactFlounder.jsx' ) + browserify( './src/wrappers/reactFlounder.jsx' ) .transform( babelify, { stage : 0 } ) .bundle() .pipe( fs.createWriteStream( __dirname + '/dist/reactFlounder.js' ) ); @@ -33,7 +33,7 @@ gulp.task( 'react', function() gulp.task( 'amd', function() { - browserify( './src/amdFlounder.jsx' ) + browserify( './src/wrappers/amdFlounder.jsx' ) .transform( babelify, { stage : 0 } ) .bundle() .pipe( fs.createWriteStream( __dirname + '/dist/amdFlounder.js' ) ); @@ -42,7 +42,7 @@ gulp.task( 'amd', function() gulp.task( 'jquery', function() { - browserify( './src/jqueryFlounder.jsx' ) + browserify( './src/wrappers/jqueryFlounder.jsx' ) .transform( babelify, { stage : 0 } ) .bundle() .pipe( fs.createWriteStream( __dirname + '/dist/jqueryFlounder.js' ) ); @@ -51,7 +51,7 @@ gulp.task( 'jquery', function() gulp.task( 'microbe', function() { - browserify( './src/microbeFlounder.jsx' ) + browserify( './src/wrappers/microbeFlounder.jsx' ) .transform( babelify, { stage : 0 } ) .bundle() .pipe( fs.createWriteStream( __dirname + '/dist/microbeFlounder.js' ) ); @@ -61,4 +61,4 @@ gulp.task( 'microbe', function() gulp.task( 'default', [], function() { gulp.start( [ 'vanilla', 'react', 'amd', 'jquery', 'microbe', 'demo' ] ); -} ); \ No newline at end of file +} ); diff --git a/src/flounder.jsx b/src/core/flounder.jsx similarity index 100% rename from src/flounder.jsx rename to src/core/flounder.jsx diff --git a/src/amdFlounder.jsx b/src/wrappers/amdFlounder.jsx similarity index 100% rename from src/amdFlounder.jsx rename to src/wrappers/amdFlounder.jsx diff --git a/src/jqueryFlounder.jsx b/src/wrappers/jqueryFlounder.jsx similarity index 100% rename from src/jqueryFlounder.jsx rename to src/wrappers/jqueryFlounder.jsx diff --git a/src/microbeFlounder.jsx b/src/wrappers/microbeFlounder.jsx similarity index 100% rename from src/microbeFlounder.jsx rename to src/wrappers/microbeFlounder.jsx diff --git a/src/reactFlounder.jsx b/src/wrappers/reactFlounder.jsx similarity index 100% rename from src/reactFlounder.jsx rename to src/wrappers/reactFlounder.jsx From 4460696b4f27f163cf9edce728281a734e725957 Mon Sep 17 00:00:00 2001 From: mouse Date: Mon, 14 Dec 2015 15:54:05 +0100 Subject: [PATCH 03/10] fix for #16 bump version --- demo/demo.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/demo/demo.js b/demo/demo.js index 2c685b9..d47b312 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -5,6 +5,8 @@ import Flounder from '../src/flounder.jsx'; window.Flounder = Flounder; +window.Flounder = Flounder; + var _slice = Array.prototype.slice; /** * example options object From 86e9c76af6321b0d246863d04c08b49a2ddd8231 Mon Sep 17 00:00:00 2001 From: mouse Date: Mon, 14 Dec 2015 16:15:43 +0100 Subject: [PATCH 04/10] now accepts extraClass es to be added to each select option Flounder called without params now just returns the constructor updated options object example added api section to readme for #15 for #16 --- README.md | 6 ++- demo/demo.js | 3 +- demo/demoDist.js | 9 ++++- demo/vendor/microbe.js | 87 +++++++++++++++++++++++++++++++++-------- dist/amdFlounder.js | 8 ++++ dist/flounder.js | 8 ++++ dist/jqueryFlounder.js | 8 ++++ dist/microbeFlounder.js | 8 ++++ dist/reactFlounder.js | 8 ++++ src/core/flounder.jsx | 7 ++++ 10 files changed, 132 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 5cac78e..08d2eeb 100755 --- a/README.md +++ b/README.md @@ -78,8 +78,8 @@ 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 - classname : 'extra--classname' // optional + description : 'a longer description of this option', // optional + extraClass : 'extra--classname' // optional } ] ``` @@ -92,11 +92,13 @@ or an array. 'option 3' ] ``` + 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 === diff --git a/demo/demo.js b/demo/demo.js index d47b312..49bac58 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -54,7 +54,8 @@ new Flounder( '.vanilla--input--tags', { { res.push( { text : option.text, - value : option.id + value : option.id, + extraClass : 'vantar' + Math.ceil( Math.random() * 10 ) } ); } ); diff --git a/demo/demoDist.js b/demo/demoDist.js index 44b147b..78612a1 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -62,7 +62,8 @@ new _srcFlounderJsx2['default']('.vanilla--input--tags', { options.forEach(function (option) { res.push({ text: option.text, - value: option.id + value: option.id, + extraClass: 'vantar' + Math.ceil(Math.random() * 10) }); }); @@ -19528,6 +19529,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', diff --git a/demo/vendor/microbe.js b/demo/vendor/microbe.js index 1409390..9f35d50 100644 --- a/demo/vendor/microbe.js +++ b/demo/vendor/microbe.js @@ -6,7 +6,7 @@ * Released under the MIT license * http://m.icro.be/license * - * Date: Thu Dec 10 2015 + * Date: Mon Dec 14 2015 */ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.µ=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Mon, 14 Dec 2015 17:34:13 +0100 Subject: [PATCH 05/10] user callbacks now keep their name internally for dynamic changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- README.md | 26 ++++-- demo/demo.js | 15 ++-- demo/demoDist.js | 144 +++++++++++++++++++-------------- demo/index.html | 4 +- dist/amdFlounder.js | 119 ++++++++++++++++----------- dist/flounder.js | 119 ++++++++++++++++----------- dist/jqueryFlounder.js | 119 ++++++++++++++++----------- dist/microbeFlounder.js | 119 ++++++++++++++++----------- dist/reactFlounder.js | 129 +++++++++++++++++------------ package.json | 2 +- src/core/flounder.jsx | 123 ++++++++++++++++------------ src/wrappers/reactFlounder.jsx | 10 +-- 12 files changed, 550 insertions(+), 379 deletions(-) diff --git a/README.md b/README.md index 08d2eeb..98dfa91 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Flounder.js 0.1.6 +Flounder.js 0.2.0 ================= (for modern browsers and ie9+) @@ -47,7 +47,7 @@ $( '.example--class' ).flounder( configOptions ); ``` { - _default : defaultValue, + defaultValue : defaultValue, classes : { container : 'extra--class', hidden : 'class--to--denote--hidden', @@ -56,12 +56,11 @@ $( '.example--class' ).flounder( configOptions ); 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 } @@ -107,6 +106,7 @@ These functions are intended for use in the user provided event callbacks destroy() getOption( num ) getSelectedOptions() +getSelectedValues() rebuildOptions( options ) disable( bool ) ``` @@ -161,7 +161,7 @@ flounder can be attached to basically anything ``` new flounder( document.getElementById( 'example' ), { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { @@ -188,7 +188,7 @@ react flounder can only be attached to container elements (div, span, etc) ``` ReactDOM.render( React.createElement( FlounderReact, { - _default : 'placeholders!', + defaultValue : 'placeholders!', multiple : true, @@ -235,6 +235,16 @@ Public API 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 + + 0.1.5 ----- diff --git a/demo/demo.js b/demo/demo.js index 49bac58..618150b 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -45,7 +45,7 @@ var options = [ * vanilla multi-Flounder with tags attached to an input */ new Flounder( '.vanilla--input--tags', { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { @@ -60,6 +60,7 @@ new Flounder( '.vanilla--input--tags', { } ); this.options = res; + console.log( this ); }, multiple : true @@ -70,7 +71,7 @@ new Flounder( '.vanilla--input--tags', { * vanilla Flounder attached to an input */ new Flounder( document.getElementById( 'vanilla--input' ), { - _default : 2, + defaultValue : 2, onInit : function() { @@ -119,7 +120,7 @@ new Flounder( document.getElementById( 'vanilla--input' ), { * vanilla Flounder attached pre built select box */ new Flounder( document.getElementById( 'vanilla--select' ), { - _default : 'placeholders!' + defaultValue : 'placeholders!' } ); @@ -127,7 +128,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, @@ -151,7 +152,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, @@ -177,7 +178,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, @@ -212,7 +213,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 78612a1..056edad 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -55,7 +55,7 @@ var options = [{ * vanilla multi-Flounder with tags attached to an input */ new _srcFlounderJsx2['default']('.vanilla--input--tags', { - _default: 'placeholders!', + defaultValue: 'placeholders!', onInit: function onInit() { var res = []; @@ -68,6 +68,7 @@ new _srcFlounderJsx2['default']('.vanilla--input--tags', { }); this.options = res; + console.log(this); }, multiple: true @@ -77,7 +78,7 @@ new _srcFlounderJsx2['default']('.vanilla--input--tags', { * vanilla Flounder attached to an input */ new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { - _default: 2, + defaultValue: 2, onInit: function onInit() { var res = []; @@ -120,14 +121,14 @@ new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { * vanilla Flounder attached pre built select box */ new _srcFlounderJsx2['default'](document.getElementById('vanilla--select'), { - _default: 'placeholders!' + defaultValue: 'placeholders!' }); /** * react amulti-Flounder with tags attached to an div */ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { - _default: 'placeholders!', + defaultValue: 'placeholders!', multiple: true, @@ -147,7 +148,7 @@ _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!', + defaultValue: 'placeholders!', multiple: true, @@ -169,7 +170,7 @@ _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!', + defaultValue: 'placeholders!', multiple: true, @@ -199,7 +200,7 @@ requirejs.config({ */ requirejs(['flounder'], function (Flounder) { new Flounder(document.getElementById('AMD--desc'), { - _default: 'placeholders!', + defaultValue: 'placeholders!', onInit: function onInit() { var res = []; @@ -19433,11 +19434,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; @@ -19458,7 +19459,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); @@ -19477,7 +19478,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 @@ -19486,7 +19487,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 || []; @@ -19505,7 +19506,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, @@ -19542,7 +19543,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 { @@ -19570,8 +19571,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); } @@ -19660,7 +19661,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; } } } @@ -19750,8 +19751,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; @@ -19768,8 +19778,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -19778,8 +19788,8 @@ 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; @@ -19884,11 +19894,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 = ''; @@ -20030,7 +20040,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -20051,6 +20061,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 * @@ -20078,12 +20103,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; @@ -20103,9 +20127,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; } } @@ -20262,7 +20286,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); @@ -20355,7 +20379,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; @@ -20368,9 +20392,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; @@ -20386,8 +20410,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()); } } @@ -20481,19 +20505,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; } /** @@ -20613,8 +20637,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()); } } } @@ -20810,8 +20834,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -20844,8 +20868,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); @@ -21033,7 +21057,7 @@ var FlounderReact = (function (_Component) { 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 defaultValue = this.defaultValue = this.setDefaultOption(props.defaultValue || this.defaultValue, options); var containerClass = this.containerClass; var _stateModifier = this.state.modifier; @@ -21047,8 +21071,8 @@ var FlounderReact = (function (_Component) { { ref: 'flounder', tabIndex: '0', className: 'flounder' + containerClass }, _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' }), @@ -21059,7 +21083,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') { @@ -21085,7 +21109,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, diff --git a/demo/index.html b/demo/index.html index b269883..fb9f17c 100755 --- a/demo/index.html +++ b/demo/index.html @@ -99,7 +99,7 @@ * microbe multi-Flounder with descriptions attached to an input */ µ( '#microbe--multiple--desc' ).flounder( { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { @@ -125,7 +125,7 @@ * jquery Flounder attached to a div */ $( '#jquery--div' ).flounder( { - _default : 'placeholders!', + defaultValue : 'placeholders!', onInit : function() { diff --git a/dist/amdFlounder.js b/dist/amdFlounder.js index d155eed..bfdcac6 100644 --- a/dist/amdFlounder.js +++ b/dist/amdFlounder.js @@ -212,11 +212,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; @@ -237,7 +237,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); @@ -256,7 +256,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 @@ -265,7 +265,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 || []; @@ -284,7 +284,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, @@ -321,7 +321,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 { @@ -349,8 +349,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); } @@ -439,7 +439,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; } } } @@ -529,8 +529,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; @@ -547,8 +556,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -557,8 +566,8 @@ 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; @@ -663,11 +672,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 = ''; @@ -809,7 +818,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -830,6 +839,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 * @@ -857,12 +881,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; @@ -882,9 +905,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; } } @@ -1041,7 +1064,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); @@ -1134,7 +1157,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; @@ -1147,9 +1170,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; @@ -1165,8 +1188,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()); } } @@ -1260,19 +1283,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; } /** @@ -1392,8 +1415,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()); } } } @@ -1589,8 +1612,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -1623,8 +1646,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); diff --git a/dist/flounder.js b/dist/flounder.js index 17926d5..191c9c1 100755 --- a/dist/flounder.js +++ b/dist/flounder.js @@ -197,11 +197,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; @@ -222,7 +222,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); @@ -241,7 +241,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 @@ -250,7 +250,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 || []; @@ -269,7 +269,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, @@ -306,7 +306,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 { @@ -334,8 +334,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); } @@ -424,7 +424,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; } } } @@ -514,8 +514,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; @@ -532,8 +541,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -542,8 +551,8 @@ 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; @@ -648,11 +657,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 = ''; @@ -794,7 +803,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -815,6 +824,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 * @@ -842,12 +866,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; @@ -867,9 +890,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; } } @@ -1026,7 +1049,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); @@ -1119,7 +1142,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; @@ -1132,9 +1155,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; @@ -1150,8 +1173,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()); } } @@ -1245,19 +1268,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; } /** @@ -1377,8 +1400,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()); } } } @@ -1574,8 +1597,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -1608,8 +1631,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); diff --git a/dist/jqueryFlounder.js b/dist/jqueryFlounder.js index f1a384e..68c5384 100644 --- a/dist/jqueryFlounder.js +++ b/dist/jqueryFlounder.js @@ -197,11 +197,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; @@ -222,7 +222,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); @@ -241,7 +241,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 @@ -250,7 +250,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 || []; @@ -269,7 +269,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, @@ -306,7 +306,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 { @@ -334,8 +334,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); } @@ -424,7 +424,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; } } } @@ -514,8 +514,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; @@ -532,8 +541,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -542,8 +551,8 @@ 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; @@ -648,11 +657,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 = ''; @@ -794,7 +803,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -815,6 +824,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 * @@ -842,12 +866,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; @@ -867,9 +890,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; } } @@ -1026,7 +1049,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); @@ -1119,7 +1142,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; @@ -1132,9 +1155,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; @@ -1150,8 +1173,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()); } } @@ -1245,19 +1268,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; } /** @@ -1377,8 +1400,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()); } } } @@ -1574,8 +1597,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -1608,8 +1631,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); diff --git a/dist/microbeFlounder.js b/dist/microbeFlounder.js index d00c1c1..2232b79 100644 --- a/dist/microbeFlounder.js +++ b/dist/microbeFlounder.js @@ -197,11 +197,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; @@ -222,7 +222,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); @@ -241,7 +241,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 @@ -250,7 +250,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 || []; @@ -269,7 +269,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, @@ -306,7 +306,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 { @@ -334,8 +334,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); } @@ -424,7 +424,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; } } } @@ -514,8 +514,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; @@ -532,8 +541,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -542,8 +551,8 @@ 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; @@ -648,11 +657,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 = ''; @@ -794,7 +803,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -815,6 +824,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 * @@ -842,12 +866,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; @@ -867,9 +890,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; } } @@ -1026,7 +1049,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); @@ -1119,7 +1142,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; @@ -1132,9 +1155,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; @@ -1150,8 +1173,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()); } } @@ -1245,19 +1268,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; } /** @@ -1377,8 +1400,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()); } } } @@ -1574,8 +1597,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -1608,8 +1631,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); diff --git a/dist/reactFlounder.js b/dist/reactFlounder.js index 2936bd6..d2f780c 100755 --- a/dist/reactFlounder.js +++ b/dist/reactFlounder.js @@ -19212,11 +19212,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; @@ -19237,7 +19237,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); @@ -19256,7 +19256,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 @@ -19265,7 +19265,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 || []; @@ -19284,7 +19284,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, @@ -19321,7 +19321,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 { @@ -19349,8 +19349,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); } @@ -19439,7 +19439,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; } } } @@ -19529,8 +19529,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; @@ -19547,8 +19556,8 @@ var Flounder = (function () { this.initialzeOptions(); - if (this.initFunc) { - this.initFunc(); + if (this.onInit) { + this.onInit(); } this.buildDom(); @@ -19557,8 +19566,8 @@ 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; @@ -19663,11 +19672,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 = ''; @@ -19809,7 +19818,7 @@ var Flounder = (function () { * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ }, { key: 'getSelectedOptions', @@ -19830,6 +19839,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 * @@ -19857,12 +19881,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; @@ -19882,9 +19905,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; } } @@ -20041,7 +20064,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); @@ -20134,7 +20157,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; @@ -20147,9 +20170,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; @@ -20165,8 +20188,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()); } } @@ -20260,19 +20283,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; } /** @@ -20392,8 +20415,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()); } } } @@ -20589,8 +20612,8 @@ var Flounder = (function () { refs.search.focus(); } - if (this.openFunc) { - this.openFunc(e); + if (this.onOpen) { + this.onOpen(e, this.getSelectedValues()); } } @@ -20623,8 +20646,8 @@ var Flounder = (function () { refs.flounder.focus(); - if (this.closeFunc) { - this.closeFunc(e); + if (this.onClose) { + this.onClose(e, this.getSelectedValues()); } } }]); @@ -20812,7 +20835,7 @@ var FlounderReact = (function (_Component) { 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 defaultValue = this.defaultValue = this.setDefaultOption(props.defaultValue || this.defaultValue, options); var containerClass = this.containerClass; var _stateModifier = this.state.modifier; @@ -20826,8 +20849,8 @@ var FlounderReact = (function (_Component) { { ref: 'flounder', tabIndex: '0', className: 'flounder' + containerClass }, _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' }), @@ -20838,7 +20861,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') { @@ -20864,7 +20887,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, diff --git a/package.json b/package.json index fa24e3b..47a0f91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flounder", - "version": "0.1.6", + "version": "0.2.0", "description": "a native friendly dropdown menu", "main": "./dist/flounder.js", "scripts": { diff --git a/src/core/flounder.jsx b/src/core/flounder.jsx index ab3df27..51bfa0d 100755 --- a/src/core/flounder.jsx +++ b/src/core/flounder.jsx @@ -194,11 +194,11 @@ class Flounder let _options = this.options; - let _default = this._default = this.setDefaultOption( this._default, _options ); + let defaultValue = this.defaultValue = this.setDefaultOption( this.defaultValue, _options ); let 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; let multiTagWrapper = this.props.multiple ? constructElement( { className : 'multi--tag--list' } ) : null; @@ -221,7 +221,7 @@ class Flounder } ); let search = this.addSearch( flounder ); - let [ options, selectOptions ] = this.buildOptions( _default, _options, optionsList, select ); + let [ options, selectOptions ] = this.buildOptions( defaultValue, _options, optionsList, select ); this.target.appendChild( wrapper ); @@ -236,14 +236,14 @@ class Flounder * 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 * * @return _Array_ refs to both container elements */ - buildOptions( _default, _options, optionsList, select ) + buildOptions( defaultValue, _options, optionsList, select ) { _options = _options || []; let options = []; @@ -263,7 +263,7 @@ class Flounder _option.index = i; let escapedText = this.escapeHTML( _option.text ); - let extraClass = i === _default.index ? ' ' + this.selectedClass : ''; + let extraClass = i === defaultValue.index ? ' ' + this.selectedClass : ''; let res = { className : 'flounder__option' + extraClass, @@ -305,7 +305,7 @@ class Flounder selectOptions[ i ].innerHTML = escapedText; select.appendChild( selectOptions[ i ] ); - if ( i === _default.index ) + if ( i === defaultValue.index ) { selectOptions[ i ].selected = true; } @@ -338,9 +338,9 @@ class Flounder { if ( ! this.checkClickTarget( e ) ) { - if ( this.cancelFunc ) + if ( this.onCancel ) { - this.cancelFunc( e ); + this.onCancel( e ); } this.toggleList( e ); } @@ -443,7 +443,7 @@ class Flounder if ( refs.multiTagWrapper && refs.multiTagWrapper.children.length === 0 ) { - this.refs.selected.innerHTML = this._default.text; + this.refs.selected.innerHTML = this.defaultValue.text; } } } @@ -534,8 +534,16 @@ class Flounder { if ( target && target.length !== 0 ) { + if ( target.jquery ) + { + return target.map( ( i, _el ) => new this.constructor( _el, props ) ); + } + else if ( target.isMicrobe ) + { + return target.map( ( _el ) => new this.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; @@ -553,9 +561,9 @@ class Flounder this.initialzeOptions(); - if ( this.initFunc ) + if ( this.onInit ) { - this.initFunc(); + this.onInit(); } this.buildDom(); @@ -564,9 +572,9 @@ class Flounder this.onRender(); - if ( this.componentDidMountFunc ) + if ( this.onComponentDidMount ) { - this.componentDidMountFunc(); + this.onComponentDidMount(); } this.refs.select.flounder = this.refs.selected.flounder = this.target.flounder = this; @@ -681,11 +689,11 @@ class Flounder } else if ( selectedLength === 0 ) { - let _default = this._default; + let 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 { @@ -845,7 +853,7 @@ class Flounder * * returns the currently selected options of a SELECT box * - * @param {Object} _el select box + * @return _Void_ */ getSelectedOptions() { @@ -867,6 +875,19 @@ class Flounder } + /** + * ## getSelectedValues + * + * returns the values of the currently selected options + * + * @return _Void_ + */ + getSelectedValues() + { + return this.getSelectedOptions().map( ( _v ) => _v.value ) + } + + /** * hideElement * @@ -893,14 +914,13 @@ class Flounder { this.props = this.props || {}; let 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.multiple = props.multiple !== undefined ? props.multiple : false; - this.multipleTags = props.multipleTags !== undefined ? props.multipleTags : true; + 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; if ( !this.multiple ) { @@ -920,10 +940,10 @@ class Flounder this.selectedClass += ' flounder__option--selected--hidden'; } - this._default = ''; - if ( props._default || props._default === 0 ) + this.defaultValue = ''; + if ( props.defaultValue || props.defaultValue === 0 ) { - this._default = props._default; + this.defaultValue = props.defaultValue; } } @@ -1075,7 +1095,7 @@ class Flounder let _select = refs.select; refs.select = false; - [ refs.options, refs.selectOptions ] = this.buildOptions( this._default, _options, refs.optionsList, _select ); + [ refs.options, refs.selectOptions ] = this.buildOptions( this.defaultValue, _options, refs.optionsList, _select ); refs.select = _select; this.removeSelectedValue(); @@ -1166,8 +1186,8 @@ class Flounder let select = refs.select; let selected = refs.selected; let target = e.target; - let _default = this._default - let targetIndex = target.getAttribute( 'data-index' ); + let defaultValue = this.defaultValue; + let targetIndex = target.getAttribute( 'data-index' ); select[ targetIndex ].selected = false; let selectedOptions = this.getSelectedOptions(); @@ -1180,9 +1200,9 @@ class Flounder 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 { @@ -1202,9 +1222,9 @@ class Flounder selected.setAttribute( 'data-value', value ); selected.setAttribute( 'data-index', index ); - if ( this.selectFunc ) + if ( this.onSelect ) { - this.selectFunc( e ); + this.onSelect( e, this.getSelectedValues() ); } } @@ -1299,22 +1319,22 @@ class Flounder */ setDefaultOption( defaultProp, options ) { - let _default = ''; + let 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; } @@ -1450,9 +1470,9 @@ class Flounder { this.displaySelected( refs.selected, refs ); - if ( this.selectFunc ) + if ( this.onSelect ) { - this.selectFunc( e ); + this.onSelect( e, this.getSelectedValues() ); } } } @@ -1660,13 +1680,14 @@ class Flounder refs.search.focus(); } - if ( this.openFunc ) + if ( this.onOpen ) { - this.openFunc( e ); + this.onOpen( e, this.getSelectedValues() ); } } + /** * ## toggleClosed * @@ -1696,9 +1717,9 @@ class Flounder refs.flounder.focus(); - if ( this.closeFunc ) + if ( this.onClose ) { - this.closeFunc( e ); + this.onClose( e, this.getSelectedValues() ); } } } diff --git a/src/wrappers/reactFlounder.jsx b/src/wrappers/reactFlounder.jsx index d20fe9d..1a59bab 100755 --- a/src/wrappers/reactFlounder.jsx +++ b/src/wrappers/reactFlounder.jsx @@ -149,7 +149,7 @@ class FlounderReact extends Component let options = this.options = this.prepOptions( props.options || this.options ); let handleChange = this.handleChange.bind( this ); let multiple = props.multiple; - let _default = this._default = this.setDefaultOption( props._default || this._default, options ); + let defaultValue = this.defaultValue = this.setDefaultOption( props.defaultValue || this.defaultValue, options ); let containerClass = this.containerClass; let _stateModifier = this.state.modifier; @@ -158,8 +158,8 @@ class FlounderReact extends Component return (
-
- {_default.text} +
+ {defaultValue.text}
{ props.multiple ?
: null }
@@ -168,7 +168,7 @@ class FlounderReact extends Component { options.map( ( _option, i ) => { - let extraClass = i === props._default ? ' flounder__option--selected' : ''; + let extraClass = i === props.defaultValue ? ' flounder__option--selected' : ''; extraClass += _option.disabled ? ' flounder--disabled' : ''; if ( typeof _option === 'string' ) @@ -195,7 +195,7 @@ class FlounderReact extends Component { options.map( ( _option, i ) => { - let extraClass = i === _default ? ' ' + this.selectedClass : ''; + let extraClass = i === defaultValue ? ' ' + this.selectedClass : ''; let res = { className : 'flounder__option' + extraClass, From 39060cd08942d54bc478238344b98dcf671f815a Mon Sep 17 00:00:00 2001 From: mouse Date: Mon, 14 Dec 2015 18:03:16 +0100 Subject: [PATCH 06/10] updated fonlder structure merged master in --- README.md | 10 +- demo/demo.js | 6 +- demo/demoDist.js | 156 ++++++++++++++++--------------- dist/amdFlounder.js | 47 +++++----- dist/flounder.js | 15 +-- dist/jqueryFlounder.js | 23 +++-- dist/microbeFlounder.js | 23 +++-- dist/reactFlounder.js | 126 +++++++++++++------------ src/core/flounder.jsx | 17 ++-- src/wrappers/amdFlounder.jsx | 2 +- src/wrappers/jqueryFlounder.jsx | 2 +- src/wrappers/microbeFlounder.jsx | 2 +- src/wrappers/reactFlounder.jsx | 9 +- 13 files changed, 239 insertions(+), 199 deletions(-) diff --git a/README.md b/README.md index 98dfa91..a122434 100755 --- a/README.md +++ b/README.md @@ -49,9 +49,10 @@ $( '.example--class' ).flounder( configOptions ); { 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, @@ -243,6 +244,11 @@ Change Log + _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 ++ moved files to be sorted a bit better 0.1.5 diff --git a/demo/demo.js b/demo/demo.js index 618150b..014be31 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -120,7 +120,11 @@ new Flounder( document.getElementById( 'vanilla--input' ), { * vanilla Flounder attached pre built select box */ new Flounder( document.getElementById( 'vanilla--select' ), { - defaultValue : 'placeholders!' + defaultValue : 'placeholders!', + classes : { + container : 'moon', + wrapper : 'doge' + } } ); diff --git a/demo/demoDist.js b/demo/demoDist.js index 056edad..ff56248 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -15,13 +15,13 @@ var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _srcReactFlounderJsx = require('../src/reactFlounder.jsx'); +var _srcWrappersReactFlounderJsx = require('../src/wrappers/reactFlounder.jsx'); -var _srcFlounderJsx = require('../src/flounder.jsx'); +var _srcCoreFlounderJsx = require('../src/core/flounder.jsx'); -var _srcFlounderJsx2 = _interopRequireDefault(_srcFlounderJsx); +var _srcCoreFlounderJsx2 = _interopRequireDefault(_srcCoreFlounderJsx); -window.Flounder = _srcFlounderJsx2['default']; +window.Flounder = _srcCoreFlounderJsx2['default']; var _slice = Array.prototype.slice; /** @@ -54,7 +54,7 @@ var options = [{ /** * vanilla multi-Flounder with tags attached to an input */ -new _srcFlounderJsx2['default']('.vanilla--input--tags', { +new _srcCoreFlounderJsx2['default']('.vanilla--input--tags', { defaultValue: 'placeholders!', onInit: function onInit() { @@ -77,7 +77,7 @@ new _srcFlounderJsx2['default']('.vanilla--input--tags', { /** * vanilla Flounder attached to an input */ -new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { +new _srcCoreFlounderJsx2['default'](document.getElementById('vanilla--input'), { defaultValue: 2, onInit: function onInit() { @@ -120,14 +120,18 @@ new _srcFlounderJsx2['default'](document.getElementById('vanilla--input'), { /** * vanilla Flounder attached pre built select box */ -new _srcFlounderJsx2['default'](document.getElementById('vanilla--select'), { - defaultValue: '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, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -147,7 +151,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJ /** * react amulti-Flounder without tags attached to an div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -169,7 +173,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJ /** * react amulti-Flounder with description attached to div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcReactFlounderJsx.FlounderReact, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -217,10 +221,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: _srcWrappersReactFlounderJsx.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/reactFlounder.jsx":161,"react":159,"react-dom":3}],2:[function(require,module,exports){ // shim for using process in browser var process = module.exports = {}; @@ -19418,10 +19422,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); @@ -20115,9 +20120,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; @@ -20907,9 +20914,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; @@ -21058,17 +21065,18 @@ var FlounderReact = (function (_Component) { var handleChange = this.handleChange.bind(this); var multiple = props.multiple; var defaultValue = this.defaultValue = this.setDefaultOption(props.defaultValue || this.defaultValue, options); - var containerClass = this.containerClass; + 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': defaultValue.value }, @@ -21130,57 +21138,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/dist/amdFlounder.js b/dist/amdFlounder.js index bfdcac6..3b192ff 100644 --- a/dist/amdFlounder.js +++ b/dist/amdFlounder.js @@ -3,21 +3,6 @@ /* jshint globalstrict: true */ 'use strict'; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _flounderJsx = require('./flounder.jsx'); - -var _flounderJsx2 = _interopRequireDefault(_flounderJsx); - -define('flounder', [], function () { - return _flounderJsx2['default']; -}); - -},{"./flounder.jsx":2}],2:[function(require,module,exports){ - -/* jshint globalstrict: true */ -'use strict'; - Object.defineProperty(exports, '__esModule', { value: true }); @@ -196,10 +181,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); @@ -893,9 +879,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; @@ -1658,4 +1646,19 @@ var Flounder = (function () { exports['default'] = Flounder; module.exports = exports['default']; -},{}]},{},[1]); +},{}],2:[function(require,module,exports){ + +/* jshint globalstrict: true */ +'use strict'; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _coreFlounderJsx = require('../core/flounder.jsx'); + +var _coreFlounderJsx2 = _interopRequireDefault(_coreFlounderJsx); + +define('flounder', [], function () { + return _coreFlounderJsx2['default']; +}); + +},{"../core/flounder.jsx":1}]},{},[2]); diff --git a/dist/flounder.js b/dist/flounder.js index 191c9c1..29bc5f2 100755 --- a/dist/flounder.js +++ b/dist/flounder.js @@ -181,10 +181,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); @@ -878,9 +879,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; diff --git a/dist/jqueryFlounder.js b/dist/jqueryFlounder.js index 68c5384..1136994 100644 --- a/dist/jqueryFlounder.js +++ b/dist/jqueryFlounder.js @@ -181,10 +181,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); @@ -878,9 +879,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; @@ -1650,15 +1653,15 @@ module.exports = exports['default']; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } -var _flounderJsx = require('./flounder.jsx'); +var _coreFlounderJsx = require('../core/flounder.jsx'); -var _flounderJsx2 = _interopRequireDefault(_flounderJsx); +var _coreFlounderJsx2 = _interopRequireDefault(_coreFlounderJsx); (function ($) { $.fn.flounder = function (options) { - return new _flounderJsx2['default'](this, options); + return new _coreFlounderJsx2['default'](this, options); }; })(jQuery); -},{"./flounder.jsx":1}]},{},[2]); +},{"../core/flounder.jsx":1}]},{},[2]); diff --git a/dist/microbeFlounder.js b/dist/microbeFlounder.js index 2232b79..4b15f34 100644 --- a/dist/microbeFlounder.js +++ b/dist/microbeFlounder.js @@ -181,10 +181,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); @@ -878,9 +879,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; @@ -1650,15 +1653,15 @@ module.exports = exports['default']; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } -var _flounderJsx = require('./flounder.jsx'); +var _coreFlounderJsx = require('../core/flounder.jsx'); -var _flounderJsx2 = _interopRequireDefault(_flounderJsx); +var _coreFlounderJsx2 = _interopRequireDefault(_coreFlounderJsx); (function (µ) { µ.core.flounder = function (options) { - return new _flounderJsx2['default'](this, options); + return new _coreFlounderJsx2['default'](this, options); }; })(µ); -},{"./flounder.jsx":1}]},{},[2]); +},{"../core/flounder.jsx":1}]},{},[2]); diff --git a/dist/reactFlounder.js b/dist/reactFlounder.js index d2f780c..ba89620 100755 --- a/dist/reactFlounder.js +++ b/dist/reactFlounder.js @@ -19196,10 +19196,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); @@ -19893,9 +19894,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; @@ -20685,9 +20688,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; @@ -20836,17 +20839,18 @@ var FlounderReact = (function (_Component) { var handleChange = this.handleChange.bind(this); var multiple = props.multiple; var defaultValue = this.defaultValue = this.setDefaultOption(props.defaultValue || this.defaultValue, options); - var containerClass = this.containerClass; + 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': defaultValue.value }, @@ -20908,57 +20912,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":159,"react":158,"react-dom":2}]},{},[160]); +},{"../core/flounder.jsx":159,"react":158,"react-dom":2}]},{},[160]); diff --git a/src/core/flounder.jsx b/src/core/flounder.jsx index 51bfa0d..6864ea0 100755 --- a/src/core/flounder.jsx +++ b/src/core/flounder.jsx @@ -177,10 +177,13 @@ class Flounder let constructElement = this.constructElement; - let wrapper = constructElement( { className : 'flounder-wrapper flounder__input--select' } ); + let wrapperClass = 'flounder-wrapper flounder__input--select'; + let wrapper = constructElement( { className : this.wrapperClass ? + wrapperClass + ' ' + this.wrapperClass : wrapperClass } ); + let flounderClass = 'flounder'; + let flounder = constructElement( { className : this.flounderClass ? + flounderClass + ' ' + this.flounderClass : flounderClass } ); - let flounderClass = 'flounder' + this.containerClass; - let flounder = constructElement( { className : flounderClass } ); flounder.tabIndex = 0; wrapper.appendChild( flounder ); @@ -927,9 +930,11 @@ class Flounder 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'; + let 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; diff --git a/src/wrappers/amdFlounder.jsx b/src/wrappers/amdFlounder.jsx index 9a9e2ce..016633f 100644 --- a/src/wrappers/amdFlounder.jsx +++ b/src/wrappers/amdFlounder.jsx @@ -2,6 +2,6 @@ /* jshint globalstrict: true */ 'use strict'; -import Flounder from './flounder.jsx'; +import Flounder from '../core/flounder.jsx'; define( 'flounder', [], function(){ return Flounder; } ); \ No newline at end of file diff --git a/src/wrappers/jqueryFlounder.jsx b/src/wrappers/jqueryFlounder.jsx index 463eefb..c9f0143 100644 --- a/src/wrappers/jqueryFlounder.jsx +++ b/src/wrappers/jqueryFlounder.jsx @@ -2,7 +2,7 @@ /* jshint globalstrict: true */ 'use strict'; -import Flounder from './flounder.jsx'; +import Flounder from '../core/flounder.jsx'; ( function( $ ) { diff --git a/src/wrappers/microbeFlounder.jsx b/src/wrappers/microbeFlounder.jsx index f5c168b..fff81aa 100644 --- a/src/wrappers/microbeFlounder.jsx +++ b/src/wrappers/microbeFlounder.jsx @@ -2,7 +2,7 @@ /* jshint globalstrict: true */ 'use strict'; -import Flounder from './flounder.jsx'; +import Flounder from '../core/flounder.jsx'; ( function( µ ) { diff --git a/src/wrappers/reactFlounder.jsx b/src/wrappers/reactFlounder.jsx index 1a59bab..9ecd84b 100755 --- a/src/wrappers/reactFlounder.jsx +++ b/src/wrappers/reactFlounder.jsx @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; -import Flounder from './flounder.jsx'; +import Flounder from '../core/flounder.jsx'; const slice = Array.prototype.slice; @@ -150,14 +150,15 @@ class FlounderReact extends Component let handleChange = this.handleChange.bind( this ); let multiple = props.multiple; let defaultValue = this.defaultValue = this.setDefaultOption( props.defaultValue || this.defaultValue, options ); - let containerClass = this.containerClass; + let wrapperClass = this.wrapperClass ? ' ' + this.wrapperClass : ''; + let flounderClass = this.flounderClass ? ' ' + this.flounderClass : ''; let _stateModifier = this.state.modifier; _stateModifier = _stateModifier.length > 0 ? '--' + _stateModifier : ''; return ( -
-
+
+
{defaultValue.text}
From 0e5010959d60b93687ed12c1988d855f7f1a88cf Mon Sep 17 00:00:00 2001 From: mouse Date: Mon, 14 Dec 2015 18:09:43 +0100 Subject: [PATCH 07/10] + restructured folders and files --- README.md | 2 +- demo/demo.js | 8 +- demo/demoDist.js | 14 +- demo/index.html | 4 +- dist/flounder.amd.js | 1664 ++ dist/flounder.jquery.js | 1667 ++ dist/flounder.microbe.js | 1667 ++ dist/flounder.react.jsx | 20968 ++++++++++++++++ gulpfile.js | 16 +- .../{amdFlounder.jsx => flounder.amd.jsx} | 0 ...jqueryFlounder.jsx => flounder.jquery.jsx} | 0 ...crobeFlounder.jsx => flounder.microbe.jsx} | 0 .../{reactFlounder.jsx => flounder.react.jsx} | 0 13 files changed, 25987 insertions(+), 23 deletions(-) create mode 100644 dist/flounder.amd.js create mode 100644 dist/flounder.jquery.js create mode 100644 dist/flounder.microbe.js create mode 100644 dist/flounder.react.jsx rename src/wrappers/{amdFlounder.jsx => flounder.amd.jsx} (100%) rename src/wrappers/{jqueryFlounder.jsx => flounder.jquery.jsx} (100%) rename src/wrappers/{microbeFlounder.jsx => flounder.microbe.jsx} (100%) rename src/wrappers/{reactFlounder.jsx => flounder.react.jsx} (100%) diff --git a/README.md b/README.md index a122434..3f3ad85 100755 --- a/README.md +++ b/README.md @@ -248,7 +248,7 @@ Change Log + added the ability to give options unique classes + added wrapper to the class options + changed the flounder class optoin from container to flounder -+ moved files to be sorted a bit better ++ restructured folders and files 0.1.5 diff --git a/demo/demo.js b/demo/demo.js index 014be31..ef2be02 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,9 +1,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; -import { FlounderReact } from '../src/reactFlounder.jsx'; -import Flounder from '../src/flounder.jsx'; -window.Flounder = Flounder; - +import { FlounderReact } from '../src/wrappers/flounder.react.jsx'; +import Flounder from '../src/core/flounder.jsx'; window.Flounder = Flounder; @@ -207,7 +205,7 @@ ReactDOM.render( React.createElement( FlounderReact, { requirejs.config( { paths : { - flounder : '../dist/amdFlounder' + flounder : '../dist/flounder.amd' } } ); diff --git a/demo/demoDist.js b/demo/demoDist.js index ff56248..1a0e671 100755 --- a/demo/demoDist.js +++ b/demo/demoDist.js @@ -15,7 +15,7 @@ var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _srcWrappersReactFlounderJsx = require('../src/wrappers/reactFlounder.jsx'); +var _srcWrappersFlounderReactJsx = require('../src/wrappers/flounder.react.jsx'); var _srcCoreFlounderJsx = require('../src/core/flounder.jsx'); @@ -131,7 +131,7 @@ new _srcCoreFlounderJsx2['default'](document.getElementById('vanilla--select'), /** * react amulti-Flounder with tags attached to an div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -151,7 +151,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactF /** * react amulti-Flounder without tags attached to an div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -173,7 +173,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactF /** * react amulti-Flounder with description attached to div */ -_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactFlounderJsx.FlounderReact, { +_reactDom2['default'].render(_react2['default'].createElement(_srcWrappersFlounderReactJsx.FlounderReact, { defaultValue: 'placeholders!', multiple: true, @@ -195,7 +195,7 @@ _reactDom2['default'].render(_react2['default'].createElement(_srcWrappersReactF requirejs.config({ paths: { - flounder: '../dist/amdFlounder' + flounder: '../dist/flounder.amd' } }); @@ -221,10 +221,10 @@ requirejs(['flounder'], function (Flounder) { }); }); -exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: _srcWrappersReactFlounderJsx.FlounderReact, Flounder: _srcCoreFlounderJsx2['default'] }; +exports['default'] = { React: _react2['default'], Component: _react.Component, ReactDOM: _reactDom2['default'], FlounderReact: _srcWrappersFlounderReactJsx.FlounderReact, Flounder: _srcCoreFlounderJsx2['default'] }; module.exports = exports['default']; -},{"../src/core/flounder.jsx":160,"../src/wrappers/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 = {}; diff --git a/demo/index.html b/demo/index.html index fb9f17c..b69c4a1 100755 --- a/demo/index.html +++ b/demo/index.html @@ -62,9 +62,9 @@
- + - +