kts
/
Cat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add initial pre-alpha codebase for Cat 

This provides some basic structure and functionality for
Cat, albeit with a messy and somewhat incoherent structure.
master
kts of kettek (nyaa) 2017-07-27 08:45:41 -07:00
commit 918b3c8ebe
50 changed files with 3657 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored 100644
View File

@ -0,0 +1 @@
node_modules

257
Cat.js 100644
View File

@ -0,0 +1,257 @@
const {remote} = require('electron');
const {dialog,Menu,MenuItem} = remote;
const ipcRenderer = require('electron').ipcRenderer;
const settings = require('electron').remote.require('electron-settings');
const CatProject = require('./classes/CatProject');
const Cat = { };
Cat.loadedProjects = [];
Cat.focusedProject = null;
Cat.listeners = {};
Cat.on = function(name, cb) {
if (!Cat.listeners[name]) Cat.listeners[name] = [];
for (var i = 0; i < Cat.listeners[name].length; i++) {
if (Cat.listeners[name][i] === cb) return false; // already exists
}
Cat.listeners[name].push(cb);
return true;
}
Cat.removeListener = function(name, cb) {
if (!Cat.listeners[name]) return;
for (var i = 0; i < Cat.listeners[name].length; i++) {
if (Cat.listeners[name][i] === cb) {
Cat.listeners[name].splice(i, 1);
return true;
}
}
return false;
}
Cat.emit = function(name, data) {
if (!Cat.listeners[name]) return;
for (var i = 0; i < Cat.listeners[name].length; i++) {
if (!Cat.listeners[name][i](data)) return false; // exit early if false is returned
}
return true;
}
Cat.addProject = function() {
let treeView = document.querySelector('cat-tree');
let tabview = document.querySelector('cat-tabview');
let tab = document.createElement('cat-tab');
tab.setAttribute('label', '');
let view = document.createElement('cat-projectview');
view.className = 'project-view';
view.addEventListener('click', function(e) {
//console.log(e);
});
tab.appendChild(view);
let proj = new CatProject();
proj.view = view;
proj.tab = tab;
tab.project = proj;
tabview.appendChild(tab);
Cat.loadedProjects.push(proj);
proj.init();
// FIXME: this is so messy.
view.addEventListener('loaded', evt => {
console.log('setting our title to: ' + proj.getTitle());
proj.tab.setAttribute('label', proj.getTitle());
tab.setAttribute('label', proj.getTitle());
this.focusProject(proj);
Cat.emit('project-loaded', {detail: { proj: proj }});
});
tabview.selectTab(tab);
return proj;
}
Cat.openProject = function() {
dialog.showOpenDialog({
title: "Open Project",
properties: ["openFile", "promptToCreate", "createDirectory"],
filters: [
{name: 'HTML', extensions: ['html', 'htm']}
]
}, function(filenames) {
if (filenames.length == 0) return;
Cat.loadProject(filenames[0]);
ipcRenderer.send('open-file', filenames[0]);
});
}
Cat.loadProject = function(filename) {
let proj = this.addProject();
try {
proj.load(filename, () => {
//let tabView = document.querySelector('cat-tabview');
//tabView.selectTab(proj.tab.control);
//console.log('setting our title to: ' + proj.getTitle());
//proj.tab.setAttribute('label', proj.getTitle());
});
} catch (e) {
console.log(e);
alert('Failed to load ' + filename + ' as a project');
}
}
Cat.saveProject = function(proj=Cat.focusedProject, cb) {
if (!proj) return;
console.dir(proj);
proj.save(proj.path, err => {
if (err) {
alert("Failed to save file");
}
if (cb) cb(err);
});
}
Cat.saveProjectAs = function(proj=Cat.focusedProject, cb) {
if (!proj) return;
dialog.showSaveDialog({}, filename => {
if (!filename) return;
console.dir(proj);
proj.save(filename, err => {
if (err) {
alert("Failed to save file :S");
}
if (cb) cb(err);
});
});
}
Cat.closeProject = function(proj=Cat.focusedProject, force=false) {
if (!proj) return;
if (proj.hasChanges && !force) {
dialog.showMessageBox({
type: "question",
title: "Unsaved changes for Project",
message: "Project has unsaved changes!",
buttons: ["Save", "Save As", "Cancel", "OK"]
}, index => {
const SAVE = 0, SAVE_AS = 1, CANCEL = 2, OK = 3;
if (index == CANCEL) { // cancel
} else if (index == OK) { // ok
this.closeProject(proj, true);
return true;
} else if (index == SAVE && proj.path != '') { // save
this.saveProject(proj, err => {
if (err) return;
this.closeProject(proj);
});
return false;
} else if (index == SAVE_AS || proj.path == '') { // save as
this.saveProjectAs(proj, err => {
if (err) return;
this.closeProject(proj);
});
return false;
}
});
} else {
// TODO: augh, rework this stuff
this.loadedProjects.splice(this.loadedProjects.indexOf(proj), 1);
document.querySelector('#element-selector').clear(false);
document.querySelector('cat-tabview').removeTab(proj.tab.control, true);
return true;
}
}
Cat.focusProject = function(proj, cb) {
if (!proj) {
return;
}
Cat.focusedProject = proj;
Cat.emit('project-focused', proj);
}
Cat.getProjectFromTab = function(tab) {
for (var i = 0; i < this.loadedProjects.length; i++) {
if (this.loadedProjects[i].tab === tab) {
return this.loadedProjects[i];
}
}
return null;
}
Cat.init = function() {
let tabView = document.querySelector('cat-tabview');
Cat.loadModule('elements-view');
tabView.addEventListener('close-tab', evt => {
let proj = this.getProjectFromTab(evt.detail.content);
if (!proj) {
alert('Target tab does not have an associated project! Closing.');
return;
}
if (this.closeProject(proj)) {
evt.preventDefault();
return false;
}
return true;
});
tabView.addEventListener('select-tab', evt => {
this.focusProject(this.getProjectFromTab(evt.detail));
});
tabView.addEventListener('remove-tab', evt => {
var proj = this.getProjectFromTab(evt.detail);
if (!proj) return;
//this.loadedProjects
});
tabView.addEventListener('loaded', evt => {
var proj = this.getProjectFromTab(evt.detail);
if (!proj) return;
console.log('fuuu');
});
Cat.setupControlHooks();
/* set up ipc */
ipcRenderer.on('menu', function(event, item) {
if (item.type == 'new') {
console.log('new');
Cat.addProject();
} else if (item.type == 'open') {
console.log('open');
Cat.openProject();
} else if (item.type == 'save') {
console.log('save');
Cat.saveProject();
} else if (item.type == 'save-as') {
console.log('save-as');
Cat.saveProjectAs();
} else if (item.type == 'close') {
console.log('close');
Cat.closeProject();
}
});
/* load our settings */
settings.has('openProjects') ? settings.get('openProjects').forEach(item => {
}):'';
}
Cat.setupControlHooks = function() {
document.querySelector('cat-ctl-2dtransform').addEventListener('value-change', e => {
console.log(e.detail.type + ': ' + e.detail.value);
});
}
Cat.setSelectorAllAttribute = function(which, attr, value) {
var items = document.querySelectorAll(which);
for (var i = 0; i < items.length; i++) {
items[i].setAttribute(attr, value);
}
}
Cat.modules = [];
Cat.loadModule = function(name) {
if (Cat.modules[name]) return; // already loaded, return
console.log('loading Module: ' + name);
try {
if (Cat.emit('loading-module', {name: name}) === false) return;
Cat.modules[name] = require('./modules/'+name)(Cat);
for (var i in Cat.modules[name].on) {
console.log('adding hook: ' + i);
Cat.on(i, Cat.modules[name].on[i]);
}
if (Cat.modules[name].init) Cat.modules[name].init(document);
Cat.emit('loaded-module', {name: name, module: Cat.modules[name]});
} catch (e) {
alert('Unhandled module loading error: ' + e);
}
}
Cat.unloadModule = function(name) {
if (!Cat.modules[name]) return; // not loaded, return
for (var i in Cat.modules[name].on) {
Cat.removeListener(i, Cat.modules[name].on[i]);
}
// TODO: remove module from require cache
}
module.exports = Cat;

