Added Scrollview.

This commit is contained in:
Sebastian Kupke 2019-05-14 13:56:05 +02:00
parent fada4f9a9d
commit 275a5d0b04
33 changed files with 18231 additions and 2297 deletions

8447
dist/iwmlib.3rdparty.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,893 +1,3 @@
/*
Syntax highlighting with language autodetection.
https://highlightjs.org/
*/
(function(factory) {
// Find the global object for export to both the browser and web workers.
var globalObject = typeof window === 'object' && window ||
typeof self === 'object' && self;
// Setup highlight.js for different environments. First is Node.js or
// CommonJS.
if(typeof exports !== 'undefined') {
factory(exports);
} else if(globalObject) {
// Export hljs globally even when using AMD for cases when this script
// is loaded with others that may still expect a global hljs.
globalObject.hljs = factory({});
// Finally register the global hljs with AMD.
if(typeof define === 'function' && define.amd) {
define([], function() {
return globalObject.hljs;
});
}
}
}(function(hljs) {
// Convenience variables for build-in objects
var ArrayProto = [],
objectKeys = Object.keys;
// Global internal variables used within the highlight.js library.
var languages = {},
aliases = {};
// Regular expressions used throughout the highlight.js library.
var noHighlightRe = /^(no-?highlight|plain|text)$/i,
languagePrefixRe = /\blang(?:uage)?-([\w-]+)\b/i,
fixMarkupRe = /((^(<[^>]+>|\t|)+|(?:\n)))/gm;
// The object will be assigned by the build tool. It used to synchronize API
// of external language files with minified version of the highlight.js library.
var API_REPLACES;
var spanEndTag = '</span>';
// Global options used when within external APIs. This is modified when
// calling the `hljs.configure` function.
var options = {
classPrefix: 'hljs-',
tabReplace: null,
useBR: false,
languages: undefined
};
/* Utility functions */
function escape(value) {
return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function tag(node) {
return node.nodeName.toLowerCase();
}
function testRe(re, lexeme) {
var match = re && re.exec(lexeme);
return match && match.index === 0;
}
function isNotHighlighted(language) {
return noHighlightRe.test(language);
}
function blockLanguage(block) {
var i, match, length, _class;
var classes = block.className + ' ';
classes += block.parentNode ? block.parentNode.className : '';
// language-* takes precedence over non-prefixed class names.
match = languagePrefixRe.exec(classes);
if (match) {
return getLanguage(match[1]) ? match[1] : 'no-highlight';
}
classes = classes.split(/\s+/);
for (i = 0, length = classes.length; i < length; i++) {
_class = classes[i];
if (isNotHighlighted(_class) || getLanguage(_class)) {
return _class;
}
}
}
function inherit(parent) { // inherit(parent, override_obj, override_obj, ...)
var key;
var result = {};
var objects = Array.prototype.slice.call(arguments, 1);
for (key in parent)
result[key] = parent[key];
objects.forEach(function(obj) {
for (key in obj)
result[key] = obj[key];
});
return result;
}
/* Stream merging */
function nodeStream(node) {
var result = [];
(function _nodeStream(node, offset) {
for (var child = node.firstChild; child; child = child.nextSibling) {
if (child.nodeType === 3)
offset += child.nodeValue.length;
else if (child.nodeType === 1) {
result.push({
event: 'start',
offset: offset,
node: child
});
offset = _nodeStream(child, offset);
// Prevent void elements from having an end tag that would actually
// double them in the output. There are more void elements in HTML
// but we list only those realistically expected in code display.
if (!tag(child).match(/br|hr|img|input/)) {
result.push({
event: 'stop',
offset: offset,
node: child
});
}
}
}
return offset;
})(node, 0);
return result;
}
function mergeStreams(original, highlighted, value) {
var processed = 0;
var result = '';
var nodeStack = [];
function selectStream() {
if (!original.length || !highlighted.length) {
return original.length ? original : highlighted;
}
if (original[0].offset !== highlighted[0].offset) {
return (original[0].offset < highlighted[0].offset) ? original : highlighted;
}
/*
To avoid starting the stream just before it should stop the order is
ensured that original always starts first and closes last:
if (event1 == 'start' && event2 == 'start')
return original;
if (event1 == 'start' && event2 == 'stop')
return highlighted;
if (event1 == 'stop' && event2 == 'start')
return original;
if (event1 == 'stop' && event2 == 'stop')
return highlighted;
... which is collapsed to:
*/
return highlighted[0].event === 'start' ? original : highlighted;
}
function open(node) {
function attr_str(a) {return ' ' + a.nodeName + '="' + escape(a.value).replace('"', '&quot;') + '"';}
result += '<' + tag(node) + ArrayProto.map.call(node.attributes, attr_str).join('') + '>';
}
function close(node) {
result += '</' + tag(node) + '>';
}
function render(event) {
(event.event === 'start' ? open : close)(event.node);
}
while (original.length || highlighted.length) {
var stream = selectStream();
result += escape(value.substring(processed, stream[0].offset));
processed = stream[0].offset;
if (stream === original) {
/*
On any opening or closing tag of the original markup we first close
the entire highlighted node stack, then render the original tag along
with all the following original tags at the same offset and then
reopen all the tags on the highlighted stack.
*/
nodeStack.reverse().forEach(close);
do {
render(stream.splice(0, 1)[0]);
stream = selectStream();
} while (stream === original && stream.length && stream[0].offset === processed);
nodeStack.reverse().forEach(open);
} else {
if (stream[0].event === 'start') {
nodeStack.push(stream[0].node);
} else {
nodeStack.pop();
}
render(stream.splice(0, 1)[0]);
}
}
return result + escape(value.substr(processed));
}
/* Initialization */
function expand_mode(mode) {
if (mode.variants && !mode.cached_variants) {
mode.cached_variants = mode.variants.map(function(variant) {
return inherit(mode, {variants: null}, variant);
});
}
return mode.cached_variants || (mode.endsWithParent && [inherit(mode)]) || [mode];
}
function restoreLanguageApi(obj) {
if(API_REPLACES && !obj.langApiRestored) {
obj.langApiRestored = true;
for(var key in API_REPLACES)
obj[key] && (obj[API_REPLACES[key]] = obj[key]);
(obj.contains || []).concat(obj.variants || []).forEach(restoreLanguageApi);
}
}
function compileLanguage(language) {
function reStr(re) {
return (re && re.source) || re;
}
function langRe(value, global) {
return new RegExp(
reStr(value),
'm' + (language.case_insensitive ? 'i' : '') + (global ? 'g' : '')
);
}
// joinRe logically computes regexps.join(separator), but fixes the
// backreferences so they continue to match.
function joinRe(regexps, separator) {
// backreferenceRe matches an open parenthesis or backreference. To avoid
// an incorrect parse, it additionally matches the following:
// - [...] elements, where the meaning of parentheses and escapes change
// - other escape sequences, so we do not misparse escape sequences as
// interesting elements
// - non-matching or lookahead parentheses, which do not capture. These
// follow the '(' with a '?'.
var backreferenceRe = /\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./;
var numCaptures = 0;
var ret = '';
for (var i = 0; i < regexps.length; i++) {
var offset = numCaptures;
var re = reStr(regexps[i]);
if (i > 0) {
ret += separator;
}
while (re.length > 0) {
var match = backreferenceRe.exec(re);
if (match == null) {
ret += re;
break;
}
ret += re.substring(0, match.index);
re = re.substring(match.index + match[0].length);
if (match[0][0] == '\\' && match[1]) {
// Adjust the backreference.
ret += '\\' + String(Number(match[1]) + offset);
} else {
ret += match[0];
if (match[0] == '(') {
numCaptures++;
}
}
}
}
return ret;
}
function compileMode(mode, parent) {
if (mode.compiled)
return;
mode.compiled = true;
mode.keywords = mode.keywords || mode.beginKeywords;
if (mode.keywords) {
var compiled_keywords = {};
var flatten = function(className, str) {
if (language.case_insensitive) {
str = str.toLowerCase();
}
str.split(' ').forEach(function(kw) {
var pair = kw.split('|');
compiled_keywords[pair[0]] = [className, pair[1] ? Number(pair[1]) : 1];
});
};
if (typeof mode.keywords === 'string') { // string
flatten('keyword', mode.keywords);
} else {
objectKeys(mode.keywords).forEach(function (className) {
flatten(className, mode.keywords[className]);
});
}
mode.keywords = compiled_keywords;
}
mode.lexemesRe = langRe(mode.lexemes || /\w+/, true);
if (parent) {
if (mode.beginKeywords) {
mode.begin = '\\b(' + mode.beginKeywords.split(' ').join('|') + ')\\b';
}
if (!mode.begin)
mode.begin = /\B|\b/;
mode.beginRe = langRe(mode.begin);
if (mode.endSameAsBegin)
mode.end = mode.begin;
if (!mode.end && !mode.endsWithParent)
mode.end = /\B|\b/;
if (mode.end)
mode.endRe = langRe(mode.end);
mode.terminator_end = reStr(mode.end) || '';
if (mode.endsWithParent && parent.terminator_end)
mode.terminator_end += (mode.end ? '|' : '') + parent.terminator_end;
}
if (mode.illegal)
mode.illegalRe = langRe(mode.illegal);
if (mode.relevance == null)
mode.relevance = 1;
if (!mode.contains) {
mode.contains = [];
}
mode.contains = Array.prototype.concat.apply([], mode.contains.map(function(c) {
return expand_mode(c === 'self' ? mode : c);
}));
mode.contains.forEach(function(c) {compileMode(c, mode);});
if (mode.starts) {
compileMode(mode.starts, parent);
}
var terminators =
mode.contains.map(function(c) {
return c.beginKeywords ? '\\.?(?:' + c.begin + ')\\.?' : c.begin;
})
.concat([mode.terminator_end, mode.illegal])
.map(reStr)
.filter(Boolean);
mode.terminators = terminators.length ? langRe(joinRe(terminators, '|'), true) : {exec: function(/*s*/) {return null;}};
}
compileMode(language);
}
/*
Core highlighting function. Accepts a language name, or an alias, and a
string with the code to highlight. Returns an object with the following
properties:
- relevance (int)
- value (an HTML string with highlighting markup)
*/
function highlight(name, value, ignore_illegals, continuation) {
function escapeRe(value) {
return new RegExp(value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'm');
}
function subMode(lexeme, mode) {
var i, length;
for (i = 0, length = mode.contains.length; i < length; i++) {
if (testRe(mode.contains[i].beginRe, lexeme)) {
if (mode.contains[i].endSameAsBegin) {
mode.contains[i].endRe = escapeRe( mode.contains[i].beginRe.exec(lexeme)[0] );
}
return mode.contains[i];
}
}
}
function endOfMode(mode, lexeme) {
if (testRe(mode.endRe, lexeme)) {
while (mode.endsParent && mode.parent) {
mode = mode.parent;
}
return mode;
}
if (mode.endsWithParent) {
return endOfMode(mode.parent, lexeme);
}
}
function isIllegal(lexeme, mode) {
return !ignore_illegals && testRe(mode.illegalRe, lexeme);
}
function keywordMatch(mode, match) {
var match_str = language.case_insensitive ? match[0].toLowerCase() : match[0];
return mode.keywords.hasOwnProperty(match_str) && mode.keywords[match_str];
}
function buildSpan(classname, insideSpan, leaveOpen, noPrefix) {
var classPrefix = noPrefix ? '' : options.classPrefix,
openSpan = '<span class="' + classPrefix,
closeSpan = leaveOpen ? '' : spanEndTag;
openSpan += classname + '">';
return openSpan + insideSpan + closeSpan;
}
function processKeywords() {
var keyword_match, last_index, match, result;
if (!top.keywords)
return escape(mode_buffer);
result = '';
last_index = 0;
top.lexemesRe.lastIndex = 0;
match = top.lexemesRe.exec(mode_buffer);
while (match) {
result += escape(mode_buffer.substring(last_index, match.index));
keyword_match = keywordMatch(top, match);
if (keyword_match) {
relevance += keyword_match[1];
result += buildSpan(keyword_match[0], escape(match[0]));
} else {
result += escape(match[0]);
}
last_index = top.lexemesRe.lastIndex;
match = top.lexemesRe.exec(mode_buffer);
}
return result + escape(mode_buffer.substr(last_index));
}
function processSubLanguage() {
var explicit = typeof top.subLanguage === 'string';
if (explicit && !languages[top.subLanguage]) {
return escape(mode_buffer);
}
var result = explicit ?
highlight(top.subLanguage, mode_buffer, true, continuations[top.subLanguage]) :
highlightAuto(mode_buffer, top.subLanguage.length ? top.subLanguage : undefined);
// Counting embedded language score towards the host language may be disabled
// with zeroing the containing mode relevance. Usecase in point is Markdown that
// allows XML everywhere and makes every XML snippet to have a much larger Markdown
// score.
if (top.relevance > 0) {
relevance += result.relevance;
}
if (explicit) {
continuations[top.subLanguage] = result.top;
}
return buildSpan(result.language, result.value, false, true);
}
function processBuffer() {
result += (top.subLanguage != null ? processSubLanguage() : processKeywords());
mode_buffer = '';
}
function startNewMode(mode) {
result += mode.className? buildSpan(mode.className, '', true): '';
top = Object.create(mode, {parent: {value: top}});
}
function processLexeme(buffer, lexeme) {
mode_buffer += buffer;
if (lexeme == null) {
processBuffer();
return 0;
}
var new_mode = subMode(lexeme, top);
if (new_mode) {
if (new_mode.skip) {
mode_buffer += lexeme;
} else {
if (new_mode.excludeBegin) {
mode_buffer += lexeme;
}
processBuffer();
if (!new_mode.returnBegin && !new_mode.excludeBegin) {
mode_buffer = lexeme;
}
}
startNewMode(new_mode, lexeme);
return new_mode.returnBegin ? 0 : lexeme.length;
}
var end_mode = endOfMode(top, lexeme);
if (end_mode) {
var origin = top;
if (origin.skip) {
mode_buffer += lexeme;
} else {
if (!(origin.returnEnd || origin.excludeEnd)) {
mode_buffer += lexeme;
}
processBuffer();
if (origin.excludeEnd) {
mode_buffer = lexeme;
}
}
do {
if (top.className) {
result += spanEndTag;
}
if (!top.skip && !top.subLanguage) {
relevance += top.relevance;
}
top = top.parent;
} while (top !== end_mode.parent);
if (end_mode.starts) {
if (end_mode.endSameAsBegin) {
end_mode.starts.endRe = end_mode.endRe;
}
startNewMode(end_mode.starts, '');
}
return origin.returnEnd ? 0 : lexeme.length;
}
if (isIllegal(lexeme, top))
throw new Error('Illegal lexeme "' + lexeme + '" for mode "' + (top.className || '<unnamed>') + '"');
/*
Parser should not reach this point as all types of lexemes should be caught
earlier, but if it does due to some bug make sure it advances at least one
character forward to prevent infinite looping.
*/
mode_buffer += lexeme;
return lexeme.length || 1;
}
var language = getLanguage(name);
if (!language) {
throw new Error('Unknown language: "' + name + '"');
}
compileLanguage(language);
var top = continuation || language;
var continuations = {}; // keep continuations for sub-languages
var result = '', current;
for(current = top; current !== language; current = current.parent) {
if (current.className) {
result = buildSpan(current.className, '', true) + result;
}
}
var mode_buffer = '';
var relevance = 0;
try {
var match, count, index = 0;
while (true) {
top.terminators.lastIndex = index;
match = top.terminators.exec(value);
if (!match)
break;
count = processLexeme(value.substring(index, match.index), match[0]);
index = match.index + count;
}
processLexeme(value.substr(index));
for(current = top; current.parent; current = current.parent) { // close dangling modes
if (current.className) {
result += spanEndTag;
}
}
return {
relevance: relevance,
value: result,
language: name,
top: top
};
} catch (e) {
if (e.message && e.message.indexOf('Illegal') !== -1) {
return {
relevance: 0,
value: escape(value)
};
} else {
throw e;
}
}
}
/*
Highlighting with language detection. Accepts a string with the code to
highlight. Returns an object with the following properties:
- language (detected language)
- relevance (int)
- value (an HTML string with highlighting markup)
- second_best (object with the same structure for second-best heuristically
detected language, may be absent)
*/
function highlightAuto(text, languageSubset) {
languageSubset = languageSubset || options.languages || objectKeys(languages);
var result = {
relevance: 0,
value: escape(text)
};
var second_best = result;
languageSubset.filter(getLanguage).filter(autoDetection).forEach(function(name) {
var current = highlight(name, text, false);
current.language = name;
if (current.relevance > second_best.relevance) {
second_best = current;
}
if (current.relevance > result.relevance) {
second_best = result;
result = current;
}
});
if (second_best.language) {
result.second_best = second_best;
}
return result;
}
/*
Post-processing of the highlighted markup:
- replace TABs with something more useful
- replace real line-breaks with '<br>' for non-pre containers
*/
function fixMarkup(value) {
return !(options.tabReplace || options.useBR)
? value
: value.replace(fixMarkupRe, function(match, p1) {
if (options.useBR && match === '\n') {
return '<br>';
} else if (options.tabReplace) {
return p1.replace(/\t/g, options.tabReplace);
}
return '';
});
}
function buildClassName(prevClassName, currentLang, resultLang) {
var language = currentLang ? aliases[currentLang] : resultLang,
result = [prevClassName.trim()];
if (!prevClassName.match(/\bhljs\b/)) {
result.push('hljs');
}
if (prevClassName.indexOf(language) === -1) {
result.push(language);
}
return result.join(' ').trim();
}
/*
Applies highlighting to a DOM node containing code. Accepts a DOM node and
two optional parameters for fixMarkup.
*/
function highlightBlock(block) {
var node, originalStream, result, resultNode, text;
var language = blockLanguage(block);
if (isNotHighlighted(language))
return;
if (options.useBR) {
node = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
node.innerHTML = block.innerHTML.replace(/\n/g, '').replace(/<br[ \/]*>/g, '\n');
} else {
node = block;
}
text = node.textContent;
result = language ? highlight(language, text, true) : highlightAuto(text);
originalStream = nodeStream(node);
if (originalStream.length) {
resultNode = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
resultNode.innerHTML = result.value;
result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
}
result.value = fixMarkup(result.value);
block.innerHTML = result.value;
block.className = buildClassName(block.className, language, result.language);
block.result = {
language: result.language,
re: result.relevance
};
if (result.second_best) {
block.second_best = {
language: result.second_best.language,
re: result.second_best.relevance
};
}
}
/*
Updates highlight.js global options with values passed in the form of an object.
*/
function configure(user_options) {
options = inherit(options, user_options);
}
/*
Applies highlighting to all <pre><code>..</code></pre> blocks on a page.
*/
function initHighlighting() {
if (initHighlighting.called)
return;
initHighlighting.called = true;
var blocks = document.querySelectorAll('pre code');
ArrayProto.forEach.call(blocks, highlightBlock);
}
/*
Attaches highlighting to the page load event.
*/
function initHighlightingOnLoad() {
addEventListener('DOMContentLoaded', initHighlighting, false);
addEventListener('load', initHighlighting, false);
}
function registerLanguage(name, language) {
var lang = languages[name] = language(hljs);
restoreLanguageApi(lang);
if (lang.aliases) {
lang.aliases.forEach(function(alias) {aliases[alias] = name;});
}
}
function listLanguages() {
return objectKeys(languages);
}
function getLanguage(name) {
name = (name || '').toLowerCase();
return languages[name] || languages[aliases[name]];
}
function autoDetection(name) {
var lang = getLanguage(name);
return lang && !lang.disableAutodetect;
}
/* Interface definition */
hljs.highlight = highlight;
hljs.highlightAuto = highlightAuto;
hljs.fixMarkup = fixMarkup;
hljs.highlightBlock = highlightBlock;
hljs.configure = configure;
hljs.initHighlighting = initHighlighting;
hljs.initHighlightingOnLoad = initHighlightingOnLoad;
hljs.registerLanguage = registerLanguage;
hljs.listLanguages = listLanguages;
hljs.getLanguage = getLanguage;
hljs.autoDetection = autoDetection;
hljs.inherit = inherit;
// Common regexps
hljs.IDENT_RE = '[a-zA-Z]\\w*';
hljs.UNDERSCORE_IDENT_RE = '[a-zA-Z_]\\w*';
hljs.NUMBER_RE = '\\b\\d+(\\.\\d+)?';
hljs.C_NUMBER_RE = '(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)'; // 0x..., 0..., decimal, float
hljs.BINARY_NUMBER_RE = '\\b(0b[01]+)'; // 0b...
hljs.RE_STARTERS_RE = '!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~';
// Common modes
hljs.BACKSLASH_ESCAPE = {
begin: '\\\\[\\s\\S]', relevance: 0
};
hljs.APOS_STRING_MODE = {
className: 'string',
begin: '\'', end: '\'',
illegal: '\\n',
contains: [hljs.BACKSLASH_ESCAPE]
};
hljs.QUOTE_STRING_MODE = {
className: 'string',
begin: '"', end: '"',
illegal: '\\n',
contains: [hljs.BACKSLASH_ESCAPE]
};
hljs.PHRASAL_WORDS_MODE = {
begin: /\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
};
hljs.COMMENT = function (begin, end, inherits) {
var mode = hljs.inherit(
{
className: 'comment',
begin: begin, end: end,
contains: []
},
inherits || {}
);
mode.contains.push(hljs.PHRASAL_WORDS_MODE);
mode.contains.push({
className: 'doctag',
begin: '(?:TODO|FIXME|NOTE|BUG|XXX):',
relevance: 0
});
return mode;
};
hljs.C_LINE_COMMENT_MODE = hljs.COMMENT('//', '$');
hljs.C_BLOCK_COMMENT_MODE = hljs.COMMENT('/\\*', '\\*/');
hljs.HASH_COMMENT_MODE = hljs.COMMENT('#', '$');
hljs.NUMBER_MODE = {
className: 'number',
begin: hljs.NUMBER_RE,
relevance: 0
};
hljs.C_NUMBER_MODE = {
className: 'number',
begin: hljs.C_NUMBER_RE,
relevance: 0
};
hljs.BINARY_NUMBER_MODE = {
className: 'number',
begin: hljs.BINARY_NUMBER_RE,
relevance: 0
};
hljs.CSS_NUMBER_MODE = {
className: 'number',
begin: hljs.NUMBER_RE + '(' +
'%|em|ex|ch|rem' +
'|vw|vh|vmin|vmax' +
'|cm|mm|in|pt|pc|px' +
'|deg|grad|rad|turn' +
'|s|ms' +
'|Hz|kHz' +
'|dpi|dpcm|dppx' +
')?',
relevance: 0
};
hljs.REGEXP_MODE = {
className: 'regexp',
begin: /\//, end: /\/[gimuy]*/,
illegal: /\n/,
contains: [
hljs.BACKSLASH_ESCAPE,
{
begin: /\[/, end: /\]/,
relevance: 0,
contains: [hljs.BACKSLASH_ESCAPE]
}
]
};
hljs.TITLE_MODE = {
className: 'title',
begin: hljs.IDENT_RE,
relevance: 0
};
hljs.UNDERSCORE_TITLE_MODE = {
className: 'title',
begin: hljs.UNDERSCORE_IDENT_RE,
relevance: 0
};
hljs.METHOD_GUARD = {
// excludes method names from keyword processing
begin: '\\.\\s*' + hljs.UNDERSCORE_IDENT_RE,
relevance: 0
};
return hljs;
}));
/*! /*!
* VERSION: 2.1.2 * VERSION: 2.1.2
* DATE: 2019-03-01 * DATE: 2019-03-01

File diff suppressed because one or more lines are too long

691
dist/iwmlib.pixi.js vendored
View File

@ -11972,7 +11972,7 @@
class Timeline extends BitmapLabeledGraphics { class Timeline extends BitmapLabeledGraphics {
constructor(width, height, { ticks = null, constructor(width, height, { ticks = null,
baseLine = 0.5, showRange = true } = {}) { baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
super(); super();
this.wantedWidth = width; this.wantedWidth = width;
this.wantedHeight = height; this.wantedHeight = height;
@ -12003,6 +12003,7 @@
this.selection = null; this.selection = null;
this.autoScroll = false; this.autoScroll = false;
this.direction = -1; this.direction = -1;
this.throwDamping = throwDamping;
this.timeticks = ticks || new TimeTicks(new DecadeTicks(), this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
new YearTicks(), new YearTicks(),
new MonthTicks(), new MonthTicks(),
@ -12380,7 +12381,7 @@
return return
} }
this.scroll += delta; this.scroll += delta;
delta *= 0.985; delta *= this.throwDamping;
this.redraw(); this.redraw();
if (Math.abs(delta) > 1 && this.autoScroll) { if (Math.abs(delta) > 1 && this.autoScroll) {
setTimeout(() => this.keepInBounds(delta, anchor), 1000 / 100); setTimeout(() => this.keepInBounds(delta, anchor), 1000 / 100);
@ -12410,6 +12411,691 @@
} }
} }
/**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/
class Scrollbox extends PIXI.Container {
/**
* create a scrollbox
* @param {object} options
* @param {boolean} [options.dragScroll=true] user may drag the content area to scroll content
* @param {string} [options.overflowX=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflowY=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflow] (none, scroll, hidden, auto) sets overflowX and overflowY to this value
* @param {number} [options.boxWidth=100] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight=100] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollbarSize=10] size of scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetHorizontal=0] offset of horizontal scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetVertical=0] offset of vertical scrollbar (in pixels)
* @param {boolean} [options.stopPropagation=true] call stopPropagation on any events that impact scrollbox
* @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
* @param {number} [options.scrollbarBackgroundAlpha=1] alpha of background of scrollbar
* @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
* @param {number} [options.scrollbarForegroundAlpha=1] alpha of foreground of scrollbar
* @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
* @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
super();
this.options = Object.assign({}, {
"boxWidth": 100,
"boxHeight": 100,
"scrollbarSize": 10,
"scrollbarBackground": 14540253,
"scrollbarBackgroundAlpha": 1,
"scrollbarForeground": 8947848,
"scrollbarForegroundAlpha": 1,
"dragScroll": true,
"stopPropagation": true,
"scrollbarOffsetHorizontal": 0,
"scrollbarOffsetVertical": 0,
"underflow": "top-left",
"fadeScrollbar": false,
"fadeWait": 3000,
"fadeEase": "easeInOutSine"
}, options);
this.ease = new PIXI.extras.Ease.list();
/**
* content in placed in here
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport}
*/
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }));
this.content
.decelerate()
.on('moved', () => this._drawScrollbars());
/**
* graphics element for drawing the scrollbars
* @type {PIXI.Graphics}
*/
this.scrollbar = this.addChild(new PIXI.Graphics());
this.scrollbar.interactive = true;
this.scrollbar.on('pointerdown', this.scrollbarDown, this);
this.interactive = true;
this.on('pointermove', this.scrollbarMove, this);
this.on('pointerup', this.scrollbarUp, this);
this.on('pointercancel', this.scrollbarUp, this);
this.on('pointerupoutside', this.scrollbarUp, this);
this._maskContent = this.addChild(new PIXI.Graphics());
this.update();
}
/**
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
this.options.scrollbarOffsetHorizontal = value;
}
/**
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
this.options.scrollbarOffsetVertical = value;
}
/**
* disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean}
*/
get disable()
{
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
this._disabled = value;
this.update();
}
}
/**
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
return this.options.stopPropagation
}
set stopPropagation(value)
{
this.options.stopPropagation = value;
}
/**
* user may drag the content area to scroll content
* @type {boolean}
*/
get dragScroll()
{
return this.options.dragScroll
}
set dragScroll(value)
{
this.options.dragScroll = value;
if (value)
{
this.content.drag();
}
else
{
this.content.removePlugin('drag');
}
this.update();
}
/**
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number}
*/
get boxWidth()
{
return this.options.boxWidth
}
set boxWidth(value)
{
this.options.boxWidth = value;
this.content.screenWidth = value;
this.update();
}
/**
* sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
return this.options.overflow
}
set overflow(value)
{
this.options.overflow = value;
this.options.overflowX = value;
this.options.overflowY = value;
this.update();
}
/**
* sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowX()
{
return this.options.overflowX
}
set overflowX(value)
{
this.options.overflowX = value;
this.update();
}
/**
* sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
return this.options.overflowY
}
set overflowY(value)
{
this.options.overflowY = value;
this.update();
}
/**
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number}
*/
get boxHeight()
{
return this.options.boxHeight
}
set boxHeight(value)
{
this.options.boxHeight = value;
this.content.screenHeight = value;
this.update();
}
/**
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
this.options.scrollbarSize = value;
}
/**
* width of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
* height of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
* is the vertical scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
return this._isScrollbarVertical
}
/**
* is the horizontal scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
return this.content.left
}
/**
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
this._scrollWidth = value;
}
/**
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
this._scrollHeight = value;
}
/**
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth;
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight;
this.scrollbar.clear();
let options = {};
options.left = 0;
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
options.top = 0;
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
this.scrollbarTop = (this.content.top / height) * this.boxHeight;
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop;
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight;
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight;
this.scrollbarLeft = (this.content.left / width) * this.boxWidth;
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft;
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth;
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth;
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.endFill();
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.endFill();
}
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.endFill();
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.endFill();
}
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
this.activateFade();
}
/**
* draws mask layer
* @private
*/
_drawMask()
{
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
.endFill();
this.content.mask = this._maskContent;
}
/**
* call when scrollbox content changes
*/
update()
{
this.content.mask = null;
this._maskContent.clear();
if (!this._disabled)
{
this._drawScrollbars();
this._drawMask();
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y';
if (direction !== null)
{
this.content
.drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow });
}
}
}
}
/**
* show the scrollbar and restart the timer for fade if options.fade is set
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
this.ease.remove(this.fade);
}
this.scrollbar.alpha = 1;
const time = this.options.fade === true ? 1000 : this.options.fade;
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase });
this.fade.on('each', () => this.content.dirty = true);
}
}
/**
* handle pointer down on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarDown(e)
{
const local = this.toLocal(e.data.global);
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
this.pointerDown = { type: 'horizontal', last: local };
}
else
{
if (local.x > this.scrollbarLeft)
{
this.content.left += this.content.worldScreenWidth;
this.update();
}
else
{
this.content.left -= this.content.worldScreenWidth;
this.update();
}
}
if (this.options.stopPropagation)
{
e.stopPropagation();
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
this.pointerDown = { type: 'vertical', last: local };
}
else
{
if (local.y > this.scrollbarTop)
{
this.content.top += this.content.worldScreenHeight;
this.update();
}
else
{
this.content.top -= this.content.worldScreenHeight;
this.update();
}
}
if (this.options.stopPropagation)
{
e.stopPropagation();
}
return
}
}
}
/**
* handle pointer move on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
const local = this.toLocal(e.data.global);
this.content.left += local.x - this.pointerDown.last.x;
this.pointerDown.last = local;
this.update();
}
else if (this.pointerDown.type === 'vertical')
{
const local = this.toLocal(e.data.global);
this.content.top += local.y - this.pointerDown.last.y;
this.pointerDown.last = local;
this.update();
}
if (this.options.stopPropagation)
{
e.stopPropagation();
}
}
}
/**
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
this.pointerDown = null;
}
/**
* resize the mask for the container
* @param {object} options
* @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth;
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight;
if (options.scrollWidth)
{
this.scrollWidth = options.scrollWidth;
}
if (options.scrollHeight)
{
this.scrollHeight = options.scrollHeight;
}
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight);
this.update();
}
/**
* ensure that the bounding box is visible
* @param {number} x - relative to content's coordinate system
* @param {number} y
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
this.content.ensureVisible(x, y, width, height);
this._drawScrollbars();
}
}
/**
* Callback for the switch action.
*
* @callback actionCallback
* @param {object} event - The event object.
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
*/
/**
* Callback for the switch action.
*
* @callback actionActiveCallback
* @param {object} event - The event object.
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
*/
/**
* Callback for the switch beforeAction.
*
* @callback beforeActionCallback
* @param {object} event - The event object.
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
*/
/**
* Callback for the switch afterAction.
*
* @callback afterActionCallback
* @param {object} event - The event object.
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
*/
/**
* Class that represents a PixiJS Switch.
*
* @example
* // Create the app
* const app = new PIXIApp({
* view: canvas,
* width: 900,
* height: 250
* }).setup().run()
*
* // Create the switch
* const switch1 = new Switch({
* x: 10,
* y: 20
* })
*
* // Add the switch to a DisplayObject
* app.scene.addChild(switch1)
*
* @class
* @extends PIXI.extras.Scrollbox
* @see {@link https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html|Scrollbox}
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/
class Scrollview extends Scrollbox {
/**
* Creates an instance of a Switch.
*
* @constructor
*/
constructor(opts = {}) {
super(opts);
this.opts = opts;
// setup
//-----------------
this.setup();
// layout
//-----------------
this.layout();
}
/**
* Creates children and instantiates everything.
*
* @private
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
*
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
layout() {
return this
}
}
/** /**
* Callback for the slider action onStart. * Callback for the slider action onStart.
* *
@ -14055,6 +14741,7 @@
window.Theme = Theme; window.Theme = Theme;
window.Button = Button; window.Button = Button;
window.ButtonGroup = ButtonGroup; window.ButtonGroup = ButtonGroup;
window.Scrollview = Scrollview;
window.Slider = Slider; window.Slider = Slider;
window.Switch = Switch; window.Switch = Switch;
window.Popup = Popup; window.Popup = Popup;

View File

@ -9,7 +9,6 @@ function vendors() {
'./node_modules/optimal-select/dist/optimal-select.js', './node_modules/optimal-select/dist/optimal-select.js',
'./node_modules/hammerjs/hammer.js', './node_modules/hammerjs/hammer.js',
'./node_modules/propagating-hammerjs/propagating.js', './node_modules/propagating-hammerjs/propagating.js',
'./node_modules/highlight.js/lib/highlight.js',
'./node_modules/pixi.js/dist/pixi.js', './node_modules/pixi.js/dist/pixi.js',
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js', './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
'./node_modules/pixi-compressed-textures/bin/pixi-compressed-textures.js', './node_modules/pixi-compressed-textures/bin/pixi-compressed-textures.js',
@ -17,7 +16,9 @@ function vendors() {
'./node_modules/pixi-particles/dist/pixi-particles.js', './node_modules/pixi-particles/dist/pixi-particles.js',
'./node_modules/pixi-projection/dist/pixi-projection.js', './node_modules/pixi-projection/dist/pixi-projection.js',
'./node_modules/gsap/src/uncompressed/TweenLite.js', './node_modules/gsap/src/uncompressed/TweenLite.js',
'./lib/3rdparty/convertPointFromPageToNode.js', './lib/3rdparty/pixi-ease.js',
'./lib/3rdparty/pixi-viewport.js',
'./lib/3rdparty/convertPointFromPageToNode.js'
], {sourcemaps: false}) ], {sourcemaps: false})
.pipe(concat('iwmlib.3rdparty.js')) .pipe(concat('iwmlib.3rdparty.js'))
.pipe(replace(/^\/\/# sourceMappingURL=.*$/gmi, '')) .pipe(replace(/^\/\/# sourceMappingURL=.*$/gmi, ''))
@ -29,7 +30,6 @@ function vendors() {
function preload() { function preload() {
return src([ return src([
'./node_modules/highlight.js/lib/highlight.js',
'./node_modules/gsap/src/uncompressed/TweenLite.js', './node_modules/gsap/src/uncompressed/TweenLite.js',
'./lib/3rdparty/convertPointFromPageToNode.js', './lib/3rdparty/convertPointFromPageToNode.js',
], {sourcemaps: false}) ], {sourcemaps: false})

View File

@ -1,3 +1,317 @@
## Master
New languages:
New styles:
Improvements:
## Version 9.15.6
New languages:
none.
New styles:
none.
Improvements:
- Move dependencies to be devDependencies.
- Fixed security issues in dev dependencies.
## Version 9.15.5
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: updated build tool.
## Version 9.15.4
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: reverted hljs cli build tool, as it was causing issues with install.
## Version 9.15.3
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: reverted hljs cli build tool, as it was causing issues with install.
## Version 9.15.2
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix that was preventing highlight.js from installing.
## Version 9.15.1
New languages:
none.
New styles:
none.
Improvements:
- Pony: Fixed keywords without spaces at line ends, highlighting of `iso` in class definitions, and function heads without bodies in traits and interfaces. Removed FUNCTION and CLASS modes until they are found to be needed and to provide some of the fixes.
- Support external language files in minified version of highlight.js (#1888)
## Version 9.15
New languages:
none.
New styles:
none.
Improvements:
- new cli tool `hljs` - allows easier [building from command line](docs/building-testing.rst#building-a-bundle-from-the-command-line).
- cpp: Fully support C++11 raw strings. (#1897)
- Python: Treat False None and True as literals (#1920)
## Version 9.14.2
New languages:
none.
New styles:
none.
Improvements:
- *Gauss* fixed to stop global namespace pollution [Scott Hyndman][].
- fix(Tcl): removed apostrophe string delimiters (don't exist)
[Scott Hyndman]: https://github.com/shyndman
## Version 9.14.1
New languages:
none.
New styles:
none.
Improvements:
- Pony: language improvements (#1958)
## Version 9.14.0
New languages:
none.
New styles:
none.
Improvements:
- Pony: add missing "object" highlighting (#1932)
- Added *XQuery* built-in functions, prolog declarations, as well as parsing of function bodies, computed and direct constructors, by [Duncan Paterson][]
- fix(dart): Corrects highlighting with string interpolation. (#1946)
- fix(swift): be eager on optional-using types (!/?) (#1919)
- fix(tex): Changed cyrillic to unicode (IE11 throw SCRIPT5021) (#1601)
- fix(JavaScript): Recognize get/set accessor keywords (#1940)
- Fixed Dockerfile definition when using highlight continuation parameter, by [Laurent Voullemier][]
- Added tests & new `annotation` and `verbatim` keywords to *Crystal*, by [Benoit de Chezelles][]
- Added missing dockerfile markup tests, by [Laurent Voullemier][]
Allow empty prompt text in clojure-repl, by [Egor Rogov][]
- Fixed several issues with *Crystal* language definition, by [Johannes Müller][]
- Added `C#` as an alias for *CSharp* language, by [Ahmed Atito][]
- Added generic user-defined proc support, new compiler define, refactor to re-use rules, and add tests to *GAUSS*, by [Matthew Evans][]
- Improve *Crystal* language to highlight regexes after some keywords, by [Tsuyusato Kitsune][]
- Fix filterByQualifiers: fileInfo can be null
- Fixed String interpolation in Dart, by [Scott Hyndman][].
[Laurent Voullemier]: https://github.com/l-vo
[Benoit de Chezelles]: https://github.com/bew
[Johannes Müller]: https://github.com/straight-shoota
[Ahmed Atito]: https://github.com/atitoa93
[Matthew Evans]: https://github.com/matthewevans
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Scott Hyndman]: https://github.com/shyndman
[Duncan Paterson]: https://github.com/duncdrum
## Version 9.13.1
Improvements:
- *C#* function declarations no longer include trailing whitespace, by [JeremyTCD][]
- Added new and missing keywords to *AngelScript*, by [Melissa Geels][]
- *TypeScript* decorator factories highlighting fix, by [Antoine Boisier-Michaud][]
- Added support for multiline strings to *Swift*, by [Alejandro Isaza][]
- Fixed issue that was causing some minifiers to fail.
- Fixed `autoDetection` to accept language aliases.
[JeremyTCD]: https://github.com/JeremyTCD
[Melissa Geels]: https://github.com/codecat
[Antoine Boisier-Michaud]: https://github.com/Aboisier
[Alejandro Isaza]: https://github.com/alejandro-isaza
## Version 9.13.0
New languages:
- *ArcGIS Arcade* by [John Foster][]
- *AngelScript* by [Melissa Geels][]
- *GML* by [meseta][]
- *isbl* built-in language DIRECTUM and Conterra by [Dmitriy Tarasov][].
- *PostgreSQL* SQL dialect and PL/pgSQL language by [Egor Rogov][].
- *ReasonML* by [Gidi Meir Morris][]
- *SAS* by [Mauricio Caceres Bravo][]
- *Plaintext* by [Egor Rogov][]
- *.properties* by [bostko][] and [Egor Rogov][]
New styles:
- *a11y-dark theme* by [Eric Bailey][]
- *a11y-light theme* by [Eric Bailey][]
- *An Old Hope* by [Gustavo Costa][]
- *Atom One Dark Reasonable* by [Gidi Meir Morris][]
- *isbl editor dark* by [Dmitriy Tarasov][]
- *isbl editor light* by [Dmitriy Tarasov][]
- *Lightfair* by [Tristian Kelly][]
- [*Nord*][nord-highlightjs] by [Arctic Ice Studio][]
- *[🦄 Shades of Purple](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS)* by [Ahmad Awais][]
Improvements:
- New attribute `endSameAsBegin` for nested constructs with variable names
by [Egor Rogov][].
- *Python* highlighting of escaped quotes fixed by [Harmon][]
- *PHP*: Added alias for php7, by [Vijaya Chandran Mani][]
- *C++* string handling, by [David Benjamin][]
- *Swift* Add `@objcMembers` to `@attributes`, by [Berk Çebi][]
- Infrastructural changes by [Marcos Cáceres][]
- Fixed metachars highighting for *NSIS* by [Jan T. Sott][]
- *Yaml* highlight local tags as types by [Léo Lam][]
- Improved highlighting for *Elixir* by [Piotr Kaminski][]
- New attribute `disableAutodetect` for preventing autodetection by [Egor Rogov][]
- *Matlab*: transpose operators and double quote strings, by [JohnC32][] and [Egor Rogov][]
- Various documentation typos and improvemets by [Jimmy Wärting][], [Lutz Büch][], [bcleland][]
- *Cmake* updated with new keywords and commands by [Deniz Bahadir][]
[Ahmad Awais]: https://github.com/ahmadawais
[Arctic Ice Studio]: https://github.com/arcticicestudio
[Dmitriy Tarasov]: https://github.com/MedvedTMN
[Egor Rogov]: https://github.com/egor-rogov
[Eric Bailey]: https://github.com/ericwbailey
[Gidi Meir Morris]: https://github.com/gmmorris
[Gustavo Costa]: https://github.com/gusbemacbe
[Harmon]: https://github.com/Harmon758
[Melissa Geels]: https://github.com/codecat
[meseta]: https://github.com/meseta
[nord-highlightjs]: https://github.com/arcticicestudio/nord-highlightjs
[Tristian Kelly]: https://github.com/TristianK3604
[Vijaya Chandran Mani]: https://github.com/vijaycs85
[John Foster]: https://github.com/jf990
[David Benjamin]: https://github.com/davidben
[Berk Çebi]: https://github.com/berkcebi
[Mauricio Caceres Bravo]: https://github.com/mcaceresb
[bostko]: https://github.com/bostko
[Deniz Bahadir]: https://github.com/Bagira80
[bcleland]: https://github.com/bcleland
[JohnC32]: https://github.com/JohnC32
[Lutz Büch]: https://github.com/lutz-100worte
[Piotr Kaminski]: https://github.com/pkaminski
[Léo Lam]: https://github.com/leoetlino
[Jan T. Sott]: https://github.com/idleberg
[Jimmy Wärting]: https://github.com/jimmywarting
[Marcos Cáceres]: https://github.com/marcoscaceres
## Version 9.12.0
New language:
- *MikroTik* RouterOS Scripting language by [Ivan Dementev][].
New style:
- *VisualStudio 2015 Dark* by [Nicolas LLOBERA][]
Improvements:
- *Crystal* updated with new keywords and syntaxes by [Tsuyusato Kitsune][].
- *Julia* updated to the modern definitions by [Alex Arslan][].
- *julia-repl* added by [Morten Piibeleht][].
- [Stanislav Belov][] wrote a new definition for *1C*, replacing the one that
has not been updated for more than 8 years. The new version supports syntax
for versions 7.7 and 8.
- [Nicolas LLOBERA][] improved C# definition fixing edge cases with function
titles detection and added highlighting of `[Attributes]`.
- [nnnik][] provided a few correctness fixes for *Autohotkey*.
- [Martin Clausen][] made annotation collections in *Clojure* to look
consistently with other kinds.
- [Alejandro Alonso][] updated *Swift* keywords.
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Alex Arslan]: https://github.com/ararslan
[Morten Piibeleht]: https://github.com/mortenpi
[Stanislav Belov]: https://github.com/4ppl
[Ivan Dementev]: https://github.com/DiVAN1x
[Nicolas LLOBERA]: https://github.com/Nicolas01
[nnnik]: https://github.com/nnnik
[Martin Clausen]: https://github.com/maacl
[Alejandro Alonso]: https://github.com/Azoy
## Version 9.11.0
New languages:
- *Shell* by [Tsuyusato Kitsune][]
- *jboss-cli* by [Raphaël Parrëe][]
Improvements:
- [Joël Porquet] has [greatly improved the definition of *makefile*][5b3e0e6].
- *C++* class titles are now highlighted as in other languages with classes.
- [Jordi Petit][] added rarely used `or`, `and` and `not` keywords to *C++*.
- [Pieter Vantorre][] fixed highlighting of negative floating point values.
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Jordi Petit]: https://github.com/jordi-petit
[Raphaël Parrëe]: https://github.com/rparree
[Pieter Vantorre]: https://github.com/NuclearCookie
[5b3e0e6]: https://github.com/isagalaev/highlight.js/commit/5b3e0e68bfaae282faff6697d6a490567fa9d44b
## Version 9.10.0
Apologies for missing the previous release cycle. Some thing just can't be
automated… Anyway, we're back!
New languages:
- *Hy* by [Sergey Sobko][]
- *Leaf* by [Hale Chan][]
- *N1QL* by [Andres Täht][] and [Rene Saarsoo][]
Improvements:
- *Rust* got updated with new keywords by [Kasper Andersen][] and then
significantly modernized even more by [Eduard-Mihai Burtescu][] (yes, @eddyb,
Rust core team member!)
- *Python* updated with f-literals by [Philipp A][].
- *YAML* updated with unquoted strings support.
- *Gauss* updated with new keywords by [Matt Evans][].
- *Lua* updated with new keywords by [Joe Blow][].
- *Kotlin* updated with new keywords by [Philipp Hauer][].
- *TypeScript* got highlighting of function params and updated keywords by
[Ike Ku][].
- *Scheme* now correctly handles \`-quoted lists thanks to [Guannan Wei].
- [Sam Wu][] fixed handling of `<<` in *C++* defines.
[Philipp A]: https://github.com/flying-sheep
[Philipp Hauer]: https://github.com/phauer
[Sergey Sobko]: https://github.com/profitware
[Hale Chan]: https://github.com/halechan
[Matt Evans]: https://github.com/matthewevans
[Joe Blow]: https://github.com/mossarelli
[Kasper Andersen]: https://github.com/kasma1990
[Eduard-Mihai Burtescu]: https://github.com/eddyb
[Andres Täht]: https://github.com/andrestaht
[Rene Saarsoo]: https://github.com/nene
[Philipp Hauer]: https://github.com/phauer
[Ike Ku]: https://github.com/dempfi
[Guannan Wei]: https://github.com/Kraks
[Sam Wu]: https://github.com/samsam2310
## Version 9.9.0 ## Version 9.9.0
New languages New languages

View File

@ -1,10 +1,10 @@
# Highlight.js # Highlight.js
[![Build Status](https://travis-ci.org/isagalaev/highlight.js.svg?branch=master)](https://travis-ci.org/isagalaev/highlight.js) [![Build Status](https://travis-ci.org/highlightjs/highlight.js.svg?branch=master)](https://travis-ci.org/highlightjs/highlight.js) [![Greenkeeper badge](https://badges.greenkeeper.io/highlightjs/highlight.js.svg)](https://greenkeeper.io/)
Highlight.js is a syntax highlighter written in JavaScript. It works in Highlight.js is a syntax highlighter written in JavaScript. It works in
the browser as well as on the server. It works with pretty much any the browser as well as on the server. It works with pretty much any
markup, doesnt depend on any framework and has automatic language markup, doesnt depend on any framework, and has automatic language
detection. detection.
## Getting Started ## Getting Started
@ -31,6 +31,13 @@ The list of supported language classes is available in the [class
reference][2]. Classes can also be prefixed with either `language-` or reference][2]. Classes can also be prefixed with either `language-` or
`lang-`. `lang-`.
To make arbitrary text look like code, but without highlighting, use the
`plaintext` class:
```html
<pre><code class="plaintext">...</code></pre>
```
To disable highlighting altogether use the `nohighlight` class: To disable highlighting altogether use the `nohighlight` class:
```html ```html
@ -44,24 +51,24 @@ highlight.js, you can use the [`highlightBlock`][3] and [`configure`][4]
functions. This allows you to control *what* to highlight and *when*. functions. This allows you to control *what* to highlight and *when*.
Heres an equivalent way to calling [`initHighlightingOnLoad`][1] using Heres an equivalent way to calling [`initHighlightingOnLoad`][1] using
jQuery: vanilla JS:
```javascript ```js
$(document).ready(function() { document.addEventListener('DOMContentLoaded', (event) => {
$('pre code').each(function(i, block) { document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
}); });
``` ```
You can use any tags instead of `<pre><code>` to mark up your code. If You can use any tags instead of `<pre><code>` to mark up your code. If
you don't use a container that preserve line breaks you will need to you don't use a container that preserves line breaks you will need to
configure highlight.js to use the `<br>` tag: configure highlight.js to use the `<br>` tag:
```javascript ```js
hljs.configure({useBR: true}); hljs.configure({useBR: true});
$('div.code').each(function(i, block) { document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
``` ```
@ -76,23 +83,23 @@ window while dealing with very big chunks of code.
In your main script: In your main script:
```javascript ```js
addEventListener('load', function() { addEventListener('load', () => {
var code = document.querySelector('#code'); const code = document.querySelector('#code');
var worker = new Worker('worker.js'); const worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; } worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent); worker.postMessage(code.textContent);
}) });
``` ```
In worker.js: In worker.js:
```javascript ```js
onmessage = function(event) { onmessage = (event) => {
importScripts('<path>/highlight.pack.js'); importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data); const result = self.hljs.highlightAuto(event.data);
postMessage(result.value); postMessage(result.value);
} };
``` ```
@ -115,17 +122,48 @@ too big. If you don't see the language you need in the ["Common" section][5],
it can be added manually: it can be added manually:
```html ```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script> <script
charset="UTF-8"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
``` ```
**On Almond.** You need to use the optimizer to give the module a name. For **On Almond.** You need to use the optimizer to give the module a name. For
example: example:
``` ```bash
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
``` ```
### CommonJS
You can import Highlight.js as a CommonJS-module:
```bash
npm install highlight.js --save
```
In your application:
```js
import hljs from 'highlight.js';
```
The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:
```js
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
```
To set the syntax highlighting style, if your build tool processes CSS from your JavaScript entry point, you can import the stylesheet directly into your CommonJS-module:
```js
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';
```
## License ## License
Highlight.js is released under the BSD License. See [LICENSE][7] file Highlight.js is released under the BSD License. See [LICENSE][7] file
@ -146,5 +184,5 @@ Authors and contributors are listed in the [AUTHORS.en.txt][8] file.
[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options [4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
[5]: https://highlightjs.org/download/ [5]: https://highlightjs.org/download/
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html [6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE [7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.en.txt [8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.en.txt

View File

@ -40,11 +40,11 @@ Highlight.js — это инструмент для подсветки синт
можно управлять тем, *что* и *когда* подсвечивать. можно управлять тем, *что* и *когда* подсвечивать.
Вот пример инициализации, эквивалентной вызову [`initHighlightingOnLoad`][1], но Вот пример инициализации, эквивалентной вызову [`initHighlightingOnLoad`][1], но
с использованием jQuery: с использованием `document.addEventListener`:
```javascript ```js
$(document).ready(function() { document.addEventListener('DOMContentLoaded', (event) => {
$('pre code').each(function(i, block) { document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
}); });
@ -54,10 +54,10 @@ $(document).ready(function() {
используете контейнер, не сохраняющий переводы строк, вам нужно сказать используете контейнер, не сохраняющий переводы строк, вам нужно сказать
highlight.js использовать для них тег `<br>`: highlight.js использовать для них тег `<br>`:
```javascript ```js
hljs.configure({useBR: true}); hljs.configure({useBR: true});
$('div.code').each(function(i, block) { document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block); hljs.highlightBlock(block);
}); });
``` ```
@ -72,23 +72,23 @@ $('div.code').each(function(i, block) {
В основном скрипте: В основном скрипте:
```javascript ```js
addEventListener('load', function() { addEventListener('load', () => {
var code = document.querySelector('#code'); const code = document.querySelector('#code');
var worker = new Worker('worker.js'); const worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; } worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent); worker.postMessage(code.textContent);
}) });
``` ```
В worker.js: В worker.js:
```javascript ```js
onmessage = function(event) { onmessage = (event) => {
importScripts('<path>/highlight.pack.js'); importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data); const result = self.hljs.highlightAuto(event.data);
postMessage(result.value); postMessage(result.value);
} };
``` ```
@ -138,5 +138,5 @@ Highlight.js распространяется под лицензией BSD. П
[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options [4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
[5]: https://highlightjs.org/download/ [5]: https://highlightjs.org/download/
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html [6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE [7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.ru.txt [8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.ru.txt

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,99 @@
/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #d4d0ab;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #ffa07a;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5ab35;
}
/* Yellow */
.hljs-attribute {
color: #ffd700;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #abe338;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #00e0e0;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #dcc6e0;
}
.hljs {
display: block;
overflow-x: auto;
background: #2b2b2b;
color: #f8f8f2;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}

View File

@ -0,0 +1,99 @@
/* a11y-light theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #696969;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #d91e18;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #aa5d00;
}
/* Yellow */
.hljs-attribute {
color: #aa5d00;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #008000;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #007faa;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #7928a1;
}
.hljs {
display: block;
overflow-x: auto;
background: #fefefe;
color: #545454;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}

View File

@ -0,0 +1,89 @@
/*
An Old Hope Star Wars Syntax (c) Gustavo Costa <gusbemacbe@gmail.com>
Original theme - Ocean Dark Theme by https://github.com/gavsiu
Based on Jesse Leite's Atom syntax theme 'An Old Hope' https://github.com/JesseLeite/an-old-hope-syntax-atom
*/
/* Death Star Comment */
.hljs-comment,
.hljs-quote
{
color: #B6B18B;
}
/* Darth Vader */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion
{
color: #EB3C54;
}
/* Threepio */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link
{
color: #E7CE56;
}
/* Luke Skywalker */
.hljs-attribute
{
color: #EE7C2B;
}
/* Obi Wan Kenobi */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition
{
color: #4FB4D7;
}
/* Yoda */
.hljs-title,
.hljs-section
{
color: #78BB65;
}
/* Mace Windu */
.hljs-keyword,
.hljs-selector-tag
{
color: #B45EA4;
}
/* Millenium Falcon */
.hljs
{
display: block;
overflow-x: auto;
background: #1C1D21;
color: #c0c5ce;
padding: 0.5em;
}
.hljs-emphasis
{
font-style: italic;
}
.hljs-strong
{
font-weight: bold;
}

View File

@ -0,0 +1,77 @@
/*
Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
line-height: 1.3em;
color: #abb2bf;
background: #282c34;
border-radius: 5px;
}
.hljs-keyword, .hljs-operator {
color: #F92672;
}
.hljs-pattern-match {
color: #F92672;
}
.hljs-pattern-match .hljs-constructor {
color: #61aeee;
}
.hljs-function {
color: #61aeee;
}
.hljs-function .hljs-params {
color: #A6E22E;
}
.hljs-function .hljs-params .hljs-typing {
color: #FD971F;
}
.hljs-module-access .hljs-module {
color: #7e57c2;
}
.hljs-constructor {
color: #e2b93d;
}
.hljs-constructor .hljs-string {
color: #9CCC65;
}
.hljs-comment, .hljs-quote {
color: #b18eb1;
font-style: italic;
}
.hljs-doctag, .hljs-formula {
color: #c678dd;
}
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
color: #98c379;
}
.hljs-built_in, .hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
color: #d19a66;
}
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}

78
lib/3rdparty/highlight/styles/gml.css vendored Normal file
View File

@ -0,0 +1,78 @@
/*
GML Theme - Meseta <meseta@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #222222;
color: #C0C0C0;
}
.hljs-keywords {
color: #FFB871;
font-weight: bold;
}
.hljs-built_in {
color: #FFB871;
}
.hljs-literal {
color: #FF8080;
}
.hljs-symbol {
color: #58E55A;
}
.hljs-comment {
color: #5B995B;
}
.hljs-string {
color: #FFFF00;
}
.hljs-number {
color: #FF8080;
}
.hljs-attribute,
.hljs-selector-tag,
.hljs-doctag,
.hljs-name,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-type,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-function,
.hljs-meta-keyword,
.hljs-meta,
.hljs-subst {
color: #C0C0C0;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

View File

@ -0,0 +1,112 @@
/*
ISBL Editor style dark color scheme (c) Dmitriy Tarasov <dimatar@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #404040;
color: #f0f0f0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #f0f0f0;
}
.hljs-comment {
color: #b5b5b5;
font-style: italic;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
color: #f0f0f0;
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-string {
color: #97bf0d;
}
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #f0f0f0;
}
.hljs-title,
.hljs-section {
color: #df471e;
}
.hljs-title>.hljs-built_in {
color: #81bce9;
font-weight: normal;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #e2c696;
}
/* Language color: hue: 90; */
.hljs-built_in,
.hljs-literal {
color: #97bf0d;
font-weight: bold;
}
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
.hljs-class {
color: #ce9d4d;
font-weight: bold;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

View File

@ -0,0 +1,112 @@
/*
ISBL Editor style light color schemec (c) Dmitriy Tarasov <dimatar@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: white;
color: black;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #000000;
}
.hljs-comment {
color: #555555;
font-style: italic;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
color: #000000;
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-string {
color: #000080;
}
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #000000;
}
.hljs-title,
.hljs-section {
color: #fb2c00;
}
.hljs-title>.hljs-built_in {
color: #008080;
font-weight: normal;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #5e1700;
}
/* Language color: hue: 90; */
.hljs-built_in,
.hljs-literal {
color: #000080;
font-weight: bold;
}
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
.hljs-class {
color: #6f1C00;
font-weight: bold;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

View File

@ -0,0 +1,87 @@
/*
Lightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-name {
color:#01a3a3;
}
.hljs-tag,.hljs-meta {
color:#778899;
}
.hljs,
.hljs-subst {
color: #444
}
.hljs-comment {
color: #888888
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #4286f4
}
.hljs-title,
.hljs-section {
color: #4286f4;
font-weight: bold
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060
}
.hljs-literal {
color: #62bcbc
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #25c6c6
}
.hljs-meta-string {
color: #4d99bf
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}

309
lib/3rdparty/highlight/styles/nord.css vendored Normal file
View File

@ -0,0 +1,309 @@
/*
* Copyright (c) 2017-present Arctic Ice Studio <development@arcticicestudio.com>
* Copyright (c) 2017-present Sven Greb <development@svengreb.de>
*
* Project: Nord highlight.js
* Version: 0.1.0
* Repository: https://github.com/arcticicestudio/nord-highlightjs
* License: MIT
* References:
* https://github.com/arcticicestudio/nord
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2E3440;
}
.hljs,
.hljs-subst {
color: #D8DEE9;
}
.hljs-selector-tag {
color: #81A1C1;
}
.hljs-selector-id {
color: #8FBCBB;
font-weight: bold;
}
.hljs-selector-class {
color: #8FBCBB;
}
.hljs-selector-attr {
color: #8FBCBB;
}
.hljs-selector-pseudo {
color: #88C0D0;
}
.hljs-addition {
background-color: rgba(163, 190, 140, 0.5);
}
.hljs-deletion {
background-color: rgba(191, 97, 106, 0.5);
}
.hljs-built_in,
.hljs-type {
color: #8FBCBB;
}
.hljs-class {
color: #8FBCBB;
}
.hljs-function {
color: #88C0D0;
}
.hljs-function > .hljs-title {
color: #88C0D0;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol {
color: #81A1C1;
}
.hljs-number {
color: #B48EAD;
}
.hljs-regexp {
color: #EBCB8B;
}
.hljs-string {
color: #A3BE8C;
}
.hljs-title {
color: #8FBCBB;
}
.hljs-params {
color: #D8DEE9;
}
.hljs-bullet {
color: #81A1C1;
}
.hljs-code {
color: #8FBCBB;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-formula {
color: #8FBCBB;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link:hover {
text-decoration: underline;
}
.hljs-quote {
color: #4C566A;
}
.hljs-comment {
color: #4C566A;
}
.hljs-doctag {
color: #8FBCBB;
}
.hljs-meta,
.hljs-meta-keyword {
color: #5E81AC;
}
.hljs-meta-string {
color: #A3BE8C;
}
.hljs-attr {
color: #8FBCBB;
}
.hljs-attribute {
color: #D8DEE9;
}
.hljs-builtin-name {
color: #81A1C1;
}
.hljs-name {
color: #81A1C1;
}
.hljs-section {
color: #88C0D0;
}
.hljs-tag {
color: #81A1C1;
}
.hljs-variable {
color: #D8DEE9;
}
.hljs-template-variable {
color: #D8DEE9;
}
.hljs-template-tag {
color: #5E81AC;
}
.abnf .hljs-attribute {
color: #88C0D0;
}
.abnf .hljs-symbol {
color: #EBCB8B;
}
.apache .hljs-attribute {
color: #88C0D0;
}
.apache .hljs-section {
color: #81A1C1;
}
.arduino .hljs-built_in {
color: #88C0D0;
}
.aspectj .hljs-meta {
color: #D08770;
}
.aspectj > .hljs-title {
color: #88C0D0;
}
.bnf .hljs-attribute {
color: #8FBCBB;
}
.clojure .hljs-name {
color: #88C0D0;
}
.clojure .hljs-symbol {
color: #EBCB8B;
}
.coq .hljs-built_in {
color: #88C0D0;
}
.cpp .hljs-meta-string {
color: #8FBCBB;
}
.css .hljs-built_in {
color: #88C0D0;
}
.css .hljs-keyword {
color: #D08770;
}
.diff .hljs-meta {
color: #8FBCBB;
}
.ebnf .hljs-attribute {
color: #8FBCBB;
}
.glsl .hljs-built_in {
color: #88C0D0;
}
.groovy .hljs-meta:not(:first-child) {
color: #D08770;
}
.haxe .hljs-meta {
color: #D08770;
}
.java .hljs-meta {
color: #D08770;
}
.ldif .hljs-attribute {
color: #8FBCBB;
}
.lisp .hljs-name {
color: #88C0D0;
}
.lua .hljs-built_in {
color: #88C0D0;
}
.moonscript .hljs-built_in {
color: #88C0D0;
}
.nginx .hljs-attribute {
color: #88C0D0;
}
.nginx .hljs-section {
color: #5E81AC;
}
.pf .hljs-built_in {
color: #88C0D0;
}
.processing .hljs-built_in {
color: #88C0D0;
}
.scss .hljs-keyword {
color: #81A1C1;
}
.stylus .hljs-keyword {
color: #81A1C1;
}
.swift .hljs-meta {
color: #D08770;
}
.vim .hljs-built_in {
color: #88C0D0;
font-style: italic;
}
.yaml .hljs-meta {
color: #D08770;
}

View File

@ -0,0 +1,108 @@
/*
highlight.js style for Microtik RouterOS script
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-attribute {
color: #0E9A00;
}
.hljs-function {
color: #99069A;
}
.hljs-builtin-name {
color: #99069A;
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
/* Language color: hue: 90; */
.hljs-literal {
color: #78A960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #0C9A9A;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

View File

@ -0,0 +1,97 @@
/**
* Shades of Purple Theme for Highlightjs.
*
* @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
* @link GitHub Repo https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
* @version 1.5.0
*/
.hljs {
display: block;
overflow-x: auto;
/* Custom font is optional */
/* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace'; */
line-height: 1.45;
padding: 2rem;
background: #2d2b57;
font-weight: normal;
}
.hljs-title {
color: #fad000;
font-weight: normal;
}
.hljs-name {
color: #a1feff;
}
.hljs-tag {
color: #ffffff;
}
.hljs-attr {
color: #f8d000;
font-style: italic;
}
.hljs-built_in,
.hljs-selector-tag,
.hljs-section {
color: #fb9e00;
}
.hljs-keyword {
color: #fb9e00;
}
.hljs,
.hljs-subst {
color: #e3dfff;
}
.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion {
color: #4cd213;
}
.hljs-meta,
.hljs-meta-string {
color: #fb9e00;
}
.hljs-comment {
color: #ac65ff;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-strong {
font-weight: normal;
}
.hljs-literal,
.hljs-number {
color: #fa658d;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

115
lib/3rdparty/highlight/styles/vs2015.css vendored Normal file
View File

@ -0,0 +1,115 @@
/*
* Visual Studio 2015 dark style
* Author: Nicolas LLOBERA <nllobera@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/*.hljs-code {
font-family:'Monospace';
}*/
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}

View File

@ -12,55 +12,66 @@ XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
color: black; color: black;
} }
/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {
color: #c0c0c0;
}
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #006a00; color: #007400;
} }
.hljs-tag,
.hljs-attribute,
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-literal { .hljs-literal,
color: #aa0d91;
}
.hljs-name { .hljs-name {
color: #008; color: #aa0d91;
} }
.hljs-variable, .hljs-variable,
.hljs-template-variable { .hljs-template-variable {
color: #660; color: #3F6E74;
} }
.hljs-string { .hljs-code,
.hljs-string,
.hljs-meta-string {
color: #c41a16; color: #c41a16;
} }
.hljs-regexp, .hljs-regexp,
.hljs-link { .hljs-link {
color: #080; color: #0E0EFF;
} }
.hljs-title, .hljs-title,
.hljs-tag,
.hljs-symbol, .hljs-symbol,
.hljs-bullet, .hljs-bullet,
.hljs-number, .hljs-number {
.hljs-meta {
color: #1c00cf; color: #1c00cf;
} }
.hljs-section, .hljs-section,
.hljs-meta {
color: #643820;
}
.hljs-class .hljs-title, .hljs-class .hljs-title,
.hljs-type, .hljs-type,
.hljs-attr,
.hljs-built_in, .hljs-built_in,
.hljs-builtin-name, .hljs-builtin-name,
.hljs-params { .hljs-params {
color: #5c2699; color: #5c2699;
} }
.hljs-attribute, .hljs-attr {
color: #836C28;
}
.hljs-subst { .hljs-subst {
color: #000; color: #000;
} }

View File

@ -11,7 +11,7 @@
overflow-x: auto; overflow-x: auto;
color: #eaeaea; color: #eaeaea;
background: #000; background: #000;
padding: 0.5; padding: 0.5em;
} }
.hljs-subst { .hljs-subst {

4090
lib/3rdparty/pixi-ease.js vendored Normal file

File diff suppressed because it is too large Load Diff

3465
lib/3rdparty/pixi-viewport.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -10,6 +10,7 @@ import Timeline from './timeline.js'
import Theme from './theme.js' import Theme from './theme.js'
import Button from './button.js' import Button from './button.js'
import ButtonGroup from './buttongroup.js' import ButtonGroup from './buttongroup.js'
import Scrollview from './scrollview.js'
import Slider from './slider.js' import Slider from './slider.js'
import Switch from './switch.js' import Switch from './switch.js'
import Popup from './popup.js' import Popup from './popup.js'
@ -41,6 +42,7 @@ window.AppTest = AppTest
window.Theme = Theme window.Theme = Theme
window.Button = Button window.Button = Button
window.ButtonGroup = ButtonGroup window.ButtonGroup = ButtonGroup
window.Scrollview = Scrollview
window.Slider = Slider window.Slider = Slider
window.Switch = Switch window.Switch = Switch
window.Popup = Popup window.Popup = Popup

585
lib/pixi/scrollbox.js Normal file
View File

@ -0,0 +1,585 @@
/**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/
export default class Scrollbox extends PIXI.Container {
/**
* create a scrollbox
* @param {object} options
* @param {boolean} [options.dragScroll=true] user may drag the content area to scroll content
* @param {string} [options.overflowX=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflowY=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflow] (none, scroll, hidden, auto) sets overflowX and overflowY to this value
* @param {number} [options.boxWidth=100] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight=100] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollbarSize=10] size of scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetHorizontal=0] offset of horizontal scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetVertical=0] offset of vertical scrollbar (in pixels)
* @param {boolean} [options.stopPropagation=true] call stopPropagation on any events that impact scrollbox
* @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
* @param {number} [options.scrollbarBackgroundAlpha=1] alpha of background of scrollbar
* @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
* @param {number} [options.scrollbarForegroundAlpha=1] alpha of foreground of scrollbar
* @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
* @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
super()
this.options = Object.assign({}, {
"boxWidth": 100,
"boxHeight": 100,
"scrollbarSize": 10,
"scrollbarBackground": 14540253,
"scrollbarBackgroundAlpha": 1,
"scrollbarForeground": 8947848,
"scrollbarForegroundAlpha": 1,
"dragScroll": true,
"stopPropagation": true,
"scrollbarOffsetHorizontal": 0,
"scrollbarOffsetVertical": 0,
"underflow": "top-left",
"fadeScrollbar": false,
"fadeWait": 3000,
"fadeEase": "easeInOutSine"
}, options)
this.ease = new PIXI.extras.Ease.list()
/**
* content in placed in here
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport}
*/
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
this.content
.decelerate()
.on('moved', () => this._drawScrollbars())
/**
* graphics element for drawing the scrollbars
* @type {PIXI.Graphics}
*/
this.scrollbar = this.addChild(new PIXI.Graphics())
this.scrollbar.interactive = true
this.scrollbar.on('pointerdown', this.scrollbarDown, this)
this.interactive = true
this.on('pointermove', this.scrollbarMove, this)
this.on('pointerup', this.scrollbarUp, this)
this.on('pointercancel', this.scrollbarUp, this)
this.on('pointerupoutside', this.scrollbarUp, this)
this._maskContent = this.addChild(new PIXI.Graphics())
this.update()
}
/**
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
this.options.scrollbarOffsetHorizontal = value
}
/**
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
this.options.scrollbarOffsetVertical = value
}
/**
* disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean}
*/
get disable()
{
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
this._disabled = value
this.update()
}
}
/**
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
return this.options.stopPropagation
}
set stopPropagation(value)
{
this.options.stopPropagation = value
}
/**
* user may drag the content area to scroll content
* @type {boolean}
*/
get dragScroll()
{
return this.options.dragScroll
}
set dragScroll(value)
{
this.options.dragScroll = value
if (value)
{
this.content.drag()
}
else
{
this.content.removePlugin('drag')
}
this.update()
}
/**
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number}
*/
get boxWidth()
{
return this.options.boxWidth
}
set boxWidth(value)
{
this.options.boxWidth = value
this.content.screenWidth = value
this.update()
}
/**
* sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
return this.options.overflow
}
set overflow(value)
{
this.options.overflow = value
this.options.overflowX = value
this.options.overflowY = value
this.update()
}
/**
* sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowX()
{
return this.options.overflowX
}
set overflowX(value)
{
this.options.overflowX = value
this.update()
}
/**
* sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
return this.options.overflowY
}
set overflowY(value)
{
this.options.overflowY = value
this.update()
}
/**
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number}
*/
get boxHeight()
{
return this.options.boxHeight
}
set boxHeight(value)
{
this.options.boxHeight = value
this.content.screenHeight = value
this.update()
}
/**
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
this.options.scrollbarSize = value
}
/**
* width of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
* height of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
* is the vertical scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
return this._isScrollbarVertical
}
/**
* is the horizontal scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
return this.content.left
}
/**
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
this._scrollWidth = value
}
/**
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
this._scrollHeight = value
}
/**
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
this.scrollbar.clear()
let options = {}
options.left = 0
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight
this.scrollbarLeft = (this.content.left / width) * this.boxWidth
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.endFill()
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.endFill()
}
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.endFill()
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.endFill()
}
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
this.activateFade()
}
/**
* draws mask layer
* @private
*/
_drawMask()
{
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
.endFill()
this.content.mask = this._maskContent
}
/**
* call when scrollbox content changes
*/
update()
{
this.content.mask = null
this._maskContent.clear()
if (!this._disabled)
{
this._drawScrollbars()
this._drawMask()
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
if (direction !== null)
{
this.content
.drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow })
}
}
}
}
/**
* show the scrollbar and restart the timer for fade if options.fade is set
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
this.ease.remove(this.fade)
}
this.scrollbar.alpha = 1
const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
this.fade.on('each', () => this.content.dirty = true)
}
}
/**
* handle pointer down on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarDown(e)
{
const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
this.pointerDown = { type: 'horizontal', last: local }
}
else
{
if (local.x > this.scrollbarLeft)
{
this.content.left += this.content.worldScreenWidth
this.update()
}
else
{
this.content.left -= this.content.worldScreenWidth
this.update()
}
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
this.pointerDown = { type: 'vertical', last: local }
}
else
{
if (local.y > this.scrollbarTop)
{
this.content.top += this.content.worldScreenHeight
this.update()
}
else
{
this.content.top -= this.content.worldScreenHeight
this.update()
}
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
return
}
}
}
/**
* handle pointer move on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local
this.update()
}
else if (this.pointerDown.type === 'vertical')
{
const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local
this.update()
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
}
}
/**
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
this.pointerDown = null
}
/**
* resize the mask for the container
* @param {object} options
* @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
if (options.scrollWidth)
{
this.scrollWidth = options.scrollWidth
}
if (options.scrollHeight)
{
this.scrollHeight = options.scrollHeight
}
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
this.update()
}
/**
* ensure that the bounding box is visible
* @param {number} x - relative to content's coordinate system
* @param {number} y
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
this.content.ensureVisible(x, y, width, height)
this._drawScrollbars()
}
}

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,6 @@
<script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script>
<!-- <script src="./scrollbox.min.js"></script> -->
</head> </head>
<body onload="Doctest.run()"> <body onload="Doctest.run()">
<h1>Scrollview</h1> <h1>Scrollview</h1>
@ -37,38 +36,35 @@
const app = new PIXIApp({ const app = new PIXIApp({
view: canvas, view: canvas,
width: 900, width: 900,
height: 250, height: 400,
transparent: false transparent: false
}).setup().run() }).setup().run()
// let scrollview1 = new Scrollview({ app.loader
// x: 10, .add('elephant1', './assets/elephant-1.jpg')
// y: 20 .add('elephant2', './assets/elephant-2.jpg')
// }) .add('elephant3', './assets/elephant-3.jpg')
.load((loader, resources) => {
const sprite1 = new PIXI.Sprite(resources.elephant1.texture)
const sprite2 = new PIXI.Sprite(resources.elephant2.texture)
const sprite3 = new PIXI.Sprite(resources.elephant3.texture)
// let scrollview2 = new Scrollview({ const scrollview1 = new Scrollview({boxWidth: 300, boxHeight: 180})
// x: 90, scrollview1.content.addChild(sprite1)
// y: 20, app.scene.addChild(scrollview1)
// fill: 0xfd355a,
// fillActive: 0x5954d3,
// controlFill: 0xfecd2d,
// controlFillActive: 0xfd413b,
// strokeActiveWidth: 4,
// controlStrokeActive: 0x50d968,
// controlStrokeActiveWidth: 12,
// controlStrokeActiveAlpha: .8,
// tooltip: 'Dies ist ein Switch'
// })
// const scrollbox = new PIXI.extras.Scrollbox({boxWidth: 500, boxHeight: 200}) const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})
// scrollbox.x = 70 scrollview2.x = 500
// scrollbox.y = 30 scrollview2.y = 30
sprite2.x = 40
// const sprite = new PIXI.Sprite(resources.fulda.texture) sprite2.y = 40
// sprite.scale.set(.5, .5) sprite2.scale.set(.3, .3)
// scrollbox.content.addChild(sprite) sprite3.x = 60
// app.stage.addChild(scrollbox) sprite3.y = 100
sprite3.alpha = .6
// app.scene.addChild(switch1, switch2) sprite3.scale.set(.5, .5)
scrollview2.content.addChild(sprite2, sprite3)
app.scene.addChild(scrollview2)
})
</script> </script>
</body> </body>

View File

@ -1,5 +1,4 @@
import Theme from './theme.js' import Scrollbox from './scrollbox.js'
import Tooltip from './tooltip.js'
/** /**
* Callback for the switch action. * Callback for the switch action.
@ -54,140 +53,22 @@ import Tooltip from './tooltip.js'
* app.scene.addChild(switch1) * app.scene.addChild(switch1)
* *
* @class * @class
* @extends PIXI.Container * @extends PIXI.extras.Scrollbox
* @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} * @see {@link https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html|Scrollbox}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest} * @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/ */
export default class Switch extends PIXI.Container { export default class Scrollview extends Scrollbox {
/** /**
* Creates an instance of a Switch. * Creates an instance of a Switch.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the switch.
* @param {number} [opts.id=auto generated] - The id of the switch.
* @param {number} [opts.x=0] - The x position of the switch. Can be also set after creation with switch.x = 0.
* @param {number} [opts.y=0] - The y position of the switch. Can be also set after creation with switch.y = 0.
* @param {string|Theme} [opts.theme=dark] - The theme to use for this switch. Possible values are dark, light, red
* or a Theme object.
* @param {number} [opts.width=44] - The width of the switch.
* @param {number} [opts.height=28] - The height of the switch.
* @param {number} [opts.fill=Theme.fill] - The color of the switch background as a hex value.
* @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
* @param {number} [opts.fillActive=Theme.fillActive] - The color of the switch background when activated.
* @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
* @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
* @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
* @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
* @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
* @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
* @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
* @param {number} [opts.controlFill=Theme.stroke] - The color of the switch control background as a hex value.
* @param {number} [opts.controlFillAlpha=Theme.strokeAlpha] - The alpha value of the background.
* @param {number} [opts.controlFillActive=Theme.stroke] - The color of the switch control background when activated.
* @param {number} [opts.controlFillActiveAlpha=Theme.strokeAlpha] - The alpha value of the background when activated.
* @param {number} [opts.controlStroke=Theme.stroke] - The color of the border as a hex value.
* @param {number} [opts.controlStrokeWidth=Theme.strokeWidth * 0.8] - The width of the border in pixel.
* @param {number} [opts.controlStrokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
* @param {number} [opts.controlStrokeActive=Theme.stroke] - The color of the border when activated.
* @param {number} [opts.controlStrokeActiveWidth=Theme.strokeActiveWidth * 0.8] - The width of the border in pixel when activated.
* @param {number} [opts.controlStrokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
* @param {number} [opts.duration=Theme.fast] - The duration of the animation when the switch gets activated in seconds.
* @param {number} [opts.durationActive=Theme.fast] - The duration of the animation when the switch gets deactivated in seconds.
* @param {boolean} [opts.disabled=false] - Is the switch disabled? When disabled, the switch has a lower alpha value
* and cannot be clicked (interactive is set to false).
* @param {boolean} [opts.active=false] - Is the button initially active?
* @param {actionCallback} [opts.action] - Executed when the switch was triggered in inactive state (by pointerup).
* @param {actionActiveCallback} [opts.actionActive] - Executed when the button was triggered in active state (by pointerup).
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
* @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display.
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super(opts)
const theme = Theme.fromString(opts.theme) this.opts = opts
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
if (this.opts.height > this.opts.width) {
this.opts.height = this.opts.width
}
// Properties
//-----------------
this.id = this.opts.id
this.radius = this.opts.height / 2
this._active = null
this._disabled = null
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
//-----------------
this.tempAnimated = {
fill: this.opts.fill,
fillAlpha: this.opts.fillAlpha,
stroke: this.opts.stroke,
strokeWidth: this.opts.strokeWidth,
strokeAlpha: this.opts.strokeAlpha,
controlFill: this.opts.controlFill,
controlFillAlpha: this.opts.controlFillAlpha,
controlStroke: this.opts.controlStroke,
controlStrokeWidth: this.opts.controlStrokeWidth,
controlStrokeAlpha: this.opts.controlStrokeAlpha,
controlRadius: this.opts.controlRadius
}
// setup // setup
//----------------- //-----------------
@ -202,307 +83,20 @@ export default class Switch extends PIXI.Container {
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @return {Switch} A reference to the switch for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
setup() { setup() {
// Switch
//-----------------
let switchObj = new PIXI.Graphics()
this.switchObj = switchObj
this.addChild(switchObj)
// Control
//-----------------
this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2
this.control = control
this.addChild(this.control)
// interaction
//-----------------
this.switchObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
})
this.switchObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
})
this.switchObj.on('pointerdown', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
})
this.switchObj.on('pointerup', e => {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
this.active = !this.active
if (this.active) {
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
} else {
if (this.opts.actionActive) {
this.opts.actionActive.call(this, e, this)
}
}
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
})
// disabled
//-----------------
this.disabled = this.opts.disabled
// active
//-----------------
this.active = this.opts.active
// tooltip
//-----------------
if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({
object: this,
content: this.opts.tooltip
})
} else {
this.opts.tooltip.object = this
this.tooltip = new Tooltip(this.opts.tooltip)
}
}
return this return this
} }
/** /**
* Should be called to refresh the layout of the switch. Can be used after resizing. * Should be called to refresh the layout of the Scrollview. Can be used after resizing.
* *
* @return {Switch} A reference to the switch for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
layout() { layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
// draw
//-----------------
this.draw()
return this
}
/**
* Draws the switch to the canvas.
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
draw() {
this.switchObj.clear()
if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
} else {
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
}
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
// Draw control
this.control.clear()
if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
} else {
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
}
this.control.endFill()
return this
}
/**
* Draws the animation.
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
drawAnimated() {
this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()
return this
}
/**
* Gets or sets the active state.
*
* @member {boolean}
*/
get active() {
return this._active
}
set active(value) {
this._active = value
if (this._active) {
TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
TweenLite.to(this.tempAnimated, this.opts.duration, {
colorProps: {
fill: this.opts.fillActive,
stroke: this.opts.strokeActive,
controlFill: this.opts.controlFillActive,
controlStroke: this.opts.controlStrokeActive,
format: 'number'
},
fillAlpha: this.opts.fillActiveAlpha,
strokeWidth: this.opts.strokeActiveWidth,
strokeAlpha: this.opts.strokeActiveAlpha,
controlFillAlpha: this.opts.controlFillActiveAlpha,
controlStrokeWidth: this.opts.controlStrokeActiveWidth,
controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
controlRadius: this.opts.controlRadiusActive,
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
} else {
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive})
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: {
fill: this.opts.fill,
stroke: this.opts.stroke,
controlFill: this.opts.controlFill,
controlStroke: this.opts.controlStroke,
format: 'number'
},
fillAlpha: this.opts.fillAlpha,
strokeWidth: this.opts.strokeWidth,
strokeAlpha: this.opts.strokeAlpha,
controlFillAlpha: this.opts.controlFillAlpha,
controlStrokeWidth: this.opts.controlStrokeWidth,
controlStrokeAlpha: this.opts.controlStrokeAlpha,
controlRadius: this.opts.controlRadius,
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
}
}
/**
* Gets or sets the disabled state. When disabled, the switch cannot be clicked.
*
* @member {boolean}
*/
get disabled() {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.switchObj.interactive = false
this.switchObj.buttonMode = false
this.switchObj.alpha = .5
this.control.alpha = .5
} else {
this.switchObj.interactive = true
this.switchObj.buttonMode = true
this.switchObj.alpha = 1
this.control.alpha = 1
}
}
/**
* Shows the switch (sets his alpha values to 1).
*
* @return {Switch} A reference to the switch for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
this.opts.fillActiveAlpha = 1
this.opts.controlStrokeAlpha = 1
this.opts.controlStrokeActiveAlpha = 1
this.opts.controlFillAlpha = 1
this.opts.controlFillActiveAlpha = 1
this.layout()
return this
}
/**
* Hides the switch (sets his alpha values to 1).
*
* @return {Switch} A reference to the switch for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0
this.opts.fillActiveAlpha = 0
this.opts.controlStrokeAlpha = 0
this.opts.controlStrokeActiveAlpha = 0
this.opts.controlFillAlpha = 0
this.opts.controlFillActiveAlpha = 0
this.layout()
return this return this
} }
} }

5
package-lock.json generated
View File

@ -2439,11 +2439,6 @@
} }
} }
}, },
"highlight.js": {
"version": "9.15.6",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.6.tgz",
"integrity": "sha512-zozTAWM1D6sozHo8kqhfYgsac+B+q0PmsjXeyDrYIHHcBN0zTVT66+s2GW1GZv7DbyaROdLXKdabwS/WqPyIdQ=="
},
"homedir-polyfill": { "homedir-polyfill": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",

View File

@ -30,7 +30,6 @@
"dependencies": { "dependencies": {
"gsap": "^2.1.2", "gsap": "^2.1.2",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"highlight.js": "^9.15.6",
"material-design-icons": "^3.0.1", "material-design-icons": "^3.0.1",
"optimal-select": "^4.0.1", "optimal-select": "^4.0.1",
"pixi-compressed-textures": "^1.1.8", "pixi-compressed-textures": "^1.1.8",