diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index fa6656c..0000000 --- a/.jshintrc +++ /dev/null @@ -1,113 +0,0 @@ -//.jshintrc -{ - // JSHint Meteor Configuration File - // Match the Meteor Style Guide - // - // By @raix with contributions from @aldeed and @awatson1978 - // Source https://github.com/raix/Meteor-jshintrc - // - // See http://jshint.com/docs/ for more details - - "maxerr" : 50, // {int} Maximum error before stopping - - // Enforcing - "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.) - "camelcase" : true, // true: Identifiers must be in camelCase - "curly" : true, // true: Require {} for every new block or scope - "eqeqeq" : true, // true: Require triple equals (===) for comparison - "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty() - "immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` - "indent" : 2, // {int} Number of spaces to use for indentation - "latedef" : false, // true: Require variables/functions to be defined before being used - "newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()` - "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` - "noempty" : true, // true: Prohibit use of empty blocks - "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) - "plusplus" : false, // true: Prohibit use of `++` & `--` - "quotmark" : false, // Quotation mark consistency: - // false : do nothing (default) - // true : ensure whatever is used is consistent - // "single" : require single quotes - // "double" : require double quotes - "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) - "unused" : true, // true: Require all defined variables be used - "strict" : false, // true: Requires all functions run in ES5 Strict Mode - "trailing" : true, // true: Prohibit trailing whitespaces - "maxparams" : false, // {int} Max number of formal params allowed per function - "maxdepth" : false, // {int} Max depth of nested blocks (within functions) - "maxstatements" : false, // {int} Max number statements per function - "maxcomplexity" : false, // {int} Max cyclomatic complexity per function - "maxlen" : 80, // {int} Max number of characters per line - - // Relaxing - "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) - "boss" : false, // true: Tolerate assignments where comparisons would be expected - "debug" : false, // true: Allow debugger statements e.g. browser breakpoints. - "eqnull" : false, // true: Tolerate use of `== null` - "es5" : false, // true: Allow ES5 syntax (ex: getters and setters) - "esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`) - "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) - // (ex: `for each`, multiple try/catch, function expression…) - "evil" : false, // true: Tolerate use of `eval` and `new Function()` - "expr" : false, // true: Tolerate `ExpressionStatement` as Programs - "funcscope" : false, // true: Tolerate defining variables inside control statements" - "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict') - "iterator" : false, // true: Tolerate using the `__iterator__` property - "lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block - "laxbreak" : false, // true: Tolerate possibly unsafe line breakings - "laxcomma" : false, // true: Tolerate comma-first style coding - "loopfunc" : false, // true: Tolerate functions being defined in loops - "multistr" : false, // true: Tolerate multi-line strings - "proto" : false, // true: Tolerate using the `__proto__` property - "scripturl" : false, // true: Tolerate script-targeted URLs - "smarttabs" : false, // true: Tolerate mixed tabs/spaces when used for alignment - "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` - "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation - "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;` - "validthis" : false, // true: Tolerate using this in a non-constructor function - - // Environments - "browser" : true, // Web Browser (window, document, etc) - "couch" : false, // CouchDB - "devel" : true, // Development/debugging (alert, confirm, etc) - "dojo" : false, // Dojo Toolkit - "jquery" : false, // jQuery - "mootools" : false, // MooTools - "node" : false, // Node.js - "nonstandard" : false, // Widely adopted globals (escape, unescape, etc) - "prototypejs" : false, // Prototype and Scriptaculous - "rhino" : false, // Rhino - "worker" : false, // Web Workers - "wsh" : false, // Windows Scripting Host - "yui" : false, // Yahoo User Interface - //"meteor" : false, // Meteor.js - - // Legacy - "nomen" : false, // true: Prohibit dangling `_` in variables - "onevar" : false, // true: Allow only one `var` statement per function - "passfail" : false, // true: Stop on first error - "white" : false, // true: Check against strict whitespace and indentation rules - - // Custom Globals - "predef" : [ - "Meteor", - "Accounts", - "Session", - "Template", - "check", - "Match", - "Deps", - "EJSON", - "Email", - "Package", - "Tinytest", - "Npm", - "Assets", - "Packages", - "process", - "LocalCollection", - "_", - "Random", - "HTTP" - ] // additional predefined global variables -} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 3026003..0000000 --- a/.travis.yml +++ /dev/null @@ -1,5 +0,0 @@ -language: node_js -node_js: - - "0.10" -before_install: - - "curl -L http://git.io/ejPSng | /bin/sh" \ No newline at end of file diff --git a/.versions b/.versions index 5159ddf..dab8918 100644 --- a/.versions +++ b/.versions @@ -1,54 +1,66 @@ -aldeed:autoform@6.0.0 -aldeed:autoform-select2@3.0.1 -aldeed:template-extension@4.0.0 -babel-compiler@6.19.4 -babel-runtime@1.0.1 -base64@1.0.10 -blaze@2.3.2 -blaze-tools@1.0.10 -boilerplate-generator@1.1.1 -caching-compiler@1.1.9 -caching-html-compiler@1.0.6 -callback-hook@1.0.10 -check@1.2.5 -ddp@1.3.0 -ddp-client@2.0.0 -ddp-common@1.2.9 -ddp-server@2.0.0 -deps@1.0.12 -diff-sequence@1.0.7 -ecmascript@0.8.1 -ecmascript-runtime@0.4.1 -ecmascript-runtime-client@0.4.3 -ecmascript-runtime-server@0.4.1 -ejson@1.0.13 -geojson-utils@1.0.10 -html-tools@1.0.11 -htmljs@1.0.11 -id-map@1.0.9 -jquery@1.11.10 -livedata@1.0.18 -logging@1.1.17 -meteor@1.7.0 -minimongo@1.2.1 -modules@0.9.2 -modules-runtime@0.8.0 -momentjs:moment@2.10.6 -mongo-id@1.0.6 -observe-sequence@1.0.16 -ordered-dict@1.0.9 -promise@0.8.9 -random@1.0.10 -reactive-dict@1.1.9 -reactive-var@1.0.11 -retry@1.0.9 -routepolicy@1.0.12 -spacebars@1.0.15 -spacebars-compiler@1.1.2 -templating@1.1.7 -templating-tools@1.1.1 -tracker@1.1.3 -ui@1.0.13 -underscore@1.0.10 -webapp@1.3.17 -webapp-hashing@1.0.9 +aldeed:autoform@8.0.0 +aldeed:autoform-select2@4.0.0-rc.0 +allow-deny@2.1.0 +babel-compiler@7.12.1 +babel-runtime@1.5.2 +base64@1.0.13 +binary-heap@1.0.12 +blaze@3.0.2 +blaze-tools@2.0.0 +boilerplate-generator@2.0.1 +caching-compiler@2.0.1 +caching-html-compiler@2.0.0 +callback-hook@1.6.1 +check@1.4.4 +core-runtime@1.0.0 +ddp@1.4.2 +ddp-client@3.1.1 +ddp-common@1.4.4 +ddp-server@3.1.2 +diff-sequence@1.1.3 +dynamic-import@0.7.4 +ecmascript@0.16.12 +ecmascript-runtime@0.8.3 +ecmascript-runtime-client@0.12.3 +ecmascript-runtime-server@0.11.1 +ejson@1.1.5 +facts-base@1.0.2 +fetch@0.1.6 +geojson-utils@1.0.12 +html-tools@2.0.0 +htmljs@2.0.1 +id-map@1.2.0 +inter-process-messaging@0.1.2 +jquery@3.0.2 +logging@1.3.6 +meteor@2.1.1 +minimongo@2.0.3 +modern-browsers@0.2.3 +modules@0.20.3 +modules-runtime@0.13.2 +mongo@2.1.3 +mongo-decimal@0.2.0 +mongo-dev-server@1.1.1 +mongo-id@1.0.9 +npm-mongo@6.16.0 +observe-sequence@2.0.0 +ordered-dict@1.2.0 +promise@1.0.0 +random@1.2.2 +react-fast-refresh@0.2.9 +reactive-dict@1.3.2 +reactive-var@1.0.13 +reload@1.3.2 +retry@1.1.1 +routepolicy@1.1.2 +socket-stream-client@0.6.1 +spacebars@2.0.0 +spacebars-compiler@2.0.0 +templating@1.4.4 +templating-compiler@2.0.0 +templating-runtime@2.0.1 +templating-tools@2.0.0 +tracker@1.3.4 +typescript@5.6.5 +webapp@2.0.7 +webapp-hashing@1.1.2 diff --git a/README.md b/README.md index 84dccf7..de099ad 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -aldeed:autoform-select2 -========================= +# aldeed:autoform-select2 An add-on Meteor package for [aldeed:autoform](https://github.com/aldeed/meteor-autoform). Provides a single custom input type, "select2", which renders an input using the [select2](https://select2.github.io/) plugin. @@ -9,7 +8,7 @@ An add-on Meteor package for [aldeed:autoform](https://github.com/aldeed/meteor- You must use select2 4.0+. -Option 1: +#### Option 1: Add this to ``: @@ -18,7 +17,7 @@ Add this to ``: ``` -Option 2: +#### Option 2: Install the NPM package (and its jQuery dependency): @@ -33,7 +32,7 @@ import 'select2'; import 'select2/dist/css/select2.css'; ``` -Option 3: +#### Option 3: Get the files from GitHub and add them directly in your app /client/lib folder. @@ -69,6 +68,40 @@ In a Meteor app directory, enter: $ meteor add aldeed:autoform-select2 ``` +You can import this library dynamically or statically. + +Dynamically, in your `client/main.js`: + +```js +import { AutoFormSelect2 } from 'meteor/aldeed:autoform-select2'; +// ... +await AutoFormSelect2.load() +``` + +Or statically, in your `client/main.js`: + +```js +import 'meteor/aldeed:autoform-select2/static'; +``` + +### Installing Bootstrap theme + +As of version 4.x there is no tight coupling to Bootstrap themes anymore. +If you want to use the Bootstrap theme, you can install create use the following code: + +```js +const from = Template.afSelect2 +from.helpers({ + atts: function addFormControlAtts () { + const { select2Options, ...rest } = this.atts + // Add bootstrap class + return AutoForm.Utility.addClass(rest, 'form-control') + } +}) +``` + + + ## Usage Specify "select2" for the `type` attribute of any input. This can be done in a number of ways: diff --git a/autoform-select2.js b/autoform-select2.js index 8ae6714..df74d12 100644 --- a/autoform-select2.js +++ b/autoform-select2.js @@ -1,74 +1,65 @@ -/* global AutoForm, _, $, Template */ +/* global AutoForm, $, Template */ AutoForm.addInputType('select2', { template: 'afSelect2', valueConverters: { stringArray: function (val) { - if (_.isArray(val)) { - return _.map(val, function (item) { - return $.trim(item); - }); + if (Array.isArray(val)) { + return val.map(item => String(item).trim()) } - return val; + return val }, number: AutoForm.Utility.stringToNumber, numberArray: function (val) { - if (_.isArray(val)) { - return _.map(val, function (item) { - item = $.trim(item); - return AutoForm.Utility.stringToNumber(item); - }); + if (Array.isArray(val)) { + return val.map(item => AutoForm.Utility.stringToNumber(item.trim())) } - return val; + return val }, boolean: AutoForm.Utility.stringToBool, booleanArray: function (val) { - if (_.isArray(val)) { - return _.map(val, function (item) { - item = $.trim(item); - return AutoForm.Utility.stringToBool(item); - }); + if (Array.isArray(val)) { + return val.map(item => AutoForm.Utility.stringToBool(item.trim())) } - return val; + return val }, date: AutoForm.Utility.stringToDate, dateArray: function (val) { - if (_.isArray(val)) { - return _.map(val, function (item) { - item = $.trim(item); - return AutoForm.Utility.stringToDate(item); - }); + if (Array.isArray(val)) { + return val.map(item => AutoForm.Utility.stringToDate(item.trim())) } - return val; + return val } }, contextAdjust: function (context) { - var itemAtts = _.omit(context.atts, 'firstOption'); + const { firstOption, ...itemAtts } = context.atts // NOTE: We don't add firstOption to select2 input because // it doesn't make sense with the way select2 works. // build items list - context.items = []; + context.items = [] // When single-select and placeholder is passed, // the first option should be an empty option. - var multiple = itemAtts.multiple; - var select2Options = itemAtts.select2Options || {}; + const multiple = itemAtts.multiple + const select2Options = itemAtts.select2Options || {} if (!multiple && select2Options.placeholder) { - context.items.push(''); + context.items.push('') } // Check if option is selected - var isSelected = function(conVal, optVal) { - return _.isArray(conVal) ? _.contains(conVal, optVal) : optVal === conVal; - }; + const isSelected = function (conVal, optVal) { + return Array.isArray(conVal) + ? conVal.includes(optVal) + : optVal === conVal + } // Add all defined options - _.each(context.selectOptions, function(opt) { + context.selectOptions.forEach(opt => { if (opt.optgroup) { - var subItems = _.map(opt.options, function(subOpt) { + const subItems = opt.options.map(subOpt => { return { name: context.name, label: subOpt.label, @@ -79,12 +70,12 @@ AutoForm.addInputType('select2', { _id: subOpt.value, selected: isSelected(context.value, subOpt.value), atts: itemAtts - }; - }); + } + }) context.items.push({ optgroup: opt.optgroup, items: subItems - }); + }) } else { context.items.push({ name: context.name, @@ -96,19 +87,20 @@ AutoForm.addInputType('select2', { _id: opt.value, selected: isSelected(context.value, opt.value), atts: itemAtts - }); + }) } - }); + }) - return context; + return context } -}); +}) Template.afSelect2.helpers({ - atts: function addFormControlAtts() { - return _.omit(this.atts, 'select2Options'); + atts: function addFormControlAtts () { + const { select2Options, ...rest } = this.atts + return rest } -}); +}) Template.afSelect2.events({ 'select2:select select': function (event, template) { @@ -117,88 +109,79 @@ Template.afSelect2.events({ // changes, allowing us to retain selection properly by using this // in the template autorun. // Fixes #18 - var val = template.$('select').val(); - if (!_.isArray(val)) { val = [val]; } + let val = template.$('select').val() + + if (!Array.isArray(val)) { + val = [val] + } + template.$('select option').each(function () { - var $this = $(this); - var selected = val.indexOf($this.attr('value')) !== -1; - $this.prop('selected', selected).attr('selected', selected); - }); + const $this = $(this) + const selected = val.indexOf($this.attr('value')) !== -1 + $this.prop('selected', selected).attr('selected', selected) + }) } -}); +}) Template.afSelect2.onRendered(function () { - var template = this; - var $s = template.$('select'); - - // instanciate select2 - $s.select2(template.data.atts.select2Options || {}); + const template = this + const $s = template.$('select') + $s.select2(template.data.atts.select2Options || {}) template.autorun(function () { - var data = Template.currentData(); + const data = Template.currentData() + const values = [] + const currentValues = $s.val() - var values = []; - _.each(data.items, function (item) { - if (_.has(item, 'items')) { - _.each(item.items, function (subItem) { + data.items.forEach(item => { + if (Object.hasOwnProperty.call(item, 'items')) { + item.items.forEach(subItem => { if (subItem.selected) { - values.push(subItem.value); + values.push(subItem.value) } - }); + }) } else { if (item.selected) { - values.push(item.value); + values.push(item.value) } } - }); + }) - var $selects; + let $selects if (values.length === 0) { - $selects = template.$('select option'); + $selects = template.$('select option') } else { // Include any that were previously added as new tags - $selects = template.$('select option[data-select2-tag]'); + $selects = template.$('select option[data-select2-tag]') } $selects.each(function () { - var $this = $(this); + const $this = $(this) if ($this.attr('selected')) { - values.push($this.attr('value')); + values.push($this.attr('value')) } - }); + }) - var currentValues = $s.val(); - if ((!currentValues && values.length > 0) || - (currentValues && currentValues.toString() !== values.toString())) { + if (values.length > 0 && + (!currentValues || (currentValues && currentValues.toString() !== values.toString())) + ) { // select2 requires that we trigger change event // for it to realize it needs to update the select2 list. // We do it only if values have actually changed, // which should help prevent autosave infinite looping. - $s.val(values).trigger('change'); + $s.val(values) + //$s.trigger('change') + // sometimes the change event is not captured immediately, so we use + // a short timeout to ensure it, otherwise selected values may not show up + setTimeout(() => $s.trigger('change'), 10) } - }); -}); + }) +}) Template.afSelect2.onDestroyed(function () { try { if (this.view && this.view._domrange && this.$('select').data('select2')) { - this.$('select').select2('destroy'); + this.$('select').select2('destroy') } } catch (error) {} -}); - -/* - * BOOTSTRAP THEME - */ - -Template.afSelect2.copyAs('afSelect2_bootstrap3'); - -// The only difference is that we need to add "form-control" class -Template.afSelect2_bootstrap3.helpers({ - atts: function addFormControlAtts() { - var atts = _.omit(this.atts, 'select2Options'); - // Add bootstrap class - atts = AutoForm.Utility.addClass(atts, 'form-control'); - return atts; - } -}); +}) diff --git a/main.js b/main.js new file mode 100644 index 0000000..796abfe --- /dev/null +++ b/main.js @@ -0,0 +1,5 @@ +export const AutoformSelect2 = {} + +AutoformSelect2.load = async () => { + await import('./static') +} diff --git a/package.js b/package.js index 38224b7..a1e50be 100644 --- a/package.js +++ b/package.js @@ -1,18 +1,20 @@ +/* eslint-env meteor */ Package.describe({ name: 'aldeed:autoform-select2', + version: '4.0.0-rc.0', summary: 'Custom select2 input type for AutoForm', - version: '3.0.1', git: 'https://github.com/aldeed/meteor-autoform-select2.git' -}); +}) -Package.onUse(function(api) { - api.use('underscore@1.0.0'); - api.use('templating@1.0.0'); - api.use('blaze@2.0.0'); - api.use('aldeed:template-extension@4.0.0'); - api.use('aldeed:autoform@6.0.0'); - api.addFiles([ - 'autoform-select2.html', - 'autoform-select2.js' - ], 'client'); -}); +Package.onUse(function (api) { + api.versionsFrom(['2.3', '3.0']) + api.use([ + 'ecmascript', + 'templating@1.0.0', + 'blaze@2.0.0 || 3.0.0', + // api.use('aldeed:template-extension@4.0.0') + 'aldeed:autoform@6.0.0 || 7.0.0 || 8.0.0', + 'jquery@3.0.0' + ], 'client') + api.mainModule('main.js', 'client') +}) diff --git a/static.js b/static.js new file mode 100644 index 0000000..4d35699 --- /dev/null +++ b/static.js @@ -0,0 +1,2 @@ +import './autoform-select2.html' +import './autoform-select2.js'