Added Scrollview.
This commit is contained in:
parent
fada4f9a9d
commit
275a5d0b04
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
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('"', '"') + '"';}
|
|
||||||
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
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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})
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
# Highlight.js
|
# Highlight.js
|
||||||
|
|
||||||
[](https://travis-ci.org/isagalaev/highlight.js)
|
[](https://travis-ci.org/highlightjs/highlight.js) [](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, doesn’t depend on any framework and has automatic language
|
markup, doesn’t 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*.
|
||||||
|
|
||||||
Here’s an equivalent way to calling [`initHighlightingOnLoad`][1] using
|
Here’s 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
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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.theme = theme
|
|
||||||
|
|
||||||
this.opts = Object.assign({}, {
|
this.opts = opts
|
||||||
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,306 +83,19 @@ 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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue