diff --git a/examples/bclys/index.js b/examples/bclys/index.js index bd90c8a31..35e076350 100644 --- a/examples/bclys/index.js +++ b/examples/bclys/index.js @@ -1,5 +1,5 @@ (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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o tags. See notes at bottom of this file. +var body, transform, timer, scrollVelocity, cssListDragon; - var format = window.templex || require('templex'); +/* inject:css */ +cssListDragon = 'div.dragon-list{position:relative;background-color:#fff}div.dragon-list>div,div.dragon-list>ul{position:absolute;left:0;right:0}div.dragon-list>div{text-align:center;background-color:#00796b;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);overflow:hidden;white-space:nowrap}div.dragon-list>ul{overflow-y:auto;bottom:0;margin:0;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}div.dragon-list>ul>li,li.dragon-pop{white-space:nowrap;list-style-type:none;border:0 solid #f4f4f4;border-bottom:1px solid #e0e0e0;cursor:move;transition:border-top-width .2s}div.dragon-list>ul>li:last-child{height:0;border-bottom:none}li.dragon-pop{position:fixed;background-color:#fff;border:1px solid #e0e0e0;left:0;top:0;overflow-x:hidden;box-shadow:rgba(0,0,0,.188235) 0 10px 20px,rgba(0,0,0,.227451) 0 6px 6px}'; +/* endinject */ - var REVERT_TO_STYLESHEET_VALUE = null; // null removes the style +/** + * @constructor ListDragon + * + * @desc This object services a set of item lists that allow dragging and dropping items within and between lists in a set. + * + * Two strategies are supported: + * + * 1. Supply your own HTML markup and let the API build the item models for you. + * To use this strategy, script your HTML and provide one of these: + * * an array of all the list item (`
  • `) tags + * * a CSS selector that points to all the list item tags + * 2. Supply your own item models and let the API build the HTML markup for you. + * To use this strategy, provide an array of model lists. + * + * The new ListDragon object's `modelLists` property references the array of model lists the API constructed for you in strategy #1 or the array of model lists you supplied for strategy #2. + * + * After the user performs a successful drag-and-drop operation, the position of the model references within the `modelLists` array is rearranged. (The models themselves are the original objects as supplied in the model lists; they are not rebuilt or altered in any way. Just the references to them are moved around.) + * + * @param {string|Element[]|modelListType[]} selectorOrModelLists - You must supply one of the items in **bold** below: + * + * 1. _For strategy #1 above (API creates models from supplied elements):_ All the list item (`
  • `) DOM elements of all the lists you want the new object to manage, as either: + * 1. **A CSS selector;** _or_ + * 2. **An array of DOM elements** + * 2. _For strategy #2 above (API creates elements from supplied models):_ **An array of model lists,** each of which is in one of the following forms: + * 1. An array of item models (with various option properties hanging off of it); _and/or_ + * 2. A {@link modelListType} object with those same various option properties including the required `models` property containing that same array of item models. + * + * In either case (2.1 or 2.2), each element of such arrays of item models may take the form of: + * * A string primitive; _or_ + * * A {@link itemModelType} object with a various option properties including the required `label` property containing a string primitive. + * + * Regarding these string primitives, each is either: + * * A string to be displayed in the list item; _or_ + * * A format string with other property values merged in, the result of which is to be displayed in the list item. + * + * @param {object} [options={}] - You may supply "global" template variables here, representing the "outer scope," after first searching each model and then each model list. + * @param {undefined|null|Element|string} [cssStylesheetReferenceElement] - Determines where to insert the stylesheet. (This is the only formal option.) Passed to css-injector, the overloads are (from css-injector docs): + * * `undefined` type (or omitted): injects stylesheet at top of `...` element + * * `null` value: injects stylesheet at bottom of `...` element + * * `Element` type: injects stylesheet immediately before given element, wherever it is found. + * * `string` type: injects stylesheet immediately before given first element found that matches the given css selector. + */ +function ListDragon(selectorOrModelLists, options) { - var body, transform, timer, scrollVelocity; + if (!(this instanceof ListDragon)) { + throw error('Not called with "new" keyword.'); + } - /* inject:css */ - (function(){var a="div.dragon-list{position:relative;background-color:#fff}div.dragon-list>div,div.dragon-list>ul{position:absolute;left:0;right:0}div.dragon-list>div{text-align:center;background-color:#00796b;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);overflow:hidden;white-space:nowrap}div.dragon-list>ul{overflow-y:auto;bottom:0;margin:0;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}div.dragon-list>ul>li,li.dragon-pop{white-space:nowrap;list-style-type:none;border:0 solid #f4f4f4;border-bottom:1px solid #e0e0e0;cursor:move;transition:border-top-width .2s}div.dragon-list>ul>li:last-child{height:0;border-bottom:none}li.dragon-pop{position:fixed;background-color:#fff;border:1px solid #e0e0e0;left:0;top:0;overflow-x:hidden;box-shadow:rgba(0,0,0,.188235) 0 10px 20px,rgba(0,0,0,.227451) 0 6px 6px}",b=document.createElement("style"),head=document.head||document.getElementsByTagName("head")[0];b.type="text/css";if(b.styleSheet)b.styleSheet.cssText=a;else b.appendChild(document.createTextNode(a));head.insertBefore(b,head.firstChild)})(); - /* endinject */ + var self = this, modelLists, items; - /** - * @constructor ListDragon - * - * @desc This object services a set of item lists that allow dragging and dropping items within and between lists in a set. - * - * Two strategies are supported: - * - * 1. Supply your own HTML markup and let the API build the item models for you. - * To use this strategy, script your HTML and provide one of these: - * * an array of all the list item (`
  • `) tags - * * a CSS selector that points to all the list item tags - * 2. Supply your own item models and let the API build the HTML markup for you. - * To use this strategy, provide an array of model lists. - * - * The new ListDragon object's `modelLists` property references the array of model lists the API constructed for you in strategy #1 or the array of model lists you supplied for strategy #2. - * - * After the user performs a successful drag-and-drop operation, the position of the model references within the `modelLists` array is rearranged. (The models themselves are the original objects as supplied in the model lists; they are not rebuilt or altered in any way. Just the references to them are moved around.) - * - * @param {string|Element[]|modelListType[]} selectorOrModelLists - You must supply one of the items in **bold** below: - * - * 1. _For strategy #1 above (API creates models from supplied elements):_ All the list item (`
  • `) DOM elements of all the lists you want the new object to manage, as either: - * 1. **A CSS selector;** _or_ - * 2. **An array of DOM elements** - * 2. _For strategy #2 above (API creates elements from supplied models):_ **An array of model lists,** each of which is in one of the following forms: - * 1. An array of item models (with various option properties hanging off of it); _and/or_ - * 2. A {@link modelListType} object with those same various option properties including the required `models` property containing that same array of item models. - * - * In either case (2.1 or 2.2), each element of such arrays of item models may take the form of: - * * A string primitive; _or_ - * * A {@link itemModelType} object with a various option properties including the required `label` property containing a string primitive. - * - * Regarding these string primitives, each is either: - * * A string to be displayed in the list item; _or_ - * * A format string with other property values merged in, the result of which is to be displayed in the list item. - * - * @param {object} [options={}] - There are no formal options, but you can supply "global" template variables here, representing the "outer scope," after first searching each model and then each model list. - */ - function ListDragon(selectorOrModelLists, options) { + options = options || {}; - if (!(this instanceof ListDragon)) { - throw error('Not called with "new" keyword.'); - } + if (typeof selectorOrModelLists === 'string') { + items = toArray(document.querySelectorAll(selectorOrModelLists)); + modelLists = createModelListsFromListElements(items); + } else if (selectorOrModelLists[0] instanceof Element) { + items = toArray(selectorOrModelLists); + modelLists = createModelListsFromListElements(items); + } else { + // param is array of model lists + // build new