Showing preview only (645K chars total). Download the full file or copy to clipboard to get everything.
Repository: luruke/human-gpu
Branch: main
Commit: 62b9070217b8
Files: 27
Total size: 621.3 KB
Directory structure:
gitextract_ex6btzgn/
├── .gitignore
├── README.md
└── src/
├── gen-pdf.js
├── html/
│ ├── exercises/
│ │ ├── 1/
│ │ │ └── 1.js
│ │ ├── 10/
│ │ │ └── 10.js
│ │ ├── 11/
│ │ │ └── 11.js
│ │ ├── 12/
│ │ │ └── 12.js
│ │ ├── 13/
│ │ │ └── 13.js
│ │ ├── 14/
│ │ │ └── 14.js
│ │ ├── 15/
│ │ │ └── 15.js
│ │ ├── 16/
│ │ │ └── 16.js
│ │ ├── 17/
│ │ │ └── 17.js
│ │ ├── 2/
│ │ │ └── 2.js
│ │ ├── 3/
│ │ │ └── 3.js
│ │ ├── 4/
│ │ │ └── 4.js
│ │ ├── 5/
│ │ │ └── 5.js
│ │ ├── 6/
│ │ │ └── 6.js
│ │ ├── 7/
│ │ │ └── 7.js
│ │ ├── 8/
│ │ │ └── 8.js
│ │ └── 9/
│ │ └── 9.js
│ ├── index.html
│ ├── style.css
│ └── vendor/
│ ├── fit-columns.js
│ ├── isotope.js
│ ├── prism.css
│ └── prism.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
package-lock.json
.vscode
================================================
FILE: README.md
================================================
# 🧠 Human GPU Exercises.
In the process of giving a WebGL workshop I created a series of exercises that aims to teach the basic of the WebGL/OpenGL pipeline.
The excercises are made to be printed and done in old-fashion **pen and paper**.
You are the GPU, you need to _read_, _parse_, _compile_ and _render_ using only the power of your mind.
It's a hands on experiments, where WebGL features are introduced incrementally and where exercises are meant to be done in the correct order.
Each exercise is accompanied by its solution that shows the final frame.
This is still a work-in-progress thing, surely full of typos and subject to changes.
- [#0001 - The intro](https://github.com/luruke/human-gpu/blob/main/exercises/0001.pdf)
- [#0002 - Position attribute](https://github.com/luruke/human-gpu/blob/main/exercises/0002.pdf)
- [#0003 - Only triangle?](https://github.com/luruke/human-gpu/blob/main/exercises/0003.pdf)
- [#0004 - Vecfour?](https://github.com/luruke/human-gpu/blob/main/exercises/0004.pdf)
- [#0005 - Multiple attributes](https://github.com/luruke/human-gpu/blob/main/exercises/0005.pdf)
- [#0006 - Buffer + attribute pr0 l337](https://github.com/luruke/human-gpu/blob/main/exercises/0006.pdf)
- [#0007 - Do you love GPU?](https://github.com/luruke/human-gpu/blob/main/exercises/0007.pdf)
- [#0008 - Less memory is good](https://github.com/luruke/human-gpu/blob/main/exercises/0008.pdf)
- [#0009 - Uniforms](https://github.com/luruke/human-gpu/blob/main/exercises/0009.pdf)
- [#0010 - Uniforms v2](https://github.com/luruke/human-gpu/blob/main/exercises/0010.pdf)
- [#0011 - GLSL](https://github.com/luruke/human-gpu/blob/main/exercises/0011.pdf)
- [#0012 - what about z and w?](https://github.com/luruke/human-gpu/blob/main/exercises/0012.pdf)
- [#0013 - Fragment shader](https://github.com/luruke/human-gpu/blob/main/exercises/0013.pdf)
- [#0014 - Filling pixels](https://github.com/luruke/human-gpu/blob/main/exercises/0014.pdf)
- [#0015 - Half pixel?](https://github.com/luruke/human-gpu/blob/main/exercises/0015.pdf)
- [#0016 - Varyings](https://github.com/luruke/human-gpu/blob/main/exercises/0016.pdf)
- [#0017 - UV?](https://github.com/luruke/human-gpu/blob/main/exercises/0017.pdf)
- #0018... To be done
- #0019... To be done
- #0020... To be done
- ...
[Download all](https://github.com/luruke/human-gpu/archive/main.zip)
================================================
FILE: src/gen-pdf.js
================================================
const puppeteer = require("puppeteer");
const delay = (t) => {
return new Promise((resolve) => {
setTimeout(resolve, t);
});
};
(async () => {
const browser = await puppeteer.launch({
dumpio: true,
headless: false,
args: ["--headless", "--hide-scrollbars", "--mute-audio"],
// args: ["--hide-scrollbars", "--mute-audio"],
});
const page = await browser.newPage();
const genScreenshot = async (url, filename) => {
await page.goto(url, {
waitUntil: "networkidle2",
});
await delay(50);
await await page.pdf({
path: filename,
format: "A4",
pageRanges: "1",
});
};
const genExercise = async (i) => {
const name = i.toString().padStart(4, "0");
const url = `http://127.0.0.1:8080/index.html?n=${i}`;
const excercise = `../exercises/${name}.pdf`;
const solution = `../solutions/${name}.pdf`;
console.log(excercise);
await genScreenshot(url + "&hide", excercise);
await genScreenshot(url, solution);
};
// genExercise(11);
// genExercise(12);
for (let i = 1; i < 11; i++) {
genExercise(i);
}
await browser.close();
})();
================================================
FILE: src/html/exercises/1/1.js
================================================
const BUFFERS = `{
"data1": [0.0, 1.0, 2.0]
}`;
const ATTRIBUTES = `{
"id": { "buffer": "data1", "size": 1 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute float id;
void main() {
if (id == 0.0) {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}
if (id == 1.0) {
gl_Position = vec4(0.0, 0.5, 0.0, 1.0);
}
if (id == 2.0) {
gl_Position = vec4(0.7, 0.0, 0.0, 1.0);
}
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0001 – The intro";
const TIPS = `Hello human! I'm the graphics processing unit doing all the heavy lifting under your WebGL application. I always do your dirty job, with all those math expressions and repetitive tasks. I have enough! I need some damn vacation...Now it's your turn.
Don't worry, I'll explain you what to do step by step. On the right you have a grid with the framebuffer. Your job is to to draw the final frame. You will find all the information you need to draw that frame.
Let me you introduce the *Buffers*:
- It's super simple, they are just raw data!
- Usually they are just a big array containing \`float\` values
ahh, then we have the dears *Attributes*:
- They are the "pointer|interface" that lets you read from buffers
In this example, we have one attribute called \`id\` that lets you read from \`data1\` one element at the time. (because \`size\` is \`1\`)
Then we have the *Vertex shader*, a small GLSL program that you will be using to draw the shape of your image.
Once you finish to draw, you can send the framebuffer on the screen and show the image on the screen. But be quick! We just have 16 milliseconds!
Now go and draw \`1 triangle\`! If you don't know human, a triangle have 3 points (or vertices). Still confused? right...it's your first time...ok
If I were you, I would:
1. Run the vertex shader (in your mind)
2. Read the \`gl_Position\` X and Y value, and draw a little dot at the right NDC spot.
This special variable contains in the order the X, Y, Z, W of the Normalized Device Coordinates (NDC).
It's similar to your human Cartesian coordinate system, It's just that it's a bit messed up and it goes from -1 to +1.
Don't worry about the Z and W component. We don't need them now.
To help you out, I've added on each corner the coordinate (X, Y) reference. Plus each little square measures exactly 0.1 NDC.
3. Repeat step 1 and 2 three times, one for each triangle point or vertex. (Pay attention that attribute \`id\` will change at each invocation)
4. Draw a line that unites the three dots. (I call this primitive assembly)
Now go and give it a try! Will go in more detail on GLSL and other details in the next exercises.`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 290px;
}
.box-tips {
width: 380px;
}
.box-tips code {
font-size: 9px;
}
.canvas {
width: 80mm;
height: 80mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/10/10.js
================================================
const BUFFERS = `{
"data": [
-0.5, -0.5, -0.5, 0.5, 0.5, -0.5,
-0.5, 0.5, 0.5, 0.5, 0.5, -0.5
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "data", "size": 2 }
}`;
const UNIFORMS = `{
"offset": [0.1, 0.5],
"stretch": 0.5
}`;
const VERTEX = `attribute vec2 position;
uniform vec2 offset;
uniform float stretch;
void main() {
vec2 pos = position;
pos += offset;
pos.y += pos.x * stretch;
gl_Position = vec4(pos, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0010 – Uniforms v2";
const TIPS = `W0w hum4n, that's already our gpu task n.10!
You really are a good apprentice, you remind me my great grandfather amiga GPU v.01.
Like attributes, you can have multiple uniforms in your shader.
Draw me 2 trianglessss, c'mon.
In case you are wondering...What's happening when a vertex goes outside the NDC range?
We just draw it at the edge human!
Basically we clamp and make sure values are always -1 and +1.`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 2 * 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/11/11.js
================================================
const BUFFERS = `{
"data": [
-0.1, -0.1, -0.2, 0.2, 0.1, 0.2
]
}`;
const ATTRIBUTES = `{
"aPosition": { "buffer": "data", "size": 2 }
}`;
const UNIFORMS = `{
"uOffset": [0.1, -0.2]
}`;
const VERTEX = `attribute vec2 aPosition;
uniform vec2 uOffset;
const float multiplier = 2.0;
vec2 getPosition() {
vec2 p = aPosition;
for (int i = 0; i < 2; i++) {
p *= multiplier;
}
p += uOffset;
return p;
}
void main() {
vec2 pos = getPosition();
gl_Position = vec4(pos, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0011 – GLSL";
const TIPS = `What's up bro?
new little task for you.
As you probably noticed GLSL language is very similar to "C" and it has all the common things you can expect from a C-like languages. (\`for, while, if, else\`)
Also, you'll see that is common for other humans like you to name attributes and uniforms with their type as prefix, like \`aVariable\` or \`uVariable\`...humans are so werid man...
Draw me a triangle for me?`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 1 * 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/12/12.js
================================================
const BUFFERS = `{
"data": [
-0.5, -0.5, 0.5, 0.6, 0.6, 2, -0.5, 0.5, 1.0
]
}`;
const ATTRIBUTES = `{
"aData": { "buffer": "data", "size": 3 }
}`;
const UNIFORMS = `{
"uDepth": 0.4
}`;
const VERTEX = `attribute vec3 aData;
uniform float uDepth;
void main() {
vec2 pos = aData.xy;
gl_Position = vec4(pos, uDepth, aData.z);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0012 – what about z and w?";
const TIPS = `0101010101011010101011010100001! 0101001011?
Ah, it's you human sorry...sometimes i forgot that you don't talk our languge.
Until now we only draw stupid 2D shapes, and maybe you are wondering, how do we render those 3D cool stuff!??
Slow down...we'll get there.
Nothing magical or special, in order to do 3D, app data (uniforms + attributes) combined with some math in the vertex shader will simulate perspective and depth.
We (GPU) don't have any notion about 3D, we just draw triangle were the apps tell us. All those things and fancy names (perspective camera, orthographic, projection) are humans concepts, best-practices and standards.
But let's go step by step!
By now we only modified the \`gl_Position\` \`x\` and \`y\` property.
You might think that the \`z\` property will change the perspective and depth of the vertex, but this actully will only be used to create the "\`depth buffer\`" and has no impact at all on the position of the vertex.
Think about it like the CSS \`z-index\` value.
It's used to determinate visibility when verticies are overlapping.
Notice that when \`z\` goes outside the -1/+1 range, the vertex is discarded.
The \`w\` property (the last value in the \`vec4\`) is also called \`homogeneous coordinate\`. Before processing the \`x, y, z\` we must divide them by the \`w\` component.
By now it always had \`1.0\` value, so, without knowing, we always divided \`x, y and z\` by \`1.0\` – which had no effect.
It's pretty stupid right? Yes, and I agree with you. But there are reasons behind it
Let me see..draw me a triangle!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 1 * 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 90mm;
height: 90mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/13/13.js
================================================
const BUFFERS = `{
"data": [ -0.5, 0.5, 0.0, 0.5, 0.5, 0.0,
0.5, -0.5, 0.0, -0.5, -0.5, 0.0 ],
"_index": [ 3, 0, 1, 1, 2, 3 ]
}`;
const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 3 } }`;
const UNIFORMS = `{
}`;
const VERTEX = `attribute vec3 aPosition;
void main() {
gl_Position = vec4(aPosition, 1.0);
}`;
const SHOW_PIXELS = true;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = false;
const TITLE = "Human GPU #0013 – Fragment shader";
const TIPS = `hello! let's talk about the elephant in the room....Introducing you the *Fragment Shader*!
Until now, you only did half of the job, completing just a part of the real WebGL pipeline.
Drawing the triangles, in the way we did, is generally called Shape or Primitive Assembly. We worked in a theorethical vectorial space, without taking into account the actual screen (or better saying, the frame buffer) resolution.
After drawing our triangles, we need to "project" our shapes to a pixel grid. This phase is called rasterization.
The frame buffer where we are drawing has in fact a well defined resolution.
We are going to work with a whopping 60x60px resolution! For a total of 3600 pixels. (I'm trying to help you out, human...).
You'll see the frame buffer has now a new grid. Each little square in this new grid will rapresent a pixel.
Similarly to our vertex shader, the fragment shader is written in \`GLSL\` and it has only a job: define and set the global variable \`gl_FragColor\`.
The \`gl_FragColor\` will set the color of the pixel in RGBA.
Let's give it a try: draw and *color* 2 triangles!
`;
const RUN = (gl) => {
// gl.drawArrays(gl.TRIANGLES, 0, 2 * 3);
gl.drawElements(gl.TRIANGLES, 2 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/14/14.js
================================================
const BUFFERS = `{
"data": [
-0.5, -0.5, 2.0, -0.5, 0.5, 2.0,
0.5, 0.5, 1.0, -0.5, -0.5, 2.0,
0.5, -0.5, 1.0, 0.5, 0.5, 1.0
]
}`;
const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 3 } }`;
const UNIFORMS = `{ "uColor": [1.0, 0.0, 0.0] }`;
const VERTEX = `attribute vec3 aPosition;
void main() {
gl_Position = vec4(aPosition.xy, 0.0, aPosition.z);
}`;
const SHOW_PIXELS = true;
const FRAGMENT = `precision highp float;
uniform vec3 uColor;
void main() {
gl_FragColor = vec4(uColor.rgb, 1.0);
}`;
const HIDE_FRAGMENT = false;
const TITLE = "Human GPU #0014 – Filling pixels";
const TIPS = `Ok, so, you liked painting and filling squares, human?
Our previous square in #0013 was 30x30px, and it filled a surface of 900 pixels.
The fragment shader was executed (in your mind) 900 times, and the vertex shader was executed 6 times.
Few more things about fragment shader:
Don't pay too much attention to the \`precision highp float;\`; Fragment shader lacks of default precision format, so we must specify one.
The RGBA values expressed in gl_FragColor spans from 0 to 1.
For instance \`rgb(233, 10, 30)\` will be expressed as \`vec3(233.0 / 255.0, 10.0 / 255.0, 30.0 / 255.0)\`
The fragment shader can access to uniforms, like the vertex shader does.
Draw two triangles, and fill them!
`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 2 * 3);
// gl.drawElements(gl.TRIANGLES, 2 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/15/15.js
================================================
const BUFFERS = `{
"data": [
-0.75, -0.8,
0.5, 0.5,
0.5, -0.5
]
}`;
const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 2 } }`;
const UNIFORMS = `{ "uColor": [1.0, 1.0, 0.0] }`;
const VERTEX = `attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition.xy, 0.0, 1.0);
}`;
const SHOW_PIXELS = true;
const FRAGMENT = `precision highp float;
uniform vec3 uColor;
void main() {
gl_FragColor = vec4(uColor.rgb, 1.0);
}`;
const HIDE_FRAGMENT = false;
const TITLE = "Human GPU #0015 – Half pixel?";
const TIPS = `Hey human...you probably wondered, what happens when a triangle fills just a part of a pixel?
We need to fill it or not?
The phyical led, in fact, can have just one color! no cheating on that.
Either you fill it completely or not.
So, how do we get sharp and and nice-looking shapes on a finite number of pixel then?
Short answer, you can't, but there are some tricks you can put in place..."antialiasing", rings a bell to you?
We won't dive into it...as I'm pretty sure your calculation power is pretty limited...
Can you draw a triangle and fill it?`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 1 * 3);
// gl.drawElements(gl.TRIANGLES, 2 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/16/16.js
================================================
const BUFFERS = `{
"position": [ 0.0, -0.8, -0.8, 0.8, 0.8, 0.8 ],
"darkness": [ 1.0, 0.0, 0.0 ]
}`;
const ATTRIBUTES = `{
"aPosition": { "buffer": "position", "size": 2 },
"aDarkness": { "buffer": "darkness", "size": 1 }
}`;
const UNIFORMS = `{ }`;
const VERTEX = `attribute vec2 aPosition;
attribute float aDarkness;
varying float vDark;
void main() {
vDark = aDarkness;
gl_Position = vec4(aPosition.xy, 0.0, 1.0);
}`;
const SHOW_PIXELS = true;
const FRAGMENT = `precision highp float;
uniform vec3 uColor;
varying float vDark;
void main() {
gl_FragColor = vec4(vec3(1.0 - vDark), 1.0);
}`;
const HIDE_FRAGMENT = false;
const TITLE = "Human GPU #0016 – Varyings";
const TIPS = `How do we draw something more interesting then just a plain color?
How can we get some sort of variables/dynamic thing in the fragment shader so to add some logic?
With \`varying\`, of course!
Along to the type qualifiers \`attribute\` and \`uniform\`, we are introducing \`varying\` variables.
Is the only way to pass information from the vertex shader to the fragment shader.
A varying is defined per each vertex, and its valued is passed along the pipeline to the fragment shader.
This value will then be interpolated linearly along the pixels. (mindblowing, right??)
Let's say we draw a line, composed from points (vertices) A and B, that is stretched along 100 pixels width.
- vertex A has a varying with value 0.0
- vertex B has a varying with value 1.0
This will result in:
- pixel at 1px will get the varying value as 0.0
- pixel at 100px will get the varying value as 1.0
- pixel at 50px will get the varying value as 0.5
- pixel at 75px will get the varying value as 0.75
Let's give it a try and draw a triangle!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 1 * 3);
// gl.drawElements(gl.TRIANGLES, 2 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/17/17.js
================================================
const BUFFERS = `{
"position": [
-0.8, 0.2,
0.8, 0.2,
0.8, -0.2,
-0.8, -0.2
],
"uv": [
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
],
"_index": [
0, 1, 2,
0, 3, 2
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "position", "size": 2 },
"uv": { "buffer": "uv", "size": 2 }
}`;
const UNIFORMS = `{
"uRed": [1.0, 0.0, 0.0],
"uBlack": [0.0, 0.0, 0.0],
"uBlue": [0.0, 0.0, 1.0]
}`;
const VERTEX = `attribute vec2 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 0.0, 1.0);
}`;
const SHOW_PIXELS = true;
const FRAGMENT = `precision highp float;
varying vec2 vUv;
uniform vec3 uRed;
uniform vec3 uBlack;
uniform vec3 uBlue;
void main() {
vec3 color = uRed;
if (vUv.x > 0.5) {
color = uBlue;
}
if (vUv.x > 0.75) {
color = uBlack;
}
gl_FragColor = vec4(color, 1.0);
}`;
const HIDE_FRAGMENT = false;
const TITLE = "Human GPU #0017 - UV?";
const TIPS = `Varyings are cool, don't you agree?
Ever heard of UV and UV maps?
Here's a little taste of them!
Draw two triangle and colour them!`;
const RUN = (gl) => {
// gl.drawArrays(gl.TRIANGLES, 0, 1 * 3);
gl.drawElements(gl.TRIANGLES, 2 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 350px;
}
.canvas {
width: 80mm;
height: 80mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/2/2.js
================================================
const BUFFERS = `{
"data": [-0.5, -0.5, 0.0, 0.5, 0.5, -0.5]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "data", "size": 2 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0002 – Position attribute";
const TIPS = `Wow man...you took AAAAGEEES to draw that first triangle...hopefully you will draw faster this time.
This time our attribute read two values at the time from our buffer, so it's a \`vec2\`. Attributes can be of type \`float, vec2, vec3, vec4\`.
Even if you have a human brain, you can easily understand that float = 1 value, vec2 = 2 values, vec3 = 3 values...
Just so you know, in our exercises we're going to use GLSL ES version 1.0 that ships with WebGL 1.0.
I have added some annotation that should help you understand how attribute works.
Now go, and draw me a triangle! Quick! Quick!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
main::after {
content: '';
display: block;
position: absolute;
width: 300px;
height: 300px;
background-image: url(./exercises/2/annotation.svg);
z-index: 10;
top: 353px;
background-repeat: no-repeat;
left: 32px;
opacity: .3;
pointer-events: none;
}
.canvas {
width: 140mm;
height: 140mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/3/3.js
================================================
const BUFFERS = `{
"p": [-0.6, -0.3, -0.6, 0.3, 0.6, -0.3, -0.6, 0.3, 0.6, 0.3, 0.6, -0.3]
}`;
const ATTRIBUTES = `{
"pos": { "buffer": "p", "size": 2 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 pos;
void main() {
vec2 newPos = pos * 1.5;
gl_Position = vec4(newPos, 0.0, 1.0);
// gl_Position = vec4(newPos.xy, 0.0, 1.0);
// gl_Position = vec4(newPos.x, newPos.y, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0003 – Only triangle?";
const TIPS = `Hello again human. I guess you're wondering...how do we draw other stuff then just triangles?
We can actually "combine" triangles together and draw any kind of stuff!
To make things more interesting, before using our attribute data, we are doing a small multiplication. Can you do multiplication human?
You see that I've added two alternative version of assigning our \`gl_Position\` variable. In GLSL types have some special property like swizzle (you can google \`swizzle glsl\` human).
You also see that we multiply a vec2 with a number, that's also possible with the glsl compiler, and with human brain glsl compiler as well.
Multiplying a vec2 (or any vec*) with a scalar (fancy name for a number) results in multiplying each vec component.
Example,
\`vec3(3, 9, 4) * 2 = vec3(6, 18, 8)\`,
\`vec2(2, 3) * 3 = vec3(6, 9)\`
Now go and draw *TWO* triangles!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 6);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/4/4.js
================================================
const BUFFERS = `{
"data": [
1.0, -0.5, 1.0, 0.1,
1.0, -0.3, 1.0, 0.0,
-0.5, 0.0, 4.0, 0.0
]
}`;
const ATTRIBUTES = `{
"d": { "buffer": "data", "size": 4}
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec4 d;
vec2 position() {
return vec2(
d.y - d.w,
(d.x * d.z) / 2.0
);
}
void main() {
gl_Position = vec4(vec3(0.0), 1.0);
gl_Position.xy = position();
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0004 – Vecfour?";
const TIPS = `Heeehe human goodmorning. How are you?
I want to mess up your brain a little bit...
In GLSL you can create your own functions, like the \`vec2 position\` in this case.
Now go and draw one triangle!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/5/5.js
================================================
const BUFFERS = `{
"buffer1": [-0.4, -0.4, 0.4, 0.4, 0.5, -0.3],
"buffer2": [-0.4, 0.2, 0.0],
"buffer3": [1.0, 1.5, 0.5]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "buffer1", "size": 2 },
"offset": { "buffer": "buffer2", "size": 1 },
"scale": { "buffer": "buffer3", "size": 1 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 position;
attribute float offset;
attribute float scale;
void main() {
vec2 p = vec2(position);
p += offset;
p *= scale;
gl_Position = vec4(p, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0005 – Multiple attributes";
const TIPS = `Heya human, of course you can have multiple attributes and buffers, like in this example.
It's up to our app how to structure and deliver data to our vertices.
Now draw me a triangle, human!`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/6/6.js
================================================
const BUFFERS = `{
"buffer1": [
-0.4, -0.2, 0.2, 0.5, 0.3, -0.9,
-0.2, 0.4, 0.0,
1.0, 1.0, 0.5
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "buffer1", "size": 2, "offset": 0 },
"offset": { "buffer": "buffer1", "size": 1, "offset": 6 },
"scale": { "buffer": "buffer1", "size": 1, "offset": 9 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 position;
attribute float offset;
attribute float scale;
void main() {
vec2 p = vec2(position);
p += offset;
p *= scale;
gl_Position = vec4(p, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0006 – Buffer + attribute pr0 l337";
const TIPS = `Multiple attribute can read from the same buffer, like in this example.
You see that each attribute now has the \`offset\` property, means that will start reading from the buffer at index + offset.
(To help you out human, i've formatted the buffer so that it's easier for you to read)
Together with \`offset\`, attributes have other property like:
- type (in our exericises, we'll just use \`gl.FLOAT\`)
- normalized (true/false)
- stride
To be honest, it's bit rare for us GPU to see offset/stride used out in the while.
Most of the time, one buffer is "linked" to one attribute.
So don't worry too much.
Buffer too can have different property, like:
- bind target (ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER)
- usage (like STATIC_DRAW, DYNAMIC_DRAW)
Heya human, by now you should well understand how the relationship between buffer and attributes works.
Can you draw a triangle for me?`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/7/7.js
================================================
const BUFFERS = `{
"buffer1": [
-6, 3, 0, -8, -4, 5,
0, -8, -4, 5, -1, 4,
-1, 4, 0, -8, 2, 5,
0, -8, 2, 5, 5, 4
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "buffer1", "size": 2 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 position;
void main() {
gl_Position = vec4(position / 10.0, 0.0, 1.0);
gl_Position.y = max(-0.5, gl_Position.y);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0007 – Do you love GPU?";
const TIPS = `Hey human, long time no see you...can you draw for me 4 triangles?
In GLSL there are some built-in functions, like \`max\`, which returns the larger of the two arguments.`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 4 * 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/8/8.js
================================================
const BUFFERS = `{
"buffer1": [
-0.1, -0.3,
-0.6, 0.3,
-0.4, 0.5,
-0.1, 0.1,
0.7, 0.8,
0.9, 0.6
],
"_index": [
0, 1, 2,
0, 2, 3,
0, 3, 4,
0, 4, 5
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "buffer1", "size": 2 }
}`;
const UNIFORMS = `{}`;
const VERTEX = `attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0008 – Less memory is good";
const TIPS = `Gooodmorning human, how things are going so far?
Already tired of being a GPU? ahHAHahHAha
As you probably noticed in #0007, when drawing a shape using only triangles, a lot of point in space are overlapping and repeated.
I want to introduce you the "index elements drawing", it's an optimisation that tries to reduce the size of your buffers.
When you see this special buffer called \'_index\', means that, before reading from the buffer, you need to use the \`_index\` as lookup table.
Added some annotation to make you understand, aahh...poor humans.
Give it a try and draw 4 triangles.`;
const RUN = (gl) => {
// gl.drawArrays(gl.TRIANGLES, 0, 4 * 3);
gl.drawElements(gl.TRIANGLES, 4 * 3, gl.UNSIGNED_SHORT, 0);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
main::after {
content: '';
display: block;
position: absolute;
width: 300px;
height: 300px;
background-image: url(./exercises/8/annotation.svg);
z-index: 10;
top: 397px;
background-repeat: no-repeat;
left: 45px;
opacity: .3;
pointer-events: none;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/exercises/9/9.js
================================================
const BUFFERS = `{
"data": [
-4, 4,
-7, -3,
-2, 3,
-2, 3,
-1, -2,
0, 3
]
}`;
const ATTRIBUTES = `{
"position": { "buffer": "data", "size": 2 }
}`;
const UNIFORMS = `{
"scale": 2.0
}`;
const VERTEX = `attribute vec2 position;
uniform float scale;
void main() {
vec2 pos = position / 10.0;
pos *= scale;
pos += vec2(.5, 0.0);
gl_Position = vec4(pos, 0.0, 1.0);
}`;
const FRAGMENT = `precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const HIDE_FRAGMENT = true;
const TITLE = "Human GPU #0009 – Uniforms";
const TIPS = `Huuuuumaaan, today we are introducing uniforms!
As you can see we have a new "box" called Uniforms.
Those are just constants that can be easily read in the shader via \`uniform $type $name;\`, where \`$type\` is usually \`float, vec* or mat*\`.
Uniforms are the best and fastest way to receive small bits of data in our shaders.
Show me what you got! Draw me 2 triangles`;
const RUN = (gl) => {
gl.drawArrays(gl.TRIANGLES, 0, 2 * 3);
};
var style = document.createElement("style");
style.innerHTML = `
.box {
width: 400px;
}
.canvas {
width: 100mm;
height: 100mm;
}
`;
document.head.appendChild(style);
================================================
FILE: src/html/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./vendor/prism.css" />
<title>Human GPU</title>
</head>
<body>
<page size="A4">
<main>
<div class="box box-tips">
<div class="box__title" data-title>Human GPU</div>
<pre class="box__content">
<code class="language-markdown" data-tips></code>
</pre>
</div>
<div class="box box-buffers">
<div class="box__title">Buffers</div>
<pre class="box__content">
<code class="language-javascript" data-buffers></code>
</pre>
</div>
<!-- box -->
<div class="box box-attributes">
<div class="box__title">Attributes</div>
<pre class="box__content">
<code class="language-javascript" data-attributes></code>
</pre>
</div>
<!-- box -->
<div class="box box-uniforms">
<div class="box__title">Uniforms</div>
<pre class="box__content">
<code class="language-javascript" data-uniforms></code>
</pre>
</div>
<!-- box -->
<div class="box box-vertex">
<div class="box__title">Vertex shader</div>
<pre class="box__content">
<code class="language-glsl" data-vertex></code>
</pre>
</div>
<div class="box box-fragment">
<div class="box__title">Fragment shader</div>
<pre class="box__content">
<code class="language-glsl" data-fragment></code>
</pre>
</div>
<div class="canvas">
<canvas class="canvas__frame"></canvas>
<div class="canvas__layer-x">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="canvas__layer-y">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="canvas__pixels">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
<span class="legend legend-center">(0, 0)</span>
<span class="legend legend-topleft">(-1, 1)</span>
<span class="legend legend-topright">(1, 1)</span>
<span class="legend legend-bottomright">(1, -1)</span>
<span class="legend legend-bottomleft">(-1, -1)</span>
</div>
<!-- <p class="title">Human GPU #0001</p> -->
</main>
</page>
<script src="./vendor/isotope.js"></script>
<script src="./vendor/fit-columns.js"></script>
<script>
function run() {
// update view
const root = document.querySelector("main");
if (typeof SHOW_PIXELS !== "undefined") {
const ph = root.querySelector(".canvas__pixels .horizontal");
const pv = root.querySelector(".canvas__pixels .vertical");
const n = 61;
for (let i = 0; i < n; i++) {
ph.appendChild(document.createElement("span"));
}
for (let i = 0; i < n; i++) {
pv.appendChild(document.createElement("span"));
}
}
root.querySelector("[data-buffers]").innerHTML = BUFFERS;
root.querySelector("[data-attributes]").innerHTML = ATTRIBUTES;
root.querySelector("[data-uniforms]").innerHTML = UNIFORMS;
// root.querySelector("[data-fragment]").innerHTML = FRAGMENT;
root.querySelector("[data-vertex]").innerHTML = VERTEX;
root.querySelector("[data-fragment]").innerHTML = FRAGMENT;
root.querySelector("[data-title]").innerHTML = TITLE;
root.querySelector("[data-tips]").innerHTML = TIPS;
let prism = document.createElement("script");
prism.src = `./vendor/prism.js`;
document.head.appendChild(prism);
// start real deal
const $canvas = document.querySelector(".canvas__frame");
const gl = $canvas.getContext("webgl", {
preserveDrawingBuffer: true,
});
const WIDTH = $canvas.getBoundingClientRect().width;
const HEIGHT = $canvas.getBoundingClientRect().height;
const _ATTRIBUTES = JSON.parse(ATTRIBUTES);
const _BUFFERS = JSON.parse(BUFFERS);
const _UNIFORMS = JSON.parse(UNIFORMS);
$canvas.width = WIDTH;
$canvas.height = HEIGHT;
gl.viewport(0, 0, WIDTH, HEIGHT);
if (!Object.keys(_UNIFORMS).length) {
root.removeChild(root.querySelector(".box-uniforms"));
}
if (HIDE_FRAGMENT) {
root.removeChild(root.querySelector(".box-fragment"));
}
let iso = new Isotope(root, {
layoutMode: "fitColumns",
itemSeletor: ".box",
transitionDuration: 0,
});
window.setTimeout(() => {
// $("main").isotope("layout");
iso.layout();
}, 500);
function compileShader(gl, shaderSource, shaderType) {
var shader = gl.createShader(shaderType);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
throw "could not compile shader:" + gl.getShaderInfoLog(shader);
}
return shader;
}
const vs = compileShader(gl, VERTEX, gl.VERTEX_SHADER);
const fs = compileShader(gl, FRAGMENT, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
for (const attribName in _ATTRIBUTES) {
const fattrib = _ATTRIBUTES[attribName];
const fbuffer = _BUFFERS[fattrib.buffer];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(fbuffer),
gl.STATIC_DRAW
);
const location = gl.getAttribLocation(program, attribName);
gl.enableVertexAttribArray(location);
const stride = 0;
const offset = fattrib.offset || 0;
gl.vertexAttribPointer(
location,
fattrib.size,
gl.FLOAT,
false,
stride,
offset * 4 // 4 byte for float
);
}
if (_BUFFERS["_index"]) {
let indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(
gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(_BUFFERS["_index"]),
gl.STATIC_DRAW
);
}
for (i in _UNIFORMS) {
const loc = gl.getUniformLocation(program, i);
const value = _UNIFORMS[i];
if (value.length == 3) {
gl.uniform3fv(loc, value);
} else if (value.length == 2) {
gl.uniform2fv(loc, value);
} else {
gl.uniform1f(loc, value);
}
}
gl.clearColor(1, 1, 1, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
if (!window.location.search.match(/hide/)) {
RUN && RUN(gl);
}
}
</script>
<script>
var toload = "1";
var mat = document.location.search.match(/n=(\d*)/);
if (mat && mat[1]) {
toload = mat[1];
}
let script = document.createElement("script");
script.src = `./exercises/${toload}/${toload}.js`;
script.onload = () => {
run();
};
document.head.appendChild(script);
</script>
</body>
</html>
================================================
FILE: src/html/style.css
================================================
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@page {
size: A4 landscape;
}
body {
background: rgb(204, 204, 204);
}
page[size="A4"] {
background: white;
height: 21cm;
width: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
@media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
* {
box-shadow: 0 !important;
}
}
html,
body {
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
font-family: "Roboto", sans-serif;
-webkit-print-color-adjust: exact;
}
* {
box-sizing: border-box;
}
main {
position: relative;
width: 100%;
height: 100%;
/* width: 1169px;
height: 826px; */
padding: 10mm;
/* columns: 1;
padding-right: 336px; */
/* padding-right: 130mm; */
/* padding-right: 180mm; */
/* border: 1px solid black; */
}
main > * {
/* -webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: 10px; */
/* width: 100mm; */
}
.box {
width: 350px;
margin-bottom: 20px;
margin-right: 20px;
}
code {
white-space: break-spaces !important;
}
/* box */
.box {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 2.5mm;
overflow: hidden;
}
.box pre {
margin: 0 !important;
}
.box__title {
/* border-bottom: 1px dotted black; */
font-size: 12px;
padding: 1.8mm;
text-align: center;
font-style: italic;
/* font-weight: 600; */
}
/* canvas */
.canvas {
position: absolute;
top: 10mm;
right: 10mm;
width: 100mm;
height: 100mm;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 7px;
}
.canvas .legend {
position: absolute;
letter-spacing: 0.1mm;
font-size: 3mm;
margin-top: 3px;
margin-left: 3px;
}
.legend-center {
left: 50%;
top: 50%;
}
.legend-topleft {
top: 3px;
left: 3px;
}
.legend-topright {
top: 3px;
right: 3px;
}
.legend-bottomright {
bottom: 3px;
right: 3px;
}
.legend-bottomleft {
bottom: 3px;
left: 3px;
}
.canvas__layer-x {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
}
.canvas__layer-x span {
height: 100%;
border-left: 1px dotted black;
opacity: 0.5;
}
.canvas__layer-x span:nth-child(1),
.canvas__layer-x span:nth-child(21) {
opacity: 0;
}
.canvas__layer-x span:nth-child(11) {
opacity: 1;
border-left: 1px solid black;
}
.canvas__layer-y {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.canvas__layer-y span {
width: 100%;
border-top: 1px dotted black;
opacity: 0.5;
}
.canvas__layer-y span:nth-child(1),
.canvas__layer-y span:nth-child(21) {
opacity: 0;
}
.canvas__layer-y span:nth-child(11) {
opacity: 1;
border-top: 1px solid black;
}
.canvas__pixels {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.canvas__pixels .horizontal,
.canvas__pixels .vertical {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
}
.canvas__pixels .vertical {
flex-direction: column;
}
.canvas__pixels .horizontal span {
opacity: 1;
border-left: 1px solid rgba(255, 0, 0, 0.1);
}
.canvas__pixels .horizontal span:first-child,
.canvas__pixels .horizontal span:last-child {
opacity: 0;
}
.canvas__pixels .vertical span {
opacity: 1;
border-top: 1px solid rgba(255, 0, 0, 0.1);
}
.canvas__pixels .vertical span:first-child,
.canvas__pixels .vertical span:last-child {
opacity: 0;
}
.canvas__frame {
position: relative;
width: 100%;
height: 100%;
z-index: 5;
}
.title {
position: absolute;
bottom: 3mm;
right: 3mm;
display: inline;
width: auto;
margin: 0;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-size: 8px;
}
================================================
FILE: src/html/vendor/fit-columns.js
================================================
/*!
* fitColumns layout mode for Isotope
* v1.1.4
* https://isotope.metafizzy.co/layout-modes/fitcolumns.html
*/
/*jshint browser: true, devel: false, strict: true, undef: true, unused: true */
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define === "function" && define.amd) {
// AMD
define(["isotope-layout/js/layout-mode"], factory);
} else if (typeof exports === "object") {
// CommonJS
module.exports = factory(require("isotope-layout/js/layout-mode"));
} else {
// browser global
factory(window.Isotope.LayoutMode);
}
})(window, function factory(LayoutMode) {
"use strict";
var FitColumns = LayoutMode.create("fitColumns");
var proto = FitColumns.prototype;
proto._resetLayout = function () {
this.x = 0;
this.y = 0;
this.maxX = 0;
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
// if this element cannot fit in the current row
if (
this.y !== 0 &&
item.size.outerHeight + this.y > this.isotope.size.innerHeight
) {
this.y = 0;
this.x = this.maxX;
}
var position = {
x: this.x,
y: this.y,
};
this.maxX = Math.max(this.maxX, this.x + item.size.outerWidth);
this.y += item.size.outerHeight;
return position;
};
proto._getContainerSize = function () {
return { width: this.maxX };
};
proto.needsResizeLayout = function () {
return this.needsVerticalResizeLayout();
};
return FitColumns;
});
================================================
FILE: src/html/vendor/isotope.js
================================================
/*!
* Isotope PACKAGED v3.0.6
*
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
*
* https://isotope.metafizzy.co
* Copyright 2010-2018 Metafizzy
*/
/**
* Bridget makes jQuery widgets
* v2.0.1
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
(function (window, factory) {
// universal module definition
/*jshint strict: false */ /* globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("jquery-bridget/jquery-bridget", ["jquery"], function (jQuery) {
return factory(window, jQuery);
});
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(window, require("jquery"));
} else {
// browser global
window.jQueryBridget = factory(window, window.jQuery);
}
})(window, function factory(window, jQuery) {
"use strict";
// ----- utils ----- //
var arraySlice = Array.prototype.slice;
// helper function for logging errors
// $.error breaks jQuery chaining
var console = window.console;
var logError =
typeof console == "undefined"
? function () {}
: function (message) {
console.error(message);
};
// ----- jQueryBridget ----- //
function jQueryBridget(namespace, PluginClass, $) {
$ = $ || jQuery || window.jQuery;
if (!$) {
return;
}
// add option method -> $().plugin('option', {...})
if (!PluginClass.prototype.option) {
// option setter
PluginClass.prototype.option = function (opts) {
// bail out if not an object
if (!$.isPlainObject(opts)) {
return;
}
this.options = $.extend(true, this.options, opts);
};
}
// make jQuery plugin
$.fn[namespace] = function (arg0 /*, arg1 */) {
if (typeof arg0 == "string") {
// method call $().plugin( 'methodName', { options } )
// shift arguments by 1
var args = arraySlice.call(arguments, 1);
return methodCall(this, arg0, args);
}
// just $().plugin({ options })
plainCall(this, arg0);
return this;
};
// $().plugin('methodName')
function methodCall($elems, methodName, args) {
var returnValue;
var pluginMethodStr = "$()." + namespace + '("' + methodName + '")';
$elems.each(function (i, elem) {
// get instance
var instance = $.data(elem, namespace);
if (!instance) {
logError(
namespace +
" not initialized. Cannot call methods, i.e. " +
pluginMethodStr
);
return;
}
var method = instance[methodName];
if (!method || methodName.charAt(0) == "_") {
logError(pluginMethodStr + " is not a valid method");
return;
}
// apply method, get return value
var value = method.apply(instance, args);
// set return value if value is returned, use only first value
returnValue = returnValue === undefined ? value : returnValue;
});
return returnValue !== undefined ? returnValue : $elems;
}
function plainCall($elems, options) {
$elems.each(function (i, elem) {
var instance = $.data(elem, namespace);
if (instance) {
// set options & init
instance.option(options);
instance._init();
} else {
// initialize new instance
instance = new PluginClass(elem, options);
$.data(elem, namespace, instance);
}
});
}
updateJQuery($);
}
// ----- updateJQuery ----- //
// set $.bridget for v1 backwards compatibility
function updateJQuery($) {
if (!$ || ($ && $.bridget)) {
return;
}
$.bridget = jQueryBridget;
}
updateJQuery(jQuery || window.jQuery);
// ----- ----- //
return jQueryBridget;
});
/**
* EvEmitter v1.1.0
* Lil' event emitter
* MIT License
*/
/* jshint unused: true, undef: true, strict: true */
(function (global, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, window */
if (typeof define == "function" && define.amd) {
// AMD - RequireJS
define("ev-emitter/ev-emitter", factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory();
} else {
// Browser globals
global.EvEmitter = factory();
}
})(typeof window != "undefined" ? window : this, function () {
function EvEmitter() {}
var proto = EvEmitter.prototype;
proto.on = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
// set events hash
var events = (this._events = this._events || {});
// set listeners array
var listeners = (events[eventName] = events[eventName] || []);
// only add once
if (listeners.indexOf(listener) == -1) {
listeners.push(listener);
}
return this;
};
proto.once = function (eventName, listener) {
if (!eventName || !listener) {
return;
}
// add event
this.on(eventName, listener);
// set once flag
// set onceEvents hash
var onceEvents = (this._onceEvents = this._onceEvents || {});
// set onceListeners object
var onceListeners = (onceEvents[eventName] = onceEvents[eventName] || {});
// set flag
onceListeners[listener] = true;
return this;
};
proto.off = function (eventName, listener) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
var index = listeners.indexOf(listener);
if (index != -1) {
listeners.splice(index, 1);
}
return this;
};
proto.emitEvent = function (eventName, args) {
var listeners = this._events && this._events[eventName];
if (!listeners || !listeners.length) {
return;
}
// copy over to avoid interference if .off() in listener
listeners = listeners.slice(0);
args = args || [];
// once stuff
var onceListeners = this._onceEvents && this._onceEvents[eventName];
for (var i = 0; i < listeners.length; i++) {
var listener = listeners[i];
var isOnce = onceListeners && onceListeners[listener];
if (isOnce) {
// remove listener
// remove before trigger to prevent recursion
this.off(eventName, listener);
// unset once flag
delete onceListeners[listener];
}
// trigger listener
listener.apply(this, args);
}
return this;
};
proto.allOff = function () {
delete this._events;
delete this._onceEvents;
};
return EvEmitter;
});
/*!
* getSize v2.0.3
* measure size of elements
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
/* globals console: false */
(function (window, factory) {
/* jshint strict: false */ /* globals define, module */
if (typeof define == "function" && define.amd) {
// AMD
define("get-size/get-size", factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.getSize = factory();
}
})(window, function factory() {
"use strict";
// -------------------------- helpers -------------------------- //
// get a number from a string, not a percentage
function getStyleSize(value) {
var num = parseFloat(value);
// not a percent like '100%', and a number
var isValid = value.indexOf("%") == -1 && !isNaN(num);
return isValid && num;
}
function noop() {}
var logError =
typeof console == "undefined"
? noop
: function (message) {
console.error(message);
};
// -------------------------- measurements -------------------------- //
var measurements = [
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingBottom",
"marginLeft",
"marginRight",
"marginTop",
"marginBottom",
"borderLeftWidth",
"borderRightWidth",
"borderTopWidth",
"borderBottomWidth",
];
var measurementsLength = measurements.length;
function getZeroSize() {
var size = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0,
};
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
size[measurement] = 0;
}
return size;
}
// -------------------------- getStyle -------------------------- //
/**
* getStyle, get style of element, check for Firefox bug
* https://bugzilla.mozilla.org/show_bug.cgi?id=548397
*/
function getStyle(elem) {
var style = getComputedStyle(elem);
if (!style) {
logError(
"Style returned " +
style +
". Are you running this code in a hidden iframe on Firefox? " +
"See https://bit.ly/getsizebug1"
);
}
return style;
}
// -------------------------- setup -------------------------- //
var isSetup = false;
var isBoxSizeOuter;
/**
* setup
* check isBoxSizerOuter
* do on first getSize() rather than on page load for Firefox bug
*/
function setup() {
// setup once
if (isSetup) {
return;
}
isSetup = true;
// -------------------------- box sizing -------------------------- //
/**
* Chrome & Safari measure the outer-width on style.width on border-box elems
* IE11 & Firefox<29 measures the inner-width
*/
var div = document.createElement("div");
div.style.width = "200px";
div.style.padding = "1px 2px 3px 4px";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px 2px 3px 4px";
div.style.boxSizing = "border-box";
var body = document.body || document.documentElement;
body.appendChild(div);
var style = getStyle(div);
// round value for browser zoom. desandro/masonry#928
isBoxSizeOuter = Math.round(getStyleSize(style.width)) == 200;
getSize.isBoxSizeOuter = isBoxSizeOuter;
body.removeChild(div);
}
// -------------------------- getSize -------------------------- //
function getSize(elem) {
setup();
// use querySeletor if elem is string
if (typeof elem == "string") {
elem = document.querySelector(elem);
}
// do not proceed on non-objects
if (!elem || typeof elem != "object" || !elem.nodeType) {
return;
}
var style = getStyle(elem);
// if hidden, everything is 0
if (style.display == "none") {
return getZeroSize();
}
var size = {};
size.width = elem.offsetWidth;
size.height = elem.offsetHeight;
var isBorderBox = (size.isBorderBox = style.boxSizing == "border-box");
// get all measurements
for (var i = 0; i < measurementsLength; i++) {
var measurement = measurements[i];
var value = style[measurement];
var num = parseFloat(value);
// any 'auto', 'medium' value will be 0
size[measurement] = !isNaN(num) ? num : 0;
}
var paddingWidth = size.paddingLeft + size.paddingRight;
var paddingHeight = size.paddingTop + size.paddingBottom;
var marginWidth = size.marginLeft + size.marginRight;
var marginHeight = size.marginTop + size.marginBottom;
var borderWidth = size.borderLeftWidth + size.borderRightWidth;
var borderHeight = size.borderTopWidth + size.borderBottomWidth;
var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
// overwrite width and height if we can get it from style
var styleWidth = getStyleSize(style.width);
if (styleWidth !== false) {
size.width =
styleWidth +
// add padding and border unless it's already including it
(isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth);
}
var styleHeight = getStyleSize(style.height);
if (styleHeight !== false) {
size.height =
styleHeight +
// add padding and border unless it's already including it
(isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight);
}
size.innerWidth = size.width - (paddingWidth + borderWidth);
size.innerHeight = size.height - (paddingHeight + borderHeight);
size.outerWidth = size.width + marginWidth;
size.outerHeight = size.height + marginHeight;
return size;
}
return getSize;
});
/**
* matchesSelector v2.0.2
* matchesSelector( element, '.selector' )
* MIT license
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
(function (window, factory) {
/*global define: false, module: false */
"use strict";
// universal module definition
if (typeof define == "function" && define.amd) {
// AMD
define("desandro-matches-selector/matches-selector", factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.matchesSelector = factory();
}
})(window, function factory() {
"use strict";
var matchesMethod = (function () {
var ElemProto = window.Element.prototype;
// check for the standard method name first
if (ElemProto.matches) {
return "matches";
}
// check un-prefixed
if (ElemProto.matchesSelector) {
return "matchesSelector";
}
// check vendor prefixes
var prefixes = ["webkit", "moz", "ms", "o"];
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var method = prefix + "MatchesSelector";
if (ElemProto[method]) {
return method;
}
}
})();
return function matchesSelector(elem, selector) {
return elem[matchesMethod](selector);
};
});
/**
* Fizzy UI utils v2.0.7
* MIT license
*/
/*jshint browser: true, undef: true, unused: true, strict: true */
(function (window, factory) {
// universal module definition
/*jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("fizzy-ui-utils/utils", [
"desandro-matches-selector/matches-selector",
], function (matchesSelector) {
return factory(window, matchesSelector);
});
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(window, require("desandro-matches-selector"));
} else {
// browser global
window.fizzyUIUtils = factory(window, window.matchesSelector);
}
})(window, function factory(window, matchesSelector) {
var utils = {};
// ----- extend ----- //
// extends objects
utils.extend = function (a, b) {
for (var prop in b) {
a[prop] = b[prop];
}
return a;
};
// ----- modulo ----- //
utils.modulo = function (num, div) {
return ((num % div) + div) % div;
};
// ----- makeArray ----- //
var arraySlice = Array.prototype.slice;
// turn element or nodeList into an array
utils.makeArray = function (obj) {
if (Array.isArray(obj)) {
// use object if already an array
return obj;
}
// return empty array if undefined or null. #6
if (obj === null || obj === undefined) {
return [];
}
var isArrayLike = typeof obj == "object" && typeof obj.length == "number";
if (isArrayLike) {
// convert nodeList to array
return arraySlice.call(obj);
}
// array of single index
return [obj];
};
// ----- removeFrom ----- //
utils.removeFrom = function (ary, obj) {
var index = ary.indexOf(obj);
if (index != -1) {
ary.splice(index, 1);
}
};
// ----- getParent ----- //
utils.getParent = function (elem, selector) {
while (elem.parentNode && elem != document.body) {
elem = elem.parentNode;
if (matchesSelector(elem, selector)) {
return elem;
}
}
};
// ----- getQueryElement ----- //
// use element as selector string
utils.getQueryElement = function (elem) {
if (typeof elem == "string") {
return document.querySelector(elem);
}
return elem;
};
// ----- handleEvent ----- //
// enable .ontype to trigger from .addEventListener( elem, 'type' )
utils.handleEvent = function (event) {
var method = "on" + event.type;
if (this[method]) {
this[method](event);
}
};
// ----- filterFindElements ----- //
utils.filterFindElements = function (elems, selector) {
// make array of elems
elems = utils.makeArray(elems);
var ffElems = [];
elems.forEach(function (elem) {
// check that elem is an actual element
if (!(elem instanceof HTMLElement)) {
return;
}
// add elem if no selector
if (!selector) {
ffElems.push(elem);
return;
}
// filter & find items if we have a selector
// filter
if (matchesSelector(elem, selector)) {
ffElems.push(elem);
}
// find children
var childElems = elem.querySelectorAll(selector);
// concat childElems to filterFound array
for (var i = 0; i < childElems.length; i++) {
ffElems.push(childElems[i]);
}
});
return ffElems;
};
// ----- debounceMethod ----- //
utils.debounceMethod = function (_class, methodName, threshold) {
threshold = threshold || 100;
// original method
var method = _class.prototype[methodName];
var timeoutName = methodName + "Timeout";
_class.prototype[methodName] = function () {
var timeout = this[timeoutName];
clearTimeout(timeout);
var args = arguments;
var _this = this;
this[timeoutName] = setTimeout(function () {
method.apply(_this, args);
delete _this[timeoutName];
}, threshold);
};
};
// ----- docReady ----- //
utils.docReady = function (callback) {
var readyState = document.readyState;
if (readyState == "complete" || readyState == "interactive") {
// do async to allow for other scripts to run. metafizzy/flickity#441
setTimeout(callback);
} else {
document.addEventListener("DOMContentLoaded", callback);
}
};
// ----- htmlInit ----- //
// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
utils.toDashed = function (str) {
return str
.replace(/(.)([A-Z])/g, function (match, $1, $2) {
return $1 + "-" + $2;
})
.toLowerCase();
};
var console = window.console;
/**
* allow user to initialize classes via [data-namespace] or .js-namespace class
* htmlInit( Widget, 'widgetName' )
* options are parsed from data-namespace-options
*/
utils.htmlInit = function (WidgetClass, namespace) {
utils.docReady(function () {
var dashedNamespace = utils.toDashed(namespace);
var dataAttr = "data-" + dashedNamespace;
var dataAttrElems = document.querySelectorAll("[" + dataAttr + "]");
var jsDashElems = document.querySelectorAll(".js-" + dashedNamespace);
var elems = utils
.makeArray(dataAttrElems)
.concat(utils.makeArray(jsDashElems));
var dataOptionsAttr = dataAttr + "-options";
var jQuery = window.jQuery;
elems.forEach(function (elem) {
var attr =
elem.getAttribute(dataAttr) || elem.getAttribute(dataOptionsAttr);
var options;
try {
options = attr && JSON.parse(attr);
} catch (error) {
// log error, do not initialize
if (console) {
console.error(
"Error parsing " +
dataAttr +
" on " +
elem.className +
": " +
error
);
}
return;
}
// initialize
var instance = new WidgetClass(elem, options);
// make available via $().data('namespace')
if (jQuery) {
jQuery.data(elem, namespace, instance);
}
});
});
};
// ----- ----- //
return utils;
});
/**
* Outlayer Item
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD - RequireJS
define("outlayer/item", [
"ev-emitter/ev-emitter",
"get-size/get-size",
], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory(require("ev-emitter"), require("get-size"));
} else {
// browser global
window.Outlayer = {};
window.Outlayer.Item = factory(window.EvEmitter, window.getSize);
}
})(window, function factory(EvEmitter, getSize) {
"use strict";
// ----- helpers ----- //
function isEmptyObj(obj) {
for (var prop in obj) {
return false;
}
prop = null;
return true;
}
// -------------------------- CSS3 support -------------------------- //
var docElemStyle = document.documentElement.style;
var transitionProperty =
typeof docElemStyle.transition == "string"
? "transition"
: "WebkitTransition";
var transformProperty =
typeof docElemStyle.transform == "string" ? "transform" : "WebkitTransform";
var transitionEndEvent = {
WebkitTransition: "webkitTransitionEnd",
transition: "transitionend",
}[transitionProperty];
// cache all vendor properties that could have vendor prefix
var vendorProperties = {
transform: transformProperty,
transition: transitionProperty,
transitionDuration: transitionProperty + "Duration",
transitionProperty: transitionProperty + "Property",
transitionDelay: transitionProperty + "Delay",
};
// -------------------------- Item -------------------------- //
function Item(element, layout) {
if (!element) {
return;
}
this.element = element;
// parent layout class, i.e. Masonry, Isotope, or Packery
this.layout = layout;
this.position = {
x: 0,
y: 0,
};
this._create();
}
// inherit EvEmitter
var proto = (Item.prototype = Object.create(EvEmitter.prototype));
proto.constructor = Item;
proto._create = function () {
// transition objects
this._transn = {
ingProperties: {},
clean: {},
onEnd: {},
};
this.css({
position: "absolute",
});
};
// trigger specified handler for event type
proto.handleEvent = function (event) {
var method = "on" + event.type;
if (this[method]) {
this[method](event);
}
};
proto.getSize = function () {
this.size = getSize(this.element);
};
/**
* apply CSS styles to element
* @param {Object} style
*/
proto.css = function (style) {
var elemStyle = this.element.style;
for (var prop in style) {
// use vendor property if available
var supportedProp = vendorProperties[prop] || prop;
elemStyle[supportedProp] = style[prop];
}
};
// measure position, and sets it
proto.getPosition = function () {
var style = getComputedStyle(this.element);
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
var xValue = style[isOriginLeft ? "left" : "right"];
var yValue = style[isOriginTop ? "top" : "bottom"];
var x = parseFloat(xValue);
var y = parseFloat(yValue);
// convert percent to pixels
var layoutSize = this.layout.size;
if (xValue.indexOf("%") != -1) {
x = (x / 100) * layoutSize.width;
}
if (yValue.indexOf("%") != -1) {
y = (y / 100) * layoutSize.height;
}
// clean up 'auto' or other non-integer values
x = isNaN(x) ? 0 : x;
y = isNaN(y) ? 0 : y;
// remove padding from measurement
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
this.position.x = x;
this.position.y = y;
};
// set settled position, apply padding
proto.layoutPosition = function () {
var layoutSize = this.layout.size;
var style = {};
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
// x
var xPadding = isOriginLeft ? "paddingLeft" : "paddingRight";
var xProperty = isOriginLeft ? "left" : "right";
var xResetProperty = isOriginLeft ? "right" : "left";
var x = this.position.x + layoutSize[xPadding];
// set in percentage or pixels
style[xProperty] = this.getXValue(x);
// reset other property
style[xResetProperty] = "";
// y
var yPadding = isOriginTop ? "paddingTop" : "paddingBottom";
var yProperty = isOriginTop ? "top" : "bottom";
var yResetProperty = isOriginTop ? "bottom" : "top";
var y = this.position.y + layoutSize[yPadding];
// set in percentage or pixels
style[yProperty] = this.getYValue(y);
// reset other property
style[yResetProperty] = "";
this.css(style);
this.emitEvent("layout", [this]);
};
proto.getXValue = function (x) {
var isHorizontal = this.layout._getOption("horizontal");
return this.layout.options.percentPosition && !isHorizontal
? (x / this.layout.size.width) * 100 + "%"
: x + "px";
};
proto.getYValue = function (y) {
var isHorizontal = this.layout._getOption("horizontal");
return this.layout.options.percentPosition && isHorizontal
? (y / this.layout.size.height) * 100 + "%"
: y + "px";
};
proto._transitionTo = function (x, y) {
this.getPosition();
// get current x & y from top/left
var curX = this.position.x;
var curY = this.position.y;
var didNotMove = x == this.position.x && y == this.position.y;
// save end position
this.setPosition(x, y);
// if did not move and not transitioning, just go to layout
if (didNotMove && !this.isTransitioning) {
this.layoutPosition();
return;
}
var transX = x - curX;
var transY = y - curY;
var transitionStyle = {};
transitionStyle.transform = this.getTranslate(transX, transY);
this.transition({
to: transitionStyle,
onTransitionEnd: {
transform: this.layoutPosition,
},
isCleaning: true,
});
};
proto.getTranslate = function (x, y) {
// flip cooridinates if origin on right or bottom
var isOriginLeft = this.layout._getOption("originLeft");
var isOriginTop = this.layout._getOption("originTop");
x = isOriginLeft ? x : -x;
y = isOriginTop ? y : -y;
return "translate3d(" + x + "px, " + y + "px, 0)";
};
// non transition + transform support
proto.goTo = function (x, y) {
this.setPosition(x, y);
this.layoutPosition();
};
proto.moveTo = proto._transitionTo;
proto.setPosition = function (x, y) {
this.position.x = parseFloat(x);
this.position.y = parseFloat(y);
};
// ----- transition ----- //
/**
* @param {Object} style - CSS
* @param {Function} onTransitionEnd
*/
// non transition, just trigger callback
proto._nonTransition = function (args) {
this.css(args.to);
if (args.isCleaning) {
this._removeStyles(args.to);
}
for (var prop in args.onTransitionEnd) {
args.onTransitionEnd[prop].call(this);
}
};
/**
* proper transition
* @param {Object} args - arguments
* @param {Object} to - style to transition to
* @param {Object} from - style to start transition from
* @param {Boolean} isCleaning - removes transition styles after transition
* @param {Function} onTransitionEnd - callback
*/
proto.transition = function (args) {
// redirect to nonTransition if no transition duration
if (!parseFloat(this.layout.options.transitionDuration)) {
this._nonTransition(args);
return;
}
var _transition = this._transn;
// keep track of onTransitionEnd callback by css property
for (var prop in args.onTransitionEnd) {
_transition.onEnd[prop] = args.onTransitionEnd[prop];
}
// keep track of properties that are transitioning
for (prop in args.to) {
_transition.ingProperties[prop] = true;
// keep track of properties to clean up when transition is done
if (args.isCleaning) {
_transition.clean[prop] = true;
}
}
// set from styles
if (args.from) {
this.css(args.from);
// force redraw. http://blog.alexmaccaw.com/css-transitions
var h = this.element.offsetHeight;
// hack for JSHint to hush about unused var
h = null;
}
// enable transition
this.enableTransition(args.to);
// set styles that are transitioning
this.css(args.to);
this.isTransitioning = true;
};
// dash before all cap letters, including first for
// WebkitTransform => -webkit-transform
function toDashedAll(str) {
return str.replace(/([A-Z])/g, function ($1) {
return "-" + $1.toLowerCase();
});
}
var transitionProps = "opacity," + toDashedAll(transformProperty);
proto.enableTransition = function (/* style */) {
// HACK changing transitionProperty during a transition
// will cause transition to jump
if (this.isTransitioning) {
return;
}
// make `transition: foo, bar, baz` from style object
// HACK un-comment this when enableTransition can work
// while a transition is happening
// var transitionValues = [];
// for ( var prop in style ) {
// // dash-ify camelCased properties like WebkitTransition
// prop = vendorProperties[ prop ] || prop;
// transitionValues.push( toDashedAll( prop ) );
// }
// munge number to millisecond, to match stagger
var duration = this.layout.options.transitionDuration;
duration = typeof duration == "number" ? duration + "ms" : duration;
// enable transition styles
this.css({
transitionProperty: transitionProps,
transitionDuration: duration,
transitionDelay: this.staggerDelay || 0,
});
// listen for transition end event
this.element.addEventListener(transitionEndEvent, this, false);
};
// ----- events ----- //
proto.onwebkitTransitionEnd = function (event) {
this.ontransitionend(event);
};
proto.onotransitionend = function (event) {
this.ontransitionend(event);
};
// properties that I munge to make my life easier
var dashedVendorProperties = {
"-webkit-transform": "transform",
};
proto.ontransitionend = function (event) {
// disregard bubbled events from children
if (event.target !== this.element) {
return;
}
var _transition = this._transn;
// get property name of transitioned property, convert to prefix-free
var propertyName =
dashedVendorProperties[event.propertyName] || event.propertyName;
// remove property that has completed transitioning
delete _transition.ingProperties[propertyName];
// check if any properties are still transitioning
if (isEmptyObj(_transition.ingProperties)) {
// all properties have completed transitioning
this.disableTransition();
}
// clean style
if (propertyName in _transition.clean) {
// clean up style
this.element.style[event.propertyName] = "";
delete _transition.clean[propertyName];
}
// trigger onTransitionEnd callback
if (propertyName in _transition.onEnd) {
var onTransitionEnd = _transition.onEnd[propertyName];
onTransitionEnd.call(this);
delete _transition.onEnd[propertyName];
}
this.emitEvent("transitionEnd", [this]);
};
proto.disableTransition = function () {
this.removeTransitionStyles();
this.element.removeEventListener(transitionEndEvent, this, false);
this.isTransitioning = false;
};
/**
* removes style property from element
* @param {Object} style
**/
proto._removeStyles = function (style) {
// clean up transition styles
var cleanStyle = {};
for (var prop in style) {
cleanStyle[prop] = "";
}
this.css(cleanStyle);
};
var cleanTransitionStyle = {
transitionProperty: "",
transitionDuration: "",
transitionDelay: "",
};
proto.removeTransitionStyles = function () {
// remove transition
this.css(cleanTransitionStyle);
};
// ----- stagger ----- //
proto.stagger = function (delay) {
delay = isNaN(delay) ? 0 : delay;
this.staggerDelay = delay + "ms";
};
// ----- show/hide/remove ----- //
// remove element from DOM
proto.removeElem = function () {
this.element.parentNode.removeChild(this.element);
// remove display: none
this.css({ display: "" });
this.emitEvent("remove", [this]);
};
proto.remove = function () {
// just remove element if no transition support or no transition
if (
!transitionProperty ||
!parseFloat(this.layout.options.transitionDuration)
) {
this.removeElem();
return;
}
// start transition
this.once("transitionEnd", function () {
this.removeElem();
});
this.hide();
};
proto.reveal = function () {
delete this.isHidden;
// remove display: none
this.css({ display: "" });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty(
"visibleStyle"
);
onTransitionEnd[transitionEndProperty] = this.onRevealTransitionEnd;
this.transition({
from: options.hiddenStyle,
to: options.visibleStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd,
});
};
proto.onRevealTransitionEnd = function () {
// check if still visible
// during transition, item may have been hidden
if (!this.isHidden) {
this.emitEvent("reveal");
}
};
/**
* get style property use for hide/reveal transition end
* @param {String} styleProperty - hiddenStyle/visibleStyle
* @returns {String}
*/
proto.getHideRevealTransitionEndProperty = function (styleProperty) {
var optionStyle = this.layout.options[styleProperty];
// use opacity
if (optionStyle.opacity) {
return "opacity";
}
// get first property
for (var prop in optionStyle) {
return prop;
}
};
proto.hide = function () {
// set flag
this.isHidden = true;
// remove display: none
this.css({ display: "" });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty(
"hiddenStyle"
);
onTransitionEnd[transitionEndProperty] = this.onHideTransitionEnd;
this.transition({
from: options.visibleStyle,
to: options.hiddenStyle,
// keep hidden stuff hidden
isCleaning: true,
onTransitionEnd: onTransitionEnd,
});
};
proto.onHideTransitionEnd = function () {
// check if still hidden
// during transition, item may have been un-hidden
if (this.isHidden) {
this.css({ display: "none" });
this.emitEvent("hide");
}
};
proto.destroy = function () {
this.css({
position: "",
left: "",
right: "",
top: "",
bottom: "",
transition: "",
transform: "",
});
};
return Item;
});
/*!
* Outlayer v2.1.1
* the brains and guts of a layout library
* MIT license
*/
(function (window, factory) {
"use strict" /* globals define, module, require */;
// universal module definition
/* jshint strict: false */ if (typeof define == "function" && define.amd) {
// AMD - RequireJS
define("outlayer/outlayer", [
"ev-emitter/ev-emitter",
"get-size/get-size",
"fizzy-ui-utils/utils",
"./item",
], function (EvEmitter, getSize, utils, Item) {
return factory(window, EvEmitter, getSize, utils, Item);
});
} else if (typeof module == "object" && module.exports) {
// CommonJS - Browserify, Webpack
module.exports = factory(
window,
require("ev-emitter"),
require("get-size"),
require("fizzy-ui-utils"),
require("./item")
);
} else {
// browser global
window.Outlayer = factory(
window,
window.EvEmitter,
window.getSize,
window.fizzyUIUtils,
window.Outlayer.Item
);
}
})(window, function factory(window, EvEmitter, getSize, utils, Item) {
"use strict";
// ----- vars ----- //
var console = window.console;
var jQuery = window.jQuery;
var noop = function () {};
// -------------------------- Outlayer -------------------------- //
// globally unique identifiers
var GUID = 0;
// internal store of all Outlayer intances
var instances = {};
/**
* @param {Element, String} element
* @param {Object} options
* @constructor
*/
function Outlayer(element, options) {
var queryElement = utils.getQueryElement(element);
if (!queryElement) {
if (console) {
console.error(
"Bad element for " +
this.constructor.namespace +
": " +
(queryElement || element)
);
}
return;
}
this.element = queryElement;
// add jQuery
if (jQuery) {
this.$element = jQuery(this.element);
}
// options
this.options = utils.extend({}, this.constructor.defaults);
this.option(options);
// add id for Outlayer.getFromElement
var id = ++GUID;
this.element.outlayerGUID = id; // expando
instances[id] = this; // associate via id
// kick it off
this._create();
var isInitLayout = this._getOption("initLayout");
if (isInitLayout) {
this.layout();
}
}
// settings are for internal use only
Outlayer.namespace = "outlayer";
Outlayer.Item = Item;
// default options
Outlayer.defaults = {
containerStyle: {
position: "relative",
},
initLayout: true,
originLeft: true,
originTop: true,
resize: true,
resizeContainer: true,
// item options
transitionDuration: "0.4s",
hiddenStyle: {
opacity: 0,
transform: "scale(0.001)",
},
visibleStyle: {
opacity: 1,
transform: "scale(1)",
},
};
var proto = Outlayer.prototype;
// inherit EvEmitter
utils.extend(proto, EvEmitter.prototype);
/**
* set options
* @param {Object} opts
*/
proto.option = function (opts) {
utils.extend(this.options, opts);
};
/**
* get backwards compatible option value, check old name
*/
proto._getOption = function (option) {
var oldOption = this.constructor.compatOptions[option];
return oldOption && this.options[oldOption] !== undefined
? this.options[oldOption]
: this.options[option];
};
Outlayer.compatOptions = {
// currentName: oldName
initLayout: "isInitLayout",
horizontal: "isHorizontal",
layoutInstant: "isLayoutInstant",
originLeft: "isOriginLeft",
originTop: "isOriginTop",
resize: "isResizeBound",
resizeContainer: "isResizingContainer",
};
proto._create = function () {
// get items from children
this.reloadItems();
// elements that affect layout, but are not laid out
this.stamps = [];
this.stamp(this.options.stamp);
// set container style
utils.extend(this.element.style, this.options.containerStyle);
// bind resize method
var canBindResize = this._getOption("resize");
if (canBindResize) {
this.bindResize();
}
};
// goes through all children again and gets bricks in proper order
proto.reloadItems = function () {
// collection of item elements
this.items = this._itemize(this.element.children);
};
/**
* turn elements into Outlayer.Items to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - collection of new Outlayer Items
*/
proto._itemize = function (elems) {
var itemElems = this._filterFindItemElements(elems);
var Item = this.constructor.Item;
// create new Outlayer Items for collection
var items = [];
for (var i = 0; i < itemElems.length; i++) {
var elem = itemElems[i];
var item = new Item(elem, this);
items.push(item);
}
return items;
};
/**
* get item elements to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - item elements
*/
proto._filterFindItemElements = function (elems) {
return utils.filterFindElements(elems, this.options.itemSelector);
};
/**
* getter method for getting item elements
* @returns {Array} elems - collection of item elements
*/
proto.getItemElements = function () {
return this.items.map(function (item) {
return item.element;
});
};
// ----- init & layout ----- //
/**
* lays out all items
*/
proto.layout = function () {
this._resetLayout();
this._manageStamps();
// don't animate first layout
var layoutInstant = this._getOption("layoutInstant");
var isInstant =
layoutInstant !== undefined ? layoutInstant : !this._isLayoutInited;
this.layoutItems(this.items, isInstant);
// flag for initalized
this._isLayoutInited = true;
};
// _init is alias for layout
proto._init = proto.layout;
/**
* logic before any new layout
*/
proto._resetLayout = function () {
this.getSize();
};
proto.getSize = function () {
this.size = getSize(this.element);
};
/**
* get measurement from option, for columnWidth, rowHeight, gutter
* if option is String -> get element from selector string, & get size of element
* if option is Element -> get size of element
* else use option as a number
*
* @param {String} measurement
* @param {String} size - width or height
* @private
*/
proto._getMeasurement = function (measurement, size) {
var option = this.options[measurement];
var elem;
if (!option) {
// default to 0
this[measurement] = 0;
} else {
// use option as an element
if (typeof option == "string") {
elem = this.element.querySelector(option);
} else if (option instanceof HTMLElement) {
elem = option;
}
// use size of element, if element
this[measurement] = elem ? getSize(elem)[size] : option;
}
};
/**
* layout a collection of item elements
* @api public
*/
proto.layoutItems = function (items, isInstant) {
items = this._getItemsForLayout(items);
this._layoutItems(items, isInstant);
this._postLayout();
};
/**
* get the items to be laid out
* you may want to skip over some items
* @param {Array} items
* @returns {Array} items
*/
proto._getItemsForLayout = function (items) {
return items.filter(function (item) {
return !item.isIgnored;
});
};
/**
* layout items
* @param {Array} items
* @param {Boolean} isInstant
*/
proto._layoutItems = function (items, isInstant) {
this._emitCompleteOnItems("layout", items);
if (!items || !items.length) {
// no items, emit event with empty array
return;
}
var queue = [];
items.forEach(function (item) {
// get x/y object from method
var position = this._getItemLayoutPosition(item);
// enqueue
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push(position);
}, this);
this._processLayoutQueue(queue);
};
/**
* get item layout position
* @param {Outlayer.Item} item
* @returns {Object} x and y position
*/
proto._getItemLayoutPosition = function (/* item */) {
return {
x: 0,
y: 0,
};
};
/**
* iterate over array and position each item
* Reason being - separating this logic prevents 'layout invalidation'
* thx @paul_irish
* @param {Array} queue
*/
proto._processLayoutQueue = function (queue) {
this.updateStagger();
queue.forEach(function (obj, i) {
this._positionItem(obj.item, obj.x, obj.y, obj.isInstant, i);
}, this);
};
// set stagger from option in milliseconds number
proto.updateStagger = function () {
var stagger = this.options.stagger;
if (stagger === null || stagger === undefined) {
this.stagger = 0;
return;
}
this.stagger = getMilliseconds(stagger);
return this.stagger;
};
/**
* Sets position of item in DOM
* @param {Outlayer.Item} item
* @param {Number} x - horizontal position
* @param {Number} y - vertical position
* @param {Boolean} isInstant - disables transitions
*/
proto._positionItem = function (item, x, y, isInstant, i) {
if (isInstant) {
// if not transition, just set CSS
item.goTo(x, y);
} else {
item.stagger(i * this.stagger);
item.moveTo(x, y);
}
};
/**
* Any logic you want to do after each layout,
* i.e. size the container
*/
proto._postLayout = function () {
this.resizeContainer();
};
proto.resizeContainer = function () {
var isResizingContainer = this._getOption("resizeContainer");
if (!isResizingContainer) {
return;
}
var size = this._getContainerSize();
if (size) {
this._setContainerMeasure(size.width, true);
this._setContainerMeasure(size.height, false);
}
};
/**
* Sets width or height of container if returned
* @returns {Object} size
* @param {Number} width
* @param {Number} height
*/
proto._getContainerSize = noop;
/**
* @param {Number} measure - size of width or height
* @param {Boolean} isWidth
*/
proto._setContainerMeasure = function (measure, isWidth) {
if (measure === undefined) {
return;
}
var elemSize = this.size;
// add padding and border width if border box
if (elemSize.isBorderBox) {
measure += isWidth
? elemSize.paddingLeft +
elemSize.paddingRight +
elemSize.borderLeftWidth +
elemSize.borderRightWidth
: elemSize.paddingBottom +
elemSize.paddingTop +
elemSize.borderTopWidth +
elemSize.borderBottomWidth;
}
measure = Math.max(measure, 0);
this.element.style[isWidth ? "width" : "height"] = measure + "px";
};
/**
* emit eventComplete on a collection of items events
* @param {String} eventName
* @param {Array} items - Outlayer.Items
*/
proto._emitCompleteOnItems = function (eventName, items) {
var _this = this;
function onComplete() {
_this.dispatchEvent(eventName + "Complete", null, [items]);
}
var count = items.length;
if (!items || !count) {
onComplete();
return;
}
var doneCount = 0;
function tick() {
doneCount++;
if (doneCount == count) {
onComplete();
}
}
// bind callback
items.forEach(function (item) {
item.once(eventName, tick);
});
};
/**
* emits events via EvEmitter and jQuery events
* @param {String} type - name of event
* @param {Event} event - original event
* @param {Array} args - extra arguments
*/
proto.dispatchEvent = function (type, event, args) {
// add original event to arguments
var emitArgs = event ? [event].concat(args) : args;
this.emitEvent(type, emitArgs);
if (jQuery) {
// set this.$element
this.$element = this.$element || jQuery(this.element);
if (event) {
// create jQuery event
var $event = jQuery.Event(event);
$event.type = type;
this.$element.trigger($event, args);
} else {
// just trigger with type if no event available
this.$element.trigger(type, args);
}
}
};
// -------------------------- ignore & stamps -------------------------- //
/**
* keep item in collection, but do not lay it out
* ignored items do not get skipped in layout
* @param {Element} elem
*/
proto.ignore = function (elem) {
var item = this.getItem(elem);
if (item) {
item.isIgnored = true;
}
};
/**
* return item to layout collection
* @param {Element} elem
*/
proto.unignore = function (elem) {
var item = this.getItem(elem);
if (item) {
delete item.isIgnored;
}
};
/**
* adds elements to stamps
* @param {NodeList, Array, Element, or String} elems
*/
proto.stamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
this.stamps = this.stamps.concat(elems);
// ignore
elems.forEach(this.ignore, this);
};
/**
* removes elements to stamps
* @param {NodeList, Array, or Element} elems
*/
proto.unstamp = function (elems) {
elems = this._find(elems);
if (!elems) {
return;
}
elems.forEach(function (elem) {
// filter out removed stamp elements
utils.removeFrom(this.stamps, elem);
this.unignore(elem);
}, this);
};
/**
* finds child elements
* @param {NodeList, Array, Element, or String} elems
* @returns {Array} elems
*/
proto._find = function (elems) {
if (!elems) {
return;
}
// if string, use argument as selector string
if (typeof elems == "string") {
elems = this.element.querySelectorAll(elems);
}
elems = utils.makeArray(elems);
return elems;
};
proto._manageStamps = function () {
if (!this.stamps || !this.stamps.length) {
return;
}
this._getBoundingRect();
this.stamps.forEach(this._manageStamp, this);
};
// update boundingLeft / Top
proto._getBoundingRect = function () {
// get bounding rect for container element
var boundingRect = this.element.getBoundingClientRect();
var size = this.size;
this._boundingRect = {
left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
top: boundingRect.top + size.paddingTop + size.borderTopWidth,
right: boundingRect.right - (size.paddingRight + size.borderRightWidth),
bottom:
boundingRect.bottom - (size.paddingBottom + size.borderBottomWidth),
};
};
/**
* @param {Element} stamp
**/
proto._manageStamp = noop;
/**
* get x/y position of element relative to container element
* @param {Element} elem
* @returns {Object} offset - has left, top, right, bottom
*/
proto._getElementOffset = function (elem) {
var boundingRect = elem.getBoundingClientRect();
var thisRect = this._boundingRect;
var size = getSize(elem);
var offset = {
left: boundingRect.left - thisRect.left - size.marginLeft,
top: boundingRect.top - thisRect.top - size.marginTop,
right: thisRect.right - boundingRect.right - size.marginRight,
bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom,
};
return offset;
};
// -------------------------- resize -------------------------- //
// enable event handlers for listeners
// i.e. resize -> onresize
proto.handleEvent = utils.handleEvent;
/**
* Bind layout to window resizing
*/
proto.bindResize = function () {
window.addEventListener("resize", this);
this.isResizeBound = true;
};
/**
* Unbind layout to window resizing
*/
proto.unbindResize = function () {
window.removeEventListener("resize", this);
this.isResizeBound = false;
};
proto.onresize = function () {
this.resize();
};
utils.debounceMethod(Outlayer, "onresize", 100);
proto.resize = function () {
// don't trigger if size did not change
// or if resize was unbound. See #9
if (!this.isResizeBound || !this.needsResizeLayout()) {
return;
}
this.layout();
};
/**
* check if layout is needed post layout
* @returns Boolean
*/
proto.needsResizeLayout = function () {
var size = getSize(this.element);
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.size && size;
return hasSizes && size.innerWidth !== this.size.innerWidth;
};
// -------------------------- methods -------------------------- //
/**
* add items to Outlayer instance
* @param {Array or NodeList or Element} elems
* @returns {Array} items - Outlayer.Items
**/
proto.addItems = function (elems) {
var items = this._itemize(elems);
// add items to collection
if (items.length) {
this.items = this.items.concat(items);
}
return items;
};
/**
* Layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.appended = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
// layout and reveal just the new items
this.layoutItems(items, true);
this.reveal(items);
};
/**
* Layout prepended elements
* @param {Array or NodeList or Element} elems
*/
proto.prepended = function (elems) {
var items = this._itemize(elems);
if (!items.length) {
return;
}
// add items to beginning of collection
var previousItems = this.items.slice(0);
this.items = items.concat(previousItems);
// start new layout
this._resetLayout();
this._manageStamps();
// layout new stuff without transition
this.layoutItems(items, true);
this.reveal(items);
// layout previous items
this.layoutItems(previousItems);
};
/**
* reveal a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.reveal = function (items) {
this._emitCompleteOnItems("reveal", items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function (item, i) {
item.stagger(i * stagger);
item.reveal();
});
};
/**
* hide a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.hide = function (items) {
this._emitCompleteOnItems("hide", items);
if (!items || !items.length) {
return;
}
var stagger = this.updateStagger();
items.forEach(function (item, i) {
item.stagger(i * stagger);
item.hide();
});
};
/**
* reveal item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.revealItemElements = function (elems) {
var items = this.getItems(elems);
this.reveal(items);
};
/**
* hide item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.hideItemElements = function (elems) {
var items = this.getItems(elems);
this.hide(items);
};
/**
* get Outlayer.Item, given an Element
* @param {Element} elem
* @param {Function} callback
* @returns {Outlayer.Item} item
*/
proto.getItem = function (elem) {
// loop through items to get the one that matches
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
if (item.element == elem) {
// return item
return item;
}
}
};
/**
* get collection of Outlayer.Items, given Elements
* @param {Array} elems
* @returns {Array} items - Outlayer.Items
*/
proto.getItems = function (elems) {
elems = utils.makeArray(elems);
var items = [];
elems.forEach(function (elem) {
var item = this.getItem(elem);
if (item) {
items.push(item);
}
}, this);
return items;
};
/**
* remove element(s) from instance and DOM
* @param {Array or NodeList or Element} elems
*/
proto.remove = function (elems) {
var removeItems = this.getItems(elems);
this._emitCompleteOnItems("remove", removeItems);
// bail if no items to remove
if (!removeItems || !removeItems.length) {
return;
}
removeItems.forEach(function (item) {
item.remove();
// remove item from collection
utils.removeFrom(this.items, item);
}, this);
};
// ----- destroy ----- //
// remove and disable Outlayer instance
proto.destroy = function () {
// clean up dynamic styles
var style = this.element.style;
style.height = "";
style.position = "";
style.width = "";
// destroy items
this.items.forEach(function (item) {
item.destroy();
});
this.unbindResize();
var id = this.element.outlayerGUID;
delete instances[id]; // remove reference to instance by id
delete this.element.outlayerGUID;
// remove data for jQuery
if (jQuery) {
jQuery.removeData(this.element, this.constructor.namespace);
}
};
// -------------------------- data -------------------------- //
/**
* get Outlayer instance from element
* @param {Element} elem
* @returns {Outlayer}
*/
Outlayer.data = function (elem) {
elem = utils.getQueryElement(elem);
var id = elem && elem.outlayerGUID;
return id && instances[id];
};
// -------------------------- create Outlayer class -------------------------- //
/**
* create a layout class
* @param {String} namespace
*/
Outlayer.create = function (namespace, options) {
// sub-class Outlayer
var Layout = subclass(Outlayer);
// apply new options and compatOptions
Layout.defaults = utils.extend({}, Outlayer.defaults);
utils.extend(Layout.defaults, options);
Layout.compatOptions = utils.extend({}, Outlayer.compatOptions);
Layout.namespace = namespace;
Layout.data = Outlayer.data;
// sub-class Item
Layout.Item = subclass(Item);
// -------------------------- declarative -------------------------- //
utils.htmlInit(Layout, namespace);
// -------------------------- jQuery bridge -------------------------- //
// make into jQuery plugin
if (jQuery && jQuery.bridget) {
jQuery.bridget(namespace, Layout);
}
return Layout;
};
function subclass(Parent) {
function SubClass() {
Parent.apply(this, arguments);
}
SubClass.prototype = Object.create(Parent.prototype);
SubClass.prototype.constructor = SubClass;
return SubClass;
}
// ----- helpers ----- //
// how many milliseconds are in each unit
var msUnits = {
ms: 1,
s: 1000,
};
// munge time-like parameter into millisecond number
// '0.4s' -> 40
function getMilliseconds(time) {
if (typeof time == "number") {
return time;
}
var matches = time.match(/(^\d*\.?\d*)(\w*)/);
var num = matches && matches[1];
var unit = matches && matches[2];
if (!num.length) {
return 0;
}
num = parseFloat(num);
var mult = msUnits[unit] || 1;
return num * mult;
}
// ----- fin ----- //
// back in global
Outlayer.Item = Item;
return Outlayer;
});
/**
* Isotope Item
**/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("isotope-layout/js/item", ["outlayer/outlayer"], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(require("outlayer"));
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.Item = factory(window.Outlayer);
}
})(window, function factory(Outlayer) {
"use strict";
// -------------------------- Item -------------------------- //
// sub-class Outlayer Item
function Item() {
Outlayer.Item.apply(this, arguments);
}
var proto = (Item.prototype = Object.create(Outlayer.Item.prototype));
var _create = proto._create;
proto._create = function () {
// assign id, used for original-order sorting
this.id = this.layout.itemGUID++;
_create.call(this);
this.sortData = {};
};
proto.updateSortData = function () {
if (this.isIgnored) {
return;
}
// default sorters
this.sortData.id = this.id;
// for backward compatibility
this.sortData["original-order"] = this.id;
this.sortData.random = Math.random();
// go thru getSortData obj and apply the sorters
var getSortData = this.layout.options.getSortData;
var sorters = this.layout._sorters;
for (var key in getSortData) {
var sorter = sorters[key];
this.sortData[key] = sorter(this.element, this);
}
};
var _destroy = proto.destroy;
proto.destroy = function () {
// call super
_destroy.apply(this, arguments);
// reset display, #741
this.css({
display: "",
});
};
return Item;
});
/**
* Isotope LayoutMode
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("isotope-layout/js/layout-mode", [
"get-size/get-size",
"outlayer/outlayer",
], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(require("get-size"), require("outlayer"));
} else {
// browser global
window.Isotope = window.Isotope || {};
window.Isotope.LayoutMode = factory(window.getSize, window.Outlayer);
}
})(window, function factory(getSize, Outlayer) {
"use strict";
// layout mode class
function LayoutMode(isotope) {
this.isotope = isotope;
// link properties
if (isotope) {
this.options = isotope.options[this.namespace];
this.element = isotope.element;
this.items = isotope.filteredItems;
this.size = isotope.size;
}
}
var proto = LayoutMode.prototype;
/**
* some methods should just defer to default Outlayer method
* and reference the Isotope instance as `this`
**/
var facadeMethods = [
"_resetLayout",
"_getItemLayoutPosition",
"_manageStamp",
"_getContainerSize",
"_getElementOffset",
"needsResizeLayout",
"_getOption",
];
facadeMethods.forEach(function (methodName) {
proto[methodName] = function () {
return Outlayer.prototype[methodName].apply(this.isotope, arguments);
};
});
// ----- ----- //
// for horizontal layout modes, check vertical size
proto.needsVerticalResizeLayout = function () {
// don't trigger if size did not change
var size = getSize(this.isotope.element);
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.isotope.size && size;
return hasSizes && size.innerHeight != this.isotope.size.innerHeight;
};
// ----- measurements ----- //
proto._getMeasurement = function () {
this.isotope._getMeasurement.apply(this, arguments);
};
proto.getColumnWidth = function () {
this.getSegmentSize("column", "Width");
};
proto.getRowHeight = function () {
this.getSegmentSize("row", "Height");
};
/**
* get columnWidth or rowHeight
* segment: 'column' or 'row'
* size 'Width' or 'Height'
**/
proto.getSegmentSize = function (segment, size) {
var segmentName = segment + size;
var outerSize = "outer" + size;
// columnWidth / outerWidth // rowHeight / outerHeight
this._getMeasurement(segmentName, outerSize);
// got rowHeight or columnWidth, we can chill
if (this[segmentName]) {
return;
}
// fall back to item of first element
var firstItemSize = this.getFirstItemSize();
this[segmentName] =
(firstItemSize && firstItemSize[outerSize]) ||
// or size of container
this.isotope.size["inner" + size];
};
proto.getFirstItemSize = function () {
var firstItem = this.isotope.filteredItems[0];
return firstItem && firstItem.element && getSize(firstItem.element);
};
// ----- methods that should reference isotope ----- //
proto.layout = function () {
this.isotope.layout.apply(this.isotope, arguments);
};
proto.getSize = function () {
this.isotope.getSize();
this.size = this.isotope.size;
};
// -------------------------- create -------------------------- //
LayoutMode.modes = {};
LayoutMode.create = function (namespace, options) {
function Mode() {
LayoutMode.apply(this, arguments);
}
Mode.prototype = Object.create(proto);
Mode.prototype.constructor = Mode;
// default options
if (options) {
Mode.options = options;
}
Mode.prototype.namespace = namespace;
// register in Isotope
LayoutMode.modes[namespace] = Mode;
return Mode;
};
return LayoutMode;
});
/*!
* Masonry v4.2.1
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("masonry-layout/masonry", [
"outlayer/outlayer",
"get-size/get-size",
], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(require("outlayer"), require("get-size"));
} else {
// browser global
window.Masonry = factory(window.Outlayer, window.getSize);
}
})(window, function factory(Outlayer, getSize) {
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var Masonry = Outlayer.create("masonry");
// isFitWidth -> fitWidth
Masonry.compatOptions.fitWidth = "isFitWidth";
var proto = Masonry.prototype;
proto._resetLayout = function () {
this.getSize();
this._getMeasurement("columnWidth", "outerWidth");
this._getMeasurement("gutter", "outerWidth");
this.measureColumns();
// reset column Y
this.colYs = [];
for (var i = 0; i < this.cols; i++) {
this.colYs.push(0);
}
this.maxY = 0;
this.horizontalColIndex = 0;
};
proto.measureColumns = function () {
this.getContainerWidth();
// if columnWidth is 0, default to outerWidth of first item
if (!this.columnWidth) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
// columnWidth fall back to item of first element
this.columnWidth =
(firstItemElem && getSize(firstItemElem).outerWidth) ||
// if first elem has no width, default to size of container
this.containerWidth;
}
var columnWidth = (this.columnWidth += this.gutter);
// calculate columns
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
// fix rounding errors, typically with gutters
var excess = columnWidth - (containerWidth % columnWidth);
// if overshoot is less than a pixel, round up, otherwise floor it
var mathMethod = excess && excess < 1 ? "round" : "floor";
cols = Math[mathMethod](cols);
this.cols = Math.max(cols, 1);
};
proto.getContainerWidth = function () {
// container is parent if fit width
var isFitWidth = this._getOption("fitWidth");
var container = isFitWidth ? this.element.parentNode : this.element;
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var size = getSize(container);
this.containerWidth = size && size.innerWidth;
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? "round" : "ceil";
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[mathMethod](item.size.outerWidth / this.columnWidth);
colSpan = Math.min(colSpan, this.cols);
// use horizontal or top column position
var colPosMethod = this.options.horizontalOrder
? "_getHorizontalColPosition"
: "_getTopColPosition";
var colPosition = this[colPosMethod](colSpan, item);
// position the brick
var position = {
x: this.columnWidth * colPosition.col,
y: colPosition.y,
};
// apply setHeight to necessary columns
var setHeight = colPosition.y + item.size.outerHeight;
var setMax = colSpan + colPosition.col;
for (var i = colPosition.col; i < setMax; i++) {
this.colYs[i] = setHeight;
}
return position;
};
proto._getTopColPosition = function (colSpan) {
var colGroup = this._getTopColGroup(colSpan);
// get the minimum Y value from the columns
var minimumY = Math.min.apply(Math, colGroup);
return {
col: colGroup.indexOf(minimumY),
y: minimumY,
};
};
/**
* @param {Number} colSpan - number of columns the element spans
* @returns {Array} colGroup
*/
proto._getTopColGroup = function (colSpan) {
if (colSpan < 2) {
// if brick spans only one column, use all the column Ys
return this.colYs;
}
var colGroup = [];
// how many different places could this brick fit horizontally
var groupCount = this.cols + 1 - colSpan;
// for each group potential horizontal position
for (var i = 0; i < groupCount; i++) {
colGroup[i] = this._getColGroupY(i, colSpan);
}
return colGroup;
};
proto._getColGroupY = function (col, colSpan) {
if (colSpan < 2) {
return this.colYs[col];
}
// make an array of colY values for that one group
var groupColYs = this.colYs.slice(col, col + colSpan);
// and get the max value of the array
return Math.max.apply(Math, groupColYs);
};
// get column position based on horizontal index. #873
proto._getHorizontalColPosition = function (colSpan, item) {
var col = this.horizontalColIndex % this.cols;
var isOver = colSpan > 1 && col + colSpan > this.cols;
// shift to next row if item can't fit on current row
col = isOver ? 0 : col;
// don't let zero-size items take up space
var hasSize = item.size.outerWidth && item.size.outerHeight;
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
return {
col: col,
y: this._getColGroupY(col, colSpan),
};
};
proto._manageStamp = function (stamp) {
var stampSize = getSize(stamp);
var offset = this._getElementOffset(stamp);
// get the columns that this stamp affects
var isOriginLeft = this._getOption("originLeft");
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor(firstX / this.columnWidth);
firstCol = Math.max(0, firstCol);
var lastCol = Math.floor(lastX / this.columnWidth);
// lastCol should not go over if multiple of columnWidth #425
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min(this.cols - 1, lastCol);
// set colYs to bottom of the stamp
var isOriginTop = this._getOption("originTop");
var stampMaxY =
(isOriginTop ? offset.top : offset.bottom) + stampSize.outerHeight;
for (var i = firstCol; i <= lastCol; i++) {
this.colYs[i] = Math.max(stampMaxY, this.colYs[i]);
}
};
proto._getContainerSize = function () {
this.maxY = Math.max.apply(Math, this.colYs);
var size = {
height: this.maxY,
};
if (this._getOption("fitWidth")) {
size.width = this._getContainerFitWidth();
}
return size;
};
proto._getContainerFitWidth = function () {
var unusedCols = 0;
// count unused columns
var i = this.cols;
while (--i) {
if (this.colYs[i] !== 0) {
break;
}
unusedCols++;
}
// fit container to columns that have been used
return (this.cols - unusedCols) * this.columnWidth - this.gutter;
};
proto.needsResizeLayout = function () {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth != this.containerWidth;
};
return Masonry;
});
/*!
* Masonry layout mode
* sub-classes Masonry
* https://masonry.desandro.com
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("isotope-layout/js/layout-modes/masonry", [
"../layout-mode",
"masonry-layout/masonry",
], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(
require("../layout-mode"),
require("masonry-layout")
);
} else {
// browser global
factory(window.Isotope.LayoutMode, window.Masonry);
}
})(window, function factory(LayoutMode, Masonry) {
"use strict";
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var MasonryMode = LayoutMode.create("masonry");
var proto = MasonryMode.prototype;
var keepModeMethods = {
_getElementOffset: true,
layout: true,
_getMeasurement: true,
};
// inherit Masonry prototype
for (var method in Masonry.prototype) {
// do not inherit mode methods
if (!keepModeMethods[method]) {
proto[method] = Masonry.prototype[method];
}
}
var measureColumns = proto.measureColumns;
proto.measureColumns = function () {
// set items, used if measuring first item
this.items = this.isotope.filteredItems;
measureColumns.call(this);
};
// point to mode options for fitWidth
var _getOption = proto._getOption;
proto._getOption = function (option) {
if (option == "fitWidth") {
return this.options.isFitWidth !== undefined
? this.options.isFitWidth
: this.options.fitWidth;
}
return _getOption.apply(this.isotope, arguments);
};
return MasonryMode;
});
/**
* fitRows layout mode
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("isotope-layout/js/layout-modes/fit-rows", [
"../layout-mode",
], factory);
} else if (typeof exports == "object") {
// CommonJS
module.exports = factory(require("../layout-mode"));
} else {
// browser global
factory(window.Isotope.LayoutMode);
}
})(window, function factory(LayoutMode) {
"use strict";
var FitRows = LayoutMode.create("fitRows");
var proto = FitRows.prototype;
proto._resetLayout = function () {
this.x = 0;
this.y = 0;
this.maxY = 0;
this._getMeasurement("gutter", "outerWidth");
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
var itemWidth = item.size.outerWidth + this.gutter;
// if this element cannot fit in the current row
var containerWidth = this.isotope.size.innerWidth + this.gutter;
if (this.x !== 0 && itemWidth + this.x > containerWidth) {
this.x = 0;
this.y = this.maxY;
}
var position = {
x: this.x,
y: this.y,
};
this.maxY = Math.max(this.maxY, this.y + item.size.outerHeight);
this.x += itemWidth;
return position;
};
proto._getContainerSize = function () {
return { height: this.maxY };
};
return FitRows;
});
/**
* vertical layout mode
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define("isotope-layout/js/layout-modes/vertical", [
"../layout-mode",
], factory);
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(require("../layout-mode"));
} else {
// browser global
factory(window.Isotope.LayoutMode);
}
})(window, function factory(LayoutMode) {
"use strict";
var Vertical = LayoutMode.create("vertical", {
horizontalAlignment: 0,
});
var proto = Vertical.prototype;
proto._resetLayout = function () {
this.y = 0;
};
proto._getItemLayoutPosition = function (item) {
item.getSize();
var x =
(this.isotope.size.innerWidth - item.size.outerWidth) *
this.options.horizontalAlignment;
var y = this.y;
this.y += item.size.outerHeight;
return { x: x, y: y };
};
proto._getContainerSize = function () {
return { height: this.y };
};
return Vertical;
});
/*!
* Isotope v3.0.6
*
* Licensed GPLv3 for open source use
* or Isotope Commercial License for commercial use
*
* https://isotope.metafizzy.co
* Copyright 2010-2018 Metafizzy
*/
(function (window, factory) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if (typeof define == "function" && define.amd) {
// AMD
define([
"outlayer/outlayer",
"get-size/get-size",
"desandro-matches-selector/matches-selector",
"fizzy-ui-utils/utils",
"isotope-layout/js/item",
"isotope-layout/js/layout-mode",
// include default layout modes
"isotope-layout/js/layout-modes/masonry",
"isotope-layout/js/layout-modes/fit-rows",
"isotope-layout/js/layout-modes/vertical",
], function (Outlayer, getSize, matchesSelector, utils, Item, LayoutMode) {
return factory(
window,
Outlayer,
getSize,
matchesSelector,
utils,
Item,
LayoutMode
);
});
} else if (typeof module == "object" && module.exports) {
// CommonJS
module.exports = factory(
window,
require("outlayer"),
require("get-size"),
require("desandro-matches-selector"),
require("fizzy-ui-utils"),
require("isotope-layout/js/item"),
require("isotope-layout/js/layout-mode"),
// include default layout modes
require("isotope-layout/js/layout-modes/masonry"),
require("isotope-layout/js/layout-modes/fit-rows"),
require("isotope-layout/js/layout-modes/vertical")
);
} else {
// browser global
window.Isotope = factory(
window,
window.Outlayer,
window.getSize,
window.matchesSelector,
window.fizzyUIUtils,
window.Isotope.Item,
window.Isotope.LayoutMode
);
}
})(
window,
function factory(
window,
Outlayer,
getSize,
matchesSelector,
utils,
Item,
LayoutMode
) {
// -------------------------- vars -------------------------- //
var jQuery = window.jQuery;
// -------------------------- helpers -------------------------- //
var trim = String.prototype.trim
? function (str) {
return str.trim();
}
: function (str) {
return str.replace(/^\s+|\s+$/g, "");
};
// -------------------------- isotopeDefinition -------------------------- //
// create an Outlayer layout class
var Isotope = Outlayer.create("isotope", {
layoutMode: "masonry",
isJQueryFiltering: true,
sortAscending: true,
});
Isotope.Item = Item;
Isotope.LayoutMode = LayoutMode;
var proto = Isotope.prototype;
proto._create = function () {
this.itemGUID = 0;
// functions that sort items
this._sorters = {};
this._getSorters();
// call super
Outlayer.prototype._create.call(this);
// create layout modes
this.modes = {};
// start filteredItems with all items
this.filteredItems = this.items;
// keep of track of sortBys
this.sortHistory = ["original-order"];
// create from registered layout modes
for (var name in LayoutMode.modes) {
this._initLayoutMode(name);
}
};
proto.reloadItems = function () {
// reset item ID counter
this.itemGUID = 0;
// call super
Outlayer.prototype.reloadItems.call(this);
};
proto._itemize = function () {
var items = Outlayer.prototype._itemize.apply(this, arguments);
// assign ID for original-order
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.id = this.itemGUID++;
}
this._updateItemsSortData(items);
return items;
};
// -------------------------- layout -------------------------- //
proto._initLayoutMode = function (name) {
var Mode = LayoutMode.modes[name];
// set mode options
// HACK extend initial options, back-fill in default options
var initialOpts = this.options[name] || {};
this.options[name] = Mode.options
? utils.extend(Mode.options, initialOpts)
: initialOpts;
// init layout mode instance
this.modes[name] = new Mode(this);
};
proto.layout = function () {
// if first time doing layout, do all magic
if (!this._isLayoutInited && this._getOption("initLayout")) {
this.arrange();
return;
}
this._layout();
};
// private method to be used in layout() & magic()
proto._layout = function () {
// don't animate first layout
var isInstant = this._getIsInstant();
// layout flow
this._resetLayout();
this._manageStamps();
this.layoutItems(this.filteredItems, isInstant);
// flag for initalized
this._isLayoutInited = true;
};
// filter + sort + layout
proto.arrange = function (opts) {
// set any options pass
this.option(opts);
this._getIsInstant();
// filter, sort, and layout
// filter
var filtered = this._filter(this.items);
this.filteredItems = filtered.matches;
this._bindArrangeComplete();
if (this._isInstant) {
this._noTransition(this._hideReveal, [filtered]);
} else {
this._hideReveal(filtered);
}
this._sort();
this._layout();
};
// alias to _init for main plugin method
proto._init = proto.arrange;
proto._hideReveal = function (filtered) {
this.reveal(filtered.needReveal);
this.hide(filtered.needHide);
};
// HACK
// Don't animate/transition first layout
// Or don't animate/transition other layouts
proto._getIsInstant = function () {
var isLayoutInstant = this._getOption("layoutInstant");
var isInstant =
isLayoutInstant !== undefined ? isLayoutInstant : !this._isLayoutInited;
this._isInstant = isInstant;
return isInstant;
};
// listen for layoutComplete, hideComplete and revealComplete
// to trigger arrangeComplete
proto._bindArrangeComplete = function () {
// listen for 3 events to trigger arrangeComplete
var isLayoutComplete, isHideComplete, isRevealComplete;
var _this = this;
function arrangeParallelCallback() {
if (isLayoutComplete && isHideComplete && isRevealComplete) {
_this.dispatchEvent("arrangeComplete", null, [_this.filteredItems]);
}
}
this.once("layoutComplete", function () {
isLayoutComplete = true;
arrangeParallelCallback();
});
this.once("hideComplete", function () {
isHideComplete = true;
arrangeParallelCallback();
});
this.once("revealComplete", function () {
isRevealComplete = true;
arrangeParallelCallback();
});
};
// -------------------------- filter -------------------------- //
proto._filter = function (items) {
var filter = this.options.filter;
filter = filter || "*";
var matches = [];
var hiddenMatched = [];
var visibleUnmatched = [];
var test = this._getFilterTest(filter);
// test each item
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.isIgnored) {
continue;
}
// add item to either matched or unmatched group
var isMatched = test(item);
// item.isFilterMatched = isMatched;
// add to matches if its a match
if (isMatched) {
matches.push(item);
}
// add to additional group if item needs to be hidden or revealed
if (isMatched && item.isHidden) {
hiddenMatched.push(item);
} else if (!isMatched && !item.isHidden) {
visibleUnmatched.push(item);
}
}
// return collections of items to be manipulated
return {
matches: matches,
needReveal: hiddenMatched,
needHide: visibleUnmatched,
};
};
// get a jQuery, function, or a matchesSelector test given the filter
proto._getFilterTest = function (filter) {
if (jQuery && this.options.isJQueryFiltering) {
// use jQuery
return function (item) {
return jQuery(item.element).is(filter);
};
}
if (typeof filter == "function") {
// use filter as function
return function (item) {
return filter(item.element);
};
}
// default, use filter as selector string
return function (item) {
return matchesSelector(item.element, filter);
};
};
// -------------------------- sorting -------------------------- //
/**
* @params {Array} elems
* @public
*/
proto.updateSortData = function (elems) {
// get items
var items;
if (elems) {
elems = utils.makeArray(elems);
items = this.getItems(elems);
} else {
// update all items if no elems provided
items = this.items;
}
this._getSorters();
this._updateItemsSortData(items);
};
proto._getSorters = function () {
var getSortData = this.options.getSortData;
for (var key in getSortData) {
var sorter = getSortData[key];
this._sorters[key] = mungeSorter(sorter);
}
};
/**
* @params {Array} items - of Isotope.Items
* @private
*/
proto._updateItemsSortData = function (items) {
// do not update if no items
var len = items && items.length;
for (var i = 0; len && i < len; i++) {
var item = items[i];
item.updateSortData();
}
};
// ----- munge sorter ----- //
// encapsulate this, as we just need mungeSorter
// other functions in here are just for munging
var mungeSorter = (function () {
// add a magic layer to sorters for convienent shorthands
// `.foo-bar` will use the text of .foo-bar querySelector
// `[foo-bar]` will use attribute
// you can also add parser
// `.foo-bar parseInt` will parse that as a number
function mungeSorter(sorter) {
// if not a string, return function or whatever it is
if (typeof sorter != "string") {
return sorter;
}
// parse the sorter string
var args = trim(sorter).split(" ");
var query = args[0];
// check if query looks like [an-attribute]
var attrMatch = query.match(/^\[(.+)\]$/);
var attr = attrMatch && attrMatch[1];
var getValue = getValueGetter(attr, query);
// use second argument as a parser
var parser = Isotope.sortDataParsers[args[1]];
// parse the value, if there was a parser
sorter = parser
? function (elem) {
return elem && parser(getValue(elem));
}
: // otherwise just return value
function (elem) {
return elem && getValue(elem);
};
return sorter;
}
// get an attribute getter, or get text of the querySelector
function getValueGetter(attr, query) {
// if query looks like [foo-bar], get attribute
if (attr) {
return function getAttribute(elem) {
return elem.getAttribute(attr);
};
}
// otherwise, assume its a querySelector, and get its text
return function getChildText(elem) {
var child = elem.querySelector(query);
return child && child.textContent;
};
}
return mungeSorter;
})();
// parsers used in getSortData shortcut strings
Isotope.sortDataParsers = {
parseInt: function (val) {
return parseInt(val, 10);
},
parseFloat: function (val) {
return parseFloat(val);
},
};
// ----- sort method ----- //
// sort filteredItem order
proto._sort = function () {
if (!this.options.sortBy) {
return;
}
// keep track of sortBy History
var sortBys = utils.makeArray(this.options.sortBy);
if (!this._getIsSameSortBy(sortBys)) {
// concat all sortBy and sortHistory, add to front, oldest goes in last
this.sortHistory = sortBys.concat(this.sortHistory);
}
// sort magic
var itemSorter = getItemSorter(
this.sortHistory,
this.options.sortAscending
);
this.filteredItems.sort(itemSorter);
};
// check if sortBys is same as start of sortHistory
proto._getIsSameSortBy = function (sortBys) {
for (var i = 0; i < sortBys.length; i++) {
if (sortBys[i] != this.sortHistory[i]) {
return false;
}
}
return true;
};
// returns a function used for sorting
function getItemSorter(sortBys, sortAsc) {
return function sorter(itemA, itemB) {
// cycle through all sortKeys
for (var i = 0; i < sortBys.length; i++) {
var sortBy = sortBys[i];
var a = itemA.sortData[sortBy];
var b = itemB.sortData[sortBy];
if (a > b || a < b) {
// if sortAsc is an object, use the value given the sortBy key
var isAscending =
sortAsc[sortBy] !== undefined ? sortAsc[sortBy] : sortAsc;
var direction = isAscending ? 1 : -1;
return (a > b ? 1 : -1) * direction;
}
}
return 0;
};
}
// -------------------------- methods -------------------------- //
// get layout mode
proto._mode = function () {
var layoutMode = this.options.layoutMode;
var mode = this.modes[layoutMode];
if (!mode) {
// TODO console.error
throw new Error("No layout mode: " + layoutMode);
}
// HACK sync mode's options
// any options set after init for layout mode need to be synced
mode.options = this.options[layoutMode];
return mode;
};
proto._resetLayout = function () {
// trigger original reset layout
Outlayer.prototype._resetLayout.call(this);
this._mode()._resetLayout();
};
proto._getItemLayoutPosition = function (item) {
return this._mode()._getItemLayoutPosition(item);
};
proto._manageStamp = function (stamp) {
this._mode()._manageStamp(stamp);
};
proto._getContainerSize = function () {
return this._mode()._getContainerSize();
};
proto.needsResizeLayout = function () {
return this._mode().needsResizeLayout();
};
// -------------------------- adding & removing -------------------------- //
// HEADS UP overwrites default Outlayer appended
proto.appended = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded(items);
// add to filteredItems
this.filteredItems = this.filteredItems.concat(filteredItems);
};
// HEADS UP overwrites default Outlayer prepended
proto.prepended = function (elems) {
var items = this._itemize(elems);
if (!items.length) {
return;
}
// start new layout
this._resetLayout();
this._manageStamps();
// filter, layout, reveal new items
var filteredItems = this._filterRevealAdded(items);
// layout previous items
this.layoutItems(this.filteredItems);
// add to items and filteredItems
this.filteredItems = filteredItems.concat(this.filteredItems);
this.items = items.concat(this.items);
};
proto._filterRevealAdded = function (items) {
var filtered = this._filter(items);
this.hide(filtered.needHide);
// reveal all new items
this.reveal(filtered.matches);
// layout new items, no transition
this.layoutItems(filtered.matches, true);
return filtered.matches;
};
/**
* Filter, sort, and layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.insert = function (elems) {
var items = this.addItems(elems);
if (!items.length) {
return;
}
// append item elements
var i, item;
var len = items.length;
for (i = 0; i < len; i++) {
item = items[i];
this.element.appendChild(item.element);
}
// filter new stuff
var filteredInsertItems = this._filter(items).matches;
// set flag
for (i = 0; i < len; i++) {
items[i].isLayoutInstant = true;
}
this.arrange();
// reset flag
for (i = 0; i < len; i++) {
delete items[i].isLayoutInstant;
}
this.reveal(filteredInsertItems);
};
var _remove = proto.remove;
proto.remove = function (elems) {
elems = utils.makeArray(elems);
var removeItems = this.getItems(elems);
// do regular thing
_remove.call(this, elems);
// bail if no items to remove
var len = removeItems && removeItems.length;
// remove elems from filteredItems
for (var i = 0; len && i < len; i++) {
var item = removeItems[i];
// remove item from collection
utils.removeFrom(this.filteredItems, item);
}
};
proto.shuffle = function () {
// update random sortData
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
item.sortData.random = Math.random();
}
this.options.sortBy = "random";
this._sort();
this._layout();
};
/**
* trigger fn without transition
* kind of hacky to have this in the first place
* @param {Function} fn
* @param {Array} args
* @returns ret
* @private
*/
proto._noTransition = function (fn, args) {
// save transitionDuration before disabling
var transitionDuration = this.options.transitionDuration;
// disable transition
this.options.transitionDuration = 0;
// do it
var returnValue = fn.apply(this, args);
// re-enable transition for reveal
this.options.transitionDuration = transitionDuration;
return returnValue;
};
// ----- helper methods ----- //
/**
* getter method for getting filtered item elements
* @returns {Array} elems - collection of item elements
*/
proto.getFilteredItemElements = function () {
return this.filteredItems.map(function (item) {
return item.element;
});
};
// ----- ----- //
return Isotope;
}
);
================================================
FILE: src/html/vendor/prism.css
================================================
/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+c+glsl+json+json5 */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 10px;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.2;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 10px 10px 0 10px;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f8f8f8;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
================================================
FILE: src/html/vendor/prism.js
================================================
/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+coffeescript+concurnas+csp+crystal+css-extras+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+q+qml+qore+r+racket+jsx+tsx+reason+regex+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function r(e,t){var a,n;switch(t=t||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),t[n])return t[n];for(var i in a={},t[n]=a,e)e.hasOwnProperty(i)&&(a[i]=r(e[i],t));return a;case"Array":return n=M.util.objId(e),t[n]?t[n]:(a=[],t[n]=a,e.forEach(function(e,n){a[n]=r(e,t)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var r=document.getElementsByTagName("script");for(var t in r)if(r[t].src==n)return r[t]}return null}},isActive:function(e,n,r){for(var t="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(t))return!1;e=e.parentElement}return!!r}},languages:{extend:function(e,n){var r=M.util.clone(M.languages[e]);for(var t in n)r[t]=n[t];return r},insertBefore:function(r,e,n,t){var a=(t=t||M.languages)[r],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=t[r];return t[r]=i,M.languages.DFS(M.languages,function(e,n){n===s&&e!=r&&(this[e]=i)}),i},DFS:function e(n,r,t,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){r.call(n,l,n[l],t||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,r,l,a)):(a[i(o)]=!0,e(o,r,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,r){var t={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",t),t.elements=Array.prototype.slice.apply(t.container.querySelectorAll(t.selector)),M.hooks.run("before-all-elements-highlight",t);for(var a,i=0;a=t.elements[i++];)M.highlightElement(a,!0===n,t.callback)},highlightElement:function(e,n,r){var t=M.util.getLanguage(e),a=M.languages[t];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+t;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+t);var l={element:e,language:t,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),r&&r.call(l.element)}if(M.hooks.run("before-sanity-check",l),!l.code)return M.hooks.run("complete",l),void(r&&r.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,r){var t={code:e,grammar:n,language:r};return M.hooks.run("before-tokenize",t),t.tokens=M.tokenize(t.code,t.grammar),M.hooks.run("after-tokenize",t),W.stringify(M.util.encode(t.tokens),t.language)},tokenize:function(e,n){var r=n.rest;if(r){for(var t in r)n[t]=r[t];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,r,t,a,i,l){for(var o in t)if(t.hasOwnProperty(o)&&t[o]){var s=t[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var v=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,v+"g")}for(var p=c.pattern||c,m=a.next,y=i;m!==r.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var k=m.value;if(r.length>n.length)return;if(!(k instanceof W)){var b,x=1;if(h){if(!(b=z(p,y,n,f)))break;var w=b.index,A=b.index+b[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var S=m;S!==r.tail&&(P<A||"string"==typeof S.value);S=S.next)x++,P+=S.value.length;x--,k=n.slice(y,P),b.index-=y}else if(!(b=z(p,0,k,f)))continue;var w=b.index,E=b[0],O=k.slice(0,w),L=k.slice(w+E.length),N=y+k.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;O&&(j=I(r,j,O),y+=O.length),q(r,j,x);var C=new W(o,g?M.tokenize(E,g):E,d,E);if(m=I(r,j,C),L&&I(r,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,r,t,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],r=e.head.next;for(;r!==e.tail;)n.push(r.value),r=r.next;return n}(a)},hooks:{all:{},add:function(e,n){var r=M.hooks.all;r[e]=r[e]||[],r[e].push(n)},run:function(e,n){var r=M.hooks.all[e];if(r&&r.length)for(var t,a=0;t=r[a++];)t(n)}},Token:W};function W(e,n,r,t){this.type=e,this.content=n,this.alias=r,this.length=0|(t||"").length}function z(e,n,r,t){e.lastIndex=n;var a=e.exec(r);if(a&&t&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,r){var t=n.next,a={value:r,prev:n,next:t};return n.next=a,t.prev=a,e.length++,a}function q(e,n,r){for(var t=n.next,a=0;a<r&&t!==e.tail;a++)t=t.next;(n.next=t).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,r){if("string"==typeof e)return e;if(Array.isArray(e)){var t="";return e.forEach(function(e){t+=n(e,r)}),t}var a={type:e.type,content:n(e.content,r),tag:"span",classes:["token",e.type],attributes:{},language:r},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,""")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,t=n.code,a=n.immediateClose;u.postMessage(M.highlight(t,M.languages[r],r)),a&&u.close()},!1)),M;var e=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(e&&(M.filename=e.src,e.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var t=document.readyState;"loading"===t||"interactive"===t&&e&&e.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
!function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:s.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},t.tag))}(Prism);
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
Prism.languages.abap={comment:/^\*.*/m,string:/(`|')(?:\\.|(?!\1)[^\\\r\n])*\1/m,"string-template":{pattern:/([|}])(?:\\.|[^\\|{\r\n])*(?=[|{])/,lookbehind:!0,alias:"string"},"eol-comment":{pattern:/(^|\s)".*/m,lookbehind:!0,alias:"comment"},keyword:{pattern:/(\s|\.|^)(?:SCIENTIFIC_WITH_LEADING_ZERO|SCALE_PRESERVING_SCIENTIFIC|RMC_COMMUNICATION_FAILURE|END-ENHANCEMENT-SECTION|MULTIPLY-CORRESPONDING|SUBTRACT-CORRESPONDING|VERIFICATION-MESSAGE|DIVIDE-CORRESPONDING|ENHANCEMENT-SECTION|CURRENCY_CONVERSION|RMC_SYSTEM_FAILURE|START-OF-SELECTION|MOVE-CORRESPONDING|RMC_INVALID_STATUS|CUSTOMER-FUNCTION|END-OF-DEFINITION|ENHANCEMENT-POINT|SYSTEM-EXCEPTIONS|ADD-CORRESPONDING|SCALE_PRESERVING|SELECTION-SCREEN|CURSOR-SELECTION|END-OF-SELECTION|LOAD-OF-PROGRAM|SCROLL-BOUNDARY|SELECTION-TABLE|EXCEPTION-TABLE|IMPLEMENTATIONS|PARAMETER-TABLE|RIGHT-JUSTIFIED|UNIT_CONVERSION|AUTHORITY-CHECK|LIST-PROCESSING|SIGN_AS_POSTFIX|COL_BACKGROUND|IMPLEMENTATION|INTERFACE-POOL|TRANSFORMATION|IDENTIFICATION|ENDENHANCEMENT|LINE-SELECTION|INITIALIZATION|LEFT-JUSTIFIED|SELECT-OPTIONS|SELECTION-SETS|COMMUNICATION|CORRESPONDING|DECIMAL_SHIFT|PRINT-CONTROL|VALUE-REQUEST|CHAIN-REQUEST|FUNCTION-POOL|FIELD-SYMBOLS|FUNCTIONALITY|INVERTED-DATE|SELECTION-SET|CLASS-METHODS|OUTPUT-LENGTH|CLASS-CODING|COL_NEGATIVE|ERRORMESSAGE|FIELD-GROUPS|HELP-REQUEST|NO-EXTENSION|NO-TOPOFPAGE|REDEFINITION|DISPLAY-MODE|ENDINTERFACE|EXIT-COMMAND|FIELD-SYMBOL|NO-SCROLLING|SHORTDUMP-ID|ACCESSPOLICY|CLASS-EVENTS|COL_POSITIVE|DECLARATIONS|ENHANCEMENTS|FILTER-TABLE|SWITCHSTATES|SYNTAX-CHECK|TRANSPORTING|ASYNCHRONOUS|SYNTAX-TRACE|TOKENIZATION|USER-COMMAND|WITH-HEADING|ABAP-SOURCE|BREAK-POINT|CHAIN-INPUT|COMPRESSION|FIXED-POINT|NEW-SECTION|NON-UNICODE|OCCURRENCES|RESPONSIBLE|SYSTEM-CALL|TRACE-TABLE|ABBREVIATED|CHAR-TO-HEX|END-OF-FILE|ENDFUNCTION|ENVIRONMENT|ASSOCIATION|COL_HEADING|EDITOR-CALL|END-OF-PAGE|ENGINEERING|IMPLEMENTED|INTENSIFIED|RADIOBUTTON|SYSTEM-EXIT|TOP-OF-PAGE|TRANSACTION|APPLICATION|CONCATENATE|DESTINATION|ENHANCEMENT|IMMEDIATELY|NO-GROUPING|PRECOMPILED|REPLACEMENT|TITLE-LINES|ACTIVATION|BYTE-ORDER|CLASS-POOL|CONNECTION|CONVERSION|DEFINITION|DEPARTMENT|EXPIRATION|INHERITING|MESSAGE-ID|NO-HEADING|PERFORMING|QUEUE-ONLY|RIGHTSPACE|SCIENTIFIC|STATUSINFO|STRUCTURES|SYNCPOINTS|WITH-TITLE|ATTRIBUTES|BOUNDARIES|CLASS-DATA|COL_NORMAL|DD\/MM\/YYYY|DESCENDING|INTERFACES|LINE-COUNT|MM\/DD\/YYYY|NON-UNIQUE|PRESERVING|SELECTIONS|STATEMENTS|SUBROUTINE|TRUNCATION|TYPE-POOLS|ARITHMETIC|BACKGROUND|ENDPROVIDE|EXCEPTIONS|IDENTIFIER|INDEX-LINE|OBLIGATORY|PARAMETERS|PERCENTAGE|PUSHBUTTON|RESOLUTION|COMPONENTS|DEALLOCATE|DISCONNECT|DUPLICATES|FIRST-LINE|HEAD-LINES|NO-DISPLAY|OCCURRENCE|RESPECTING|RETURNCODE|SUBMATCHES|TRACE-FILE|ASCENDING|BYPASSING|ENDMODULE|EXCEPTION|EXCLUDING|EXPORTING|INCREMENT|MATCHCODE|PARAMETER|PARTIALLY|PREFERRED|REFERENCE|REPLACING|RETURNING|SELECTION|SEPARATED|SPECIFIED|STATEMENT|TIMESTAMP|TYPE-POOL|ACCEPTING|APPENDAGE|ASSIGNING|COL_GROUP|COMPARING|CONSTANTS|DANGEROUS|IMPORTING|INSTANCES|LEFTSPACE|LOG-POINT|QUICKINFO|READ-ONLY|SCROLLING|SQLSCRIPT|STEP-LOOP|TOP-LINES|TRANSLATE|APPENDING|AUTHORITY|CHARACTER|COMPONENT|CONDITION|DIRECTORY|DUPLICATE|MESSAGING|RECEIVING|SUBSCREEN|ACCORDING|COL_TOTAL|END-LINES|ENDMETHOD|ENDSELECT|EXPANDING|EXTENSION|INCLUDING|INFOTYPES|INTERFACE|INTERVALS|LINE-SIZE|PF-STATUS|PROCEDURE|PROTECTED|REQUESTED|RESUMABLE|RIGHTPLUS|SAP-SPOOL|SECONDARY|STRUCTURE|SUBSTRING|TABLEVIEW|NUMOFCHAR|ADJACENT|ANALYSIS|ASSIGNED|BACKWARD|CHANNELS|CHECKBOX|CONTINUE|CRITICAL|DATAINFO|DD\/MM\/YY|DURATION|ENCODING|ENDCLASS|FUNCTION|LEFTPLUS|LINEFEED|MM\/DD\/YY|OVERFLOW|RECEIVED|SKIPPING|SORTABLE|STANDARD|SUBTRACT|SUPPRESS|TABSTRIP|TITLEBAR|TRUNCATE|UNASSIGN|WHENEVER|ANALYZER|COALESCE|COMMENTS|CONDENSE|DECIMALS|DEFERRED|ENDWHILE|EXPLICIT|KEYWORDS|MESSAGES|POSITION|PRIORITY|RECEIVER|RENAMING|TIMEZONE|TRAILING|ALLOCATE|CENTERED|CIRCULAR|CONTROLS|CURRENCY|DELETING|DESCRIBE|DISTANCE|ENDCATCH|EXPONENT|EXTENDED|GENERATE|IGNORING|INCLUDES|INTERNAL|MAJOR-ID|MODIFIER|NEW-LINE|OPTIONAL|PROPERTY|ROLLBACK|STARTING|SUPPLIED|ABSTRACT|CHANGING|CONTEXTS|CREATING|CUSTOMER|DATABASE|DAYLIGHT|DEFINING|DISTINCT|DIVISION|ENABLING|ENDCHAIN|ESCAPING|HARMLESS|IMPLICIT|INACTIVE|LANGUAGE|MINOR-ID|MULTIPLY|NEW-PAGE|NO-TITLE|POS_HIGH|SEPARATE|TEXTPOOL|TRANSFER|SELECTOR|DBMAXLEN|ITERATOR|SELECTOR|ARCHIVE|BIT-XOR|BYTE-CO|COLLECT|COMMENT|CURRENT|DEFAULT|DISPLAY|ENDFORM|EXTRACT|LEADING|LISTBOX|LOCATOR|MEMBERS|METHODS|NESTING|POS_LOW|PROCESS|PROVIDE|RAISING|RESERVE|SECONDS|SUMMARY|VISIBLE|BETWEEN|BIT-AND|BYTE-CS|CLEANUP|COMPUTE|CONTROL|CONVERT|DATASET|ENDCASE|FORWARD|HEADERS|HOTSPOT|INCLUDE|INVERSE|KEEPING|NO-ZERO|OBJECTS|OVERLAY|PADDING|PATTERN|PROGRAM|REFRESH|SECTION|SUMMING|TESTING|VERSION|WINDOWS|WITHOUT|BIT-NOT|BYTE-CA|BYTE-NA|CASTING|CONTEXT|COUNTRY|DYNAMIC|ENABLED|ENDLOOP|EXECUTE|FRIENDS|HANDLER|HEADING|INITIAL|\*-INPUT|LOGFILE|MAXIMUM|MINIMUM|NO-GAPS|NO-SIGN|PRAGMAS|PRIMARY|PRIVATE|REDUCED|REPLACE|REQUEST|RESULTS|UNICODE|WARNING|ALIASES|BYTE-CN|BYTE-NS|CALLING|COL_KEY|COLUMNS|CONNECT|ENDEXEC|ENTRIES|EXCLUDE|FILTERS|FURTHER|HELP-ID|LOGICAL|MAPPING|MESSAGE|NAMETAB|OPTIONS|PACKAGE|PERFORM|RECEIVE|STATICS|VARYING|BINDING|CHARLEN|GREATER|XSTRLEN|ACCEPT|APPEND|DETAIL|ELSEIF|ENDING|ENDTRY|FORMAT|FRAMES|GIVING|HASHED|HEADER|IMPORT|INSERT|MARGIN|MODULE|NATIVE|OBJECT|OFFSET|REMOTE|RESUME|SAVING|SIMPLE|SUBMIT|TABBED|TOKENS|UNIQUE|UNPACK|UPDATE|WINDOW|YELLOW|ACTUAL|ASPECT|CENTER|CURSOR|DELETE|DIALOG|DIVIDE|DURING|ERRORS|EVENTS|EXTEND|FILTER|HANDLE|HAVING|IGNORE|LITTLE|MEMORY|NO-GAP|OCCURS|OPTION|PERSON|PLACES|PUBLIC|REDUCE|REPORT|RESULT|SINGLE|SORTED|SWITCH|SYNTAX|TARGET|VALUES|WRITER|ASSERT|BLOCKS|BOUNDS|BUFFER|CHANGE|COLUMN|COMMIT|CONCAT|COPIES|CREATE|DDMMYY|DEFINE|ENDIAN|ESCAPE|EXPAND|KERNEL|LAYOUT|LEGACY|LEVELS|MMDDYY|NUMBER|OUTPUT|RANGES|READER|RETURN|SCREEN|SEARCH|SELECT|SHARED|SOURCE|STABLE|STATIC|SUBKEY|SUFFIX|TABLES|UNWIND|YYMMDD|ASSIGN|BACKUP|BEFORE|BINARY|BIT-OR|BLANKS|CLIENT|CODING|COMMON|DEMAND|DYNPRO|EXCEPT|EXISTS|EXPORT|FIELDS|GLOBAL|GROUPS|LENGTH|LOCALE|MEDIUM|METHOD|MODIFY|NESTED|OTHERS|REJECT|SCROLL|SUPPLY|SYMBOL|ENDFOR|STRLEN|ALIGN|BEGIN|BOUND|ENDAT|ENTRY|EVENT|FINAL|FLUSH|GRANT|INNER|SHORT|USING|WRITE|AFTER|BLACK|BLOCK|CLOCK|COLOR|COUNT|DUMMY|EMPTY|ENDDO|ENDON|GREEN|INDEX|INOUT|LEAVE|LEVEL|LINES|MODIF|ORDER|OUTER|RANGE|RESET|RETRY|RIGHT|SMART|SPLIT|STYLE|TABLE|THROW|UNDER|UNTIL|UPPER|UTF-8|WHERE|ALIAS|BLANK|CLEAR|CLOSE|EXACT|FETCH|FIRST|FOUND|GROUP|LLANG|LOCAL|OTHER|REGEX|SPOOL|TITLE|TYPES|VALID|WHILE|ALPHA|BOXED|CATCH|CHAIN|CHECK|CLASS|COVER|ENDIF|EQUIV|FIELD|FLOOR|FRAME|INPUT|LOWER|MATCH|NODES|PAGES|PRINT|RAISE|ROUND|SHIFT|SPACE|SPOTS|STAMP|STATE|TASKS|TIMES|TRMAC|ULINE|UNION|VALUE|WIDTH|EQUAL|LOG10|TRUNC|BLOB|CASE|CEIL|CLOB|COND|EXIT|FILE|GAPS|HOLD|INCL|INTO|KEEP|KEYS|LAST|LINE|LONG|LPAD|MAIL|MODE|OPEN|PINK|READ|ROWS|TEST|THEN|ZERO|AREA|BACK|BADI|BYTE|CAST|EDIT|EXEC|FAIL|FIND|FKEQ|FONT|FREE|GKEQ|HIDE|INIT|ITNO|LATE|LOOP|MAIN|MARK|MOVE|NEXT|NULL|RISK|ROLE|UNIT|WAIT|ZONE|BASE|CALL|CODE|DATA|DATE|FKGE|GKGE|HIGH|KIND|LEFT|LIST|MASK|MESH|NAME|NODE|PACK|PAGE|POOL|SEND|SIGN|SIZE|SOME|STOP|TASK|TEXT|TIME|USER|VARY|WITH|WORD|BLUE|CONV|COPY|DEEP|ELSE|FORM|FROM|HINT|ICON|JOIN|LIKE|LOAD|ONLY|PART|SCAN|SKIP|SORT|TYPE|UNIX|VIEW|WHEN|WORK|ACOS|ASIN|ATAN|COSH|EACH|FRAC|LESS|RTTI|SINH|SQRT|TANH|AVG|BIT|DIV|ISO|LET|OUT|PAD|SQL|ALL|CI_|CPI|END|LOB|LPI|MAX|MIN|NEW|OLE|RUN|SET|\?TO|YES|ABS|ADD|AND|BIG|FOR|HDB|JOB|LOW|NOT|SAP|TRY|VIA|XML|ANY|GET|IDS|KEY|MOD|OFF|PUT|RAW|RED|REF|SUM|TAB|XSD|CNT|COS|EXP|LOG|SIN|TAN|XOR|AT|CO|CP|DO|GT|ID|IF|NS|OR|BT|CA|CS|GE|NA|NB|EQ|IN|LT|NE|NO|OF|ON|PF|TO|AS|BY|CN|IS|LE|NP|UP|E|I|M|O|Z|C|X)\b/i,lookbehind:!0},number:/\b\d+\b/,operator:{pattern:/(\s)(?:\*\*?|<[=>]?|>=?|\?=|[-+\/=])(?=\s)/,lookbehind:!0},"string-operator":{pattern:/(\s)&&?(?=\s)/,lookbehind:!0,alias:"keyword"},"token-operator":[{pattern:/(\w)(?:->?|=>|[~|{}])(?=\w)/,lookbehind:!0,alias:"punctuation"},{pattern:/[|{}]/,alias:"punctuation"}],punctuation:/[,.:()]/};
!function(n){var i="(?:ALPHA|BIT|CHAR|CR|CRLF|CTL|DIGIT|DQUOTE|HEXDIG|HTAB|LF|LWSP|OCTET|SP|VCHAR|WSP)";Prism.languages.abnf={comment:/;.*/,string:{pattern:/(?:%[is])?"[^"\n\r]*"/,greedy:!0,inside:{punctuation:/^%[is]/}},range:{pattern:/%(?:b[01]+-[01]+|d\d+-\d+|x[A-F\d]+-[A-F\d]+)/i,alias:"number"},terminal:{pattern:/%(?:b[01]+(?:\.[01]+)*|d\d+(?:\.\d+)*|x[A-F\d]+(?:\.[A-F\d]+)*)/i,alias:"number"},repetition:{pattern:/(^|[^\w-])(?:\d*\*\d*|\d+)/,lookbehind:!0,alias:"operator"},definition:{pattern:/(^[ \t]*)(?:[a-z][\w-]*|<[^>\r\n]*>)(?=\s*=)/m,lookbehind:!0,alias:"keyword",inside:{punctuation:/<|>/}},"core-rule":{pattern:RegExp("(?:(^|[^<\\w-])"+i+"|<"+i+">)(?![\\w-])","i"),lookbehind:!0,alias:["rule","constant"],inside:{punctuation:/<|>/}},rule:{pattern:/(^|[^<\w-])[a-z][\w-]*|<[^>\r\n]*>/i,lookbehind:!0,inside:{punctuation:/<|>/}},operator:/=\/?|\//,punctuation:/[()\[\]]/}}();
Prism.languages.actionscript=Prism.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|else|extends|finally|for|function|if|implements|import|in|instanceof|interface|internal|is|native|new|null|package|private|protected|public|return|super|switch|this|throw|try|typeof|use|var|void|while|with|dynamic|each|final|get|include|namespace|native|override|set|static)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),Prism.languages.actionscript["class-name"].alias="function",Prism.languages.markup&&Prism.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:Prism.languages.markup}});
Prism.languages.ada={comment:/--.*/,string:/"(?:""|[^"\r\f\n])*"/i,number:[{pattern:/\b\d(?:_?\d)*#[\dA-F](?:_?[\dA-F])*(?:\.[\dA-F](?:_?[\dA-F])*)?#(?:E[+-]?\d(?:_?\d)*)?/i},{pattern:/\b\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:E[+-]?\d(?:_?\d)*)?\b/i}],"attr-name":/\b'\w+/i,keyword:/\b(?:abort|abs|abstract|accept|access|aliased|all|and|array|at|begin|body|case|constant|declare|delay|delta|digits|do|else|new|return|elsif|end|entry|exception|exit|for|function|generic|goto|if|in|interface|is|limited|loop|mod|not|null|of|others|out|overriding|package|pragma|private|procedure|protected|raise|range|record|rem|renames|requeue|reverse|select|separate|some|subtype|synchronized|tagged|task|terminate|then|type|until|use|when|while|with|xor)\b/i,boolean:/\b(?:true|false)\b/i,operator:/<[=>]?|>=?|=>?|:=|\/=?|\*\*?|[&+-]/,punctuation:/\.\.?|[,;():]/,char:/'.'/,variable:/\b[a-z](?:[_a-z\d])*\b/i};
Prism.languages.agda={comment:/\{-[\s\S]*?(?:-\}|$)|--.*/,string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},punctuation:/[(){}⦃⦄.;@]/,"class-name":{pattern:/((?:data|record) +)\S+/,lookbehind:!0},function:{pattern:/(^[ \t]*)(?!\s)[^:\r\n]+(?=:)/m,lookbehind:!0},operator:{pattern:/(^\s*|\s)(?:[=|:∀→λ\\?_]|->)(?=\s)/,lookbehind:!0},keyword:/\b(?:Set|abstract|constructor|data|eta-equality|field|forall|forall|hiding|import|in|inductive|infix|infixl|infixr|instance|let|macro|module|mutual|no-eta-equality|open|overlap|pattern|postulate|primitive|private|public|quote|quoteContext|quoteGoal|quoteTerm|record|renaming|rewrite|syntax|tactic|unquote|unquoteDecl|unquoteDef|using|variable|where|with)\b/};
Prism.languages.al={comment:/\/\/.*|\/\*[\s\S]*?\*\//,string:{pattern:/'(?:''|[^'\r\n])*'(?!')|"(?:""|[^"\r\n])*"(?!")/,greedy:!0},function:{pattern:/(\b(?:event|procedure|trigger)\s+|(?:^|[^.])\.\s*)[a-z_]\w*(?=\s*\()/i,lookbehind:!0},keyword:[/\b(?:array|asserterror|begin|break|case|do|downto|else|end|event|exit|for|foreach|function|if|implements|in|indataset|interface|internal|local|of|procedure|program|protected|repeat|runonclient|securityfiltering|suppressdispose|temporary|then|to|trigger|until|var|while|with|withevents)\b/i,/\b(?:action|actions|addafter|addbefore|addfirst|addlast|area|assembly|chartpart|codeunit|column|controladdin|cuegroup|customizes|dataitem|dataset|dotnet|elements|enum|enumextension|extends|field|fieldattribute|fieldelement|fieldgroup|fieldgroups|fields|filter|fixed|grid|group|key|keys|label|labels|layout|modify|moveafter|movebefore|movefirst|movelast|page|pagecustomization|pageextension|part|profile|query|repeater|report|requestpage|schema|separator|systempart|table|tableelement|tableextension|textattribute|textelement|type|usercontrol|value|xmlport)\b/i],number:/\b(?:0x[\da-f]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(?:F|U(?:LL?)?|LL?)?\b/i,boolean:/\b(?:false|true)\b/i,variable:/\b(?:Curr(?:FieldNo|Page|Report)|RequestOptionsPage|x?Rec)\b/,"class-name":/\b(?:automation|biginteger|bigtext|blob|boolean|byte|char|clienttype|code|completiontriggererrorlevel|connectiontype|database|dataclassification|datascope|date|dateformula|datetime|decimal|defaultlayout|dialog|dictionary|dotnetassembly|dotnettypedeclaration|duration|errorinfo|errortype|executioncontext|executionmode|fieldclass|fieldref|fieldtype|file|filterpagebuilder|guid|httpclient|httpcontent|httpheaders|httprequestmessage|httpresponsemessage|instream|integer|joker|jsonarray|jsonobject|jsontoken|jsonvalue|keyref|list|moduledependencyinfo|moduleinfo|none|notification|notificationscope|objecttype|option|outstream|pageresult|record|recordid|recordref|reportformat|securityfilter|sessionsettings|tableconnectiontype|tablefilter|testaction|testfield|testfilterfield|testpage|testpermissions|testrequestpage|text|textbuilder|textconst|textencoding|time|transactionmodel|transactiontype|variant|verbosity|version|view|views|webserviceactioncontext|webserviceactionresultcode|xmlattribute|xmlattributecollection|xmlcdata|xmlcomment|xmldeclaration|xmldocument|xmldocumenttype|xmlelement|xmlnamespacemanager|xmlnametable|xmlnode|xmlnodelist|xmlprocessinginstruction|xmlreadoptions|xmltext|xmlwriteoptions)\b/i,operator:/\.\.|:[=:]|[-+*/]=?|<>|[<>]=?|=|\b(?:and|div|mod|not|or|xor)\b/i,punctuation:/[()\[\]{}:.;,]/};
Prism.languages.antlr4={comment:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,string:{pattern:/'(?:\\.|[^\\'\r\n])*'/,greedy:!0},"character-class":{pattern:/\[(?:\\.|[^\\\]\r\n])*\]/,greedy:!0,alias:"regex",inside:{range:{pattern:/([^[]|(?:^|[^\\])(?:\\\\)*\\\[)-(?!\])/,lookbehind:!0,alias:"punctuation"},escape:/\\(?:u(?:[a-fA-F\d]{4}|\{[a-fA-F\d]+\})|[pP]\{[=\w-]+\}|[^\r\nupP])/,punctuation:/[\[\]]/}},action:{pattern:/\{(?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*\}/,greedy:!0,inside:{content:{pattern:/(\{)[\s\S]+(?=\})/,lookbehind:!0},punctuation:/[{}]/}},command:{pattern:/(->\s*(?!\s))(?:\s*(?:,\s*)?\b[a-z]\w*(?:\s*\([^()\r\n]*\))?)+(?=\s*;)/i,lookbehind:!0,inside:{function:/\b\w+(?=\s*(?:[,(]|$))/,punctuation:/[,()]/}},annotation:{pattern:/@\w+(?:::\w+)*/,alias:"keyword"},label:{pattern:/#[ \t]*\w+/,alias:"punctuation"},keyword:/\b(?:catch|channels|finally|fragment|grammar|import|lexer|locals|mode|options|parser|returns|throws|tokens)\b/,definition:[{pattern:/\b[a-z]\w*(?=\s*:)/,alias:["rule","class-name"]},{pattern:/\b[A-Z]\w*(?=\s*:)/,alias:["token","constant"]}],constant:/\b[A-Z][A-Z_]*\b/,operator:/\.\.|->|[|~]|[*+?]\??/,punctuation:/[;:()=]/},Prism.languages.g4=Prism.languages.antlr4;
Prism.languages.apacheconf={comment:/#.*/,"directive-inline":{pattern:/(^\s*)\b(?:AcceptFilter|AcceptPathInfo|AccessFileName|Action|Add(?:Alt|AltByEncoding|AltByType|Charset|DefaultCharset|Description|Encoding|Handler|Icon|IconByEncoding|IconByType|InputFilter|Language|ModuleInfo|OutputFilter|OutputFilterByType|Type)|Alias|AliasMatch|Allow(?:CONNECT|EncodedSlashes|Methods|Override|OverrideList)?|Anonymous(?:_LogEmail|_MustGiveEmail|_NoUserID|_VerifyEmail)?|AsyncRequestWorkerFactor|Auth(?:BasicAuthoritative|BasicFake|BasicProvider|BasicUseDigestAlgorithm|DBDUserPWQuery|DBDUserRealmQuery|DBMGroupFile|DBMType|DBMUserFile|Digest(?:Algorithm|Domain|NonceLifetime|Provider|Qop|ShmemSize)|Form(?:Authoritative|Body|DisableNoStore|FakeBasicAuth|Location|LoginRequiredLocation|LoginSuccessLocation|LogoutLocation|Method|Mimetype|Password|Provider|SitePassphrase|Size|Username)|GroupFile|LDAP(?:AuthorizePrefix|BindAuthoritative|BindDN|BindPassword|CharsetConfig|CompareAsUser|CompareDNOnServer|DereferenceAliases|GroupAttribute|GroupAttributeIsDN|InitialBindAsUser|InitialBindPattern|MaxSubGroupDepth|RemoteUserAttribute|RemoteUserIsDN|SearchAsUser|SubGroupAttribute|SubGroupClass|Url)|Merging|Name|Type|UserFile|nCache(?:Context|Enable|ProvideFor|SOCache|Timeout)|nzFcgiCheckAuthnProvider|nzFcgiDefineProvider|zDBDLoginToReferer|zDBDQuery|zDBDRedirectQuery|zDBMType|zSendForbiddenOnFailure)|BalancerGrowth|BalancerInherit|BalancerMember|BalancerPersist|BrowserMatch|BrowserMatchNoCase|BufferSize|BufferedLogs|CGIDScriptTimeout|CGIMapExtension|Cache(?:DefaultExpire|DetailHeader|DirLength|DirLevels|Disable|Enable|File|Header|IgnoreCacheControl|IgnoreHeaders|IgnoreNoLastMod|IgnoreQueryString|IgnoreURLSessionIdentifiers|KeyBaseURL|LastModifiedFactor|Lock|LockMaxAge|LockPath|MaxExpire|MaxFileSize|MinExpire|MinFileSize|NegotiatedDocs|QuickHandler|ReadSize|ReadTime|Root|Socache(?:MaxSize|MaxTime|MinTime|ReadSize|ReadTime)?|StaleOnError|StoreExpired|StoreNoStore|StorePrivate)|CharsetDefault|CharsetOptions|CharsetSourceEnc|CheckCaseOnly|CheckSpelling|ChrootDir|ContentDigest|CookieDomain|CookieExpires|CookieName|CookieStyle|CookieTracking|CoreDumpDirectory|CustomLog|DBDExptime|DBDInitSQL|DBDKeep|DBDMax|DBDMin|DBDParams|DBDPersist|DBDPrepareSQL|DBDriver|DTracePrivileges|Dav|DavDepthInfinity|DavGenericLockDB|DavLockDB|DavMinTimeout|DefaultIcon|DefaultLanguage|DefaultRuntimeDir|DefaultType|Define|Deflate(?:BufferSize|CompressionLevel|FilterNote|InflateLimitRequestBody|InflateRatio(?:Burst|Limit)|MemLevel|WindowSize)|Deny|DirectoryCheckHandler|DirectoryIndex|DirectoryIndexRedirect|DirectorySlash|DocumentRoot|DumpIOInput|DumpIOOutput|EnableExceptionHook|EnableMMAP|EnableSendfile|Error|ErrorDocument|ErrorLog|ErrorLogFormat|Example|ExpiresActive|ExpiresByType|ExpiresDefault|ExtFilterDefine|ExtFilterOptions|ExtendedStatus|FallbackResource|FileETag|FilterChain|FilterDeclare|FilterProtocol|FilterProvider|FilterTrace|ForceLanguagePriority|ForceType|ForensicLog|GprofDir|GracefulShutdownTimeout|Group|Header|HeaderName|Heartbeat(?:Address|Listen|MaxServers|Storage)|HostnameLookups|ISAPI(?:AppendLogToErrors|AppendLogToQuery|CacheFile|FakeAsync|LogNotSupported|ReadAheadBuffer)|IdentityCheck|IdentityCheckTimeout|ImapBase|ImapDefault|ImapMenu|Include|IncludeOptional|Index(?:HeadInsert|Ignore|IgnoreReset|Options|OrderDefault|StyleSheet)|InputSed|KeepAlive|KeepAliveTimeout|KeptBodySize|LDAP(?:CacheEntries|CacheTTL|ConnectionPoolTTL|ConnectionTimeout|LibraryDebug|OpCacheEntries|OpCacheTTL|ReferralHopLimit|Referrals|Retries|RetryDelay|SharedCacheFile|SharedCacheSize|Timeout|TrustedClientCert|TrustedGlobalCert|TrustedMode|VerifyServerCert)|LanguagePriority|Limit(?:InternalRecursion|Request(?:Body|FieldSize|Fields|Line)|XMLRequestBody)|Listen|ListenBackLog|LoadFile|LoadModule|LogFormat|LogLevel|LogMessage|LuaAuthzProvider|LuaCodeCache|Lua(?:Hook(?:AccessChecker|AuthChecker|CheckUserID|Fixups|InsertFilter|Log|MapToStorage|TranslateName|TypeChecker)|Inherit|InputFilter|MapHandler|OutputFilter|PackageCPath|PackagePath|QuickHandler|Root|Scope)|MMapFile|Max(?:ConnectionsPerChild|KeepAliveRequests|MemFree|RangeOverlaps|RangeReversals|Ranges|RequestWorkers|SpareServers|SpareThreads|Threads)|MergeTrailers|MetaDir|MetaFiles|MetaSuffix|MimeMagicFile|MinSpareServers|MinSpareThreads|ModMimeUsePathInfo|ModemStandard|MultiviewsMatch|Mutex|NWSSLTrustedCerts|NWSSLUpgradeable|NameVirtualHost|NoProxy|Options|Order|OutputSed|PassEnv|PidFile|PrivilegesMode|Protocol|ProtocolEcho|Proxy(?:AddHeaders|BadHeader|Block|Domain|ErrorOverride|ExpressDBMFile|ExpressDBMType|ExpressEnable|FtpDirCharset|FtpEscapeWildcards|FtpListOnWildcard|HTML(?:BufSize|CharsetOut|DocType|Enable|Events|Extended|Fixups|Interp|Links|Meta|StripComments|URLMap)|IOBufferSize|MaxForwards|Pass(?:Inherit|InterpolateEnv|Match|Reverse|ReverseCookieDomain|ReverseCookiePath)?|PreserveHost|ReceiveBufferSize|Remote|RemoteMatch|Requests|SCGIInternalRedirect|SCGISendfile|Set|SourceAddress|Status|Timeout|Via)|RLimitCPU|RLimitMEM|RLimitNPROC|ReadmeName|ReceiveBufferSize|Redirect|RedirectMatch|RedirectPermanent|RedirectTemp|ReflectorHeader|RemoteIP(?:Header|InternalProxy|InternalProxyList|ProxiesHeader|TrustedProxy|TrustedProxyList)|RemoveCharset|RemoveEncoding|RemoveHandler|RemoveInputFilter|RemoveLanguage|RemoveOutputFilter|RemoveType|RequestHeader|RequestReadTimeout|Require|Rewrite(?:Base|Cond|Engine|Map|Options|Rule)|SSIETag|SSIEndTag|SSIErrorMsg|SSILastModified|SSILegacyExprParser|SSIStartTag|SSITimeFormat|SSIUndefinedEcho|SSL(?:CACertificateFile|CACertificatePath|CADNRequestFile|CADNRequestPath|CARevocationCheck|CARevocationFile|CARevocationPath|CertificateChainFile|CertificateFile|CertificateKeyFile|CipherSuite|Compression|CryptoDevice|Engine|FIPS|HonorCipherOrder|InsecureRenegotiation|OCSP(?:DefaultResponder|Enable|OverrideResponder|ResponderTimeout|ResponseMaxAge|ResponseTimeSkew|UseRequestNonce)|OpenSSLConfCmd|Options|PassPhraseDialog|Protocol|Proxy(?:CACertificateFile|CACertificatePath|CARevocation(?:Check|File|Path)|CheckPeer(?:CN|Expire|Name)|CipherSuite|Engine|MachineCertificate(?:ChainFile|File|Path)|Protocol|Verify|VerifyDepth)|RandomSeed|RenegBufferSize|Require|RequireSSL|SRPUnknownUserSeed|SRPVerifierFile|Session(?:Cache|CacheTimeout|TicketKeyFile|Tickets)|Stapling(?:Cache|ErrorCacheTimeout|FakeTryLater|ForceURL|ResponderTimeout|ResponseMaxAge|ResponseTimeSkew|ReturnResponderErrors|StandardCacheTimeout)|StrictSNIVHostCheck|UseStapling|UserName|VerifyClient|VerifyDepth)|Satisfy|ScoreBoardFile|Script(?:Alias|AliasMatch|InterpreterSource|Log|LogBuffer|LogLength|Sock)?|SecureListen|SeeRequestTail|SendBufferSize|Server(?:Admin|Alias|Limit|Name|Path|Root|Signature|Tokens)|Session(?:Cookie(?:Name|Name2|Remove)|Crypto(?:Cipher|Driver|Passphrase|PassphraseFile)|DBD(?:CookieName|CookieName2|CookieRemove|DeleteLabel|InsertLabel|PerUser|SelectLabel|UpdateLabel)|Env|Exclude|Header|Include|MaxAge)?|SetEnv|SetEnvIf|SetEnvIfExpr|SetEnvIfNoCase|SetHandler|SetInputFilter|SetOutputFilter|StartServers|StartThreads|Substitute|Suexec|SuexecUserGroup|ThreadLimit|ThreadStackSize|ThreadsPerChild|TimeOut|TraceEnable|TransferLog|TypesConfig|UnDefine|UndefMacro|UnsetEnv|Use|UseCanonicalName|UseCanonicalPhysicalPort|User|UserDir|VHostCGIMode|VHostCGIPrivs|VHostGroup|VHostPrivs|VHostSecure|VHostUser|Virtual(?:DocumentRoot|ScriptAlias)(?:IP)?|WatchdogInterval|XBitHack|xml2EncAlias|xml2EncDefault|xml2StartParse)\b/im,lookbehind:!0,alias:"property"},"directive-block":{pattern:/<\/?\b(?:Auth[nz]ProviderAlias|Directory|DirectoryMatch|Else|ElseIf|Files|FilesMatch|If|IfDefine|IfModule|IfVersion|Limit|LimitExcept|Location|LocationMatch|Macro|Proxy|Require(?:All|Any|None)|VirtualHost)\b.*>/i,inside:{"directive-block":{pattern:/^<\/?\w+/,inside:{punctuation:/^<\/?/},alias:"tag"},"directive-block-parameter":{pattern:/.*[^>]/,inside:{punctuation:/:/,string:{pattern:/("|').*\1/,inside:{variable:/[$%]\{?(?:\w\.?[-+:]?)+\}?/}}},alias:"attr-value"},punctuation:/>/},alias:"tag"},"directive-flags":{pattern:/\[(?:[\w=],?)+\]/,alias:"keyword"},string:{pattern:/("|').*\1/,inside:{variable:/[$%]\{?(?:\w\.?[-+:]?)+\}?/}},variable:/[$%]\{?(?:\w\.?[-+:]?)+\}?/,regex:/\^?.*\$|\^.*\$?/};
Prism.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:S|ING)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:TRUE|FALSE|NULL)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|IN|ILIKE|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/};
!function(e){var t=/\b(?:abstract|activate|and|any|array|as|asc|autonomous|begin|bigdecimal|blob|boolean|break|bulk|by|byte|case|cast|catch|char|class|collect|commit|const|continue|currency|date|datetime|decimal|default|delete|desc|do|double|else|end|enum|exception|exit|export|extends|final|finally|float|for|from|global|goto|group|having|hint|if|implements|import|in|inner|insert|instanceof|int|integer|interface|into|join|like|limit|list|long|loop|map|merge|new|not|null|nulls|number|object|of|on|or|outer|override|package|parallel|pragma|private|protected|public|retrieve|return|rollback|select|set|short|sObject|sort|static|string|super|switch|synchronized|system|testmethod|then|this|throw|time|transaction|transient|trigger|try|undelete|update|upsert|using|virtual|void|webservice|when|where|while|get(?=\s*[{};])|(?:after|before)(?=\s+[a-z])|(?:inherited|with|without)\s+sharing)\b/i,n="\\b(?:(?=[a-z_]\\w*\\s*[<\\[])|(?!<keyword>))[A-Z_]\\w*(?:\\s*\\.\\s*[A-Z_]\\w*)*\\b(?:\\s*(?:\\[\\s*\\]|<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>))*".replace(/<keyword>/g,function(){return t.source});function i(e){return RegExp(e.replace(/<CLASS-NAME>/g,function(){return n}),"i")}var a={keyword:t,punctuation:/[()\[\]{};,:.<>]/};e.languages.apex={comment:e.languages.clike.comment,string:e.languages.clike.string,sql:{pattern:/((?:[=,({:]|\breturn)\s*)\[[^\[\]]*\]/i,lookbehind:!0,greedy:!0,alias:"language-sql",inside:e.languages.sql},annotation:{pattern:/@\w+\b/,alias:"punctuation"},"class-name":[{pattern:i("(\\b(?:class|enum|extends|implements|instanceof|interface|new|trigger\\s+\\w+\\s+on)\\s+)<CLASS-NAME>"),lookbehind:!0,inside:a},{pattern:i("(\\(\\s*)<CLASS-NAME>(?=\\s*\\)\\s*[\\w(])"),lookbehind:!0,inside:a},{pattern:i("<CLASS-NAME>(?=\\s*\\w+\\s*[;=,(){:])"),inside:a}],trigger:{pattern:/(\btrigger\s+)\w+\b/i,lookbehind:!0,alias:"class-name"},keyword:t,function:/\b[a-z_]\w*(?=\s*\()/i,boolean:/\b(?:false|true)\b/i,number:/(?:\B\.\d+|\b\d+(?:\.\d+|L)?)\b/i,operator:/[!=](?:==?)?|\?\.?|&&|\|\||--|\+\+|[-+*/^&|]=?|:|<<?=?|>{1,3}=?/,punctuation:/[()\[\]{};,.]/}}(Prism);
Prism.languages.apl={comment:/(?:⍝|#[! ]).*$/m,string:{pattern:/'(?:[^'\r\n]|'')*'/,greedy:!0},number:/¯?(?:\d*\.?\b\d+(?:e[+¯]?\d+)?|¯|∞)(?:j¯?(?:(?:\d+(?:\.\d+)?|\.\d+)(?:e[+¯]?\d+)?|¯|∞))?/i,statement:/:[A-Z][a-z][A-Za-z]*\b/,"system-function":{pattern:/⎕[A-Z]+/i,alias:"function"},constant:/[⍬⌾#⎕⍞]/,function:/[-+×÷⌈⌊∣|⍳⍸?*⍟○!⌹<≤=>≥≠≡≢∊⍷∪∩~∨∧⍱⍲⍴,⍪⌽⊖⍉↑↓⊂⊃⊆⊇⌷⍋⍒⊤⊥⍕⍎⊣⊢⍁⍂≈⍯↗¤→]/,"monadic-operator":{pattern:/[\\\/⌿⍀¨⍨⌶&∥]/,alias:"operator"},"dyadic-operator":{pattern:/[.⍣⍠⍤∘⌸@⌺⍥]/,alias:"operator"},assignment:{pattern:/←/,alias:"keyword"},punctuation:/[\[;\]()◇⋄]/,dfn:{pattern:/[{}⍺⍵⍶⍹∇⍫:]/,alias:"builtin"}};
Prism.languages.applescript={comment:[/\(\*(?:\(\*(?:[^*]|\*(?!\)))*\*\)|(?!\(\*)[\s\S])*?\*\)/,/--.+/,/#.+/],string:/"(?:\\.|[^"\\\r\n])*"/,number:/(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e-?\d+)?\b/i,operator:[/[&=≠≤≥*+\-\/÷^]|[<>]=?/,/\b(?:(?:start|begin|end)s? with|(?:(?:does not|doesn't) contain|contains?)|(?:is|isn't|is not) (?:in|contained by)|(?:(?:is|isn't|is not) )?(?:greater|less) than(?: or equal)?(?: to)?|(?:(?:does not|doesn't) come|comes) (?:before|after)|(?:is|isn't|is not) equal(?: to)?|(?:(?:does not|doesn't) equal|equals|equal to|isn't|is not)|(?:a )?(?:ref(?: to)?|reference to)|(?:and|or|div|mod|as|not))\b/],keyword:/\b(?:about|above|after|against|apart from|around|aside from|at|back|before|beginning|behind|below|beneath|beside|between|but|by|considering|continue|copy|does|eighth|else|end|equal|error|every|exit|false|fifth|first|for|fourth|from|front|get|given|global|if|ignoring|in|instead of|into|is|it|its|last|local|me|middle|my|ninth|of|on|onto|out of|over|prop|property|put|repeat|return|returning|second|set|seventh|since|sixth|some|tell|tenth|that|the|then|third|through|thru|timeout|times|to|transaction|true|try|until|where|while|whose|with|without)\b/,class:{pattern:/\b(?:alias|application|boolean|class|constant|date|file|integer|list|number|POSIX file|real|record|reference|RGB color|script|text|centimetres|centimeters|feet|inches|kilometres|kilometers|metres|meters|miles|yards|square feet|square kilometres|square kilometers|square metres|square meters|square miles|square yards|cubic centimetres|cubic centimeters|cubic feet|cubic inches|cubic metres|cubic meters|cubic yards|gallons|litres|liters|quarts|grams|kilograms|ounces|pounds|degrees Celsius|degrees Fahrenheit|degrees Kelvin)\b/,alias:"builtin"},punctuation:/[{}():,¬«»《》]/};
Prism.languages.aql={comment:/\/\/.*|\/\*[\s\S]*?\*\//,property:{pattern:/([{,]\s*)(?:(?!\d)\w+|(["'´`])(?:(?!\2)[^\\\r\n]|\\.)*\2)(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(["'´`])(?:(?!\1)[^\\\r\n]|\\.)*\1/,greedy:!0},variable:/@@?\w+/,keyword:[{pattern:/(\bWITH\s+)COUNT(?=\s+INTO\b)/i,lookbehind:!0},/\b(?:AGGREGATE|ALL|AND|ANY|ASC|COLLECT|DESC|DISTINCT|FILTER|FOR|GRAPH|IN|INBOUND|INSERT|INTO|K_SHORTEST_PATHS|LET|LIKE|LIMIT|NONE|NOT|NULL|OR|OUTBOUND|REMOVE|REPLACE|RETURN|SHORTEST_PATH|SORT|UPDATE|UPSERT|WITH)\b/i,{pattern:/(^|[^\w.[])(?:KEEP|PRUNE|SEARCH|TO)\b/i,lookbehind:!0},{pattern:/(^|[^\w.[])(?:CURRENT|NEW|OLD)\b/,lookbehind:!0},{pattern:/\bOPTIONS(?=\s*{)/i}],function:/(?!\d)\w+(?=\s*\()/,boolean:/(?:true|false)/i,range:{pattern:/\.\./,alias:"operator"},number:/(?:\B\.\d+|\b(?:0|[1-9]\d*)(?:\.\d+)?)(?:e[+-]?\d+)?/i,operator:/\*{2,}|[=!]~|[!=<>]=?|&&|\|\||[-+*/%]/,punctuation:/::|[?.:,;()[\]{}]/};
Prism.languages.c=Prism.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:__attribute__|_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,function:/[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),Prism.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},Prism.languages.c.string],comment:Prism.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:Prism.languages.c}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete Prism.languages.c.boolean;
!function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char8_t|char16_t|char32_t|class|compl|concept|const|consteval|constexpr|constinit|const_cast|continue|co_await|co_return|co_yield|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int8_t|int16_t|int32_t|int64_t|uint8_t|uint16_t|uint32_t|uint64_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n="\\b(?!<keyword>)\\w+(?:\\s*\\.\\s*\\w+)*\\b".replace(/<keyword>/g,function(){return t.source});e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp("(\\b(?:class|concept|enum|struct|typename)\\s+)(?!<keyword>)\\w+".replace(/<keyword>/g,function(){return t.source})),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:true|false)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp('(\\b(?:module|import)\\s+)(?:"(?:\\\\(?:\r\n|[^])|[^"\\\\\r\n])*"|<[^<>\r\n]*>|'+"<mod-name>(?:\\s*:\\s*<mod-name>)?|:\\s*<mod-name>".replace(/<mod-name>/g,function(){return n})+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","operator",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(Prism);
Prism.languages.arduino=Prism.languages.extend("cpp",{constant:/\b(?:DIGITAL_MESSAGE|FIRMATA_STRING|ANALOG_MESSAGE|REPORT_DIGITAL|REPORT_ANALOG|INPUT_PULLUP|SET_PIN_MODE|INTERNAL2V56|SYSTEM_RESET|LED_BUILTIN|INTERNAL1V1|SYSEX_START|INTERNAL|EXTERNAL|DEFAULT|OUTPUT|INPUT|HIGH|LOW)\b/,keyword:/\b(?:setup|if|else|while|do|for|return|in|instanceof|default|function|loop|goto|switch|case|new|try|throw|catch|finally|null|break|continue|boolean|bool|void|byte|word|string|String|array|int|long|integer|double)\b/,builtin:/\b(?:KeyboardController|MouseController|SoftwareSerial|EthernetServer|EthernetClient|LiquidCrystal|LiquidCrystal_I2C|RobotControl|GSMVoiceCall|EthernetUDP|EsploraTFT|HttpClient|RobotMotor|WiFiClient|GSMScanner|FileSystem|Scheduler|GSMServer|YunClient|YunServer|IPAddress|GSM
gitextract_ex6btzgn/
├── .gitignore
├── README.md
└── src/
├── gen-pdf.js
├── html/
│ ├── exercises/
│ │ ├── 1/
│ │ │ └── 1.js
│ │ ├── 10/
│ │ │ └── 10.js
│ │ ├── 11/
│ │ │ └── 11.js
│ │ ├── 12/
│ │ │ └── 12.js
│ │ ├── 13/
│ │ │ └── 13.js
│ │ ├── 14/
│ │ │ └── 14.js
│ │ ├── 15/
│ │ │ └── 15.js
│ │ ├── 16/
│ │ │ └── 16.js
│ │ ├── 17/
│ │ │ └── 17.js
│ │ ├── 2/
│ │ │ └── 2.js
│ │ ├── 3/
│ │ │ └── 3.js
│ │ ├── 4/
│ │ │ └── 4.js
│ │ ├── 5/
│ │ │ └── 5.js
│ │ ├── 6/
│ │ │ └── 6.js
│ │ ├── 7/
│ │ │ └── 7.js
│ │ ├── 8/
│ │ │ └── 8.js
│ │ └── 9/
│ │ └── 9.js
│ ├── index.html
│ ├── style.css
│ └── vendor/
│ ├── fit-columns.js
│ ├── isotope.js
│ ├── prism.css
│ └── prism.js
└── package.json
SYMBOL INDEX (201 symbols across 19 files)
FILE: src/html/exercises/1/1.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 5) | const ATTRIBUTES = `{
constant UNIFORMS (line 9) | const UNIFORMS = `{}`;
constant VERTEX (line 11) | const VERTEX = `attribute float id;
constant FRAGMENT (line 27) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 33) | const HIDE_FRAGMENT = true;
constant TITLE (line 34) | const TITLE = "Human GPU #0001 – The intro";
constant TIPS (line 35) | const TIPS = `Hello human! I'm the graphics processing unit doing all th...
FILE: src/html/exercises/10/10.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 8) | const ATTRIBUTES = `{
constant UNIFORMS (line 12) | const UNIFORMS = `{
constant VERTEX (line 17) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 29) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 35) | const HIDE_FRAGMENT = true;
constant TITLE (line 36) | const TITLE = "Human GPU #0010 – Uniforms v2";
constant TIPS (line 37) | const TIPS = `W0w hum4n, that's already our gpu task n.10!
FILE: src/html/exercises/11/11.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 7) | const ATTRIBUTES = `{
constant UNIFORMS (line 11) | const UNIFORMS = `{
constant VERTEX (line 15) | const VERTEX = `attribute vec2 aPosition;
constant FRAGMENT (line 38) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 44) | const HIDE_FRAGMENT = true;
constant TITLE (line 45) | const TITLE = "Human GPU #0011 – GLSL";
constant TIPS (line 46) | const TIPS = `What's up bro?
FILE: src/html/exercises/12/12.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 7) | const ATTRIBUTES = `{
constant UNIFORMS (line 11) | const UNIFORMS = `{
constant VERTEX (line 15) | const VERTEX = `attribute vec3 aData;
constant FRAGMENT (line 23) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 29) | const HIDE_FRAGMENT = true;
constant TITLE (line 30) | const TITLE = "Human GPU #0012 – what about z and w?";
constant TIPS (line 31) | const TIPS = `0101010101011010101011010100001! 0101001011?
FILE: src/html/exercises/13/13.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 7) | const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 3 } }`;
constant UNIFORMS (line 9) | const UNIFORMS = `{
constant VERTEX (line 13) | const VERTEX = `attribute vec3 aPosition;
constant SHOW_PIXELS (line 19) | const SHOW_PIXELS = true;
constant FRAGMENT (line 20) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 26) | const HIDE_FRAGMENT = false;
constant TITLE (line 27) | const TITLE = "Human GPU #0013 – Fragment shader";
constant TIPS (line 28) | const TIPS = `hello! let's talk about the elephant in the room....Introd...
FILE: src/html/exercises/14/14.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 9) | const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 3 } }`;
constant UNIFORMS (line 11) | const UNIFORMS = `{ "uColor": [1.0, 0.0, 0.0] }`;
constant VERTEX (line 13) | const VERTEX = `attribute vec3 aPosition;
constant SHOW_PIXELS (line 19) | const SHOW_PIXELS = true;
constant FRAGMENT (line 20) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 27) | const HIDE_FRAGMENT = false;
constant TITLE (line 28) | const TITLE = "Human GPU #0014 – Filling pixels";
constant TIPS (line 29) | const TIPS = `Ok, so, you liked painting and filling squares, human?
FILE: src/html/exercises/15/15.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 9) | const ATTRIBUTES = `{ "aPosition": { "buffer": "data", "size": 2 } }`;
constant UNIFORMS (line 11) | const UNIFORMS = `{ "uColor": [1.0, 1.0, 0.0] }`;
constant VERTEX (line 13) | const VERTEX = `attribute vec2 aPosition;
constant SHOW_PIXELS (line 19) | const SHOW_PIXELS = true;
constant FRAGMENT (line 20) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 27) | const HIDE_FRAGMENT = false;
constant TITLE (line 28) | const TITLE = "Human GPU #0015 – Half pixel?";
constant TIPS (line 29) | const TIPS = `Hey human...you probably wondered, what happens when a tri...
FILE: src/html/exercises/16/16.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 6) | const ATTRIBUTES = `{
constant UNIFORMS (line 11) | const UNIFORMS = `{ }`;
constant VERTEX (line 13) | const VERTEX = `attribute vec2 aPosition;
constant SHOW_PIXELS (line 22) | const SHOW_PIXELS = true;
constant FRAGMENT (line 23) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 31) | const HIDE_FRAGMENT = false;
constant TITLE (line 32) | const TITLE = "Human GPU #0016 – Varyings";
constant TIPS (line 33) | const TIPS = `How do we draw something more interesting then just a plai...
FILE: src/html/exercises/17/17.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 20) | const ATTRIBUTES = `{
constant UNIFORMS (line 25) | const UNIFORMS = `{
constant VERTEX (line 31) | const VERTEX = `attribute vec2 position;
constant SHOW_PIXELS (line 40) | const SHOW_PIXELS = true;
constant FRAGMENT (line 41) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 61) | const HIDE_FRAGMENT = false;
constant TITLE (line 62) | const TITLE = "Human GPU #0017 - UV?";
constant TIPS (line 63) | const TIPS = `Varyings are cool, don't you agree?
FILE: src/html/exercises/2/2.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 5) | const ATTRIBUTES = `{
constant UNIFORMS (line 9) | const UNIFORMS = `{}`;
constant VERTEX (line 11) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 17) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 23) | const HIDE_FRAGMENT = true;
constant TITLE (line 24) | const TITLE = "Human GPU #0002 – Position attribute";
constant TIPS (line 25) | const TIPS = `Wow man...you took AAAAGEEES to draw that first triangle.....
FILE: src/html/exercises/3/3.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 5) | const ATTRIBUTES = `{
constant UNIFORMS (line 9) | const UNIFORMS = `{}`;
constant VERTEX (line 11) | const VERTEX = `attribute vec2 pos;
constant FRAGMENT (line 21) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 27) | const HIDE_FRAGMENT = true;
constant TITLE (line 28) | const TITLE = "Human GPU #0003 – Only triangle?";
constant TIPS (line 29) | const TIPS = `Hello again human. I guess you're wondering...how do we dr...
FILE: src/html/exercises/4/4.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 9) | const ATTRIBUTES = `{
constant UNIFORMS (line 13) | const UNIFORMS = `{}`;
constant VERTEX (line 15) | const VERTEX = `attribute vec4 d;
constant FRAGMENT (line 29) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 35) | const HIDE_FRAGMENT = true;
constant TITLE (line 36) | const TITLE = "Human GPU #0004 – Vecfour?";
constant TIPS (line 37) | const TIPS = `Heeehe human goodmorning. How are you?
FILE: src/html/exercises/5/5.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 7) | const ATTRIBUTES = `{
constant UNIFORMS (line 13) | const UNIFORMS = `{}`;
constant VERTEX (line 15) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 27) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 33) | const HIDE_FRAGMENT = true;
constant TITLE (line 34) | const TITLE = "Human GPU #0005 – Multiple attributes";
constant TIPS (line 35) | const TIPS = `Heya human, of course you can have multiple attributes and...
FILE: src/html/exercises/6/6.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 9) | const ATTRIBUTES = `{
constant UNIFORMS (line 15) | const UNIFORMS = `{}`;
constant VERTEX (line 17) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 29) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 35) | const HIDE_FRAGMENT = true;
constant TITLE (line 36) | const TITLE = "Human GPU #0006 – Buffer + attribute pr0 l337";
constant TIPS (line 37) | const TIPS = `Multiple attribute can read from the same buffer, like in ...
FILE: src/html/exercises/7/7.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 10) | const ATTRIBUTES = `{
constant UNIFORMS (line 14) | const UNIFORMS = `{}`;
constant VERTEX (line 16) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 23) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 29) | const HIDE_FRAGMENT = true;
constant TITLE (line 30) | const TITLE = "Human GPU #0007 – Do you love GPU?";
constant TIPS (line 31) | const TIPS = `Hey human, long time no see you...can you draw for me 4 tr...
FILE: src/html/exercises/8/8.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 18) | const ATTRIBUTES = `{
constant UNIFORMS (line 22) | const UNIFORMS = `{}`;
constant VERTEX (line 24) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 30) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 36) | const HIDE_FRAGMENT = true;
constant TITLE (line 37) | const TITLE = "Human GPU #0008 – Less memory is good";
constant TIPS (line 38) | const TIPS = `Gooodmorning human, how things are going so far?
FILE: src/html/exercises/9/9.js
constant BUFFERS (line 1) | const BUFFERS = `{
constant ATTRIBUTES (line 12) | const ATTRIBUTES = `{
constant UNIFORMS (line 16) | const UNIFORMS = `{
constant VERTEX (line 20) | const VERTEX = `attribute vec2 position;
constant FRAGMENT (line 31) | const FRAGMENT = `precision highp float;
constant HIDE_FRAGMENT (line 37) | const HIDE_FRAGMENT = true;
constant TITLE (line 38) | const TITLE = "Human GPU #0009 – Uniforms";
constant TIPS (line 39) | const TIPS = `Huuuuumaaan, today we are introducing uniforms!
FILE: src/html/vendor/isotope.js
function jQueryBridget (line 53) | function jQueryBridget(namespace, PluginClass, $) {
function updateJQuery (line 137) | function updateJQuery($) {
function EvEmitter (line 173) | function EvEmitter() {}
function getStyleSize (line 286) | function getStyleSize(value) {
function noop (line 293) | function noop() {}
function getZeroSize (line 321) | function getZeroSize() {
function getStyle (line 343) | function getStyle(elem) {
function setup (line 367) | function setup() {
function getSize (line 399) | function getSize(elem) {
function isEmptyObj (line 789) | function isEmptyObj(obj) {
function Item (line 824) | function Item(element, layout) {
function toDashedAll (line 1076) | function toDashedAll(str) {
function Outlayer (line 1377) | function Outlayer(element, options) {
function onComplete (line 1761) | function onComplete() {
function tick (line 1772) | function tick() {
function subclass (line 2213) | function subclass(Parent) {
function getMilliseconds (line 2234) | function getMilliseconds(time) {
function Item (line 2281) | function Item() {
function LayoutMode (line 2351) | function LayoutMode(isotope) {
function Mode (line 2453) | function Mode() {
function arrangeParallelCallback (line 3110) | function arrangeParallelCallback() {
function mungeSorter (line 3242) | function mungeSorter(sorter) {
function getValueGetter (line 3270) | function getValueGetter(attr, query) {
function getItemSorter (line 3330) | function getItemSorter(sortBys, sortAsc) {
FILE: src/html/vendor/prism.js
function o (line 3) | function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.eleme...
function W (line 3) | function W(e,n,r,t){this.type=e,this.content=n,this.alias=r,this.length=...
function z (line 3) | function z(e,n,r,t){e.lastIndex=n;var a=e.exec(r);if(a&&t&&a[1]){var i=a...
function i (line 3) | function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e...
function I (line 3) | function I(e,n,r){var t=n.next,a={value:r,prev:n,next:t};return n.next=a...
function q (line 3) | function q(e,n,r){for(var t=n.next,a=0;a<r&&t!==e.tail;a++)t=t.next;(n.n...
function r (line 3) | function r(){M.manual||M.highlightAll()}
function i (line 17) | function i(e){return RegExp(e.replace(/<CLASS-NAME>/g,function(){return ...
function i (line 25) | function i(t){for(var n={},i=0,e=(t=t.split(" ")).length;i<e;i++)n[t[i]]...
function a (line 26) | function a(e,s){return e.replace(/<<(\d+)>>/g,function(e,n){return"(?:"+...
function t (line 26) | function t(e,n,s){return RegExp(a(e,n),s||"")}
function e (line 26) | function e(e,n){for(var s=0;s<n;s++)e=e.replace(/<<self>>/g,function(){r...
function l (line 26) | function l(e){return"\\b(?:"+e.trim().replace(/ /g,"|")+")\\b"}
function U (line 26) | function U(e,n){return{interpolation:{pattern:t("((?:^|[^{])(?:\\{\\{)*)...
function v (line 60) | function v(e,n){return"___"+e.toUpperCase()+n+"___"}
function a (line 63) | function a(e,n){return e=e.replace(/<OPT>/g,function(){return t}).replac...
function r (line 64) | function r(e,a){return RegExp(e.replace(/<ID>/g,function(){return n}),a)}
function e (line 118) | function e(a,e){return RegExp(a.replace(/<ID>/g,function(){return"(?!\\s...
function t (line 123) | function t(e,t){if(u.languages[e])return{pattern:RegExp("((?:"+t+")\\s*)...
function o (line 123) | function o(e,t,n){var r={code:e,grammar:t,language:n};return u.hooks.run...
function d (line 123) | function d(e){var t={};t["interpolation-punctuation"]=i;var n=u.tokenize...
function c (line 123) | function c(a,e,i){var t=u.tokenize(a,{interpolation:{pattern:RegExp(r),l...
function f (line 123) | function f(e){return"string"==typeof e?e:Array.isArray(e)?e.map(f).join(...
function o (line 127) | function o(n,o){return RegExp(n.replace(/<nonId>/g,"\\s\\x00-\\x1f\\x22-...
function n (line 134) | function n(e){return RegExp("(\\()"+e+"(?=[\\s\\)])")}
function a (line 134) | function a(e){return RegExp("([\\s([])"+e+"(?=[\\s)])")}
function n (line 139) | function n(n){return n=n.replace(/<inner>/g,function(){return"(?:\\\\.|[...
function t (line 149) | function t(e){return"string"==typeof e?e:Array.isArray(e)?e.map(t).join(...
function n (line 189) | function n(t,n){return t=t.replace(/<S>/g,function(){return"(?:\\s|//.*(...
function n (line 197) | function n(t,n){var e={"section-header":{pattern:/^ ?\*{3}.+?\*{3}/,alia...
function i (line 220) | function i(e,t,a){return{pattern:RegExp("<#"+e+"[\\s\\S]*?#>"),alias:"bl...
function o (line 224) | function o(e,n){n=(n||"").replace(/m/g,"")+"m";var r="([:\\-,[{]\\s*(?:\...
function e (line 228) | function e(n,e){return RegExp(n.replace(/<MOD>/g,function(){return"(?:\\...
function n (line 229) | function n(e){return e.replace(/__/g,function(){return"(?:[\\w-]+|'[^'\n...
function a (line 245) | function a(a,e){n.languages[a]&&n.languages.insertBefore(a,"comment",{"d...
function e (line 249) | function e(e){return function(){return e}}
Condensed preview — 27 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (671K chars).
[
{
"path": ".gitignore",
"chars": 38,
"preview": "node_modules\npackage-lock.json\n.vscode"
},
{
"path": "README.md",
"chars": 2508,
"preview": "# 🧠 Human GPU Exercises.\n\n\n\nIn th"
},
{
"path": "src/gen-pdf.js",
"chars": 1149,
"preview": "const puppeteer = require(\"puppeteer\");\n\nconst delay = (t) => {\n return new Promise((resolve) => {\n setTimeout(resol"
},
{
"path": "src/html/exercises/1/1.js",
"chars": 3052,
"preview": "const BUFFERS = `{\n \"data1\": [0.0, 1.0, 2.0]\n}`;\n\nconst ATTRIBUTES = `{\n \"id\": { \"buffer\": \"data1\", \"size\": 1 }\n}`;\n\nc"
},
{
"path": "src/html/exercises/10/10.js",
"chars": 1313,
"preview": "const BUFFERS = `{\n \"data\": [\n -0.5, -0.5, -0.5, 0.5, 0.5, -0.5,\n -0.5, 0.5, 0.5, 0.5, 0.5, -0.5\n ]\n}`;\n\nconst A"
},
{
"path": "src/html/exercises/11/11.js",
"chars": 1357,
"preview": "const BUFFERS = `{\n \"data\": [\n -0.1, -0.1, -0.2, 0.2, 0.1, 0.2\n ]\n}`;\n\nconst ATTRIBUTES = `{\n \"aPosition\": { \"buff"
},
{
"path": "src/html/exercises/12/12.js",
"chars": 2361,
"preview": "const BUFFERS = `{\n \"data\": [\n -0.5, -0.5, 0.5, 0.6, 0.6, 2, -0.5, 0.5, 1.0\n ]\n}`;\n\nconst ATTRIBUTES = `{\n \"aData\""
},
{
"path": "src/html/exercises/13/13.js",
"chars": 1991,
"preview": "const BUFFERS = `{\n \"data\": [ -0.5, 0.5, 0.0, 0.5, 0.5, 0.0,\n 0.5, -0.5, 0.0, -0.5, -0.5, 0.0 ],\n \"_index\":"
},
{
"path": "src/html/exercises/14/14.js",
"chars": 1636,
"preview": "const BUFFERS = `{\n \"data\": [\n -0.5, -0.5, 2.0, -0.5, 0.5, 2.0,\n 0.5, 0.5, 1.0, -0.5, -0.5, 2.0,\n 0.5, -0.5, 1"
},
{
"path": "src/html/exercises/15/15.js",
"chars": 1419,
"preview": "const BUFFERS = `{\n \"data\": [\n -0.75, -0.8,\n 0.5, 0.5,\n 0.5, -0.5\n ]\n}`;\n\nconst ATTRIBUTES = `{ \"aPosition\": "
},
{
"path": "src/html/exercises/16/16.js",
"chars": 2040,
"preview": "const BUFFERS = `{\n \"position\": [ 0.0, -0.8, -0.8, 0.8, 0.8, 0.8 ],\n \"darkness\": [ 1.0, 0.0, 0.0 ]\n}`;\n\nconst ATTRIBUT"
},
{
"path": "src/html/exercises/17/17.js",
"chars": 1429,
"preview": "const BUFFERS = `{\n \"position\": [\n -0.8, 0.2,\n 0.8, 0.2,\n 0.8, -0.2,\n -0.8, -0.2\n ],\n \"uv\": [\n 0.0, 0."
},
{
"path": "src/html/exercises/2/2.js",
"chars": 1598,
"preview": "const BUFFERS = `{\n \"data\": [-0.5, -0.5, 0.0, 0.5, 0.5, -0.5]\n}`;\n\nconst ATTRIBUTES = `{\n \"position\": { \"buffer\": \"dat"
},
{
"path": "src/html/exercises/3/3.js",
"chars": 1718,
"preview": "const BUFFERS = `{\n \"p\": [-0.6, -0.3, -0.6, 0.3, 0.6, -0.3, -0.6, 0.3, 0.6, 0.3, 0.6, -0.3]\n}`;\n\nconst ATTRIBUTES = `{\n"
},
{
"path": "src/html/exercises/4/4.js",
"chars": 1034,
"preview": "const BUFFERS = `{\n \"data\": [\n 1.0, -0.5, 1.0, 0.1,\n 1.0, -0.3, 1.0, 0.0,\n -0.5, 0.0, 4.0, 0.0\n ]\n}`;\n\nconst "
},
{
"path": "src/html/exercises/5/5.js",
"chars": 1161,
"preview": "const BUFFERS = `{\n \"buffer1\": [-0.4, -0.4, 0.4, 0.4, 0.5, -0.3],\n \"buffer2\": [-0.4, 0.2, 0.0],\n \"buffer3\": [1.0, 1.5"
},
{
"path": "src/html/exercises/6/6.js",
"chars": 1891,
"preview": "const BUFFERS = `{\n \"buffer1\": [\n -0.4, -0.2, 0.2, 0.5, 0.3, -0.9,\n -0.2, 0.4, 0.0,\n 1.0, 1.0, 0.5\n ]\n}`;\n\nco"
},
{
"path": "src/html/exercises/7/7.js",
"chars": 1007,
"preview": "const BUFFERS = `{\n \"buffer1\": [\n -6, 3, 0, -8, -4, 5,\n 0, -8, -4, 5, -1, 4,\n -1, 4, 0, -8, 2, 5,\n 0, -8, 2"
},
{
"path": "src/html/exercises/8/8.js",
"chars": 1806,
"preview": "const BUFFERS = `{\n \"buffer1\": [\n -0.1, -0.3,\n -0.6, 0.3,\n -0.4, 0.5,\n -0.1, 0.1,\n 0.7, 0.8,\n 0.9, 0."
},
{
"path": "src/html/exercises/9/9.js",
"chars": 1216,
"preview": "const BUFFERS = `{\n \"data\": [\n -4, 4,\n -7, -3,\n -2, 3,\n -2, 3,\n -1, -2,\n 0, 3\n ]\n}`;\n\nconst ATTRIBUT"
},
{
"path": "src/html/index.html",
"chars": 8771,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "src/html/style.css",
"chars": 3930,
"preview": "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap\");\n\n@page {\n size: A4 landscape;"
},
{
"path": "src/html/vendor/fit-columns.js",
"chars": 1578,
"preview": "/*!\n * fitColumns layout mode for Isotope\n * v1.1.4\n * https://isotope.metafizzy.co/layout-modes/fitcolumns.html\n */\n\n/*"
},
{
"path": "src/html/vendor/isotope.js",
"chars": 94755,
"preview": "/*!\n * Isotope PACKAGED v3.0.6\n *\n * Licensed GPLv3 for open source use\n * or Isotope Commercial License for commercial "
},
{
"path": "src/html/vendor/prism.css",
"chars": 2526,
"preview": "/* PrismJS 1.23.0\nhttps://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+c+glsl+json+json5"
},
{
"path": "src/html/vendor/prism.js",
"chars": 492343,
"preview": "/* PrismJS 1.23.0\nhttps://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actions"
},
{
"path": "src/package.json",
"chars": 597,
"preview": "{\n \"name\": \"human-gpu\",\n \"version\": \"1.0.0\",\n \"description\": \"an hands on crash course on GPU.\",\n \"main\": \"index.js\""
}
]
About this extraction
This page contains the full source code of the luruke/human-gpu GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 27 files (621.3 KB), approximately 224.9k tokens, and a symbol index with 201 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.