IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added Scrollview.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-05-14 13:56:05 +02:00
parent fada4f9a9d
commit 275a5d0b04
33 changed files with 18231 additions and 2297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/3rdparty/highlight/CHANGES.md
Vendored
+314
View File
@@ -1,3 +1,317 @@
## Master
New languages:
New styles:
Improvements:
## Version 9.15.6
New languages:
none.
New styles:
none.
Improvements:
- Move dependencies to be devDependencies.
- Fixed security issues in dev dependencies.
## Version 9.15.5
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: updated build tool.
## Version 9.15.4
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: reverted hljs cli build tool, as it was causing issues with install.
## Version 9.15.3
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix: reverted hljs cli build tool, as it was causing issues with install.
## Version 9.15.2
New languages:
none.
New styles:
none.
Improvements:
🔥 Hot fix that was preventing highlight.js from installing.
## Version 9.15.1
New languages:
none.
New styles:
none.
Improvements:
- Pony: Fixed keywords without spaces at line ends, highlighting of `iso` in class definitions, and function heads without bodies in traits and interfaces. Removed FUNCTION and CLASS modes until they are found to be needed and to provide some of the fixes.
- Support external language files in minified version of highlight.js (#1888)
## Version 9.15
New languages:
none.
New styles:
none.
Improvements:
- new cli tool `hljs` - allows easier [building from command line](docs/building-testing.rst#building-a-bundle-from-the-command-line).
- cpp: Fully support C++11 raw strings. (#1897)
- Python: Treat False None and True as literals (#1920)
## Version 9.14.2
New languages:
none.
New styles:
none.
Improvements:
- *Gauss* fixed to stop global namespace pollution [Scott Hyndman][].
- fix(Tcl): removed apostrophe string delimiters (don't exist)
[Scott Hyndman]: https://github.com/shyndman
## Version 9.14.1
New languages:
none.
New styles:
none.
Improvements:
- Pony: language improvements (#1958)
## Version 9.14.0
New languages:
none.
New styles:
none.
Improvements:
- Pony: add missing "object" highlighting (#1932)
- Added *XQuery* built-in functions, prolog declarations, as well as parsing of function bodies, computed and direct constructors, by [Duncan Paterson][]
- fix(dart): Corrects highlighting with string interpolation. (#1946)
- fix(swift): be eager on optional-using types (!/?) (#1919)
- fix(tex): Changed cyrillic to unicode (IE11 throw SCRIPT5021) (#1601)
- fix(JavaScript): Recognize get/set accessor keywords (#1940)
- Fixed Dockerfile definition when using highlight continuation parameter, by [Laurent Voullemier][]
- Added tests & new `annotation` and `verbatim` keywords to *Crystal*, by [Benoit de Chezelles][]
- Added missing dockerfile markup tests, by [Laurent Voullemier][]
Allow empty prompt text in clojure-repl, by [Egor Rogov][]
- Fixed several issues with *Crystal* language definition, by [Johannes Müller][]
- Added `C#` as an alias for *CSharp* language, by [Ahmed Atito][]
- Added generic user-defined proc support, new compiler define, refactor to re-use rules, and add tests to *GAUSS*, by [Matthew Evans][]
- Improve *Crystal* language to highlight regexes after some keywords, by [Tsuyusato Kitsune][]
- Fix filterByQualifiers: fileInfo can be null
- Fixed String interpolation in Dart, by [Scott Hyndman][].
[Laurent Voullemier]: https://github.com/l-vo
[Benoit de Chezelles]: https://github.com/bew
[Johannes Müller]: https://github.com/straight-shoota
[Ahmed Atito]: https://github.com/atitoa93
[Matthew Evans]: https://github.com/matthewevans
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Scott Hyndman]: https://github.com/shyndman
[Duncan Paterson]: https://github.com/duncdrum
## Version 9.13.1
Improvements:
- *C#* function declarations no longer include trailing whitespace, by [JeremyTCD][]
- Added new and missing keywords to *AngelScript*, by [Melissa Geels][]
- *TypeScript* decorator factories highlighting fix, by [Antoine Boisier-Michaud][]
- Added support for multiline strings to *Swift*, by [Alejandro Isaza][]
- Fixed issue that was causing some minifiers to fail.
- Fixed `autoDetection` to accept language aliases.
[JeremyTCD]: https://github.com/JeremyTCD
[Melissa Geels]: https://github.com/codecat
[Antoine Boisier-Michaud]: https://github.com/Aboisier
[Alejandro Isaza]: https://github.com/alejandro-isaza
## Version 9.13.0
New languages:
- *ArcGIS Arcade* by [John Foster][]
- *AngelScript* by [Melissa Geels][]
- *GML* by [meseta][]
- *isbl* built-in language DIRECTUM and Conterra by [Dmitriy Tarasov][].
- *PostgreSQL* SQL dialect and PL/pgSQL language by [Egor Rogov][].
- *ReasonML* by [Gidi Meir Morris][]
- *SAS* by [Mauricio Caceres Bravo][]
- *Plaintext* by [Egor Rogov][]
- *.properties* by [bostko][] and [Egor Rogov][]
New styles:
- *a11y-dark theme* by [Eric Bailey][]
- *a11y-light theme* by [Eric Bailey][]
- *An Old Hope* by [Gustavo Costa][]
- *Atom One Dark Reasonable* by [Gidi Meir Morris][]
- *isbl editor dark* by [Dmitriy Tarasov][]
- *isbl editor light* by [Dmitriy Tarasov][]
- *Lightfair* by [Tristian Kelly][]
- [*Nord*][nord-highlightjs] by [Arctic Ice Studio][]
- *[🦄 Shades of Purple](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS)* by [Ahmad Awais][]
Improvements:
- New attribute `endSameAsBegin` for nested constructs with variable names
by [Egor Rogov][].
- *Python* highlighting of escaped quotes fixed by [Harmon][]
- *PHP*: Added alias for php7, by [Vijaya Chandran Mani][]
- *C++* string handling, by [David Benjamin][]
- *Swift* Add `@objcMembers` to `@attributes`, by [Berk Çebi][]
- Infrastructural changes by [Marcos Cáceres][]
- Fixed metachars highighting for *NSIS* by [Jan T. Sott][]
- *Yaml* highlight local tags as types by [Léo Lam][]
- Improved highlighting for *Elixir* by [Piotr Kaminski][]
- New attribute `disableAutodetect` for preventing autodetection by [Egor Rogov][]
- *Matlab*: transpose operators and double quote strings, by [JohnC32][] and [Egor Rogov][]
- Various documentation typos and improvemets by [Jimmy Wärting][], [Lutz Büch][], [bcleland][]
- *Cmake* updated with new keywords and commands by [Deniz Bahadir][]
[Ahmad Awais]: https://github.com/ahmadawais
[Arctic Ice Studio]: https://github.com/arcticicestudio
[Dmitriy Tarasov]: https://github.com/MedvedTMN
[Egor Rogov]: https://github.com/egor-rogov
[Eric Bailey]: https://github.com/ericwbailey
[Gidi Meir Morris]: https://github.com/gmmorris
[Gustavo Costa]: https://github.com/gusbemacbe
[Harmon]: https://github.com/Harmon758
[Melissa Geels]: https://github.com/codecat
[meseta]: https://github.com/meseta
[nord-highlightjs]: https://github.com/arcticicestudio/nord-highlightjs
[Tristian Kelly]: https://github.com/TristianK3604
[Vijaya Chandran Mani]: https://github.com/vijaycs85
[John Foster]: https://github.com/jf990
[David Benjamin]: https://github.com/davidben
[Berk Çebi]: https://github.com/berkcebi
[Mauricio Caceres Bravo]: https://github.com/mcaceresb
[bostko]: https://github.com/bostko
[Deniz Bahadir]: https://github.com/Bagira80
[bcleland]: https://github.com/bcleland
[JohnC32]: https://github.com/JohnC32
[Lutz Büch]: https://github.com/lutz-100worte
[Piotr Kaminski]: https://github.com/pkaminski
[Léo Lam]: https://github.com/leoetlino
[Jan T. Sott]: https://github.com/idleberg
[Jimmy Wärting]: https://github.com/jimmywarting
[Marcos Cáceres]: https://github.com/marcoscaceres
## Version 9.12.0
New language:
- *MikroTik* RouterOS Scripting language by [Ivan Dementev][].
New style:
- *VisualStudio 2015 Dark* by [Nicolas LLOBERA][]
Improvements:
- *Crystal* updated with new keywords and syntaxes by [Tsuyusato Kitsune][].
- *Julia* updated to the modern definitions by [Alex Arslan][].
- *julia-repl* added by [Morten Piibeleht][].
- [Stanislav Belov][] wrote a new definition for *1C*, replacing the one that
has not been updated for more than 8 years. The new version supports syntax
for versions 7.7 and 8.
- [Nicolas LLOBERA][] improved C# definition fixing edge cases with function
titles detection and added highlighting of `[Attributes]`.
- [nnnik][] provided a few correctness fixes for *Autohotkey*.
- [Martin Clausen][] made annotation collections in *Clojure* to look
consistently with other kinds.
- [Alejandro Alonso][] updated *Swift* keywords.
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Alex Arslan]: https://github.com/ararslan
[Morten Piibeleht]: https://github.com/mortenpi
[Stanislav Belov]: https://github.com/4ppl
[Ivan Dementev]: https://github.com/DiVAN1x
[Nicolas LLOBERA]: https://github.com/Nicolas01
[nnnik]: https://github.com/nnnik
[Martin Clausen]: https://github.com/maacl
[Alejandro Alonso]: https://github.com/Azoy
## Version 9.11.0
New languages:
- *Shell* by [Tsuyusato Kitsune][]
- *jboss-cli* by [Raphaël Parrëe][]
Improvements:
- [Joël Porquet] has [greatly improved the definition of *makefile*][5b3e0e6].
- *C++* class titles are now highlighted as in other languages with classes.
- [Jordi Petit][] added rarely used `or`, `and` and `not` keywords to *C++*.
- [Pieter Vantorre][] fixed highlighting of negative floating point values.
[Tsuyusato Kitsune]: https://github.com/MakeNowJust
[Jordi Petit]: https://github.com/jordi-petit
[Raphaël Parrëe]: https://github.com/rparree
[Pieter Vantorre]: https://github.com/NuclearCookie
[5b3e0e6]: https://github.com/isagalaev/highlight.js/commit/5b3e0e68bfaae282faff6697d6a490567fa9d44b
## Version 9.10.0
Apologies for missing the previous release cycle. Some thing just can't be
automated… Anyway, we're back!
New languages:
- *Hy* by [Sergey Sobko][]
- *Leaf* by [Hale Chan][]
- *N1QL* by [Andres Täht][] and [Rene Saarsoo][]
Improvements:
- *Rust* got updated with new keywords by [Kasper Andersen][] and then
significantly modernized even more by [Eduard-Mihai Burtescu][] (yes, @eddyb,
Rust core team member!)
- *Python* updated with f-literals by [Philipp A][].
- *YAML* updated with unquoted strings support.
- *Gauss* updated with new keywords by [Matt Evans][].
- *Lua* updated with new keywords by [Joe Blow][].
- *Kotlin* updated with new keywords by [Philipp Hauer][].
- *TypeScript* got highlighting of function params and updated keywords by
[Ike Ku][].
- *Scheme* now correctly handles \`-quoted lists thanks to [Guannan Wei].
- [Sam Wu][] fixed handling of `<<` in *C++* defines.
[Philipp A]: https://github.com/flying-sheep
[Philipp Hauer]: https://github.com/phauer
[Sergey Sobko]: https://github.com/profitware
[Hale Chan]: https://github.com/halechan
[Matt Evans]: https://github.com/matthewevans
[Joe Blow]: https://github.com/mossarelli
[Kasper Andersen]: https://github.com/kasma1990
[Eduard-Mihai Burtescu]: https://github.com/eddyb
[Andres Täht]: https://github.com/andrestaht
[Rene Saarsoo]: https://github.com/nene
[Philipp Hauer]: https://github.com/phauer
[Ike Ku]: https://github.com/dempfi
[Guannan Wei]: https://github.com/Kraks
[Sam Wu]: https://github.com/samsam2310
## Version 9.9.0
New languages
lib/3rdparty/highlight/README.md
Vendored
+61 -23
View File
@@ -1,10 +1,10 @@
# Highlight.js
[![Build Status](https://travis-ci.org/isagalaev/highlight.js.svg?branch=master)](https://travis-ci.org/isagalaev/highlight.js)
[![Build Status](https://travis-ci.org/highlightjs/highlight.js.svg?branch=master)](https://travis-ci.org/highlightjs/highlight.js) [![Greenkeeper badge](https://badges.greenkeeper.io/highlightjs/highlight.js.svg)](https://greenkeeper.io/)
Highlight.js is a syntax highlighter written in JavaScript. It works in
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.
## 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
`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:
```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*.
Here’s an equivalent way to calling [`initHighlightingOnLoad`][1] using
jQuery:
vanilla JS:
```javascript
$(document).ready(function() {
$('pre code').each(function(i, block) {
```js
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
```
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:
```javascript
```js
hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});
```
@@ -76,23 +83,23 @@ window while dealing with very big chunks of code.
In your main script:
```javascript
addEventListener('load', function() {
var code = document.querySelector('#code');
var worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; }
```js
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})
});
```
In worker.js:
```javascript
onmessage = function(event) {
```js
onmessage = (event) => {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
const result = self.hljs.highlightAuto(event.data);
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:
```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
example:
```
```bash
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
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
[5]: https://highlightjs.org/download/
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.en.txt
[7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
[8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.en.txt
lib/3rdparty/highlight/README.ru.md
Vendored
+18 -18
View File
@@ -40,11 +40,11 @@ Highlight.js — это инструмент для подсветки синт
можно управлять тем, *что* и *когда* подсвечивать.
Вот пример инициализации, эквивалентной вызову [`initHighlightingOnLoad`][1], но
с использованием jQuery:
с использованием `document.addEventListener`:
```javascript
$(document).ready(function() {
$('pre code').each(function(i, block) {
```js
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
@@ -54,10 +54,10 @@ $(document).ready(function() {
используете контейнер, не сохраняющий переводы строк, вам нужно сказать
highlight.js использовать для них тег `<br>`:
```javascript
```js
hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});
```
@@ -72,23 +72,23 @@ $('div.code').each(function(i, block) {
В основном скрипте:
```javascript
addEventListener('load', function() {
var code = document.querySelector('#code');
var worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; }
```js
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})
});
```
В worker.js:
```javascript
onmessage = function(event) {
```js
onmessage = (event) => {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}
};
```
@@ -138,5 +138,5 @@ Highlight.js распространяется под лицензией BSD. П
[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
[5]: https://highlightjs.org/download/
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.ru.txt
[7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
[8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.ru.txt
lib/3rdparty/highlight/highlight.pack.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
lib/3rdparty/highlight/styles/a11y-dark.css
Vendored
+99
View File
@@ -0,0 +1,99 @@
/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #d4d0ab;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #ffa07a;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5ab35;
}
/* Yellow */
.hljs-attribute {
color: #ffd700;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #abe338;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #00e0e0;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #dcc6e0;
}
.hljs {
display: block;
overflow-x: auto;
background: #2b2b2b;
color: #f8f8f2;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}
lib/3rdparty/highlight/styles/a11y-light.css
Vendored
+99
View File
@@ -0,0 +1,99 @@
/* a11y-light theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #696969;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #d91e18;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #aa5d00;
}
/* Yellow */
.hljs-attribute {
color: #aa5d00;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #008000;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #007faa;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #7928a1;
}
.hljs {
display: block;
overflow-x: auto;
background: #fefefe;
color: #545454;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}
lib/3rdparty/highlight/styles/an-old-hope.css
Vendored
+89
View File
@@ -0,0 +1,89 @@
/*
An Old Hope – Star Wars Syntax (c) Gustavo Costa <gusbemacbe@gmail.com>
Original theme - Ocean Dark Theme – by https://github.com/gavsiu
Based on Jesse Leite's Atom syntax theme 'An Old Hope' – https://github.com/JesseLeite/an-old-hope-syntax-atom
*/
/* Death Star Comment */
.hljs-comment,
.hljs-quote
{
color: #B6B18B;
}
/* Darth Vader */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion
{
color: #EB3C54;
}
/* Threepio */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link
{
color: #E7CE56;
}
/* Luke Skywalker */
.hljs-attribute
{
color: #EE7C2B;
}
/* Obi Wan Kenobi */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition
{
color: #4FB4D7;
}
/* Yoda */
.hljs-title,
.hljs-section
{
color: #78BB65;
}
/* Mace Windu */
.hljs-keyword,
.hljs-selector-tag
{
color: #B45EA4;
}
/* Millenium Falcon */
.hljs
{
display: block;
overflow-x: auto;
background: #1C1D21;
color: #c0c5ce;
padding: 0.5em;
}
.hljs-emphasis
{
font-style: italic;
}
.hljs-strong
{
font-weight: bold;
}
lib/3rdparty/highlight/styles/atom-one-dark-reasonable.css
Vendored
+77
View File
@@ -0,0 +1,77 @@
/*
Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
line-height: 1.3em;
color: #abb2bf;
background: #282c34;
border-radius: 5px;
}
.hljs-keyword, .hljs-operator {
color: #F92672;
}
.hljs-pattern-match {
color: #F92672;
}
.hljs-pattern-match .hljs-constructor {
color: #61aeee;
}
.hljs-function {
color: #61aeee;
}
.hljs-function .hljs-params {
color: #A6E22E;
}
.hljs-function .hljs-params .hljs-typing {
color: #FD971F;
}
.hljs-module-access .hljs-module {
color: #7e57c2;
}
.hljs-constructor {
color: #e2b93d;
}
.hljs-constructor .hljs-string {
color: #9CCC65;
}
.hljs-comment, .hljs-quote {
color: #b18eb1;
font-style: italic;
}
.hljs-doctag, .hljs-formula {
color: #c678dd;
}
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
color: #98c379;
}
.hljs-built_in, .hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
color: #d19a66;
}
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
lib/3rdparty/highlight/styles/gml.css
Vendored
+78
View File
@@ -0,0 +1,78 @@
/*
GML Theme - Meseta <meseta@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #222222;
color: #C0C0C0;
}
.hljs-keywords {
color: #FFB871;
font-weight: bold;
}
.hljs-built_in {
color: #FFB871;
}
.hljs-literal {
color: #FF8080;
}
.hljs-symbol {
color: #58E55A;
}
.hljs-comment {
color: #5B995B;
}
.hljs-string {
color: #FFFF00;
}
.hljs-number {
color: #FF8080;
}
.hljs-attribute,
.hljs-selector-tag,
.hljs-doctag,
.hljs-name,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-type,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-function,
.hljs-meta-keyword,
.hljs-meta,
.hljs-subst {
color: #C0C0C0;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
lib/3rdparty/highlight/styles/isbl-editor-dark.css
Vendored
+112
View File
@@ -0,0 +1,112 @@
/*
ISBL Editor style dark color scheme (c) Dmitriy Tarasov <dimatar@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #404040;
color: #f0f0f0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #f0f0f0;
}
.hljs-comment {
color: #b5b5b5;
font-style: italic;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
color: #f0f0f0;
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-string {
color: #97bf0d;
}
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #f0f0f0;
}
.hljs-title,
.hljs-section {
color: #df471e;
}
.hljs-title>.hljs-built_in {
color: #81bce9;
font-weight: normal;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #e2c696;
}
/* Language color: hue: 90; */
.hljs-built_in,
.hljs-literal {
color: #97bf0d;
font-weight: bold;
}
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
.hljs-class {
color: #ce9d4d;
font-weight: bold;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
lib/3rdparty/highlight/styles/isbl-editor-light.css
Vendored
+112
View File
@@ -0,0 +1,112 @@
/*
ISBL Editor style light color schemec (c) Dmitriy Tarasov <dimatar@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: white;
color: black;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #000000;
}
.hljs-comment {
color: #555555;
font-style: italic;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
color: #000000;
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-string {
color: #000080;
}
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #000000;
}
.hljs-title,
.hljs-section {
color: #fb2c00;
}
.hljs-title>.hljs-built_in {
color: #008080;
font-weight: normal;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #5e1700;
}
/* Language color: hue: 90; */
.hljs-built_in,
.hljs-literal {
color: #000080;
font-weight: bold;
}
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
.hljs-class {
color: #6f1C00;
font-weight: bold;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
lib/3rdparty/highlight/styles/lightfair.css
Vendored
+87
View File
@@ -0,0 +1,87 @@
/*
Lightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-name {
color:#01a3a3;
}
.hljs-tag,.hljs-meta {
color:#778899;
}
.hljs,
.hljs-subst {
color: #444
}
.hljs-comment {
color: #888888
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #4286f4
}
.hljs-title,
.hljs-section {
color: #4286f4;
font-weight: bold
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060
}
.hljs-literal {
color: #62bcbc
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #25c6c6
}
.hljs-meta-string {
color: #4d99bf
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}
lib/3rdparty/highlight/styles/nord.css
Vendored
+309
View File
@@ -0,0 +1,309 @@
/*
* Copyright (c) 2017-present Arctic Ice Studio <development@arcticicestudio.com>
* Copyright (c) 2017-present Sven Greb <development@svengreb.de>
*
* Project: Nord highlight.js
* Version: 0.1.0
* Repository: https://github.com/arcticicestudio/nord-highlightjs
* License: MIT
* References:
* https://github.com/arcticicestudio/nord
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2E3440;
}
.hljs,
.hljs-subst {
color: #D8DEE9;
}
.hljs-selector-tag {
color: #81A1C1;
}
.hljs-selector-id {
color: #8FBCBB;
font-weight: bold;
}
.hljs-selector-class {
color: #8FBCBB;
}
.hljs-selector-attr {
color: #8FBCBB;
}
.hljs-selector-pseudo {
color: #88C0D0;
}
.hljs-addition {
background-color: rgba(163, 190, 140, 0.5);
}
.hljs-deletion {
background-color: rgba(191, 97, 106, 0.5);
}
.hljs-built_in,
.hljs-type {
color: #8FBCBB;
}
.hljs-class {
color: #8FBCBB;
}
.hljs-function {
color: #88C0D0;
}
.hljs-function > .hljs-title {
color: #88C0D0;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol {
color: #81A1C1;
}
.hljs-number {
color: #B48EAD;
}
.hljs-regexp {
color: #EBCB8B;
}
.hljs-string {
color: #A3BE8C;
}
.hljs-title {
color: #8FBCBB;
}
.hljs-params {
color: #D8DEE9;
}
.hljs-bullet {
color: #81A1C1;
}
.hljs-code {
color: #8FBCBB;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-formula {
color: #8FBCBB;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link:hover {
text-decoration: underline;
}
.hljs-quote {
color: #4C566A;
}
.hljs-comment {
color: #4C566A;
}
.hljs-doctag {
color: #8FBCBB;
}
.hljs-meta,
.hljs-meta-keyword {
color: #5E81AC;
}
.hljs-meta-string {
color: #A3BE8C;
}
.hljs-attr {
color: #8FBCBB;
}
.hljs-attribute {
color: #D8DEE9;
}
.hljs-builtin-name {
color: #81A1C1;
}
.hljs-name {
color: #81A1C1;
}
.hljs-section {
color: #88C0D0;
}
.hljs-tag {
color: #81A1C1;
}
.hljs-variable {
color: #D8DEE9;
}
.hljs-template-variable {
color: #D8DEE9;
}
.hljs-template-tag {
color: #5E81AC;
}
.abnf .hljs-attribute {
color: #88C0D0;
}
.abnf .hljs-symbol {
color: #EBCB8B;
}
.apache .hljs-attribute {
color: #88C0D0;
}
.apache .hljs-section {
color: #81A1C1;
}
.arduino .hljs-built_in {
color: #88C0D0;
}
.aspectj .hljs-meta {
color: #D08770;
}
.aspectj > .hljs-title {
color: #88C0D0;
}
.bnf .hljs-attribute {
color: #8FBCBB;
}
.clojure .hljs-name {
color: #88C0D0;
}
.clojure .hljs-symbol {
color: #EBCB8B;
}
.coq .hljs-built_in {
color: #88C0D0;
}
.cpp .hljs-meta-string {
color: #8FBCBB;
}
.css .hljs-built_in {
color: #88C0D0;
}
.css .hljs-keyword {
color: #D08770;
}
.diff .hljs-meta {
color: #8FBCBB;
}
.ebnf .hljs-attribute {
color: #8FBCBB;
}
.glsl .hljs-built_in {
color: #88C0D0;
}
.groovy .hljs-meta:not(:first-child) {
color: #D08770;
}
.haxe .hljs-meta {
color: #D08770;
}
.java .hljs-meta {
color: #D08770;
}
.ldif .hljs-attribute {
color: #8FBCBB;
}
.lisp .hljs-name {
color: #88C0D0;
}
.lua .hljs-built_in {
color: #88C0D0;
}
.moonscript .hljs-built_in {
color: #88C0D0;
}
.nginx .hljs-attribute {
color: #88C0D0;
}
.nginx .hljs-section {
color: #5E81AC;
}
.pf .hljs-built_in {
color: #88C0D0;
}
.processing .hljs-built_in {
color: #88C0D0;
}
.scss .hljs-keyword {
color: #81A1C1;
}
.stylus .hljs-keyword {
color: #81A1C1;
}
.swift .hljs-meta {
color: #D08770;
}
.vim .hljs-built_in {
color: #88C0D0;
font-style: italic;
}
.yaml .hljs-meta {
color: #D08770;
}
lib/3rdparty/highlight/styles/routeros.css
Vendored
+108
View File
@@ -0,0 +1,108 @@
/*
highlight.js style for Microtik RouterOS script
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-attribute {
color: #0E9A00;
}
.hljs-function {
color: #99069A;
}
.hljs-builtin-name {
color: #99069A;
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
/* Language color: hue: 90; */
.hljs-literal {
color: #78A960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #0C9A9A;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
lib/3rdparty/highlight/styles/shades-of-purple.css
Vendored
+97
View File
@@ -0,0 +1,97 @@
/**
* Shades of Purple Theme — for Highlightjs.
*
* @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
* @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
* @version 1.5.0
*/
.hljs {
display: block;
overflow-x: auto;
/* Custom font is optional */
/* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace'; */
line-height: 1.45;
padding: 2rem;
background: #2d2b57;
font-weight: normal;
}
.hljs-title {
color: #fad000;
font-weight: normal;
}
.hljs-name {
color: #a1feff;
}
.hljs-tag {
color: #ffffff;
}
.hljs-attr {
color: #f8d000;
font-style: italic;
}
.hljs-built_in,
.hljs-selector-tag,
.hljs-section {
color: #fb9e00;
}
.hljs-keyword {
color: #fb9e00;
}
.hljs,
.hljs-subst {
color: #e3dfff;
}
.hljs-string,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-code,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-quote,
.hljs-deletion {
color: #4cd213;
}
.hljs-meta,
.hljs-meta-string {
color: #fb9e00;
}
.hljs-comment {
color: #ac65ff;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-strong {
font-weight: normal;
}
.hljs-literal,
.hljs-number {
color: #fa658d;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
lib/3rdparty/highlight/styles/vs2015.css
Vendored
+115
View File
@@ -0,0 +1,115 @@
/*
* Visual Studio 2015 dark style
* Author: Nicolas LLOBERA <nllobera@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/*.hljs-code {
font-family:'Monospace';
}*/
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
lib/3rdparty/highlight/styles/xcode.css
Vendored
+25 -14
View File
@@ -12,55 +12,66 @@ XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
color: black;
}
/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {
color: #c0c0c0;
}
.hljs-comment,
.hljs-quote {
color: #006a00;
color: #007400;
}
.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #aa0d91;
}
.hljs-literal,
.hljs-name {
color: #008;
color: #aa0d91;
}
.hljs-variable,
.hljs-template-variable {
color: #660;
color: #3F6E74;
}
.hljs-string {
.hljs-code,
.hljs-string,
.hljs-meta-string {
color: #c41a16;
}
.hljs-regexp,
.hljs-link {
color: #080;
color: #0E0EFF;
}
.hljs-title,
.hljs-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-number,
.hljs-meta {
.hljs-number {
color: #1c00cf;
}
.hljs-section,
.hljs-meta {
color: #643820;
}
.hljs-class .hljs-title,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
color: #5c2699;
}
.hljs-attribute,
.hljs-attr {
color: #836C28;
}
.hljs-subst {
color: #000;
}
lib/3rdparty/highlight/styles/xt256.css
Vendored
+1 -1
View File
@@ -11,7 +11,7 @@
overflow-x: auto;
color: #eaeaea;
background: #000;
padding: 0.5;
padding: 0.5em;
}
.hljs-subst {
lib/3rdparty/pixi-ease.js
Vendored
+4090
View File
File diff suppressed because it is too large Load Diff
lib/3rdparty/pixi-viewport.js
Vendored
+3465
View File
File diff suppressed because it is too large Load Diff
lib/pixi/bundle.js
+2
View File
@@ -10,6 +10,7 @@ import Timeline from './timeline.js'
import Theme from './theme.js'
import Button from './button.js'
import ButtonGroup from './buttongroup.js'
import Scrollview from './scrollview.js'
import Slider from './slider.js'
import Switch from './switch.js'
import Popup from './popup.js'
@@ -41,6 +42,7 @@ window.AppTest = AppTest
window.Theme = Theme
window.Button = Button
window.ButtonGroup = ButtonGroup
window.Scrollview = Scrollview
window.Slider = Slider
window.Switch = Switch
window.Popup = Popup
lib/pixi/scrollbox.js
+585
View File
@@ -0,0 +1,585 @@
/**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/
export default class Scrollbox extends PIXI.Container {
/**
* create a scrollbox
* @param {object} options
* @param {boolean} [options.dragScroll=true] user may drag the content area to scroll content
* @param {string} [options.overflowX=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflowY=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
* @param {string} [options.overflow] (none, scroll, hidden, auto) sets overflowX and overflowY to this value
* @param {number} [options.boxWidth=100] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight=100] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollbarSize=10] size of scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetHorizontal=0] offset of horizontal scrollbar (in pixels)
* @param {number} [options.scrollbarOffsetVertical=0] offset of vertical scrollbar (in pixels)
* @param {boolean} [options.stopPropagation=true] call stopPropagation on any events that impact scrollbox
* @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
* @param {number} [options.scrollbarBackgroundAlpha=1] alpha of background of scrollbar
* @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
* @param {number} [options.scrollbarForegroundAlpha=1] alpha of foreground of scrollbar
* @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
* @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
super()
this.options = Object.assign({}, {
"boxWidth": 100,
"boxHeight": 100,
"scrollbarSize": 10,
"scrollbarBackground": 14540253,
"scrollbarBackgroundAlpha": 1,
"scrollbarForeground": 8947848,
"scrollbarForegroundAlpha": 1,
"dragScroll": true,
"stopPropagation": true,
"scrollbarOffsetHorizontal": 0,
"scrollbarOffsetVertical": 0,
"underflow": "top-left",
"fadeScrollbar": false,
"fadeWait": 3000,
"fadeEase": "easeInOutSine"
}, options)
this.ease = new PIXI.extras.Ease.list()
/**
* content in placed in here
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport}
*/
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
this.content
.decelerate()
.on('moved', () => this._drawScrollbars())
/**
* graphics element for drawing the scrollbars
* @type {PIXI.Graphics}
*/
this.scrollbar = this.addChild(new PIXI.Graphics())
this.scrollbar.interactive = true
this.scrollbar.on('pointerdown', this.scrollbarDown, this)
this.interactive = true
this.on('pointermove', this.scrollbarMove, this)
this.on('pointerup', this.scrollbarUp, this)
this.on('pointercancel', this.scrollbarUp, this)
this.on('pointerupoutside', this.scrollbarUp, this)
this._maskContent = this.addChild(new PIXI.Graphics())
this.update()
}
/**
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
this.options.scrollbarOffsetHorizontal = value
}
/**
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
this.options.scrollbarOffsetVertical = value
}
/**
* disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean}
*/
get disable()
{
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
this._disabled = value
this.update()
}
}
/**
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
return this.options.stopPropagation
}
set stopPropagation(value)
{
this.options.stopPropagation = value
}
/**
* user may drag the content area to scroll content
* @type {boolean}
*/
get dragScroll()
{
return this.options.dragScroll
}
set dragScroll(value)
{
this.options.dragScroll = value
if (value)
{
this.content.drag()
}
else
{
this.content.removePlugin('drag')
}
this.update()
}
/**
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number}
*/
get boxWidth()
{
return this.options.boxWidth
}
set boxWidth(value)
{
this.options.boxWidth = value
this.content.screenWidth = value
this.update()
}
/**
* sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
return this.options.overflow
}
set overflow(value)
{
this.options.overflow = value
this.options.overflowX = value
this.options.overflowY = value
this.update()
}
/**
* sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowX()
{
return this.options.overflowX
}
set overflowX(value)
{
this.options.overflowX = value
this.update()
}
/**
* sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
* scroll = always show scrollbar
* hidden = hide overflow and do not show scrollbar
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
return this.options.overflowY
}
set overflowY(value)
{
this.options.overflowY = value
this.update()
}
/**
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number}
*/
get boxHeight()
{
return this.options.boxHeight
}
set boxHeight(value)
{
this.options.boxHeight = value
this.content.screenHeight = value
this.update()
}
/**
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
this.options.scrollbarSize = value
}
/**
* width of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
* height of scrollbox less the scrollbar (if visible)
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
* is the vertical scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
return this._isScrollbarVertical
}
/**
* is the horizontal scrollbar visible
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
return this.content.left
}
/**
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
this._scrollWidth = value
}
/**
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
this._scrollHeight = value
}
/**
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
this.scrollbar.clear()
let options = {}
options.left = 0
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight
this.scrollbarLeft = (this.content.left / width) * this.boxWidth
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.endFill()
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.endFill()
}
if (this.isScrollbarVertical)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.endFill()
}
if (this.isScrollbarHorizontal)
{
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.endFill()
}
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
this.activateFade()
}
/**
* draws mask layer
* @private
*/
_drawMask()
{
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
.endFill()
this.content.mask = this._maskContent
}
/**
* call when scrollbox content changes
*/
update()
{
this.content.mask = null
this._maskContent.clear()
if (!this._disabled)
{
this._drawScrollbars()
this._drawMask()
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
if (direction !== null)
{
this.content
.drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow })
}
}
}
}
/**
* show the scrollbar and restart the timer for fade if options.fade is set
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
this.ease.remove(this.fade)
}
this.scrollbar.alpha = 1
const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
this.fade.on('each', () => this.content.dirty = true)
}
}
/**
* handle pointer down on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarDown(e)
{
const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
this.pointerDown = { type: 'horizontal', last: local }
}
else
{
if (local.x > this.scrollbarLeft)
{
this.content.left += this.content.worldScreenWidth
this.update()
}
else
{
this.content.left -= this.content.worldScreenWidth
this.update()
}
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
this.pointerDown = { type: 'vertical', last: local }
}
else
{
if (local.y > this.scrollbarTop)
{
this.content.top += this.content.worldScreenHeight
this.update()
}
else
{
this.content.top -= this.content.worldScreenHeight
this.update()
}
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
return
}
}
}
/**
* handle pointer move on scrollbar
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local
this.update()
}
else if (this.pointerDown.type === 'vertical')
{
const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local
this.update()
}
if (this.options.stopPropagation)
{
e.stopPropagation()
}
}
}
/**
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
this.pointerDown = null
}
/**
* resize the mask for the container
* @param {object} options
* @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
* @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
if (options.scrollWidth)
{
this.scrollWidth = options.scrollWidth
}
if (options.scrollHeight)
{
this.scrollHeight = options.scrollHeight
}
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
this.update()
}
/**
* ensure that the bounding box is visible
* @param {number} x - relative to content's coordinate system
* @param {number} y
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
this.content.ensureVisible(x, y, width, height)
this._drawScrollbars()
}
}
lib/pixi/scrollbox.min.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
lib/pixi/scrollview.html
+25 -29
View File
@@ -13,7 +13,6 @@
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<!-- <script src="./scrollbox.min.js"></script> -->
</head>
<body onload="Doctest.run()">
<h1>Scrollview</h1>
@@ -37,38 +36,35 @@
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
height: 400,
transparent: false
}).setup().run()
// let scrollview1 = new Scrollview({
// x: 10,
// y: 20
// })
app.loader
.add('elephant1', './assets/elephant-1.jpg')
.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({
// x: 90,
// y: 20,
// fill: 0xfd355a,
// fillActive: 0x5954d3,
// controlFill: 0xfecd2d,
// controlFillActive: 0xfd413b,
// strokeActiveWidth: 4,
// controlStrokeActive: 0x50d968,
// controlStrokeActiveWidth: 12,
// controlStrokeActiveAlpha: .8,
// tooltip: 'Dies ist ein Switch'
// })
const scrollview1 = new Scrollview({boxWidth: 300, boxHeight: 180})
scrollview1.content.addChild(sprite1)
app.scene.addChild(scrollview1)
// const scrollbox = new PIXI.extras.Scrollbox({boxWidth: 500, boxHeight: 200})
// scrollbox.x = 70
// scrollbox.y = 30
// const sprite = new PIXI.Sprite(resources.fulda.texture)
// sprite.scale.set(.5, .5)
// scrollbox.content.addChild(sprite)
// app.stage.addChild(scrollbox)
// app.scene.addChild(switch1, switch2)
const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})
scrollview2.x = 500
scrollview2.y = 30
sprite2.x = 40
sprite2.y = 40
sprite2.scale.set(.3, .3)
sprite3.x = 60
sprite3.y = 100
sprite3.alpha = .6
sprite3.scale.set(.5, .5)
scrollview2.content.addChild(sprite2, sprite3)
app.scene.addChild(scrollview2)
})
</script>
</body>
lib/pixi/scrollview.js
+10 -416
View File
@@ -1,5 +1,4 @@
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Scrollbox from './scrollbox.js'
/**
* Callback for the switch action.
@@ -54,140 +53,22 @@ import Tooltip from './tooltip.js'
* app.scene.addChild(switch1)
*
* @class
* @extends PIXI.Container
* @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
* @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}
*/
export default class Switch extends PIXI.Container {
export default class Scrollview extends Scrollbox {
/**
* Creates an instance of a Switch.
*
* @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 = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
super(opts)
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
if (this.opts.height > this.opts.width) {
this.opts.height = this.opts.width
}
// Properties
//-----------------
this.id = this.opts.id
this.radius = this.opts.height / 2
this._active = null
this._disabled = null
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
//-----------------
this.tempAnimated = {
fill: this.opts.fill,
fillAlpha: this.opts.fillAlpha,
stroke: this.opts.stroke,
strokeWidth: this.opts.strokeWidth,
strokeAlpha: this.opts.strokeAlpha,
controlFill: this.opts.controlFill,
controlFillAlpha: this.opts.controlFillAlpha,
controlStroke: this.opts.controlStroke,
controlStrokeWidth: this.opts.controlStrokeWidth,
controlStrokeAlpha: this.opts.controlStrokeAlpha,
controlRadius: this.opts.controlRadius
}
this.opts = opts
// setup
//-----------------
@@ -202,306 +83,19 @@ export default class Switch extends PIXI.Container {
* Creates children and instantiates everything.
*
* @private
* @return {Switch} A reference to the switch for chaining.
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
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
}
/**
* 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() {
// 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
}