53
classes/CatProject.js 100644
View File

@ -0,0 +1,53 @@
var fs = require('fs');
var os = require('os');
function CatProject() {
this.path = '';
this.title = '';
this.tab = null;
this.view = null;
this.frameTime = 0;
this.originalHTML = '';
this.hasChanges = false;
}
CatProject.prototype.init = function() {
if (this.view) {
this.view.addEventListener('loaded', evt => {
this.setTitle(this.view.getTitle());
console.log('our title is now: ' + this.getTitle());
});
}
}
CatProject.prototype.save = function(path, cb) {
//fs.writeFile(path, (new XMLSerializer().serializeToString(this.iframe.contentDocument))+this.iframe.contentDocument.outerHTML, 'utf-8', (err) => {
fs.writeFile(path, this.view.getContents(), 'utf-8', (err) => {
if (err) throw err;
this.path = path;
cb(err);
});
}
CatProject.prototype.load = function(path, cb) {
if (!path) path = this.path;
this.path = path;
fs.readFile(path, 'utf-8', (err, data) => {
if (err) throw err;
this.originalHTML = data;
this.view.setContents(data);
cb(err);
});
}
CatProject.prototype.setTitle = function(title) {
this.title = title;
}
CatProject.prototype.getTitle = function() {
let title = this.title;
if (title == '') {
title = this.path.split(os.platform() == 'win32' ? '\\' : '/');
title = title[title.length-1];
console.log(title);
}
if (title == '') title = 'New Project';
return title;
}
module.exports = CatProject;

16
elements/cat-basic.html 100644
View File

@ -0,0 +1,16 @@
<cat-template>
MY CONTENT.
</cat-template>
<script>
customElements.define('cat-basic', class extends HTMLElement {
static get observedAttributes() { return []; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
}
connectedCallback() {
}
});
</script>

16
elements/cat-button.html 100644
View File

@ -0,0 +1,16 @@
<cat-template>
MY CONTENT.
</cat-template>
<script>
customElements.define('cat-basic', class extends HTMLElement {
static get observedAttributes() { return []; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
}
connectedCallback() {
}
});
</script>

35
elements/cat-caption.js 100644
View File

@ -0,0 +1,35 @@
class CatCaption extends HTMLElement {
static get observedAttributes() { return ['label']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'label') {
this.changeText(newValue);
}
}
connectedCallback() {
//while (this.firstChild) this.insertBefore(this.firstChild, this.firstChild);
//this.appendChild(this.span);
}
constructor() {
super();
if (this.hasAttribute('label')) {
this.changeText(this.getAttribute('label'));
}
}
changeText(value) {
var match = false;
for (var i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].nodeType == 3) {
this.childNodes[i].nodeValue = value;
match = true;
break;
}
}
if (!match) {
this.appendChild(document.createTextNode(value));
}
}
}
customElements.define('cat-caption', CatCaption);

13
elements/cat-checkbox.js 100644
View File

@ -0,0 +1,13 @@
class Checkbox extends HTMLElement {
static get observedAttributes() { return ['checked']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'checked') {
}
}
constructor() {
super();
}
}
customElements.define('cat-checkbox', Checkbox);

26
elements/cat-control-group.html 100644
View File

@ -0,0 +1,26 @@
<cat-template>
<cat-caption><cat-checkbox><cat-inherits checked='folded'></cat-inherits></cat-checkbox><cat-inherits label='label'></cat-caption>
<cat-box flex="1"><cat-inherits hidden='folded'></cat-inherits>
<cat-children></cat-children>
</cat-box>
</cat-template>
<script>
customElements.define('cat-control-group', class extends HTMLElement {
static get observedAttributes() { return ['label', 'folded']; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
}
connectedCallback() {
this.querySelector('cat-caption').addEventListener('click', e => {
if (this.hasAttribute('folded')) {
this.removeAttribute('folded');
} else {
this.setAttribute('folded', '');
}
});
}
});
</script>

48
elements/cat-control-group.js 100644
View File

@ -0,0 +1,48 @@
customElements.define('cat-control-group', class extends HTMLElement {
static get observedAttributes() { return ['label', 'closed']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'label') {
this.label = newValue;
} else if (attr == 'closed') {
this.closed = newValue === null ? true : false;
}
}
set label(val) { this.caption.setAttribute('label', val); }
get label() { return this.caption.getAttribute('label'); }
set closed(val) { if (val) this.showContent(); else this.hideContent(); }
get closed() { return this.box.style.display === 'none' ? true : false }
connectedCallback() {
while (this.firstChild) this.box.appendChild(this.firstChild);
this.appendChild(this.caption);
this.appendChild(this.box);
}
constructor() {
super();
this.box = document.createElement('cat-box');
this.caption = document.createElement('cat-caption');
this.checkbox = document.createElement('cat-checkbox');
this.caption.appendChild(this.checkbox);
this.caption.addEventListener('click', e => {
if (this.hasAttribute('closed')) {
this.removeAttribute('closed');
} else {
this.setAttribute('closed', '');
}
});
}
hideContent() {
this.box.style.display = 'none';
this.checkbox.setAttribute('checked', true);
}
showContent() {
this.box.style.display = '';
this.checkbox.setAttribute('checked', false);
}
});

29
elements/cat-control-section.html 100644
View File

@ -0,0 +1,29 @@
<cat-template>
<cat-caption><cat-inherits label='label'></cat-inherits></cat-caption>
<cat-hbox>
<cat-children></cat-children>
</cat-hbox>
</cat-template>
<script>
customElements.define('cat-control-section', class extends HTMLElement {
static get observedAttributes() {
return ['label'];
}
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'label') {
this.label = newValue;
} else if (attr == 'closed') {
this.closed = newValue === null ? true : false;
}
}
constructor() {
super();
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
if (this.hasAttribute('label')) {
this.label = this.getAttribute('label');
}
}
connectedCallback() {
}
});
</script>

100
elements/cat-ctl-2dtransform.html 100644
View File

