chore: add assets for daemon and svgs
This commit is contained in:
Jesús Pérez
parent
f8c6fa1720
commit
a4edc9e95a
GPG key ID:
9F243E355E0BC939
13 changed files with 1962 additions and 0 deletions
14
assets/css/package.json
Normal file
14
assets/css/package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@10.7.0",
|
||||
"scripts": {
|
||||
"build": "unocss '../../crates/ontoref-daemon/templates/**/*.html' -o ../../crates/ontoref-daemon/public/css/ontoref.css --minify",
|
||||
"watch": "unocss '../../crates/ontoref-daemon/templates/**/*.html' -o ../../crates/ontoref-daemon/public/css/ontoref.css --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@unocss/cli": "^66.3.2",
|
||||
"unocss": "^66.3.2",
|
||||
"unocss-preset-daisy": "^7.0.0"
|
||||
}
|
||||
}
|
||||
11
assets/css/tailwind.config.js
Normal file
11
assets/css/tailwind.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'../../crates/ontoref-daemon/templates/**/*.html',
|
||||
],
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: ['dark', 'light'],
|
||||
logs: false,
|
||||
},
|
||||
};
|
||||
58
assets/css/uno.config.js
Normal file
58
assets/css/uno.config.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { defineConfig, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss'
|
||||
import { presetDaisy } from 'unocss-preset-daisy'
|
||||
import { readFileSync } from 'fs'
|
||||
import { createRequire } from 'module'
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
const daisyuiThemes = readFileSync(require.resolve('daisyui/dist/themes.css'), 'utf-8')
|
||||
|
||||
const basePreflight = `
|
||||
*,::before,::after{box-sizing:border-box}
|
||||
html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
|
||||
body{margin:0;padding:0;line-height:inherit}
|
||||
a{color:inherit;text-decoration:inherit}
|
||||
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
|
||||
img,video{max-width:100%;height:auto}
|
||||
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
|
||||
ol,ul{list-style:none;margin:0;padding:0}
|
||||
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
|
||||
button,select{text-transform:none}
|
||||
`
|
||||
|
||||
// DaisyUI v3 sets --btn-text-case:uppercase per [data-theme=*] in themes.css and
|
||||
// drives text-transform via that variable in component styles. Both come after
|
||||
// preflights, so !important is the only reliable escape.
|
||||
// svg sizing is handled in base.html via higher-specificity (.btn svg.w-N) rules.
|
||||
const daisyV3Overrides = `
|
||||
.btn{text-transform:none!important;letter-spacing:normal!important}
|
||||
`
|
||||
|
||||
export default defineConfig({
|
||||
preflights: [
|
||||
{ getCSS: () => basePreflight },
|
||||
{ getCSS: () => daisyuiThemes },
|
||||
{ getCSS: () => daisyV3Overrides },
|
||||
],
|
||||
content: {
|
||||
filesystem: [
|
||||
'../../crates/ontoref-daemon/templates/**/*.html',
|
||||
],
|
||||
},
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetDaisy({ themes: ['dark', 'light'] }),
|
||||
],
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
transformerVariantGroup(),
|
||||
],
|
||||
safelist: [
|
||||
// DaisyUI component classes assembled dynamically in JS (authBadge, statusBadge)
|
||||
'badge', 'badge-xs', 'badge-ghost', 'badge-info', 'badge-error',
|
||||
'badge-success', 'badge-warning', 'badge-neutral', 'badge-lg', 'badge-outline',
|
||||
'loading', 'loading-spinner', 'loading-sm',
|
||||
// Utility classes assembled dynamically in JS
|
||||
'font-mono', 'hidden', 'line-through',
|
||||
'text-orange-400', 'text-cyan-400', 'text-purple-400', 'text-yellow-400',
|
||||
],
|
||||
})
|
||||
190
assets/ontoref-logo.svg
Normal file
190
assets/ontoref-logo.svg
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
|
||||
<stop offset="0%" stop-color="#E6ECF2"/>
|
||||
<stop offset="50%" stop-color="#BCC8D4"/>
|
||||
<stop offset="100%" stop-color="#8090A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
|
||||
<stop offset="0%" stop-color="#B87000"/>
|
||||
<stop offset="50%" stop-color="#E0B040"/>
|
||||
<stop offset="100%" stop-color="#F8D860"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F5C44A"/>
|
||||
<stop offset="100%" stop-color="#DC9018"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A8B4C8"/>
|
||||
<stop offset="100%" stop-color="#5A6A7C"/>
|
||||
</linearGradient>
|
||||
|
||||
<clipPath id="sC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
|
||||
</clipPath>
|
||||
<clipPath id="aC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
|
||||
</clipPath>
|
||||
|
||||
<filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feFlood flood-color="#E8A838" flood-opacity=".1"/>
|
||||
<feComposite in2="b" operator="in" result="g"/>
|
||||
<feComposite in="SourceGraphic" in2="g" operator="over"/>
|
||||
</filter>
|
||||
<filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
|
||||
<filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
<filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
|
||||
@keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
|
||||
@keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
|
||||
@keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
|
||||
@keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
|
||||
@keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
|
||||
@keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
|
||||
@keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
|
||||
@keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
|
||||
@keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
||||
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||||
@keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
|
||||
@keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
|
||||
@keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
|
||||
@keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
|
||||
.bp3{animation:bp3 4.5s ease-in-out infinite}
|
||||
.nf3{animation:nf3 5s ease-in-out infinite}
|
||||
.np3{animation:np3 3.5s ease-in-out infinite}
|
||||
.de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
|
||||
.ap3{animation:ap3 3s ease-in-out infinite}
|
||||
.sAm{animation:seedAmber 4s ease-in-out infinite}
|
||||
.sSi{animation:seedSilver 4s ease-in-out infinite}
|
||||
.fl3{animation:fl3 7s ease-in-out infinite}
|
||||
.fi3{animation:fi3 1s ease-out .5s both}
|
||||
.cB3{animation:cB3 5s ease-in-out infinite}
|
||||
.rP3{animation:rP3 7s ease-in-out infinite}
|
||||
.tP{animation:tP 5.5s ease-in-out infinite}
|
||||
.cD{animation:cD 4s ease-in-out infinite}
|
||||
</style>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(-30, -22) scale(0.50)">
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
|
||||
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||||
<path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
|
||||
fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
|
||||
|
||||
<!-- Trigram marks -->
|
||||
<g class="tP" style="--to:.1">
|
||||
<line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.08;animation-delay:2.75s">
|
||||
<line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:.7s">
|
||||
<line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:2s">
|
||||
<line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:1.1s">
|
||||
<line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||||
<line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||||
<line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:5s">
|
||||
<line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner dots -->
|
||||
<circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||||
<circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||||
<circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||||
<circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||||
<circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||||
<circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||||
<circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||||
<circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||||
|
||||
<!-- MAIN SYMBOL -->
|
||||
<g class="fl3">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
|
||||
fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
|
||||
|
||||
<!-- SILVER REGION -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
|
||||
<rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
|
||||
<rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
|
||||
<rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
|
||||
<rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
|
||||
<rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
|
||||
<rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
|
||||
<rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
|
||||
<circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
|
||||
<g filter="url(#nGl3)">
|
||||
<line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
|
||||
<line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
|
||||
<line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
|
||||
<line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
|
||||
<line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
|
||||
<polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
|
||||
<polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
|
||||
<polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
|
||||
<polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:0s">
|
||||
<circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.3s">
|
||||
<circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.5s">
|
||||
<circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.8s">
|
||||
<circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:1.1s">
|
||||
<circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
|
||||
</g>
|
||||
<rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE -->
|
||||
<path class="cB3" d="M300,75 C405,195 195,345 300,465"
|
||||
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TEXT GROUP ═══ -->
|
||||
<g id="text-group" class="fi3">
|
||||
<text x="400" y="131" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
|
||||
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
190
assets/ontoref.svg
Normal file
190
assets/ontoref.svg
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
|
||||
<stop offset="0%" stop-color="#E6ECF2"/>
|
||||
<stop offset="50%" stop-color="#BCC8D4"/>
|
||||
<stop offset="100%" stop-color="#8090A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
|
||||
<stop offset="0%" stop-color="#B87000"/>
|
||||
<stop offset="50%" stop-color="#E0B040"/>
|
||||
<stop offset="100%" stop-color="#F8D860"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F5C44A"/>
|
||||
<stop offset="100%" stop-color="#DC9018"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A8B4C8"/>
|
||||
<stop offset="100%" stop-color="#5A6A7C"/>
|
||||
</linearGradient>
|
||||
|
||||
<clipPath id="sC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
|
||||
</clipPath>
|
||||
<clipPath id="aC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
|
||||
</clipPath>
|
||||
|
||||
<filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feFlood flood-color="#E8A838" flood-opacity=".1"/>
|
||||
<feComposite in2="b" operator="in" result="g"/>
|
||||
<feComposite in="SourceGraphic" in2="g" operator="over"/>
|
||||
</filter>
|
||||
<filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
|
||||
<filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
<filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
|
||||
@keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
|
||||
@keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
|
||||
@keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
|
||||
@keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
|
||||
@keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
|
||||
@keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
|
||||
@keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
|
||||
@keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
|
||||
@keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
||||
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||||
@keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
|
||||
@keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
|
||||
@keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
|
||||
@keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
|
||||
.bp3{animation:bp3 4.5s ease-in-out infinite}
|
||||
.nf3{animation:nf3 5s ease-in-out infinite}
|
||||
.np3{animation:np3 3.5s ease-in-out infinite}
|
||||
.de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
|
||||
.ap3{animation:ap3 3s ease-in-out infinite}
|
||||
.sAm{animation:seedAmber 4s ease-in-out infinite}
|
||||
.sSi{animation:seedSilver 4s ease-in-out infinite}
|
||||
.fl3{animation:fl3 7s ease-in-out infinite}
|
||||
.fi3{animation:fi3 1s ease-out .5s both}
|
||||
.cB3{animation:cB3 5s ease-in-out infinite}
|
||||
.rP3{animation:rP3 7s ease-in-out infinite}
|
||||
.tP{animation:tP 5.5s ease-in-out infinite}
|
||||
.cD{animation:cD 4s ease-in-out infinite}
|
||||
</style>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(-30, -22) scale(0.50)">
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
|
||||
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||||
<path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
|
||||
fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
|
||||
|
||||
<!-- Trigram marks -->
|
||||
<g class="tP" style="--to:.1">
|
||||
<line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.08;animation-delay:2.75s">
|
||||
<line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:.7s">
|
||||
<line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:2s">
|
||||
<line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:1.1s">
|
||||
<line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||||
<line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||||
<line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:5s">
|
||||
<line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner dots -->
|
||||
<circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||||
<circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||||
<circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||||
<circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||||
<circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||||
<circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||||
<circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||||
<circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||||
|
||||
<!-- MAIN SYMBOL -->
|
||||
<g class="fl3">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
|
||||
fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
|
||||
|
||||
<!-- SILVER REGION -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
|
||||
<rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
|
||||
<rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
|
||||
<rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
|
||||
<rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
|
||||
<rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
|
||||
<rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
|
||||
<rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
|
||||
<circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
|
||||
<g filter="url(#nGl3)">
|
||||
<line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
|
||||
<line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
|
||||
<line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
|
||||
<line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
|
||||
<line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
|
||||
<polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
|
||||
<polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
|
||||
<polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
|
||||
<polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:0s">
|
||||
<circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.3s">
|
||||
<circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.5s">
|
||||
<circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.8s">
|
||||
<circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:1.1s">
|
||||
<circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
|
||||
</g>
|
||||
<rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE -->
|
||||
<path class="cB3" d="M300,75 C405,195 195,345 300,465"
|
||||
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TEXT GROUP ═══ -->
|
||||
<g id="text-group" class="fi3">
|
||||
<text x="400" y="131" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
|
||||
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
16
assets/ontoref_text.svg
Normal file
16
assets/ontoref_text.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<svg viewBox="0 0 400 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
|
||||
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||||
.fi3{animation:fi3 1s ease-out .5s both}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Wordmark -->
|
||||
<g class="fi3">
|
||||
<text x="200" y="76" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="92" font-weight="600" letter-spacing=".03em">
|
||||
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 657 B |
190
assets/ontoref_v.svg
Normal file
190
assets/ontoref_v.svg
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<svg viewBox="0 0 380 340" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
|
||||
<stop offset="0%" stop-color="#E6ECF2"/>
|
||||
<stop offset="50%" stop-color="#BCC8D4"/>
|
||||
<stop offset="100%" stop-color="#8090A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
|
||||
<stop offset="0%" stop-color="#B87000"/>
|
||||
<stop offset="50%" stop-color="#E0B040"/>
|
||||
<stop offset="100%" stop-color="#F8D860"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F5C44A"/>
|
||||
<stop offset="100%" stop-color="#DC9018"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A8B4C8"/>
|
||||
<stop offset="100%" stop-color="#5A6A7C"/>
|
||||
</linearGradient>
|
||||
|
||||
<clipPath id="sC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
|
||||
</clipPath>
|
||||
<clipPath id="aC3">
|
||||
<path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
|
||||
</clipPath>
|
||||
|
||||
<filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feFlood flood-color="#E8A838" flood-opacity=".1"/>
|
||||
<feComposite in2="b" operator="in" result="g"/>
|
||||
<feComposite in="SourceGraphic" in2="g" operator="over"/>
|
||||
</filter>
|
||||
<filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
|
||||
<filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
<filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
|
||||
@keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
|
||||
@keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
|
||||
@keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
|
||||
@keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
|
||||
@keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
|
||||
@keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
|
||||
@keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
|
||||
@keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
|
||||
@keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
|
||||
@keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
|
||||
@keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
|
||||
@keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
|
||||
@keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
|
||||
@keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
|
||||
.bp3{animation:bp3 4.5s ease-in-out infinite}
|
||||
.nf3{animation:nf3 5s ease-in-out infinite}
|
||||
.np3{animation:np3 3.5s ease-in-out infinite}
|
||||
.de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
|
||||
.ap3{animation:ap3 3s ease-in-out infinite}
|
||||
.sAm{animation:seedAmber 4s ease-in-out infinite}
|
||||
.sSi{animation:seedSilver 4s ease-in-out infinite}
|
||||
.fl3{animation:fl3 7s ease-in-out infinite}
|
||||
.fi3{animation:fi3 1s ease-out .5s both}
|
||||
.cB3{animation:cB3 5s ease-in-out infinite}
|
||||
.rP3{animation:rP3 7s ease-in-out infinite}
|
||||
.tP{animation:tP 5.5s ease-in-out infinite}
|
||||
.cD{animation:cD 4s ease-in-out infinite}
|
||||
</style>
|
||||
|
||||
<!-- ═══ IMAGE GROUP ═══ -->
|
||||
<g id="image-group" transform="translate(40, -20) scale(0.50)">
|
||||
<!-- ═══ PAKUA FRAME ═══ -->
|
||||
<path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
|
||||
fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
|
||||
<path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
|
||||
fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
|
||||
|
||||
<!-- Trigram marks -->
|
||||
<g class="tP" style="--to:.1">
|
||||
<line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.08;animation-delay:2.75s">
|
||||
<line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
|
||||
<line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:.7s">
|
||||
<line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.07;animation-delay:2s">
|
||||
<line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:1.1s">
|
||||
<line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:3.8s">
|
||||
<line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:4.4s">
|
||||
<line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g class="tP" style="--to:.06;animation-delay:5s">
|
||||
<line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner dots -->
|
||||
<circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
|
||||
<circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
|
||||
<circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
|
||||
<circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
|
||||
<circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
|
||||
<circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
|
||||
<circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
|
||||
<circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
|
||||
|
||||
<!-- MAIN SYMBOL -->
|
||||
<g class="fl3">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
|
||||
fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
|
||||
|
||||
<!-- SILVER REGION -->
|
||||
<g clip-path="url(#sC3)">
|
||||
<path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
|
||||
<rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
|
||||
<rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
|
||||
<rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
|
||||
<rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
|
||||
<rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
|
||||
<rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
|
||||
<rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
|
||||
<circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- AMBER REGION -->
|
||||
<g clip-path="url(#aC3)">
|
||||
<path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
|
||||
<g filter="url(#nGl3)">
|
||||
<line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
|
||||
<line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
|
||||
<line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
|
||||
<line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
|
||||
<line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
|
||||
<polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
|
||||
<polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
|
||||
<polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
|
||||
<polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:0s">
|
||||
<circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.3s">
|
||||
<circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.5s">
|
||||
<circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:.8s">
|
||||
<circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
|
||||
</g>
|
||||
<g class="nf3" style="animation-delay:1.1s">
|
||||
<circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
|
||||
</g>
|
||||
<rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- S-CURVE -->
|
||||
<path class="cB3" d="M300,75 C405,195 195,345 300,465"
|
||||
fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ═══ TEXT GROUP ═══ -->
|
||||
<g id="text-group" class="fi3">
|
||||
<text x="190" y="290" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
|
||||
<tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
960
assets/vendor/cytoscape-navigator.js
vendored
Normal file
960
assets/vendor/cytoscape-navigator.js
vendored
Normal file
|
|
@ -0,0 +1,960 @@
|
|||
;(function(){ 'use strict';
|
||||
|
||||
var defaults = {
|
||||
container: false // can be a HTML or jQuery element or jQuery selector
|
||||
, viewLiveFramerate: 0 // set false to update graph pan only on drag end; set 0 to do it instantly; set a number (frames per second) to update not more than N times per second
|
||||
, dblClickDelay: 200 // milliseconds
|
||||
, removeCustomContainer: true // destroy the container specified by user on plugin destroy
|
||||
, rerenderDelay: 500 // ms to throttle rerender updates to the panzoom for performance
|
||||
};
|
||||
|
||||
var debounce = (function(){
|
||||
/**
|
||||
* lodash 3.1.1 (Custom Build) <https://lodash.com/>
|
||||
* Build: `lodash modern modularize exports="npm" -o ./`
|
||||
* Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>
|
||||
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
||||
* Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
||||
* Available under MIT license <https://lodash.com/license>
|
||||
*/
|
||||
/** Used as the `TypeError` message for "Functions" methods. */
|
||||
var FUNC_ERROR_TEXT = 'Expected a function';
|
||||
|
||||
/* Native method references for those with the same name as other `lodash` methods. */
|
||||
var nativeMax = Math.max,
|
||||
nativeNow = Date.now;
|
||||
|
||||
/**
|
||||
* Gets the number of milliseconds that have elapsed since the Unix epoch
|
||||
* (1 January 1970 00:00:00 UTC).
|
||||
*
|
||||
* @static
|
||||
* @memberOf _
|
||||
* @category Date
|
||||
* @example
|
||||
*
|
||||
* _.defer(function(stamp) {
|
||||
* console.log(_.now() - stamp);
|
||||
* }, _.now());
|
||||
* // => logs the number of milliseconds it took for the deferred function to be invoked
|
||||
*/
|
||||
var now = nativeNow || function() {
|
||||
return new Date().getTime();
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a debounced function that delays invoking `func` until after `wait`
|
||||
* milliseconds have elapsed since the last time the debounced function was
|
||||
* invoked. The debounced function comes with a `cancel` method to cancel
|
||||
* delayed invocations. Provide an options object to indicate that `func`
|
||||
* should be invoked on the leading and/or trailing edge of the `wait` timeout.
|
||||
* Subsequent calls to the debounced function return the result of the last
|
||||
* `func` invocation.
|
||||
*
|
||||
* **Note:** If `leading` and `trailing` options are `true`, `func` is invoked
|
||||
* on the trailing edge of the timeout only if the the debounced function is
|
||||
* invoked more than once during the `wait` timeout.
|
||||
*
|
||||
* See [David Corbacho's article](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation)
|
||||
* for details over the differences between `_.debounce` and `_.throttle`.
|
||||
*
|
||||
* @static
|
||||
* @memberOf _
|
||||
* @category Function
|
||||
* @param {Function} func The function to debounce.
|
||||
* @param {number} [wait=0] The number of milliseconds to delay.
|
||||
* @param {Object} [options] The options object.
|
||||
* @param {boolean} [options.leading=false] Specify invoking on the leading
|
||||
* edge of the timeout.
|
||||
* @param {number} [options.maxWait] The maximum time `func` is allowed to be
|
||||
* delayed before it's invoked.
|
||||
* @param {boolean} [options.trailing=true] Specify invoking on the trailing
|
||||
* edge of the timeout.
|
||||
* @returns {Function} Returns the new debounced function.
|
||||
* @example
|
||||
*
|
||||
* // avoid costly calculations while the window size is in flux
|
||||
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
||||
*
|
||||
* // invoke `sendMail` when the click event is fired, debouncing subsequent calls
|
||||
* jQuery('#postbox').on('click', _.debounce(sendMail, 300, {
|
||||
* 'leading': true,
|
||||
* 'trailing': false
|
||||
* }));
|
||||
*
|
||||
* // ensure `batchLog` is invoked once after 1 second of debounced calls
|
||||
* var source = new EventSource('/stream');
|
||||
* jQuery(source).on('message', _.debounce(batchLog, 250, {
|
||||
* 'maxWait': 1000
|
||||
* }));
|
||||
*
|
||||
* // cancel a debounced call
|
||||
* var todoChanges = _.debounce(batchLog, 1000);
|
||||
* Object.observe(models.todo, todoChanges);
|
||||
*
|
||||
* Object.observe(models, function(changes) {
|
||||
* if (_.find(changes, { 'user': 'todo', 'type': 'delete'})) {
|
||||
* todoChanges.cancel();
|
||||
* }
|
||||
* }, ['delete']);
|
||||
*
|
||||
* // ...at some point `models.todo` is changed
|
||||
* models.todo.completed = true;
|
||||
*
|
||||
* // ...before 1 second has passed `models.todo` is deleted
|
||||
* // which cancels the debounced `todoChanges` call
|
||||
* delete models.todo;
|
||||
*/
|
||||
function debounce(func, wait, options) {
|
||||
var args,
|
||||
maxTimeoutId,
|
||||
result,
|
||||
stamp,
|
||||
thisArg,
|
||||
timeoutId,
|
||||
trailingCall,
|
||||
lastCalled = 0,
|
||||
maxWait = false,
|
||||
trailing = true;
|
||||
|
||||
if (typeof func != 'function') {
|
||||
throw new TypeError(FUNC_ERROR_TEXT);
|
||||
}
|
||||
wait = wait < 0 ? 0 : (+wait || 0);
|
||||
if (options === true) {
|
||||
var leading = true;
|
||||
trailing = false;
|
||||
} else if (isObject(options)) {
|
||||
leading = !!options.leading;
|
||||
maxWait = 'maxWait' in options && nativeMax(+options.maxWait || 0, wait);
|
||||
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
if (maxTimeoutId) {
|
||||
clearTimeout(maxTimeoutId);
|
||||
}
|
||||
lastCalled = 0;
|
||||
maxTimeoutId = timeoutId = trailingCall = undefined;
|
||||
}
|
||||
|
||||
function complete(isCalled, id) {
|
||||
if (id) {
|
||||
clearTimeout(id);
|
||||
}
|
||||
maxTimeoutId = timeoutId = trailingCall = undefined;
|
||||
if (isCalled) {
|
||||
lastCalled = now();
|
||||
result = func.apply(thisArg, args);
|
||||
if (!timeoutId && !maxTimeoutId) {
|
||||
args = thisArg = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function delayed() {
|
||||
var remaining = wait - (now() - stamp);
|
||||
if (remaining <= 0 || remaining > wait) {
|
||||
complete(trailingCall, maxTimeoutId);
|
||||
} else {
|
||||
timeoutId = setTimeout(delayed, remaining);
|
||||
}
|
||||
}
|
||||
|
||||
function maxDelayed() {
|
||||
complete(trailing, timeoutId);
|
||||
}
|
||||
|
||||
function debounced() {
|
||||
args = arguments;
|
||||
stamp = now();
|
||||
thisArg = this;
|
||||
trailingCall = trailing && (timeoutId || !leading);
|
||||
|
||||
if (maxWait === false) {
|
||||
var leadingCall = leading && !timeoutId;
|
||||
} else {
|
||||
if (!maxTimeoutId && !leading) {
|
||||
lastCalled = stamp;
|
||||
}
|
||||
var remaining = maxWait - (stamp - lastCalled),
|
||||
isCalled = remaining <= 0 || remaining > maxWait;
|
||||
|
||||
if (isCalled) {
|
||||
if (maxTimeoutId) {
|
||||
maxTimeoutId = clearTimeout(maxTimeoutId);
|
||||
}
|
||||
lastCalled = stamp;
|
||||
result = func.apply(thisArg, args);
|
||||
}
|
||||
else if (!maxTimeoutId) {
|
||||
maxTimeoutId = setTimeout(maxDelayed, remaining);
|
||||
}
|
||||
}
|
||||
if (isCalled && timeoutId) {
|
||||
timeoutId = clearTimeout(timeoutId);
|
||||
}
|
||||
else if (!timeoutId && wait !== maxWait) {
|
||||
timeoutId = setTimeout(delayed, wait);
|
||||
}
|
||||
if (leadingCall) {
|
||||
isCalled = true;
|
||||
result = func.apply(thisArg, args);
|
||||
}
|
||||
if (isCalled && !timeoutId && !maxTimeoutId) {
|
||||
args = thisArg = undefined;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
debounced.cancel = cancel;
|
||||
return debounced;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
|
||||
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
||||
*
|
||||
* @static
|
||||
* @memberOf _
|
||||
* @category Lang
|
||||
* @param {*} value The value to check.
|
||||
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
||||
* @example
|
||||
*
|
||||
* _.isObject({});
|
||||
* // => true
|
||||
*
|
||||
* _.isObject([1, 2, 3]);
|
||||
* // => true
|
||||
*
|
||||
* _.isObject(1);
|
||||
* // => false
|
||||
*/
|
||||
function isObject(value) {
|
||||
// Avoid a V8 JIT bug in Chrome 19-20.
|
||||
// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
|
||||
var type = typeof value;
|
||||
return !!value && (type == 'object' || type == 'function');
|
||||
}
|
||||
|
||||
return debounce;
|
||||
|
||||
})();
|
||||
|
||||
// ported lodash throttle function
|
||||
var throttle = function( func, wait, options ){
|
||||
var leading = true,
|
||||
trailing = true;
|
||||
|
||||
if( options === false ){
|
||||
leading = false;
|
||||
} else if( typeof options === typeof {} ){
|
||||
leading = 'leading' in options ? options.leading : leading;
|
||||
trailing = 'trailing' in options ? options.trailing : trailing;
|
||||
}
|
||||
options = options || {};
|
||||
options.leading = leading;
|
||||
options.maxWait = wait;
|
||||
options.trailing = trailing;
|
||||
|
||||
return debounce( func, wait, options );
|
||||
};
|
||||
|
||||
var Navigator = function ( element, options ) {
|
||||
this._init(element, options)
|
||||
};
|
||||
|
||||
var extend = function() {
|
||||
for(var i = 1; i < arguments.length; i++) {
|
||||
for(var key in arguments[i]) {
|
||||
if(arguments[i].hasOwnProperty(key)) {
|
||||
arguments[0][key] = arguments[i][key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return arguments[0];
|
||||
};
|
||||
|
||||
var wid = function(elem) {
|
||||
return elem.getBoundingClientRect().width;
|
||||
};
|
||||
|
||||
var hei = function(elem) {
|
||||
return elem.getBoundingClientRect().height;
|
||||
};
|
||||
|
||||
Navigator.prototype = {
|
||||
|
||||
constructor: Navigator
|
||||
|
||||
/****************************
|
||||
Main functions
|
||||
****************************/
|
||||
|
||||
, bb: function(){
|
||||
var bb = this.cy.elements().boundingBox()
|
||||
|
||||
if( bb.w === 0 || bb.h === 0 ){
|
||||
return {
|
||||
x1: 0,
|
||||
x2: Infinity,
|
||||
y1: 0,
|
||||
y2: Infinity,
|
||||
w: Infinity,
|
||||
h: Infinity
|
||||
} // => hide interactive overlay
|
||||
}
|
||||
|
||||
return bb
|
||||
}
|
||||
|
||||
, _addCyListener: function(events, handler){
|
||||
this._cyListeners.push({
|
||||
events: events,
|
||||
handler: handler
|
||||
})
|
||||
|
||||
this.cy.on(events, handler)
|
||||
}
|
||||
|
||||
, _removeCyListeners: function(){
|
||||
var cy = this.cy
|
||||
|
||||
this._cyListeners.forEach(function(l){
|
||||
cy.off(l.events, l.handler)
|
||||
})
|
||||
|
||||
cy.offRender(this._onRenderHandler)
|
||||
}
|
||||
|
||||
, _init: function ( cy, options ) {
|
||||
this._cyListeners = []
|
||||
|
||||
this.$element = cy.container()
|
||||
this.options = extend({}, defaults, options)
|
||||
|
||||
this.cy = cy
|
||||
|
||||
// Cache bounding box
|
||||
this.boundingBox = this.bb()
|
||||
|
||||
// Cache sizes
|
||||
this.width = wid(this.$element);
|
||||
this.height = hei(this.$element)
|
||||
|
||||
// Init components
|
||||
this._initPanel()
|
||||
this._initThumbnail()
|
||||
this._initView()
|
||||
this._initOverlay()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
this._removeEventsHandling();
|
||||
|
||||
// If container is not created by navigator and its removal is prohibited
|
||||
if (this.options.container && !this.options.removeCustomContainer) {
|
||||
this.$panel.innerHTML = '';
|
||||
} else {
|
||||
this.$panel.parentElement.removeChild(this.$panel);
|
||||
}
|
||||
}
|
||||
|
||||
/****************************
|
||||
Navigator elements functions
|
||||
****************************/
|
||||
|
||||
/*
|
||||
* Used inner attributes
|
||||
*
|
||||
* w {number} width
|
||||
* h {number} height
|
||||
*/
|
||||
, _initPanel: function () {
|
||||
var options = this.options
|
||||
if(options.container && typeof options.container === 'string' && options.container.length > 0) {
|
||||
// to not break users which gives a jquery string selector
|
||||
if (options.container.indexOf('#') !== -1) {
|
||||
this.$panel = document.getElementById(options.container.replace('#', ''));
|
||||
} else {
|
||||
this.$panel = document.getElementsByClassName(options.container.replace('.', ''))[0];
|
||||
}
|
||||
} else {
|
||||
this.$panel = document.createElement('div');
|
||||
this.$panel.className = 'cytoscape-navigator';
|
||||
document.body.appendChild(this.$panel);
|
||||
}
|
||||
this._setupPanel()
|
||||
this._addCyListener('resize', this.resize.bind(this))
|
||||
}
|
||||
|
||||
, _setupPanel: function () {
|
||||
// Cache sizes
|
||||
this.panelWidth = wid(this.$panel);
|
||||
this.panelHeight = hei(this.$panel);
|
||||
}
|
||||
|
||||
/*
|
||||
* Used inner attributes
|
||||
*
|
||||
* zoom {number}
|
||||
* pan {object} - {x: 0, y: 0}
|
||||
*/
|
||||
, _initThumbnail: function () {
|
||||
// Create thumbnail
|
||||
this.$thumbnail = document.createElement('img');
|
||||
|
||||
// Add thumbnail canvas to the DOM
|
||||
this.$panel.appendChild(this.$thumbnail);
|
||||
|
||||
// Setup thumbnail
|
||||
this._setupThumbnailSizes()
|
||||
this._setupThumbnail()
|
||||
}
|
||||
|
||||
, _setupThumbnail: function () {
|
||||
this._updateThumbnailImage()
|
||||
}
|
||||
|
||||
, _setupThumbnailSizes: function () {
|
||||
// Update bounding box cache
|
||||
this.boundingBox = this.bb()
|
||||
|
||||
this.thumbnailZoom = Math.min(this.panelHeight / this.boundingBox.h, this.panelWidth / this.boundingBox.w)
|
||||
|
||||
// Used on thumbnail generation
|
||||
this.thumbnailPan = {
|
||||
x: (this.panelWidth - this.thumbnailZoom * (this.boundingBox.x1 + this.boundingBox.x2))/2
|
||||
, y: (this.panelHeight - this.thumbnailZoom * (this.boundingBox.y1 + this.boundingBox.y2))/2
|
||||
}
|
||||
}
|
||||
|
||||
// If bounding box has changed then update sizes
|
||||
// Otherwise just update the thumbnail
|
||||
, _checkThumbnailSizesAndUpdate: function () {
|
||||
// Cache previous values
|
||||
var _zoom = this.thumbnailZoom
|
||||
, _pan_x = this.thumbnailPan.x
|
||||
, _pan_y = this.thumbnailPan.y
|
||||
|
||||
this._setupThumbnailSizes()
|
||||
|
||||
if (_zoom != this.thumbnailZoom || _pan_x != this.thumbnailPan.x || _pan_y != this.thumbnailPan.y) {
|
||||
this._setupThumbnail()
|
||||
this._setupView()
|
||||
} else {
|
||||
this._updateThumbnailImage()
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Used inner attributes
|
||||
*
|
||||
* w {number} width
|
||||
* h {number} height
|
||||
* x {number}
|
||||
* y {number}
|
||||
* borderWidth {number}
|
||||
* locked {boolean}
|
||||
*/
|
||||
, _initView: function () {
|
||||
this.$view = document.createElement('div');
|
||||
this.$view.className = 'cytoscape-navigatorView';
|
||||
this.$panel.appendChild(this.$view)
|
||||
// Compute borders
|
||||
this.viewBorderTop = parseInt(this.$view.style['border-top-width'], 10) || 0;
|
||||
this.viewBorderRight = parseInt(this.$view.style['border-right-width'], 10) || 0;
|
||||
this.viewBorderBottom = parseInt(this.$view.style['border-bottom-width'], 10) || 0;
|
||||
this.viewBorderLeft = parseInt(this.$view.style['border-left-width'], 10) || 0;
|
||||
|
||||
// Abstract borders
|
||||
this.viewBorderHorizontal = this.viewBorderLeft + this.viewBorderRight
|
||||
this.viewBorderVertical = this.viewBorderTop + this.viewBorderBottom
|
||||
|
||||
this._setupView()
|
||||
|
||||
// Hook graph zoom and pan
|
||||
this._addCyListener('zoom pan', this._setupView.bind(this))
|
||||
}
|
||||
|
||||
, _setupView: function () {
|
||||
if (this.viewLocked)
|
||||
return
|
||||
|
||||
var cyZoom = this.cy.zoom()
|
||||
, cyPan = this.cy.pan()
|
||||
|
||||
// Horizontal computation
|
||||
this.viewW = this.width / cyZoom * this.thumbnailZoom
|
||||
this.viewX = -cyPan.x * this.viewW / this.width + this.thumbnailPan.x - this.viewBorderLeft
|
||||
|
||||
// Vertical computation
|
||||
this.viewH = this.height / cyZoom * this.thumbnailZoom
|
||||
this.viewY = -cyPan.y * this.viewH / this.height + this.thumbnailPan.y - this.viewBorderTop
|
||||
|
||||
// CSS view
|
||||
this.$view.style['width'] = this.viewW + 'px';
|
||||
this.$view.style['height'] = this.viewH + 'px';
|
||||
this.$view.style['position'] = 'absolute';
|
||||
this.$view.style['left'] = this.viewX + 'px';
|
||||
this.$view.style['top'] = this.viewY + 'px';
|
||||
}
|
||||
|
||||
/*
|
||||
* Used inner attributes
|
||||
*
|
||||
* timeout {number} used to keep stable frame rate
|
||||
* lastMoveStartTime {number}
|
||||
* inMovement {boolean}
|
||||
* hookPoint {object} {x: 0, y: 0}
|
||||
*/
|
||||
, _initOverlay: function () {
|
||||
// Used to capture mouse events
|
||||
this.$overlay = document.createElement('div');
|
||||
this.$overlay.className = 'cytoscape-navigatorOverlay';
|
||||
|
||||
// Add overlay to the DOM
|
||||
this.$panel.appendChild(this.$overlay)
|
||||
|
||||
// Init some attributes
|
||||
this.overlayHookPointX = 0;
|
||||
this.overlayHookPointY = 0;
|
||||
|
||||
// Listen for events
|
||||
this._initEventsHandling()
|
||||
}
|
||||
|
||||
/****************************
|
||||
Event handling functions
|
||||
****************************/
|
||||
|
||||
, resize: function () {
|
||||
// Cache sizes
|
||||
this.width = wid(this.$element);
|
||||
this.height = hei(this.$element);
|
||||
this._thumbnailSetup = false
|
||||
this._setupPanel()
|
||||
this._checkThumbnailSizesAndUpdate()
|
||||
this._setupView()
|
||||
}
|
||||
|
||||
, _initEventsHandling: function () {
|
||||
var that = this
|
||||
, eventsLocal = [
|
||||
// Mouse events
|
||||
'mousedown'
|
||||
, 'mousewheel'
|
||||
, 'DOMMouseScroll' // Mozilla specific event
|
||||
// Touch events
|
||||
, 'touchstart'
|
||||
]
|
||||
, eventsGlobal = [
|
||||
'mouseup'
|
||||
, 'mouseout'
|
||||
, 'mousemove'
|
||||
// Touch events
|
||||
, 'touchmove'
|
||||
, 'touchend'
|
||||
]
|
||||
|
||||
// handle events and stop their propagation
|
||||
var overlayListener = function (ev) {
|
||||
// Touch events
|
||||
if (ev.type == 'touchstart') {
|
||||
// Will count as middle of View
|
||||
Object.defineProperty(ev, 'offsetX', {
|
||||
value: that.viewX + that.viewW / 2,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'offsetY', {
|
||||
value: that.viewY + that.viewH / 2,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
|
||||
// Normalize offset for browsers which do not provide that value
|
||||
if (ev.offsetX === undefined || ev.offsetY === undefined) {
|
||||
var rect = ev.target.getBoundingClientRect();
|
||||
var targetOffset = {
|
||||
top: rect.top + window.scrollY,
|
||||
left: rect.left + window.scrollX,
|
||||
};
|
||||
Object.defineProperty(ev, 'offsetX', {
|
||||
value: ev.pageX - targetOffset.left,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'offsetY', {
|
||||
value: ev.pageY - targetOffset.top,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
|
||||
if (ev.type == 'mousedown' || ev.type == 'touchstart') {
|
||||
that._eventMoveStart(ev)
|
||||
} else if (ev.type == 'mousewheel' || ev.type == 'DOMMouseScroll') {
|
||||
that._eventZoom(ev)
|
||||
}
|
||||
|
||||
// Prevent default and propagation
|
||||
// Don't use peventPropagation as it breaks mouse events
|
||||
return false;
|
||||
};
|
||||
|
||||
// Hook global events
|
||||
var globalListener = function (ev) {
|
||||
|
||||
// Do not make any computations if it is has no effect on Navigator
|
||||
if (!that.overlayInMovement)
|
||||
return;
|
||||
|
||||
// Touch events
|
||||
if (ev.type == 'touchend') {
|
||||
// Will count as middle of View
|
||||
Object.defineProperty(ev, 'offsetX', {
|
||||
value: that.viewX + that.viewW / 2,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'offsetY', {
|
||||
value: that.viewY + that.viewH / 2,
|
||||
writable: true
|
||||
});
|
||||
} else if (ev.type == 'touchmove') {
|
||||
// Hack - we take in account only first touch
|
||||
Object.defineProperty(ev, 'pageX', {
|
||||
value: ev.originalEvent.touches[0].pageX,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'pageY', {
|
||||
value: ev.originalEvent.touches[0].pageY,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
|
||||
// Normalize offset for browsers which do not provide that value
|
||||
if (ev.offsetX === undefined || ev.offsetY === undefined) {
|
||||
var rect = ev.target.getBoundingClientRect();
|
||||
var targetOffset = {
|
||||
top: rect.top + window.scrollY,
|
||||
left: rect.left + window.scrollX,
|
||||
};
|
||||
Object.defineProperty(ev, 'offsetX', {
|
||||
value: ev.pageX - targetOffset.left,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'offsetY', {
|
||||
value: ev.pageY - targetOffset.top,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
|
||||
// Translate global events into local coordinates
|
||||
if (ev.target !== that.$overlay) {
|
||||
var rect = ev.target.getBoundingClientRect();
|
||||
var rect2 = that.$overlay.getBoundingClientRect();
|
||||
var targetOffset = {
|
||||
top: rect.top + window.scrollY,
|
||||
left: rect.left + window.scrollX,
|
||||
};
|
||||
var overlayOffset = {
|
||||
top: rect2.top + window.scrollY,
|
||||
left: rect2.left + window.scrollX,
|
||||
};
|
||||
|
||||
if(targetOffset && overlayOffset) {
|
||||
Object.defineProperty(ev, 'offsetX', {
|
||||
value: ev.offsetX - overlayOffset.left + targetOffset.left,
|
||||
writable: true
|
||||
});
|
||||
Object.defineProperty(ev, 'offsetY', {
|
||||
value: ev.offsetY - overlayOffset.top + targetOffset.top,
|
||||
writable: true
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (ev.type == 'mousemove' || ev.type == 'touchmove') {
|
||||
that._eventMove(ev)
|
||||
} else if (ev.type == 'mouseup' || ev.type == 'touchend') {
|
||||
that._eventMoveEnd(ev)
|
||||
}
|
||||
|
||||
// Prevent default and propagation
|
||||
// Don't use peventPropagation as it breaks mouse events
|
||||
return false;
|
||||
};
|
||||
|
||||
for (var i = 0; i < eventsLocal.length; i++) {
|
||||
this.$overlay.addEventListener(eventsLocal[i], overlayListener, false);
|
||||
}
|
||||
|
||||
for (var i = 0; i < eventsGlobal.length; i++) {
|
||||
window.addEventListener(eventsGlobal[i], globalListener, false);
|
||||
}
|
||||
|
||||
this._removeEventsHandling = function(){
|
||||
|
||||
for (var i = 0; i < eventsLocal.length; i++) {
|
||||
this.$overlay.removeEventListener(eventsLocal[i], overlayListener);
|
||||
}
|
||||
|
||||
for (var i = 0; i < eventsGlobal.length; i++) {
|
||||
window.removeEventListener(eventsGlobal[i], globalListener);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
, _eventMoveStart: function (ev) {
|
||||
var now = new Date().getTime()
|
||||
|
||||
// Check if it was double click
|
||||
if (this.overlayLastMoveStartTime
|
||||
&& this.overlayLastMoveStartTime + this.options.dblClickDelay > now) {
|
||||
// Reset lastMoveStartTime
|
||||
this.overlayLastMoveStartTime = 0
|
||||
// Enable View in order to move it to the center
|
||||
this.overlayInMovement = true
|
||||
|
||||
// Set hook point as View center
|
||||
this.overlayHookPointX = this.viewW / 2
|
||||
this.overlayHookPointY = this.viewH / 2
|
||||
|
||||
// Move View to start point
|
||||
if (this.options.viewLiveFramerate !== false) {
|
||||
this._eventMove({
|
||||
offsetX: this.panelWidth / 2
|
||||
, offsetY: this.panelHeight / 2
|
||||
})
|
||||
} else {
|
||||
this._eventMoveEnd({
|
||||
offsetX: this.panelWidth / 2
|
||||
, offsetY: this.panelHeight / 2
|
||||
})
|
||||
}
|
||||
|
||||
// View should be inactive as we don't want to move it right after double click
|
||||
this.overlayInMovement = false
|
||||
}
|
||||
// This is a single click
|
||||
// Take care as single click happens before double click 2 times
|
||||
else {
|
||||
this.overlayLastMoveStartTime = now
|
||||
this.overlayInMovement = true
|
||||
// Lock view moving caused by cy events
|
||||
this.viewLocked = true
|
||||
|
||||
// if event started in View
|
||||
if (ev.offsetX >= this.viewX && ev.offsetX <= this.viewX + this.viewW
|
||||
&& ev.offsetY >= this.viewY && ev.offsetY <= this.viewY + this.viewH
|
||||
) {
|
||||
this.overlayHookPointX = ev.offsetX - this.viewX
|
||||
this.overlayHookPointY = ev.offsetY - this.viewY
|
||||
}
|
||||
// if event started in Thumbnail (outside of View)
|
||||
else {
|
||||
// Set hook point as View center
|
||||
this.overlayHookPointX = this.viewW / 2
|
||||
this.overlayHookPointY = this.viewH / 2
|
||||
|
||||
// Move View to start point
|
||||
this._eventMove(ev)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
, _eventMove: function (ev) {
|
||||
var that = this
|
||||
|
||||
this._checkMousePosition(ev)
|
||||
|
||||
// break if it is useless event
|
||||
if (!this.overlayInMovement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update cache
|
||||
this.viewX = ev.offsetX - this.overlayHookPointX
|
||||
this.viewY = ev.offsetY - this.overlayHookPointY
|
||||
|
||||
// Update view position
|
||||
this.$view.style['left'] = this.viewX + 'px';
|
||||
this.$view.style['top'] = this.viewY + 'px';
|
||||
|
||||
// Move Cy
|
||||
if (this.options.viewLiveFramerate !== false) {
|
||||
// trigger instantly
|
||||
if (this.options.viewLiveFramerate == 0) {
|
||||
this._moveCy()
|
||||
}
|
||||
// trigger less often than frame rate
|
||||
else if (!this.overlayTimeout) {
|
||||
// Set a timeout for graph movement
|
||||
this.overlayTimeout = setTimeout(function () {
|
||||
that._moveCy()
|
||||
that.overlayTimeout = false
|
||||
}, 1000 / this.options.viewLiveFramerate)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
, _checkMousePosition: function (ev) {
|
||||
// If mouse in over View
|
||||
if(ev.offsetX > this.viewX && ev.offsetX < this.viewX + this.viewBorderHorizontal + this.viewW
|
||||
&& ev.offsetY > this.viewY && ev.offsetY < this.viewY + this.viewBorderVertical + this.viewH) {
|
||||
this.$panel.classList.add('mouseover-view')
|
||||
} else {
|
||||
this.$panel.classList.remove('mouseover-view')
|
||||
}
|
||||
}
|
||||
|
||||
, _eventMoveEnd: function (ev) {
|
||||
// Unlock view changing caused by graph events
|
||||
this.viewLocked = false
|
||||
|
||||
// Remove class when mouse is not over Navigator
|
||||
this.$panel.classList.remove('mouseover-view')
|
||||
|
||||
if (!this.overlayInMovement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Trigger one last move
|
||||
this._eventMove(ev)
|
||||
|
||||
// If mode is not live then move graph on drag end
|
||||
if (this.options.viewLiveFramerate === false) {
|
||||
this._moveCy()
|
||||
}
|
||||
|
||||
// Stop movement permission
|
||||
this.overlayInMovement = false
|
||||
}
|
||||
|
||||
, _eventZoom: function (ev) {
|
||||
var ev2 = extend({}, ev.originalEvent);
|
||||
var delta = ev.wheelDeltaY / 1000 || ev.wheelDelta / 1000 || ev.detail / -32 || ev2.wheelDeltaY / 1000 || ev2.wheelDelta / 1000 || ev2.detail / -32;
|
||||
var zoomRate = Math.pow(10, delta)
|
||||
, mousePosition = {
|
||||
left: ev.offsetX
|
||||
, top: ev.offsetY
|
||||
}
|
||||
|
||||
if (this.cy.zoomingEnabled()) {
|
||||
this._zoomCy(zoomRate, mousePosition)
|
||||
}
|
||||
}
|
||||
|
||||
, _updateThumbnailImage: function () {
|
||||
var that = this;
|
||||
|
||||
if( this._thumbnailUpdating ){
|
||||
return;
|
||||
}
|
||||
|
||||
this._thumbnailUpdating = true;
|
||||
|
||||
var render = function() {
|
||||
that._checkThumbnailSizesAndUpdate();
|
||||
that._setupView();
|
||||
|
||||
var $img = that.$thumbnail;
|
||||
var img = $img;
|
||||
|
||||
var w = that.panelWidth;
|
||||
var h = that.panelHeight;
|
||||
var bb = that.boundingBox;
|
||||
var zoom = Math.min( w/bb.w, h/bb.h );
|
||||
|
||||
var png = that.cy.png({
|
||||
full: true,
|
||||
scale: zoom,
|
||||
maxHeight: h,
|
||||
maxWidth: w
|
||||
});
|
||||
if( png.indexOf('image/png') < 0 ){
|
||||
img.removeAttribute( 'src' );
|
||||
} else {
|
||||
img.setAttribute( 'src', png );
|
||||
}
|
||||
|
||||
var translate = {
|
||||
x: (w - zoom*( bb.w ))/2,
|
||||
y: (h - zoom*( bb.h ))/2
|
||||
};
|
||||
|
||||
$img.style['position'] = 'absolute';
|
||||
$img.style['left'] = translate.x + 'px';
|
||||
$img.style['top'] = translate.y + 'px';
|
||||
|
||||
}
|
||||
|
||||
this._onRenderHandler = throttle(render, that.options.rerenderDelay)
|
||||
|
||||
this.cy.onRender( this._onRenderHandler )
|
||||
}
|
||||
|
||||
/****************************
|
||||
Navigator view moving
|
||||
****************************/
|
||||
|
||||
, _moveCy: function () {
|
||||
this.cy.pan({
|
||||
x: -(this.viewX + this.viewBorderLeft - this.thumbnailPan.x) * this.width / this.viewW
|
||||
, y: -(this.viewY + this.viewBorderLeft - this.thumbnailPan.y) * this.height / this.viewH
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Zooms graph.
|
||||
*
|
||||
* @this {cytoscapeNavigator}
|
||||
* @param {number} zoomRate The zoom rate value. 1 is 100%.
|
||||
*/
|
||||
, _zoomCy: function (zoomRate, zoomCenterRaw) {
|
||||
var zoomCenter
|
||||
, isZoomCenterInView = false
|
||||
|
||||
zoomCenter = {
|
||||
x: this.width / 2
|
||||
, y: this.height / 2
|
||||
};
|
||||
|
||||
this.cy.zoom({
|
||||
level: this.cy.zoom() * zoomRate
|
||||
, renderedPosition: zoomCenter
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// registers the extension on a cytoscape lib ref
|
||||
var register = function( cytoscape ){
|
||||
|
||||
if (!cytoscape){ return; } // can't register if cytoscape unspecified
|
||||
|
||||
cytoscape( 'core', 'navigator', function( options ){
|
||||
var cy = this;
|
||||
|
||||
return new Navigator( cy, options );
|
||||
} );
|
||||
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
|
||||
module.exports = function( cytoscape ){
|
||||
register( cytoscape );
|
||||
};
|
||||
} else if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
|
||||
define('cytoscape-navigator', function(){
|
||||
return register;
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof cytoscape !== 'undefined') { // expose to global cytoscape (i.e. window.cytoscape)
|
||||
register(cytoscape);
|
||||
}
|
||||
|
||||
})();
|
||||
246
assets/vendor/tagline-rotator.js
vendored
Normal file
246
assets/vendor/tagline-rotator.js
vendored
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
/* tagline-rotator.js — rotate ontoref definition-phrases by audience + focus.
|
||||
*
|
||||
* Source of truth: /r/taglines.json, projected by gen-taglines.nu from
|
||||
* .ontoref/positioning/taglines.ncl (drift-checked at export). This file never
|
||||
* carries phrases — only the rotation mechanism.
|
||||
*
|
||||
* Mount:
|
||||
* <span data-tagline-rotator data-audience="all"
|
||||
* data-src="/r/taglines.json" data-focus-target=".tagline-focus">
|
||||
* Sure-footed, and light on your feet. <!-- static fallback, shown if JS/fetch fail -->
|
||||
* </span>
|
||||
*
|
||||
* Effect: drives typed.js (typewriter) when window.Typed is present; native fade
|
||||
* otherwise; static first-phrase under prefers-reduced-motion. Hybrid driver: the
|
||||
* home mount starts on data-audience (default "all"); any element carrying
|
||||
* [data-tagline-audience="<key>"] switches the (unlocked) rotators to that queue on
|
||||
* click — reach-vs-qualification: a routing gancho, the "all" queue is curated, not
|
||||
* the union. A mount with [data-lock-audience] ignores door clicks (door/about pages).
|
||||
* Language: data-lang fixed → <html lang> → localStorage 'ontoref-lang' → 'en';
|
||||
* follows .lang-btn / [data-lang-switch] clicks and cross-tab storage changes.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var REDUCED =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
function detectLang(el) {
|
||||
var fixed = el.getAttribute("data-lang");
|
||||
if (fixed === "es" || fixed === "en") return fixed;
|
||||
var h = (document.documentElement.lang || "").slice(0, 2).toLowerCase();
|
||||
if (h === "es" || h === "en") return h;
|
||||
try {
|
||||
var s = localStorage.getItem("ontoref-lang");
|
||||
if (s === "es" || s === "en") return s;
|
||||
} catch (e) {}
|
||||
return "en";
|
||||
}
|
||||
|
||||
function focusLabel(focus, labels, lang) {
|
||||
if (!focus) return "";
|
||||
var m = labels && labels[focus];
|
||||
if (m && m[lang]) return m[lang];
|
||||
return focus.replace(/^diff-/, "").replace(/-/g, " "); // slug fallback
|
||||
}
|
||||
|
||||
function Rotator(el, data) {
|
||||
this.el = el;
|
||||
this.data = (data && data.by_audience) || {};
|
||||
this.byTier = (data && data.by_tier) || {};
|
||||
this.isTier = el.hasAttribute("data-tier-rotator");
|
||||
this.focusLabels = (data && data.focus_labels) || {};
|
||||
this.audience = el.getAttribute("data-audience") || "all";
|
||||
this.lang = detectLang(el);
|
||||
var sel = el.getAttribute("data-focus-target");
|
||||
this.focusEl = sel ? document.querySelector(sel) : null;
|
||||
this.typed = null;
|
||||
this.timer = null;
|
||||
this.idx = 0;
|
||||
this.queue = [];
|
||||
this.rebuild();
|
||||
}
|
||||
|
||||
Rotator.prototype.phrases = function () {
|
||||
// Tier rotator (data-tier-rotator): a parallel axis — cycle the per-tier lines
|
||||
// (0 → 1 → 2) from by_tier, ignoring the audience queue. Door clicks never
|
||||
// switch it (mount carries data-lock-audience).
|
||||
if (this.isTier) {
|
||||
var t = this.byTier;
|
||||
return [].concat(t["0"] || [], t["1"] || [], t["2"] || []);
|
||||
}
|
||||
var q = this.data[this.audience];
|
||||
if (!q || !q.length) q = this.data.all || [];
|
||||
return q;
|
||||
};
|
||||
|
||||
Rotator.prototype.text = function (i) {
|
||||
if (!this.queue.length) return "";
|
||||
var p = this.queue[i % this.queue.length];
|
||||
return p ? p[this.lang] || p.en || "" : "";
|
||||
};
|
||||
|
||||
Rotator.prototype.renderFocus = function (i) {
|
||||
if (!this.focusEl || !this.queue.length) return;
|
||||
var p = this.queue[i % this.queue.length];
|
||||
this.focusEl.textContent = p ? focusLabel(p.focus, this.focusLabels, this.lang) : "";
|
||||
};
|
||||
|
||||
Rotator.prototype.render = function (i) {
|
||||
this.el.textContent = this.text(i);
|
||||
this.renderFocus(i);
|
||||
};
|
||||
|
||||
Rotator.prototype.rebuild = function () {
|
||||
this.stop();
|
||||
this.queue = this.phrases();
|
||||
this.idx = 0;
|
||||
if (!this.queue.length) {
|
||||
this.el.textContent = "";
|
||||
return;
|
||||
}
|
||||
if (REDUCED) {
|
||||
this.render(0); // honour reduced-motion: show one phrase, never animate
|
||||
return;
|
||||
}
|
||||
if (window.Typed) this.startTyped();
|
||||
else this.startFade();
|
||||
};
|
||||
|
||||
Rotator.prototype.startTyped = function () {
|
||||
var self = this;
|
||||
var strings = this.queue.map(function (_, i) {
|
||||
// escape typed.js control chars: ^ (pause), ` (html), ~ (smart-backspace)
|
||||
return self.text(i).replace(/([\^`~])/g, "\\$1");
|
||||
});
|
||||
this.renderFocus(0);
|
||||
this.typed = new window.Typed(this.el, {
|
||||
strings: strings,
|
||||
typeSpeed: 38,
|
||||
backSpeed: 16,
|
||||
backDelay: 2400,
|
||||
startDelay: 250,
|
||||
smartBackspace: true,
|
||||
loop: true,
|
||||
cursorChar: "▌",
|
||||
preStringTyped: function (i) {
|
||||
self.renderFocus(i);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
Rotator.prototype.startFade = function () {
|
||||
var self = this;
|
||||
this.render(0);
|
||||
this.el.classList.add("tagline-rot", "is-in");
|
||||
this.timer = setInterval(function () {
|
||||
self.el.classList.remove("is-in");
|
||||
setTimeout(function () {
|
||||
self.idx = (self.idx + 1) % self.queue.length;
|
||||
self.render(self.idx);
|
||||
self.el.classList.add("is-in");
|
||||
}, 350);
|
||||
}, 3800);
|
||||
};
|
||||
|
||||
Rotator.prototype.stop = function () {
|
||||
if (this.typed) {
|
||||
this.typed.destroy();
|
||||
this.typed = null;
|
||||
}
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
Rotator.prototype.setAudience = function (key) {
|
||||
if (!key || key === this.audience) return;
|
||||
this.audience = key;
|
||||
this.rebuild();
|
||||
};
|
||||
|
||||
Rotator.prototype.setLang = function (lang) {
|
||||
if ((lang !== "es" && lang !== "en") || lang === this.lang) return;
|
||||
this.lang = lang;
|
||||
this.rebuild();
|
||||
};
|
||||
|
||||
function init() {
|
||||
var mounts = [].slice.call(
|
||||
document.querySelectorAll("[data-tagline-rotator]"),
|
||||
);
|
||||
if (!mounts.length) return;
|
||||
var src = mounts[0].getAttribute("data-src") || "/r/taglines.json";
|
||||
|
||||
fetch(src, { credentials: "same-origin" })
|
||||
.then(function (r) {
|
||||
if (!r.ok) throw new Error("taglines " + r.status);
|
||||
return r.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
var rotators = mounts.map(function (el) {
|
||||
return new Rotator(el, data);
|
||||
});
|
||||
window.__taglineRotators = rotators;
|
||||
|
||||
// Hybrid driver — door affordances switch the unlocked rotators' audience.
|
||||
document.addEventListener("click", function (ev) {
|
||||
var t =
|
||||
ev.target.closest && ev.target.closest("[data-tagline-audience]");
|
||||
if (!t) return;
|
||||
var key = t.getAttribute("data-tagline-audience");
|
||||
var group = t.parentNode;
|
||||
if (group)
|
||||
[].forEach.call(
|
||||
group.querySelectorAll("[data-tagline-audience]"),
|
||||
function (b) {
|
||||
b.classList.toggle("is-active", b === t);
|
||||
},
|
||||
);
|
||||
// reveal the matching door panel; data-door="all" hides every panel
|
||||
var door = t.getAttribute("data-door");
|
||||
if (door !== null)
|
||||
[].forEach.call(
|
||||
document.querySelectorAll("[data-tagline-panel]"),
|
||||
function (p) {
|
||||
var match = p.getAttribute("data-tagline-panel") === door;
|
||||
p.classList.toggle("is-open", match); // class wins over any [hidden] override
|
||||
p.hidden = !match;
|
||||
},
|
||||
);
|
||||
rotators.forEach(function (rt) {
|
||||
if (!rt.el.hasAttribute("data-lock-audience")) rt.setAudience(key);
|
||||
});
|
||||
});
|
||||
|
||||
// Language — follow the web lang toggle and cross-tab changes.
|
||||
document.addEventListener("click", function (ev) {
|
||||
var b =
|
||||
ev.target.closest &&
|
||||
ev.target.closest(".lang-btn, [data-lang-switch]");
|
||||
if (!b) return;
|
||||
var lang =
|
||||
b.getAttribute("data-lang") || b.getAttribute("data-lang-switch");
|
||||
rotators.forEach(function (rt) {
|
||||
rt.setLang(lang);
|
||||
});
|
||||
});
|
||||
window.addEventListener("storage", function (ev) {
|
||||
if (ev.key === "ontoref-lang" && ev.newValue)
|
||||
rotators.forEach(function (rt) {
|
||||
rt.setLang(ev.newValue);
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(function (e) {
|
||||
// leave the static fallback text in each mount untouched
|
||||
if (window.console) console.warn("[tagline-rotator]", e.message);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading")
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
else init();
|
||||
})();
|
||||
3
assets/vendor/typed.umd.js
vendored
Normal file
3
assets/vendor/typed.umd.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(t||self).Typed=s()}(this,function(){function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s<arguments.length;s++){var e=arguments[s];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},t.apply(this,arguments)}var s={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:Infinity,showCursor:!0,cursorChar:"|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onBegin:function(t){},onComplete:function(t){},preStringTyped:function(t,s){},onStringTyped:function(t,s){},onLastStringBackspaced:function(t){},onTypingPaused:function(t,s){},onTypingResumed:function(t,s){},onReset:function(t){},onStop:function(t,s){},onStart:function(t,s){},onDestroy:function(t){}},e=new(/*#__PURE__*/function(){function e(){}var n=e.prototype;return n.load=function(e,n,i){if(e.el="string"==typeof i?document.querySelector(i):i,e.options=t({},s,n),e.isInput="input"===e.el.tagName.toLowerCase(),e.attr=e.options.attr,e.bindInputFocusEvents=e.options.bindInputFocusEvents,e.showCursor=!e.isInput&&e.options.showCursor,e.cursorChar=e.options.cursorChar,e.cursorBlinking=!0,e.elContent=e.attr?e.el.getAttribute(e.attr):e.el.textContent,e.contentType=e.options.contentType,e.typeSpeed=e.options.typeSpeed,e.startDelay=e.options.startDelay,e.backSpeed=e.options.backSpeed,e.smartBackspace=e.options.smartBackspace,e.backDelay=e.options.backDelay,e.fadeOut=e.options.fadeOut,e.fadeOutClass=e.options.fadeOutClass,e.fadeOutDelay=e.options.fadeOutDelay,e.isPaused=!1,e.strings=e.options.strings.map(function(t){return t.trim()}),e.stringsElement="string"==typeof e.options.stringsElement?document.querySelector(e.options.stringsElement):e.options.stringsElement,e.stringsElement){e.strings=[],e.stringsElement.style.cssText="clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";var r=Array.prototype.slice.apply(e.stringsElement.children),o=r.length;if(o)for(var a=0;a<o;a+=1)e.strings.push(r[a].innerHTML.trim())}for(var u in e.strPos=0,e.currentElContent=this.getCurrentElContent(e),e.currentElContent&&e.currentElContent.length>0&&(e.strPos=e.currentElContent.length-1,e.strings.unshift(e.currentElContent)),e.sequence=[],e.strings)e.sequence[u]=u;e.arrayPos=0,e.stopNum=0,e.loop=e.options.loop,e.loopCount=e.options.loopCount,e.curLoop=0,e.shuffle=e.options.shuffle,e.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},e.typingComplete=!1,e.autoInsertCss=e.options.autoInsertCss,e.autoInsertCss&&(this.appendCursorAnimationCss(e),this.appendFadeOutAnimationCss(e))},n.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent},n.appendCursorAnimationCss=function(t){var s="data-typed-js-cursor-css";if(t.showCursor&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n ",document.body.appendChild(e)}},n.appendFadeOutAnimationCss=function(t){var s="data-typed-fadeout-js-css";if(t.fadeOut&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n ",document.body.appendChild(e)}},e}()),n=new(/*#__PURE__*/function(){function t(){}var s=t.prototype;return s.typeHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if("<"===n||"&"===n){var i;for(i="<"===n?">":";";t.substring(s+1).charAt(0)!==i&&!(1+ ++s>t.length););s++}return s},s.backSpaceHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if(">"===n||";"===n){var i;for(i=">"===n?"<":"&";t.substring(s-1).charAt(0)!==i&&!(--s<0););s--}return s},t}());/*#__PURE__*/
|
||||
return function(){function t(t,s){e.load(this,s,t),this.begin()}var s=t.prototype;return s.toggle=function(){this.pause.status?this.start():this.stop()},s.stop=function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},s.start=function(){this.typingComplete||this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))},s.destroy=function(){this.reset(!1),this.options.onDestroy(this)},s.reset=function(t){void 0===t&&(t=!0),clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())},s.begin=function(){var t=this;this.options.onBegin(this),this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){0===t.strPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos):t.backspace(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},s.typewrite=function(t,s){var e=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var i=this.humanizer(this.typeSpeed),r=1;!0!==this.pause.status?this.timeout=setTimeout(function(){s=n.typeHtmlChars(t,s,e);var i=0,o=t.substring(s);if("^"===o.charAt(0)&&/^\^\d+/.test(o)){var a=1;a+=(o=/\d+/.exec(o)[0]).length,i=parseInt(o),e.temporaryPause=!0,e.options.onTypingPaused(e.arrayPos,e),t=t.substring(0,s)+t.substring(s+a),e.toggleBlinking(!0)}if("`"===o.charAt(0)){for(;"`"!==t.substring(s+r).charAt(0)&&(r++,!(s+r>t.length)););var u=t.substring(0,s),p=t.substring(u.length+1,s+r),c=t.substring(s+r+1);t=u+p+c,r--}e.timeout=setTimeout(function(){e.toggleBlinking(!1),s>=t.length?e.doneTyping(t,s):e.keepTyping(t,s,r),e.temporaryPause&&(e.temporaryPause=!1,e.options.onTypingResumed(e.arrayPos,e))},i)},i):this.setPauseStatus(t,s,!0)},s.keepTyping=function(t,s,e){0===s&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var n=t.substring(0,s+=e);this.replaceText(n),this.typewrite(t,s)},s.doneTyping=function(t,s){var e=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),!1===this.loop||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){e.backspace(t,s)},this.backDelay))},s.backspace=function(t,s){var e=this;if(!0!==this.pause.status){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var i=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){s=n.backSpaceHtmlChars(t,s,e);var i=t.substring(0,s);if(e.replaceText(i),e.smartBackspace){var r=e.strings[e.arrayPos+1];e.stopNum=r&&i===r.substring(0,s)?s:0}s>e.stopNum?(s--,e.backspace(t,s)):s<=e.stopNum&&(e.arrayPos++,e.arrayPos===e.strings.length?(e.arrayPos=0,e.options.onLastStringBackspaced(),e.shuffleStringsIfNeeded(),e.begin()):e.typewrite(e.strings[e.sequence[e.arrayPos]],s))},i)}else this.setPauseStatus(t,s,!1)},s.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},s.setPauseStatus=function(t,s,e){this.pause.typewrite=e,this.pause.curString=t,this.pause.curStrPos=s},s.toggleBlinking=function(t){this.cursor&&(this.pause.status||this.cursorBlinking!==t&&(this.cursorBlinking=t,t?this.cursor.classList.add("typed-cursor--blink"):this.cursor.classList.remove("typed-cursor--blink")))},s.humanizer=function(t){return Math.round(Math.random()*t/2)+t},s.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},s.initFadeOut=function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)},s.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t},s.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(s){t.stop()}),this.el.addEventListener("blur",function(s){t.el.value&&0!==t.el.value.length||t.start()}))},s.insertCursor=function(){this.showCursor&&(this.cursor||(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.setAttribute("aria-hidden",!0),this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))},t}()});
|
||||
//# sourceMappingURL=typed.umd.js.map
|
||||
2
assets/vendor/vis-timeline.min.css
vendored
Normal file
2
assets/vendor/vis-timeline.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
48
assets/vendor/vis-timeline.min.js
vendored
Normal file
48
assets/vendor/vis-timeline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
34
assets/vendor/vis-timeline.min.js.peer-bak
vendored
Normal file
34
assets/vendor/vis-timeline.min.js.peer-bak
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue