tags if necessary and renest the characters directly into the element rather than inside the word
+ if (node._isSplit) {
+ node._next = node.nextSibling;
+ node.parentNode.appendChild(node); //put it at the end to keep the order correct.
+
+ } else if (node.parentNode._isSplit) {
+ node._parent = node.parentNode;
+ if (!node.previousSibling && node.firstChild) {
+ node.firstChild._isFirst = true;
+ }
+ if (node.nextSibling && node.nextSibling.textContent === " " && !node.nextSibling.nextSibling) { //if the last node inside a nested element is just a space (like Tnested ), remove it otherwise it'll get placed in the wrong order. Don't remove it right away, though, because we need to sense when words/characters are before a space like _isBeforeWordDelimiter(). Removing it now would make that a false negative.
+ spaceNodesToRemove.push(node.nextSibling);
+ }
+ node._next = (node.nextSibling && node.nextSibling._isFirst) ? null : node.nextSibling;
+ node.parentNode.removeChild(node);
+ nodes.splice(i--, 1);
+ l--;
+ } else if (!isChild) {
+ offset = (!node.nextSibling && _isBeforeWordDelimiter(node.parentNode, element, wordDelimiter)); //if this is the last letter in the word (and we're not breaking by lines and not positioning things absolutely), we need to add a space afterwards so that the characters don't just mash together
+ if (node.parentNode._parent) {
+ node.parentNode._parent.appendChild(node);
+ }
+ if (offset) {
+ node.parentNode.appendChild(_doc.createTextNode(" "));
+ }
+ if (tag === "span") {
+ node.style.display = "inline"; //so that word breaks are honored properly.
+ }
+ charArray.push(node);
+ }
+ } else if (node.parentNode._isSplit && !node._isSplit && node.innerHTML !== "") {
+ wordArray.push(node);
+ } else if (chars && !node._isSplit) {
+ if (tag === "span") {
+ node.style.display = "inline";
+ }
+ charArray.push(node);
+ }
+ }
+
+ i = spaceNodesToRemove.length;
+ while (--i > -1) {
+ spaceNodesToRemove[i].parentNode.removeChild(spaceNodesToRemove[i]);
+ }
+
+ if (lines) {
+ //the next 7 lines just give us the line width in the most reliable way and figure out the left offset (if position isn't relative or absolute). We must set the width along with text-align to ensure everything works properly for various alignments.
+ if (absolute) {
+ lineNode = _doc.createElement(tag);
+ element.appendChild(lineNode);
+ lineWidth = lineNode.offsetWidth + "px";
+ offset = (lineNode.offsetParent === element) ? 0 : element.offsetLeft;
+ element.removeChild(lineNode);
+ }
+ style = element.style.cssText;
+ element.style.cssText = "display:none;"; //to improve performance, set display:none on the element so that the browser doesn't have to worry about reflowing or rendering while we're renesting things. We'll revert the cssText later.
+ //we can't use element.innerHTML = "" because that causes IE to literally delete all the nodes and their content even though we've stored them in an array! So we must loop through the children and remove them.
+ while (element.firstChild) {
+ element.removeChild(element.firstChild);
+ }
+ addWordSpaces = (wordDelimiter === " " && (!absolute || (!words && !chars)));
+ for (i = 0; i < lines.length; i++) {
+ curLine = lines[i];
+ lineNode = _doc.createElement(tag);
+ lineNode.style.cssText = "display:block;text-align:" + textAlign + ";position:" + (absolute ? "absolute;" : "relative;");
+ if (linesClass) {
+ lineNode.className = linesClass + (iterateLine ? i+1 : "");
+ }
+ lineArray.push(lineNode);
+ l = curLine.length;
+ for (j = 0; j < l; j++) {
+ if (curLine[j].nodeName !== "BR") {
+ node = curLine[j];
+ lineNode.appendChild(node);
+ if (addWordSpaces && node._wordEnd) {
+ lineNode.appendChild(_doc.createTextNode(" "));
+ }
+ if (absolute) {
+ if (j === 0) {
+ lineNode.style.top = (node._y) + "px";
+ lineNode.style.left = (paddingLeft + offset) + "px";
+ }
+ node.style.top = "0px";
+ if (offset) {
+ node.style.left = (node._x - offset) + "px";
+ }
+ }
+ }
+ }
+ if (l === 0) { //if there are no nodes in the line (typically meaning there were two consecutive
tags, just add a non-breaking space so that things display properly.
+ lineNode.innerHTML = " ";
+ } else if (!words && !chars) {
+ _deWordify(lineNode);
+ _swapText(lineNode, String.fromCharCode(160), " ");
+ }
+ if (absolute) {
+ lineNode.style.width = lineWidth;
+ lineNode.style.height = node._h + "px";
+ }
+ element.appendChild(lineNode);
+ }
+ element.style.cssText = style;
+ }
+
+ //if everything shifts to being position:absolute, the container can collapse in terms of height or width, so fix that here.
+ if (absolute) {
+ if (origHeight > element.clientHeight) {
+ element.style.height = (origHeight - padTopAndBottom) + "px";
+ if (element.clientHeight < origHeight) { //IE8 and earlier use a different box model - we must include padding and borders
+ element.style.height = (origHeight + borderTopAndBottom)+ "px";
+ }
+ }
+ if (origWidth > element.clientWidth) {
+ element.style.width = (origWidth - padLeftAndRight) + "px";
+ if (element.clientWidth < origWidth) { //IE8 and earlier use a different box model - we must include padding and borders
+ element.style.width = (origWidth + borderLeftAndRight)+ "px";
+ }
+ }
+ }
+ _pushReversed(allChars, charArray);
+ if (words) {
+ _pushReversed(allWords, wordArray);
+ }
+ _pushReversed(allLines, lineArray);
+ },
+ _splitRawText = function(element, vars, wordStart, charStart) {
+ var tag = vars.tag ? vars.tag : (vars.span ? "span" : "div"),
+ types = vars.type || vars.split || "chars,words,lines",
+ //words = (types.indexOf("words") !== -1),
+ chars = (types.indexOf("chars") !== -1),
+ absolute = (vars.position === "absolute" || vars.absolute === true),
+ wordDelimiter = vars.wordDelimiter || " ",
+ space = wordDelimiter !== " " ? "" : (absolute ? " " : " "),
+ wordEnd = "",
+ wordIsOpen = true,
+ specialChars = vars.specialChars ? (typeof(vars.specialChars) === "function" ? vars.specialChars : _findSpecialChars) : null, //specialChars can be an array or a function. For performance reasons, we always set this local "specialChars" to a function to which we pass the remaining text and whatever the original vars.specialChars was so that if it's an array, it works with the _findSpecialChars() function.
+ text, splitText, i, j, l, character, hasTagStart, emojiPair1, emojiPair2, testResult,
+ container = _doc.createElement("div"),
+ parent = element.parentNode;
+
+ parent.insertBefore(container, element);
+ container.textContent = element.nodeValue;
+ parent.removeChild(element);
+ element = container;
+ text = _getText(element);
+ hasTagStart = text.indexOf("<") !== -1;
+
+ if (vars.reduceWhiteSpace !== false) {
+ text = text.replace(_multipleSpacesExp, " ").replace(_stripExp, "");
+ }
+ if (hasTagStart) {
+ text = text.split("<").join("{{LT}}"); //we can't leave "<" in the string, or when we set the innerHTML, it can be interpreted as a node
+ }
+ l = text.length;
+ splitText = ((text.charAt(0) === " ") ? space : "") + wordStart();
+ for (i = 0; i < l; i++) {
+ character = text.charAt(i);
+ if (specialChars && (testResult = specialChars(text.substr(i), vars.specialChars))) { // look for any specialChars that were declared. Remember, they can be passed in like {specialChars:["मी", "पा", "है"]} or a function could be defined instead. Either way, the function should return the number of characters that should be grouped together for this "character".
+ character = text.substr(i, testResult || 1);
+ splitText += (chars && character !== " ") ? charStart() + character + "" : character;
+ i += testResult - 1;
+
+ } else if (character === wordDelimiter && text.charAt(i-1) !== wordDelimiter && i) {
+ splitText += wordIsOpen ? wordEnd : "";
+ wordIsOpen = false;
+ while (text.charAt(i + 1) === wordDelimiter) { //skip over empty spaces (to avoid making them words)
+ splitText += space;
+ i++;
+ }
+ if (i === l-1) {
+ splitText += space;
+ } else if (text.charAt(i + 1) !== ")") {
+ splitText += space + wordStart();
+ wordIsOpen = true;
+ }
+
+ } else if (character === "{" && text.substr(i, 6) === "{{LT}}") {
+ splitText += chars ? charStart() + "{{LT}}" + "" : "{{LT}}";
+ i += 5;
+
+ } else if ((character.charCodeAt(0) >= _emojiStart && character.charCodeAt(0) <= _emojiEnd) || (text.charCodeAt(i+1) >= 0xFE00 && text.charCodeAt(i+1) <= 0xFE0F)) { //special emoji characters use 2 or 4 unicode characters that we must keep together.
+ emojiPair1 = _emojiPairCode(text.substr(i, 2));
+ emojiPair2 = _emojiPairCode(text.substr(i + 2, 2));
+ j = ((emojiPair1 >= _emojiRegionStart && emojiPair1 <= _emojiRegionEnd && emojiPair2 >= _emojiRegionStart && emojiPair2 <= _emojiRegionEnd) || (emojiPair2 >= _emojiModStart && emojiPair2 <= _emojiModEnd)) ? 4 : 2;
+ splitText += (chars && character !== " ") ? charStart() + text.substr(i, j) + "" : text.substr(i, j);
+ i += j - 1;
+ } else {
+ splitText += (chars && character !== " ") ? charStart() + character + "" : character;
+ }
+ }
+ element.outerHTML = splitText + (wordIsOpen ? wordEnd : "");
+ if (hasTagStart) {
+ _swapText(parent, "{{LT}}", "<"); //note: don't perform this on "element" because that gets replaced with all new elements when we set element.outerHTML.
+ }
+ },
+ _split = function(element, vars, wordStart, charStart) {
+ var children = _slice(element.childNodes),
+ l = children.length,
+ absolute = (vars.position === "absolute" || vars.absolute === true),
+ i, child;
+ if (element.nodeType !== 3 || l > 1) {
+ vars.absolute = false;
+ for (i = 0; i < l; i++) {
+ child = children[i];
+ if (child.nodeType !== 3 || /\S+/.test(child.nodeValue)) {
+ if (absolute && child.nodeType !== 3 && _getStyle(child, "display", null, true) === "inline") { //if there's a child node that's display:inline, switch it to inline-block so that absolute positioning works properly (most browsers don't report offsetTop/offsetLeft properly inside a for example)
+ child.style.display = "inline-block";
+ child.style.position = "relative";
+ }
+ child._isSplit = true;
+ _split(child, vars, wordStart, charStart); //don't split lines on child elements
+ }
+ }
+ vars.absolute = absolute;
+ element._isSplit = true;
+ return;
+ }
+ _splitRawText(element, vars, wordStart, charStart);
+
+ },
+ p = SplitText.prototype;
+
+ p.split = function(vars) {
+ if (this.isSplit) {
+ this.revert();
+ }
+ this.vars = vars = vars || this.vars;
+ this._originals.length = this.chars.length = this.words.length = this.lines.length = 0;
+ var i = this.elements.length,
+ tag = vars.tag ? vars.tag : (vars.span ? "span" : "div"),
+ wordStart = _cssClassFunc(vars.wordsClass, tag),
+ charStart = _cssClassFunc(vars.charsClass, tag),
+ origHeight, origWidth, e;
+ //we split in reversed order so that if/when we position:absolute elements, they don't affect the position of the ones after them in the document flow (shifting them up as they're taken out of the document flow).
+ while (--i > -1) {
+ e = this.elements[i];
+ this._originals[i] = e.innerHTML;
+ origHeight = e.clientHeight;
+ origWidth = e.clientWidth;
+ _split(e, vars, wordStart, charStart);
+ _setPositionsAfterSplit(e, vars, this.chars, this.words, this.lines, origWidth, origHeight);
+ }
+ this.chars.reverse();
+ this.words.reverse();
+ this.lines.reverse();
+ this.isSplit = true;
+ return this;
+ };
+
+ p.revert = function() {
+ if (!this._originals) {
+ throw("revert() call wasn't scoped properly.");
+ }
+ var i = this._originals.length;
+ while (--i > -1) {
+ this.elements[i].innerHTML = this._originals[i];
+ }
+ this.chars = [];
+ this.words = [];
+ this.lines = [];
+ this.isSplit = false;
+ return this;
+ };
+
+ SplitText.selector = window.$ || window.jQuery || function(e) {
+ var selector = window.$ || window.jQuery;
+ if (selector) {
+ SplitText.selector = selector;
+ return selector(e);
+ }
+ return (typeof(document) === "undefined") ? e : (document.querySelectorAll ? document.querySelectorAll(e) : document.getElementById((e.charAt(0) === "#") ? e.substr(1) : e));
+ };
+ SplitText.version = "0.7.0";
+
+})(_gsScope);
+
+//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
+(function(name) {
+ "use strict";
+ var getGlobal = function() {
+ return (_gsScope.GreenSockGlobals || _gsScope)[name];
+ };
+ if (typeof(module) !== "undefined" && module.exports) { //node
+ module.exports = getGlobal();
+ } else if (typeof(define) === "function" && define.amd) { //AMD
+ define([], getGlobal);
+ }
+}("SplitText"));
\ No newline at end of file
diff --git a/lib/pixi/list.html b/lib/pixi/list.html
index 7008b41..f1a5499 100644
--- a/lib/pixi/list.html
+++ b/lib/pixi/list.html
@@ -10,6 +10,7 @@
+
@@ -75,7 +76,8 @@ app.loadTextures([
const bambooList = new List(bamboos, {
orientation: 'horizontal',
- width: 300
+ width: 300,
+ app
})
bambooList.x = 200
bambooList.y = 10
@@ -98,7 +100,8 @@ app.loadTextures([
const textList = new List(texts, {
orientation: 'vertical',
height: 200,
- padding: 2
+ padding: 2,
+ app
})
textList.x = 200
textList.y = 200
diff --git a/lib/pixi/list.js b/lib/pixi/list.js
index 6b717b6..530c9d8 100644
--- a/lib/pixi/list.js
+++ b/lib/pixi/list.js
@@ -39,6 +39,8 @@ export default class List extends PIXI.Container {
* left, center and right.
* @param {string} [opts.verticalAlign=middle] - The vertical position of the items. Possible values are
* top, middle and bottom.
+ * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to
+ * scroll your list.
*/
constructor(items = [], opts = {}) {
@@ -51,7 +53,8 @@ export default class List extends PIXI.Container {
align: 'left',
verticalAlign: 'middle',
width: null,
- height: null
+ height: null,
+ app: null
}, opts)
this.__items = items
@@ -97,6 +100,22 @@ export default class List extends PIXI.Container {
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
+ this.on('scroll', this.onScroll.bind(this))
+
+ // mousewheel
+ //--------------------
+ if (this.opts.app) {
+ const app = this.opts.app
+ app.view.addEventListener('mousewheel', event => {
+ event.preventDefault()
+ const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
+ const x = event.clientX - app.view.getBoundingClientRect().left
+ const y = event.clientY - app.view.getBoundingClientRect().top
+ if (bounds.contains(x, y)) {
+ this.emit('scroll', event)
+ }
+ })
+ }
this.layout()
@@ -324,12 +343,39 @@ export default class List extends PIXI.Container {
}
}
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onScroll(event) {
+
+ this.capture(event)
+
+ if (this.opts.orientation === 'horizontal') {
+ this.container.position.x -= event.deltaX
+ if (this.container.position.x > 0) {
+ this.container.position.x = 0
+ } else if (this.container.position.x + this.innerWidth < this.opts.width) {
+ this.container.position.x = this.opts.width - this.innerWidth
+ }
+ } else {
+ this.container.position.y -= event.deltaY
+ if (this.container.position.y > 0) {
+ this.container.position.y = 0
+ } else if (this.container.position.y + this.innerHeight < this.opts.height) {
+ this.container.position.y = this.opts.height - this.innerHeight
+ }
+ }
+ }
+
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
- Events.capturedBy(event.data.originalEvent, this)
+ const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
+ Events.capturedBy(originalEvent, this)
}
}