@ -0,0 +1,100 @@
<cat-template>
<cat-control-section label="Translate">
<cat-hbox>
<label for="transform2d-x">X</label>
<cat-input type='number' class='transform2d-x' value=0.000 step=0.010></cat-input>
</cat-hbox>
<cat-hbox>
<label for="transform2d-y">Y</label>
<cat-input type='number' class='transform2d-y' value=0.000 step=0.010></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Scale">
<cat-hbox>
<label for="scale2d-x">X</label>
<cat-input type='number' class='scale2d-x' value=1.000 step=0.010></cat-input>
</cat-hbox>
<cat-hbox>
<label for="scale2d-y">Y</label>
<cat-input type='number' class='scale2d-y' value=1.000 step=0.010></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Skew">
<cat-hbox>
<label for="skew2d-x">X</label>
<cat-input type='number' class='skew2d-x' value=0.000 step=0.010></cat-input>
</cat-hbox>
<cat-hbox>
<label for="skew2d-y">Y</label>
<cat-input type='number' class='skew2d-y' value=0.000 step=0.010></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Rotation">
<cat-hbox>
<label for="rotation2d-x">X</label>
<cat-input type='number' class='rotation2d-x' value=0.000 step=0.010></cat-input>
</cat-hbox>
<cat-hbox>
<label for="rotation2d-y">Y</label>
<cat-input type='number' class='rotation2d-y' value=0.000 step=0.010></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Matrix">
<cat-vbox>
<cat-hbox>
<label>a</label>
<cat-input type='number' class='matrix2d-a' value=0.000 step=0.010></cat-input>
<label>c</label>
<cat-input type='number' class='matrix2d-c' value=0.000 step=0.010></cat-input>
<label>tx</label>
<cat-input type='number' class='matrix2d-tx' value=0.000 step=0.010></cat-input>
</cat-hbox>
<cat-hbox>
<label>b</label>
<cat-input type='number' class='matrix2d-b' value=0.000 step=0.010></cat-input>
<label>d</label>
<cat-input type='number' class='matrix2d-d' value=0.000 step=0.010></cat-input>
<label>ty</label>
<cat-input type='number' class='matrix2d-ty' value=0.000 step=0.010></cat-input>
</cat-hbox>
</cat-vbox>
</cat-control-section>
</cat-template>
<script>
customElements.define('cat-ctl-2dtransform', class extends HTMLElement {
constructor() {
super();
document.currentScript.ownerDocument.getElementsByTagName('cat-template')[0].cloneTo(this);
}
connectedCallback() {
// WTF: the following causes electron's cat-input fields to all behave normally (i.e., mousewheel adjusts value). Without it, mousewheel behavior does not work.
this.querySelector('.transform2d-x').addEventListener('mousewheel', e => { });
// looping is easier
let emitters = [
['.transform2d-x', '2d-transform-x'],
['.transform2d-y', '2d-transform-y'],
['.scale2d-x', '2d-scale-x'],
['.scale2d-y', '2d-scale-y'],
['.skew2d-x', '2d-skew-x'],
['.skew2d-y', '2d-skew-y'],
['.rotation2d-x', '2d-rotation-x'],
['.rotation2d-y', '2d-rotation-y'],
['.matrix2d-a', '2d-matrix-a'],
['.matrix2d-b', '2d-matrix-b'],
['.matrix2d-c', '2d-matrix-c'],
['.matrix2d-d', '2d-matrix-d'],
['.matrix2d-tx', '2d-matrix-tx'],
['.matrix2d-ty', '2d-matrix-ty'],
];
emitters.forEach(e => {
this.querySelector(e[0]).addEventListener('input', ev => {
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
type: e[1],
value: ev.target.value
}}));
});
});
}
});
</script>

64
elements/cat-ctl-animation.html 100644
View File

@ -0,0 +1,64 @@
<cat-template>
<cat-control-section label="Name">
<cat-hbox>
<cat-input class='animation-name'></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Timing Function">
<cat-hbox>
<cat-input class='animation-timing-function' placeholder='linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)'></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Timings">
<cat-hbox>
<label for="animation-duration">Duration</label>
<cat-input class='animation-duration' placeholder='6000ms'></cat-input>
</cat-hbox>
<cat-hbox>
<label for="animation-delay">Delay</label>
<cat-input class='animation-delay' placeholder='500ms'></cat-input>
</cat-hbox>
</cat-control-section>
<cat-control-section label="Playback">
<cat-hbox>
<label for="animation-iteration-count">Iterations</label>
<cat-input type='number' class='animation-iteration-count' value=0 step=1 placeholder='1'></cat-input>
</cat-hbox>
<cat-hbox>
<label for="animation-direction">Direction</label>
<cat-input class='animation-direction' placeholder='normal|reverse|alternate|alternate-reverse'></cat-input>
</cat-hbox>
</cat-control-section>
</cat-template>
<script>
customElements.define('cat-ctl-animation', class extends HTMLElement {
constructor() {
super();
document.currentScript.ownerDocument.getElementsByTagName('cat-template')[0].cloneTo(this);
}
connectedCallback() {
// looping is easier
let inputs = this.querySelectorAll('cat-input');
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('input', ev => {
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
type: inputs[i].className,
value: ev.target.value
}}));
});
}
}
setInput(which, value, shouldEmit) {
let input = this.querySelector('cat-input.'+which);
if (!input) return false;
input.setAttribute('value', value);
if (shouldEmit) {
this.dispatchEvent(new CustomEvent('value-change', {'detail': {
type: which,
value: value
}}));
}
}
});
</script>

75
elements/cat-input.html 100644
View File

@ -0,0 +1,75 @@
<cat-template>
<input>
</cat-template>
<script>
const electron = require('electron')
customElements.define('cat-input', class CatInputElement extends HTMLElement {
static get observedAttributes() {
return [
'class',
'id',
'min',
'max',
'value',
'type',
'style',
'label',
'step',
'placeholder'
];
}
attributeChangedCallback(attr, oldValue, newValue) {
this.querySelector('input').setAttribute(attr, newValue);
}
constructor() {
super();
this.lastMouse = {x: 0, y: 0};
this.deltaMouse = {x: 0, y: 0};
this.boundMouseDown = evt => this.mouseDown(evt);
this.boundMouseUp = evt => this.mouseUp(evt);
this.boundMouseMove = evt => this.mouseMove(evt);
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
}
connectedCallback() {
if (this.getAttribute('type') === 'number') {
this.addEventListener('mousedown', this.boundMouseDown);
}
this.querySelector('input').addEventListener('change', function(e) {
e.target.value = (parseFloat(e.target.value)).toFixed(3);
});
}
mouseDown(e) {
this.lastMouse = electron.screen.getCursorScreenPoint();
if ((e.buttons & 2) == 2) {
window.addEventListener('mouseup', this.boundMouseUp);
this.mouseMoveInterval = setInterval(this.boundMouseMove, 1);
window.addEventListener('mouseout', this.boundMouseOut);
document.querySelector('html').className = 'cursor-col-resize';
}
}
mouseUp(e) {
var currentMouse = electron.screen.getCursorScreenPoint();
this.deltaMouse.x = currentMouse.x - this.lastMouse.x;
this.lastMouse = currentMouse;
if (e.button == 2) {
document.querySelector('html').className = '';
clearInterval(this.mouseMoveInterval);
}
}
mouseMove(e) {
var currentMouse = electron.screen.getCursorScreenPoint();
this.deltaMouse.x = currentMouse.x - this.lastMouse.x;
this.lastMouse = currentMouse;
if (this.deltaMouse.x != 0) this.setValue();
}
setValue() {
let inp = this.querySelector('input');
var delta = this.deltaMouse.x;
inp.value = parseFloat(inp.value) + (delta * (inp.hasAttribute('step') ? parseFloat(inp.getAttribute('step')) : 1));
inp.dispatchEvent(new Event('change', {
bubbles: true,
cancelable: true
}));
}
});
</script>

63
elements/cat-projectview.html 100644
View File

@ -0,0 +1,63 @@
<cat-template>
<iframe></iframe>
</cat-template>
<script>
(function() {
let template = document.currentScript.ownerDocument.querySelector('cat-template');
customElements.define('cat-projectview', class extends HTMLElement {
static get observedAttributes() { return []; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
}
connectedCallback() {
template.cloneTo(this);
}
templatedCallback() {
var iframe = this.querySelector('iframe');
iframe.addEventListener('load', evt => {
iframe.contentDocument.querySelector('body').onclick = evt => {
this.focusedElement = evt.target;
};
iframe.contentDocument.querySelector('body').onmouseover = evt => {
//evt.target.style.border = '2px solid blue';
};
iframe.contentDocument.querySelector('body').onmouseout = evt => {
//evt.target.style.border = '';
};
this.dispatchEvent(new CustomEvent('loaded'));
});
}
focusProject() {
this.dispatchEvent(new CustomEvent('focus-project'));
}
setContents(data) {
this.querySelector('iframe').srcdoc = data;
}
getContents() {
let iframe = this.querySelector('iframe');
return new XMLSerializer().serializeToString(iframe.contentDocument);
}
getTitle() {
let iframe = this.querySelector('iframe');
let head = iframe.contentDocument.querySelector('head');
if (!head) return '';
let title = head.querySelector('title');
if (!title) return '';
return title.innerText;
}
get focusedElement() {
return this._focusedElement;
}
set focusedElement(el) {
if (this._focusedElement) {
this._focusedElement.style.border = '';
}
this._focusedElement = el;
this._focusedElement.style.border = '2px solid green';
this.dispatchEvent(new CustomEvent('selected-element', {detail: el}));
}
});
})()
</script>

40
elements/cat-tab.html 100644
View File

@ -0,0 +1,40 @@
<cat-template>
<cat-children></cat-children>
</cat-template>
<script>
(function() {
let template = document.currentScript.ownerDocument.querySelector('cat-template');
customElements.define('cat-tab', class extends HTMLElement {
static get observedAttributes() { return ['label']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'label') {
if (this.control) {
this.control.setAttribute('label', newValue);
}
}
this[attr] = newValue;
}
constructor() {
super();
this.isAttached = false;
}
connectedCallback() {
template.cloneTo(this);
this.isAttached = true;
}
associateControl(node) {
this.control = node;
}
close() {
if (!this.isAttached) return;
this.parentNode.removeChild(this);
this.isAttached = false;
if (this.control) {
this.control.close();
}
}
});
})()
</script>

56
elements/cat-tabview-select.html 100644
View File

@ -0,0 +1,56 @@
<cat-template>
<cat-caption><cat-inherits label='label'></cat-inherits></cat-caption>
</cat-template>
<script>
(function() {
let template = document.currentScript.ownerDocument.querySelector('cat-template');
customElements.define('cat-tabview-select', class extends HTMLElement {
static get observedAttributes() { return ['label', 'closeable']; }
attributeChangedCallback(attr, oldValue, newValue) {
console.log(attr);
this[attr] = newValue;
if (attr == 'closeable') {
if (!newValue) {
this.removeChild(this.querySelector('button.click'));
} else {
var btn = document.createElement('button');
btn.className = 'close';
this.appendChild(btn);
btn.addEventListener('click', evt => this.closeHandler(evt));
}
}
}
constructor() {
super();
this.isAttached = false;
}
connectedCallback() {
template.cloneTo(this);
this.addEventListener('click', evt => this.clickHandler(evt));
if (this.getAttribute('closeable')) {
}
this.isAttached = true;
}
clickHandler(e) {
this.dispatchEvent(new CustomEvent('select', {'detail': this}));
e.preventDefault();
}
closeHandler(e) {
this.dispatchEvent(new CustomEvent('close', {'detail': this}));
e.preventDefault();
}
associateContent(node) {
this.content = node;
}
close() {
if (!this.isAttached) return;
this.parentNode.removeChild(this);
this.isAttached = false;
if (this.content) {
this.content.close();
}
}
});
})()
</script>

103
elements/cat-tabview.html 100644
View File

@ -0,0 +1,103 @@
<cat-template>
<cat-tabview-selects><cat-inherits closeable='closeable'></cat-inherits></cat-tabview-selects>
<cat-tabview-tabs></cat-tabview-tabs>
</cat-template>
<script>
(function() {
let template = document.currentScript.ownerDocument.querySelector('cat-template');
customElements.define('cat-tabview', class extends HTMLElement {
static get observedAttributes() { return ['label', 'selected', 'closeable']; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
template.cloneTo(this);
}
connectedCallback() {
new MutationObserver(e => {
for (var i = 0; i < e[0].addedNodes.length; i++) {
var node = e[0].addedNodes[i];
if (node.tagName === 'CAT-TAB') {
this.addTab(node);
} else {
// INTO THE ETHER WITH YOU
this.removeChild(node);
}
}
}).observe(this, { childList: true });
for (var i = this.children.length-1; i >= 0; i--) {
if (this.children[i].tagName === 'CAT-TAB') {
this.addTab(this.children[i]);
}
}
}
addTab(node) {
//console.dir(tab);
let tab = document.createElement('cat-tabview-select');
this.querySelector('cat-tabview-selects').appendChild(tab);
if (this.hasAttribute('closeable')) tab.setAttribute('closeable', this.getAttribute('closeable'));
tab.setAttribute('label', node.getAttribute('label'));
tab.associateContent(node);
tab.addEventListener('select', e => this.selectTab(e.detail) );
tab.addEventListener('close', e => this.removeTab(e.detail) );
this.querySelector('cat-tabview-tabs').appendChild(node);
node.associateControl(tab);
node.setAttribute('hidden', '');
if (!this.selectedTab) {
this.selectTab(tab);
}
}
removeTab(node, forceRemove) {
if (!node) return false;
let selects = this.querySelector('cat-tabview-selects');
let tabs = this.querySelector('cat-tabview-tabs');
for (var i = 0; i < selects.children.length; i++) {
if (selects.children[i] === node) {
// do not remove if a listener has prevented it.
if (!forceRemove && !this.dispatchEvent(new CustomEvent('close-tab', {detail: node, cancelable: true}))) {
return false;
}
selects.removeChild(selects.children[i]);
for (var j = 0; j < tabs.children.length; j++) {
if (tabs.children[j].control === node) {
var tab = tabs.children[j];
tabs.removeChild(tab);
this.dispatchEvent(new CustomEvent('remove-tab', {detail: tab}));
break;
}
}
this.selectTab(selects.children[i] ? selects.children[i] : selects.children[i-1]);
return true;
break;
}
}
return false;
}
selectTab(node) {
var selects = this.querySelector('cat-tabview-selects');
var tabs = this.querySelector('cat-tabview-tabs');
for (var i = 0; i < selects.children.length; i++) {
if (selects.children[i] === node) {
for (var j = 0; j < tabs.children.length; j++) {
if (tabs.children[j].control === node) {
tabs.children[j].removeAttribute('hidden');
this.selectedTab = tabs.children[j];
this.selectedTab.control.classList.add('selected');
this.selectedTabIndex = j;
} else {
tabs.children[j].setAttribute('hidden', '');
tabs.children[j].control.classList.remove('selected');
}
}
this.dispatchEvent(new CustomEvent('select-tab', {detail: this.selectedTab}));
return true;
}
}
this.selectedTab = null;
this.selectedTabIndex = -1;
this.dispatchEvent(new CustomEvent('select-tab', {detail: null}));
return false;
}
});
})()
</script>

50
elements/cat-template.html 100644
View File

@ -0,0 +1,50 @@
<template id='cat-control-group2'>
<link rel='stylesheet' href='main.css'>
<cat-caption><cat-checkbox></cat-checkbox></cat-caption>
<cat-container></cat-container>
</template>
<script>
(function() {
let doc = document.currentScript.ownerDocument;
customElements.define('cat-control-group2', class extends HTMLElement {
static get observedAttributes() { return ['label', 'closed']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (!this.content) return;
console.log('man...');
if (attr == 'label') {
this.dom.querySelector('cat-caption').setAttribute('label', this.getAttribute('label'));
} else if (attr == 'closed') {
var container = this.dom.querySelector('cat-container');
console.log(container);
/*if (container.style.display === 'none') {
this.dom.querySelector('cat-container').style.display = '';
} else {
this.dom.querySelector('cat-container').style.display = 'none';
}*/
}
}
set closed(val) {
this.setAttribute('closed', val);
}
constructor() {
super();
}
connectedCallback() {
var $ = this;
this.attachShadow({ mode: 'open' });
const template = doc.querySelector('#cat-control-group2');
this.dom = template.content.cloneNode(true);
this.dom.querySelector('cat-caption').setAttribute('label', this.getAttribute('label'));
this.dom.querySelector('cat-caption').addEventListener('click', e => {
//$.closed = true;
console.log('blep');
});
this.shadowRoot.appendChild(this.dom);
}
});
})()
</script>

53
elements/cat-template.js 100644
View File

@ -0,0 +1,53 @@
customElements.define('cat-template', class extends HTMLElement {
constructor() {
super();
}
cloneTo(target) {
if (target.hasTemplated) return;
target.hasTemplated = true;
const dom = this.cloneNode(true);
// oh boy, weird value inheritance code.
var inherits = dom.getElementsByTagName('cat-inherits');
while (inherits.length > 0) {
var item = inherits[0];
var parent = item.parentNode;
if (!parent) continue;
for (var j = 0; j < item.attributes.length; j++) {
var prop = item.attributes[j];
(function(target, descriptor, parent, name, value) {
Object.defineProperty(target, value, {
configurable: true,
set: function(val) {
if (descriptor && descriptor.set) descriptor.set(val);
if (name === 'content') {
parent.innerHTML = val;
} else {
if (val === null) {
parent.removeAttribute(name);
} else {
parent.setAttribute(name, val);
}
}
}
})
})(target, Object.getOwnPropertyDescriptor(target, prop.value), parent, prop.name, prop.value);
}
inherits[0].remove();
}
// end the gross stuff
// begin other weird stuff of moving childs
var childrenNode = dom.getElementsByTagName('cat-children')[0];
if (childrenNode) {
while (target.firstChild) childrenNode.parentNode.appendChild(target.firstChild);
childrenNode.parentNode.removeChild(childrenNode);
}
// copy our template clone to our target
while (dom.firstChild) target.appendChild(dom.firstChild);
// finally copy our template's attributes over
for (var i = 0; i < dom.attributes.length; i++) {
target.setAttribute(dom.attributes[i].name, dom.attributes[i].value);
}
//
if (target.templatedCallback) target.templatedCallback();
}
});

16
elements/cat-test.html 100644
View File

@ -0,0 +1,16 @@
<cat-template>
<input type='name'>
<input type='password'>
</cat-template>
<script>
let doc = document.currentScript.ownerDocument;
customElements.define('cat-test', class extends HTMLElement {
constructor() {
super();
doc.getElementsByTagName('cat-template')[0].cloneTo(this);
}
connectedCallback() {
}
});
</script>

16
elements/cat-timeline.html 100644
View File

@ -0,0 +1,16 @@
<cat-template>
MY CONTENT.
</cat-template>
<script>
customElements.define('cat-basic', class extends HTMLElement {
static get observedAttributes() { return []; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
}
connectedCallback() {
}
});
</script>

290
elements/cat-tree.html 100644
View File

@ -0,0 +1,290 @@
<cat-template>
<cat-tree-cell><cat-checkbox><cat-inherits checked=folded></cat-inherits></cat-checkbox></cat-tree-cell>
<cat-children></cat-children>
</cat-template>
<script>
/*
<a-tree>
<a-structure>
<a-cell> Name </a-cell>
<a-cell> Data </a-cell>
</a-structure>
<a-row>
<a-cell> Things </a-cell>
<a-cell> Woo </a-cell>
<a-row>
<a-cell> Things 2 </a-cell>
<a-cell> Woo 2 </a-cell>
<a-row>
</a-row>
</a-tree>
*/
customElements.define('cat-tree', class extends HTMLElement {
static get observedAttributes() { return []; }
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
constructor() {
super();
}
connectedCallback() {
//
var rows = this.querySelectorAll('cat-tree-row');
// Set the depth attribute of each row.
for (var i = 0; i < rows.length; i++) {
if (!rows[i].hasAttribute('depth')) {
var depth = 0;
var parent = rows[i].parentNode;
while (parent && parent.tagName !== 'CAT-TREE') {
depth++;
parent = parent.parentNode;
}
rows[i].setAttribute('depth', depth);
}
}
// Move all declared rows to be as direct children to the tree.
for (var i = 0; i < rows.length; i++) {
this.appendChild(rows[i]);
}
// Set up observer for added rows
new MutationObserver(e => {
for (var i = 0; i < e[0].addedNodes.length; i++) {
var node = e[0].addedNodes[i];
if (node.tagName === 'CAT-TREE-ROW') {
if (!node.hasAttribute('depth')) node.setAttribute('depth', 0);
}
}
}).observe(this, { childList: true });
}
cloneDomToRows(el, properties=[]) {
this.properties = properties;
// Remove old children
this.clear(true);
//
var head = document.createElement('cat-tree-head');
// folding
head.appendChild(document.createElement('cat-tree-cell'));
for (let i = 0; i < properties.length; i++) {
var cell = document.createElement('cat-tree-cell');
cell.innerHTML = properties[i];
head.appendChild(cell);
}
this.appendChild(head);
// Iterate over the target dom and create rows for each element
for (let i = 0; i < el.children.length; i++) {
var row = document.createElement('cat-tree-row');
this.appendChild(row);
row.targetNode = el.children[i];
row.cloneDomToRows(el.children[i], properties);
}
this.flattenRows();
this.setupRowCallbacks();
}
flattenRows() {
let rows = this.querySelectorAll('cat-tree-row');
var last = null;
var rowlist = [];
for (let i = 0; i < rows.length; i++) {
rows[i].setAttribute('depth', rows[i].getDepth());
rowlist.push(rows[i]);
}
for (let i = 0; i < rowlist.length; i++) {
this.appendChild(rowlist[i]);
}
}
setupRowCallbacks() {
let rows = this.querySelectorAll('cat-tree-row');
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
rows[i].addEventListener('click', e => {
this.dispatchEvent(new CustomEvent('click-row', { detail: row }));
this.selectedRow = row;
}, false);
rows[i].addEventListener('contextmenu', e => {
this.dispatchEvent(new CustomEvent('contextmenu-row', { detail: row }));
}, false);
}
}
getMatchingRow(el) {
let rows = this.querySelectorAll('cat-tree-row');
for (let i = 0; i < rows.length; i++) {
if (rows[i].targetNode === el) return rows[i];
}
}
removeRow(row) {
if (row.getFirstChild()) {
this.removeRow(row.getFirstChild());
}
this.dispatchEvent(new CustomEvent('remove-row', { detail: {row: row }}));
this.removeChild(row);
if (this.selectedRow === row) this.selectedRow = null;
}
addRow(pos) {
/*var row = document.createElement('cat-tree-row');
this.appendChild(row);
for (var p = 0; p < this.properties.length; p++) {
var cell = document.createElement('cat-tree-cell');
this.appendChild(cell);
}
return row;*/
}
clear(removeHead=false) {
if (removeHead) {
while (this.firstChild) this.removeChild(this.firstChild);
} else {
for (var i = 0; i < this.children.length; i++) {
if (this.children[i].tagName === 'CAT-TREE-HEAD') continue;
this.removeChild(this.children[i]);
i--;
}
}
}
get selectedRow() {
return this._selectedRow;
}
set selectedRow(row) {
if (this._selectedRow) {
this._selectedRow.removeAttribute('selected');
}
this._selectedRow = row;
if (row) {
this._selectedRow.setAttribute('selected', '');
}
this.dispatchEvent(new CustomEvent('selected-row', { detail: row }));
}
});
customElements.define('cat-tree-head', class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
}
});
(function() {
let template = document.currentScript.ownerDocument.querySelector('cat-template');
customElements.define('cat-tree-row', class extends HTMLElement {
static get observedAttributes() { return ['depth', 'folded', 'selected']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'depth') this.depth = parseInt(newValue);
else if (attr == 'folded') this.folded = newValue;
}
constructor() {
super();
this.depth = 0;
}
connectedCallback() {
template.cloneTo(this);
}
templatedCallback() {
if (this.getFirstChild()) {
this.enableFoldButton();
} else {
this.disableFoldButton();
}
this.querySelector('cat-checkbox').addEventListener('click', e => {
if (this.hasAttribute('folded')) {
this.unfold();
} else {
this.fold();
}
e.preventDefault();
e.stopPropagation();
}, true);
/*new MutationObserver(e => {
console.log('wow');
for (var i = 0; i < e[0].addedNodes.length; i++) {
var node = e[0].addedNodes[i];
console.log(node.tagName);
if (node.tagName === 'CAT-TREE-ROW') {
this.enableFoldButton();
node.setAttribute('depth', this.depth+1);
/*let parent = this.parentNode;
while (parent && parent.tagName !== 'CAT-TREE') {
parent = parent.parentNode;
}
parent.insertBefore(node, this.getToLastSibling());
}
}
}).observe(this, { childList: true });*/
}
enableFoldButton() {
this.querySelector('cat-checkbox').removeAttribute('hidden');
}
disableFoldButton() {
this.querySelector('cat-checkbox').setAttribute('hidden', '');
}
fold() {
let next = this.nextSibling;
while (next && next.depth >= this.depth) {
next.setAttribute('hidden', '');
next = next.nextSibling;
}
this.setAttribute('folded', '');
}
unfold() {
let next = this.nextSibling;
while (next && next.depth >= this.depth) {
next.removeAttribute('hidden');
next = next.nextSibling;
}
this.removeAttribute('folded');
}
getToLastSibling() {
let next = this.nextSibling;
while (next && next.depth >= this.depth) {
next = next.nextSibling;
}
return next;
}
getFirstChild() {
if (this.nextSibling && parseInt(this.nextSibling.getAttribute('depth')) > this.depth) {
return this.nextSibling;
}
return null;
}
getLastChild() {
var first = this.getFirstChild();
if (!first) return null;
return first.getToLastSibling();
}
getDepth() {
var depth = 0;
var parent = this.parentNode;
while (parent && parent.tagName !== 'CAT-TREE') {
depth++;
parent = parent.parentNode;
}
return depth;
}
cloneDomToRows(el, properties=[]) {
this.targetNode = el;
for (var p = 0; p < properties.length; p++) {
var cell = document.createElement('cat-tree-cell');
if (properties[p] === 'tagName') {
cell.innerHTML = el.tagName.toLowerCase();
} else {
cell.innerHTML = el.getAttribute(properties[p]);
}
this.appendChild(cell);
}
for (let i = 0; i < el.children.length; i++) {
let row = document.createElement('cat-tree-row');
this.addRow(row);
row.cloneDomToRows(el.children[i], properties);
}
}
addRow(row) {
this.enableFoldButton();
row.setAttribute('depth', this.depth+1);
this.appendChild(row);
}
});
customElements.define('cat-tree-cell', class extends HTMLElement {
constructor() {
super();
}
});
})();
</script>

12
elements/cat-vbox.html 100644
View File

@ -0,0 +1,12 @@
<script>
customElements.define('cat-vbox', class extends HTMLElement {
constructor() {
super();
if (this.hasAttribute('flex')) {
this.style.flex = this.getAttribute('flex');
}
}
connectedCallback() {
}
});
</script>

BIN
fonts/HammersmithOne/HammersmithOne-Regular.ttf 100644
View File

Binary file not shown.

93
fonts/HammersmithOne/OFL.txt 100644
View File

@ -0,0 +1,93 @@
Copyright (c) 2011 by Sorkin Type Co (www.sorkintype.com),
with Reserved Font Name "Hammersmith".
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
fonts/Nunito_Sans/NunitoSans-Black.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-BlackItalic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-Bold.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-BoldItalic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-ExtraBold.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-ExtraBoldItalic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-ExtraLight.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-ExtraLightItalic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-Italic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-Light.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-LightItalic.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-Regular.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-SemiBold.ttf 100644
View File

Binary file not shown.

BIN
fonts/Nunito_Sans/NunitoSans-SemiBoldItalic.ttf 100644
View File

Binary file not shown.

92
fonts/Nunito_Sans/OFL.txt 100644
View File

@ -0,0 +1,92 @@
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
images/icon_arrows.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 B

BIN
images/icon_buttons.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 B

314
main.css 100644
View File

@ -0,0 +1,314 @@
@font-face {
font-family: Nunito Sans;
src: url('fonts/Nunito_Sans/NunitoSans-Regular.ttf');
}
@font-face {
font-family: Nunito Sans;
src: url('fonts/Nunito_Sans/NunitoSans-Bold.ttf');
font-weight: bold;
}
@font-face {
font-family: Hammersmith One;
src: url('fonts/HammersmithOne/HammersmithOne-Regular.ttf');
}
:root {
--main-font-size: 16px;
--display-font-family: Hammersmith One;
--text-font-family: Nunito Sans;
--main-background: #444;
--main-color: #dcdcdc;
--caption-font-size: 75%;
--sub-background: #333;
--sub-color: #ccc;
--section-font-size: 80%;
--section-color: #bbb;
--section-background: linear-gradient(to bottom, #1c1c1c 75%, #2c2c2c 100%);
--section-border-bottom: 1px solid #4c4c4c;
--section-border-top: 1px solid #0c0c0c;
--section-border-left: 1px solid #2c2c2c;
--section-border-right: 1px solid #3c3c3c;
--input-background: #111;
--input-color: #aaa;
--input-placeholder-color: #666;
--input-font-size: 75%;
--input-border: 1px solid #000;
--input-border-radius: 2px;
--button-background: #444;
--button-color: #ccc;
--button-border-left: 1px solid #4c4c4c;
--button-border-right: 1px solid #0c0c0c;
--button-border-bottom: 1px solid #2c2c2c;
--button-border-top: 1px solid #3c3c3c;
--selected-background: #8AD;
--selected-color: #153;
--default-transition: 0.1s all;
}
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: #111;
border-radius: 2px;
box-shadow: inset 0 0 1px 1px #000;
}
*::-webkit-scrollbar-thumb {
background: #333;
border-radius: 2px;
box-shadow: inset 1px 1px 1px 0 #444;
}
html, body {
width: 100%; height: 100%;
margin: 0; padding: 0;
font-family: var(--text-font-family);
font-size: var(--main-font-size);
background: var(--main-background);
color: var(--main-color);
}
* {
box-sizing: border-box;
}
/* When any element has a display set, the hidden flag doesn't apply unless the following is provided. */
*[hidden] {
display: none;
}
.cursor-col-resize, .cursor-col-resize * { cursor: col-resize !important; }
body {
display: flex;
align-items: stretch;
align-content: stretch;
}
cat-vbox, cat-hbox {
position: relative;
display: flex;
align-items: stretch;
align-content: stretch;
flex: 1;
}
cat-vbox {
flex-direction: column;
}
cat-hbox {
flex-direction: row;
}
cat-splitter {
position: absolute;
top: 0;
width: 8px;
border: 2px solid green;
}
cat-vbox > cat-splitter {
top: 50%;
right: 0;
}
cat-hbox > cat-splitter {
top: 50%;
right: 0;
}
cat-gripper {
position: relative;
display: block;
padding: 0; margin: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVQImWNgYGD4r6Oj85+BGIBdJQDN6AUFzuZQgQAAAABJRU5ErkJggg==) repeat;
}
cat-caption {
width: 100%;
display: block;
font-family: var(--display-font-family);
font-size: var(--caption-font-size);
vertical-align: middle;
padding: 0.25em;
user-select: none;
}
cat-checkbox {
display: inline-block;
background-image: url('images/icon_arrows.png');
background-position: -16px 0;
background-repeat: no-repeat;
background-color: transparent;
width: 16px; height: 16px;
border: 0; padding: 0; margin:0;
margin-right: 0.25em;
}
cat-checkbox[checked] {
background-position: 0 0;
}
cat-control-group > cat-caption {
display: flex;
cursor: pointer;
background: linear-gradient(to bottom, #4c4c4c 75%, #3c3c3c 100%);
border-top: 1px solid #6c6c6c;
border-bottom: 1px solid #1c1c1c;
}
cat-control-group {
background: var(--sub-background);
color: var(--sub-color);
}
cat-control-group > cat-box {
display: flex;
padding: 0.25em 0.5em 0.5em 0.5em;
}
cat-control-section {
}
cat-control-section label {
font-size: 75%;
margin: 0.25em 0.5em 0.25em 1.0em;
display: flex;
align-items: center;
position: relative;
}
cat-control-section input {
background: var(--input-background);
color: var(--input-color);
font-size: var(--input-font-size);
border: var(--input-border);
border-radius: var(--input-border-radius);
margin: 0.25em;
padding: 0.25em 0.5em;
flex: 1 0 4em;
width: 100%;
min-width: 5em; /* yo ho, this be required to prevent too much shrinkage! */
transition: var(--default-transition);
}
cat-control-section input[type=number] {
}
/* */
.section-heading {
font-size: var(--section-font-size);
background: var(--section-background);
color: var(--section-color);
border-left: var(--section-border-left);
border-right: var(--section-border-right);
border-top: var(--section-border-top);
border-bottom: var(--section-border-bottom);
padding: 0.25em;
}
cat-tabview {
display: flex;
flex: 1;
flex-direction: column;
}
cat-tabview-selects {
display: flex;
flex-direction: row;
height: 1.5em;
}
cat-tabview-select {
display: flex;
flex: 0 1 6em;
background: linear-gradient(to bottom, #3c3c3c 75%, #2c2c2c 100%);
border-top: 1px solid #6c6c6c;
border-bottom: 1px solid #1c1c1c;
overflow: hidden;
}
cat-tabview-select:hover {
cursor: pointer;
}
cat-tabview-tabs {
display: flex;
flex: 1;
}
cat-tab {
display: flex;
flex: 1;
}
cat-tab > iframe {
flex: 1;
}
cat-tabview-select.selected cat-caption {
background: #555;
}
/* */
button {
min-width: 1em;
min-height: 1em;
border-left: var(--button-border-left);
border-right: var(--button-border-right);
border-top: var(--button-border-top);
border-bottom: var(--button-border-bottom);
color: var(--button-color);
background: var(--button-background);
}
button:hover {
cursor: pointer;
}
button.close {
content: 'x';
}
/* */
#view {
background-color: black;
}
#view > cat-tabs {
padding: 1em;
background: var(--main-background);
}
.project-view {
flex: 1;
}
cat-projectview {
display: flex;
}
cat-projectview iframe {
flex: 1;
}
/* */
cat-input {
flex: 1;
}
/* */
cat-tree {
display: table;
width: 100%;
}
cat-tree-head {
display: table-row;
}
cat-tree-row {
display: table-row;
transition: var(--default-transition);
}
cat-tree-row[selected] {
background: var(--selected-background);
color: var(--selected-color);
}
cat-tree-cell {
display: table-cell;
}
cat-tree-row[depth="1"] cat-tree-cell:first-child {
padding-left: 0.5em;
}
cat-tree-row[depth="2"] cat-tree-cell:first-child {
padding-left: 1em;
}
cat-tree-row[depth="3"] cat-tree-cell:first-child {
padding-left: 1.5em;
}
cat-tree-row[depth="4"] cat-tree-cell:first-child {
padding-left: 2em;
}
cat-tree-row[depth="5"] cat-tree-cell:first-child {
padding-left: 2.5em;
}

93
main.html 100644
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cat X</title>
<link rel="stylesheet" href="main.css">
<script type='text/javascript' src='elements/cat-caption.js'></script>
<script type='text/javascript' src='elements/cat-checkbox.js'></script>
<script type='text/javascript' src='elements/cat-template.js'></script>
<script type='text/javascript' src='renderer.js'></script>
<link rel="import" href="elements/cat-tab.html">
<link rel="import" href="elements/cat-tabview-select.html">
<link rel="import" href="elements/cat-vbox.html">
<link rel="import" href="elements/cat-test.html">
<link rel="import" href="elements/cat-ctl-2dtransform.html">
<link rel="import" href="elements/cat-ctl-animation.html">
<link rel="import" href="elements/cat-control-section.html">
<link rel="import" href="elements/cat-control-group.html">
<link rel="import" href="elements/cat-input.html">
<link rel="import" href="elements/cat-tabview.html">
<link rel="import" href="elements/cat-projectview.html">
<link rel="import" href="elements/cat-tree.html">
</head>
<body>
<cat-vbox id="controls" style="flex: 1;">
<cat-caption class="section-heading" label="Frame Controls"></cat-caption>
<cat-vbox style="overflow-y: auto; height: 100%;">
<cat-control-group label="Element Properties" folded>
</cat-control-group>
<cat-control-group label="Attached Animation Settings" folded>
<cat-ctl-animation></cat-ctl-animation>
</cat-control-group>
<cat-control-group label="General" folded>
</cat-control-group>
<cat-control-group label="Size and Position" folded>
<ctl-sizepos/>
</cat-control-group>
<cat-control-group label="Transform" folded>
<ctl-transform/>
</cat-control-group>
<cat-control-group label="2D Transform">
<cat-ctl-2dtransform></cat-ctl-2dtransform>
</cat-control-group>
<cat-control-group label="3D Transform" folded>
</cat-control-group>
<cat-control-group label="Image" folded>
</cat-control-group>
<cat-control-group label="Output" folded>
</cat-control-group>
</cat-vbox>
</cat-vbox>
<cat-vbox style="flex:4" class="panelbox">
<cat-hbox style="flex:3">
<cat-vbox id="view" style="flex:4">
<cat-caption class="section-heading" label="Projects"></cat-caption>
<cat-tabview closeable='true'>
</cat-tabview>
<!-- TAB BOX -->
</cat-vbox>
<cat-vbox style="flex:1" id="elements">
<cat-vbox style="flex:1">
<cat-caption class="section-heading" label="Elements"></cat-caption>
<cat-tree id="element-selector">
</cat-tree>
</cat-vbox>
<cat-vbox style="flex:1">
<cat-caption class="section-heading" label="Animations"></cat-caption>
<cat-tree id="animation-selector">
</cat-tree>
</cat-vbox>
</cat-vbox>
</cat-hbox>
<cat-gripper/>
<cat-hbox style="flex:1" id="timeline">
<cat-caption class="section-heading" label="Timeline"></cat-caption>
</cat-hbox>
<cat-box id="controls">
<button class="fwd">begin</button>
<button class="fwd">prev-keyframe</button>
<button class="fwd">rev-step</button>
<button class="pause">pause/play</button>
<button class="fwd">fwd-step</button>
<button class="rev-keyframe">next-keyframe</button>
<button class="fwd-keyframe">end</button>
</cat-box>
</cat-vbox>
</body>
<script>
// You can also require other files to run in this process
//require('./renderer.js')
window.addEventListener('load', e => Cat.init());
</script>
</html>

184
main.js 100644
View File

@ -0,0 +1,184 @@
const electron = require('electron')
const ipcMain = require('electron').ipcMain;
const settings = require('electron-settings');
// Module to control application life.
const app = electron.app
const Menu = electron.Menu
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the main menu.
createMenu()
// Create the browser window.
mainWindow = new BrowserWindow({backgroundColor: '#2e2c29', title: 'Cat', width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
// Here begins the menu stuff
function createMenu() {
const template = [
{
label: 'File',
submenu: [
{label: 'New', accelerator: 'CmdOrCtrl+N', click() {
mainWindow.webContents.send('menu', {type: 'new'});
}},
{label: 'Open', accelerator: 'CmdOrCtrl+O', click() {
mainWindow.webContents.send('menu', {type: 'open'});
}},
{label: 'Open Recent', submenu: [
{label: 'A file'}
]},
{type: 'separator'},
{label: 'Save', accelerator: 'CmdOrCtrl+S', click() {
mainWindow.webContents.send('menu', {type: 'save'});
}},
{label: 'Save As', accelerator: 'Shift+CmdOrCtrl+S', click() {
mainWindow.webContents.send('menu', {type: 'save-as'});
}},
{type: 'separator'},
{role: 'quit'}
]
},
{
label: 'Edit',
submenu: [
{role: 'undo'},
{role: 'redo'},
{type: 'separator'},
{role: 'cut'},
{role: 'copy'},
{role: 'paste'},
{role: 'pasteandmatchstyle'},
{role: 'delete'},
{role: 'selectall'}
]
},
{
label: 'View',
submenu: [
{role: 'reload'},
{role: 'forcereload'},
{role: 'toggledevtools'},
{type: 'separator'},
{role: 'resetzoom'},
{role: 'zoomin'},
{role: 'zoomout'},
{type: 'separator'},
{role: 'togglefullscreen'}
]
},
{
role: 'window',
submenu: [
{role: 'minimize'},
{label: 'Close', accelerator: 'CmdOrCtrl+W', click() {
mainWindow.webContents.send('menu', {type: 'close'});
}}
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click () { require('electron').shell.openExternal('https://electron.atom.io') }
}
]
}
]
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{role: 'about'},
{type: 'separator'},
{role: 'services', submenu: []},
{type: 'separator'},
{role: 'hide'},
{role: 'hideothers'},
{role: 'unhide'},
{type: 'separator'},
{role: 'quit'}
]
})
// Edit menu
template[1].submenu.push(
{type: 'separator'},
{
label: 'Speech',
submenu: [
{role: 'startspeaking'},
{role: 'stopspeaking'}
]
}
)
// Window menu
template[3].submenu = [
{role: 'close'},
{role: 'minimize'},
{role: 'zoom'},
{type: 'separator'},
{role: 'front'}
]
}
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
ipcMain.on('open-file', (evt, arg) => {
});
}

31
modules/animations-view.js 100644
View File

@ -0,0 +1,31 @@
const {remote} = require('electron');
const {dialog,Menu,MenuItem} = remote;
module.exports = function(Cat) {
return {
init: function(dom) {
let animationsTree = document.querySelector('#animations-tree');
animationsTree.addEventListener('click-row', evt => {
// TODO: select animation to edit/view ???
});
// Add a right-click handler to the parent node which *should* be a vbox
animationsTree.parentNode.addEventListener('contextmenu', evt => {
const treeMenu = new Menu();
treeMenu.append(new MenuItem({type: 'separator'}));
treeMenu.append(new MenuItem({label: 'Delete', enabled: (target ? true : false), click() {
treeView.removeRow(target);
}}));
treeMenu.popup({async: true});
});
// Add a remove-row handler for obvious reasons.
animationsTree.addEventListener('remove-row', evt => {
});
},
on: {
// Add hook for when a project is focused, we rebuild the animations tree to correspond to the target DOM. In the future we could cache this DOM tree.
'project-focused': e => {
let animationsTree = document.querySelector('#animations-tree');
}
}
}
};

60
modules/elements-view.js 100644
View File

@ -0,0 +1,60 @@
const {remote} = require('electron');
const {dialog,Menu,MenuItem} = remote;
module.exports = function(Cat) {
return {
init: function(dom) {
let treeView = document.querySelector('#element-selector');
treeView.addEventListener('click-row', evt => {
if (!evt.detail.targetNode) return;
Cat.focusedProject.view.focusedElement = evt.detail.targetNode;
});
treeView.parentNode.addEventListener('contextmenu', evt => {
var target = evt.target;
if (target.tagName === 'CAT-TREE-CELL') {
target = target.parentNode;
}
const treeMenu = new Menu();
if (target !== null && target !== undefined && target === treeView.selectedRow) {
treeMenu.append(new MenuItem({label: 'Insert Element Before', enabled: (Cat.focusedProject ? true : false), click() {
}}));
treeMenu.append(new MenuItem({label: 'Insert Element Into', enabled: (Cat.focusedProject ? true : false), click() {
}}));
treeMenu.append(new MenuItem({label: 'Insert Element After', enabled: (Cat.focusedProject ? true : false), click() {
}}));
} else {
treeMenu.append(new MenuItem({label: 'Insert Element', enabled: (Cat.focusedProject ? true : false), click() {
}}));
}
if (target.tagName !== 'CAT-TREE-ROW') {
target = treeView.selectedRow;
}
treeMenu.append(new MenuItem({type: 'separator'}));
treeMenu.append(new MenuItem({label: 'Delete', enabled: (target ? true : false), click() {
treeView.removeRow(target);
}}));
treeMenu.popup({async: true});
});
treeView.addEventListener('remove-row', evt => {
console.log(evt.detail.row);
if (evt.detail.row.targetNode && evt.detail.row.targetNode.parentNode) evt.detail.row.targetNode.parentNode.removeChild(evt.detail.row.targetNode);
});
},
on: {
// Add hook for when an element is selected on the project view, we select the given row in our elements tree
'project-loaded': e => {
e.detail.proj.view.addEventListener('selected-element', evt => {
var el = this.elementsView.getMatchingRow(evt.detail);
if (el) this.elementsView.selectedRow = el;
});
},
// Add hook for when a project is focused, we rebuild the elements tree to correspond to the target DOM
'project-focused': e => {
this.elementsView = document.querySelector('#element-selector');
this.elementsView.cloneDomToRows(Cat.focusedProject.view.querySelector('iframe').contentDocument.querySelector('body'), ["tagName", "class", "id"]);
}
}
}
};

1329
package-lock.json generated 100644
View File

File diff suppressed because it is too large Load Diff

19
package.json 100644
View File

@ -0,0 +1,19 @@
{
"name": "cat",
"version": "0.0.0",
"description": "CSS3 Animation Tool",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "",
"keywords": [],
"author": "kts of kettek",
"license": "",
"devDependencies": {
"electron": "~1.6.11"
},
"dependencies": {
"electron-settings": "^3.1.1"
}
}

10
renderer.js 100644
View File

@ -0,0 +1,10 @@
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
if (process.platform === 'darwin') {
window.globalMouse = require('osx-mouse')();
} else if (process.platform === 'win') {
window.globalMouse = require('win-mouse')();
}
var Cat = require('./Cat');