Rewriting with Riot.js and Babel
Sven Slootweg
8 years ago
parent
ce10940e06
commit
a108735c4b
@ -1,42 +0,0 @@
|
||||
express = require('express');
|
||||
path = require('path');
|
||||
favicon = require('static-favicon');
|
||||
logger = require('morgan');
|
||||
cookieParser = require('cookie-parser');
|
||||
bodyParser = require('body-parser');
|
||||
|
||||
app = express();
|
||||
|
||||
app.set('views', path.join(__dirname, 'views'));
|
||||
app.set('view engine', 'jade');
|
||||
|
||||
app.use(favicon());
|
||||
app.use(logger('dev'));
|
||||
app.use(bodyParser.json());
|
||||
app.use(bodyParser.urlencoded());
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));
|
||||
|
||||
app.use "/", require("./routes/index")
|
||||
app.use "/nodes", require("./routes/nodes")
|
||||
|
||||
app.use (req, res, next) ->
|
||||
err = new Error("Not Found")
|
||||
err.status = 404
|
||||
next(err)
|
||||
|
||||
if app.get("env") == "development"
|
||||
app.use (err, req, res, next) ->
|
||||
res.status(err.status || 500)
|
||||
res.render "error",
|
||||
message: err.message
|
||||
error: err
|
||||
|
||||
app.use (err, req, res, next) ->
|
||||
res.status(err.status || 500)
|
||||
res.render "error",
|
||||
message: err.message
|
||||
error: {}
|
||||
|
||||
module.exports = app;
|
||||
@ -0,0 +1,20 @@
|
||||
'use strict';
|
||||
|
||||
const express = require("express");
|
||||
const bodyParser = require("body-parser");
|
||||
const path = require("path");
|
||||
|
||||
let app = express();
|
||||
|
||||
app.set("view engine", "jade");
|
||||
app.set("views", path.join(__dirname, "views"));
|
||||
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
|
||||
app.use(bodyParser.urlencoded({
|
||||
extended: true
|
||||
}));
|
||||
|
||||
app.use("/", require("./lib/routes/index"));
|
||||
|
||||
app.listen(3000);
|
||||
@ -1,8 +0,0 @@
|
||||
#!/usr/bin/env coffee
|
||||
debug = require('debug')('openNG')
|
||||
app = require('../app')
|
||||
|
||||
app.set('port', process.env.PORT ? 3000)
|
||||
|
||||
server = app.listen app.get('port'), ->
|
||||
debug('Express server listening on port ' + server.address().port)
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "openNG",
|
||||
"dependencies": {
|
||||
"platform": "Polymer/platform#~0.4.2",
|
||||
"polymer": "Polymer/polymer#~0.5.5"
|
||||
},
|
||||
"devDependencies": {}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
require("../window");
|
||||
|
||||
require("../../views/sample-view");
|
||||
|
||||
require("../../views/node/create");
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,5 @@
|
||||
'use strict';
|
||||
|
||||
require("../view-manager");
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,12 @@
|
||||
'use strict';
|
||||
|
||||
var $ = require("jquery");
|
||||
var riot = require("riot");
|
||||
|
||||
require("debug").enable("*");
|
||||
|
||||
require("../components/app");
|
||||
|
||||
$(function () {
|
||||
riot.mount("*");
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
change: function change(data) {
|
||||
Object.assign(this, data);
|
||||
this.update();
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,68 @@
|
||||
'use strict';
|
||||
|
||||
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||||
|
||||
var riotQuery = require("riot-query");
|
||||
var arrayDiff = require("arraydiff");
|
||||
|
||||
module.exports = {
|
||||
init: function init() {
|
||||
var _this = this;
|
||||
|
||||
var knownTags = [];
|
||||
var listeners = {};
|
||||
|
||||
function triggerEvent(action, query, item) {
|
||||
if (listeners[query] != null && listeners[query][action] != null) {
|
||||
listeners[query][action].forEach(function (handler) {
|
||||
handler(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.on("updated", function () {
|
||||
Object.keys(listeners).forEach(function (query) {
|
||||
var currentTags = riotQuery(_this, query);
|
||||
var diff = arrayDiff(knownTags, currentTags);
|
||||
|
||||
diff.forEach(function (item) {
|
||||
if (item.type === "remove") {
|
||||
for (var i = item.index; i < item.index + item.howMany; i++) {
|
||||
triggerEvent("remove", query, knownTags[i]);
|
||||
}
|
||||
} else if (item.type === "move") {
|
||||
for (var _i = item.index; _i < item.from + item.howMany; _i++) {
|
||||
triggerEvent("move", query, knownTags[_i]);
|
||||
}
|
||||
} else if (item.type === "insert") {
|
||||
item.values.forEach(function (value) {
|
||||
triggerEvent("create", query, value);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
knownTags = currentTags;
|
||||
});
|
||||
});
|
||||
|
||||
this.onChild = function (eventName, handler) {
|
||||
var _eventName$split = eventName.split(":", 2);
|
||||
|
||||
var _eventName$split2 = _slicedToArray(_eventName$split, 2);
|
||||
|
||||
var action = _eventName$split2[0];
|
||||
var query = _eventName$split2[1];
|
||||
|
||||
|
||||
if (listeners[query] == null) {
|
||||
listeners[query] = {};
|
||||
}
|
||||
|
||||
if (listeners[query][action] == null) {
|
||||
listeners[query][action] = [];
|
||||
}
|
||||
|
||||
listeners[query][action].push(handler);
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
'use strict';
|
||||
|
||||
var debounce = require("debounce");
|
||||
var defaultValue = require("default-value");
|
||||
|
||||
var selectable = require("./selectable");
|
||||
|
||||
module.exports = function ($) {
|
||||
selectable($);
|
||||
|
||||
$.fn.draggable = function () {
|
||||
var _this = this;
|
||||
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
var debounceInterval = defaultValue(options.debounce, 10);
|
||||
|
||||
this.on("mousedown", function (event) {
|
||||
var startX = event.pageX;
|
||||
var startY = event.pageY;
|
||||
|
||||
var moveHandler = debounce(function (event) {
|
||||
_this.trigger("draggable:move", [{
|
||||
offsetX: event.pageX - startX,
|
||||
offsetY: event.pageY - startY
|
||||
}]);
|
||||
}, debounceInterval);
|
||||
|
||||
$(document).on("mousemove", moveHandler);
|
||||
|
||||
$(document).one("mouseup", function (event) {
|
||||
$(document).off("mousemove", moveHandler);
|
||||
$(document).enableSelection();
|
||||
|
||||
_this.trigger("draggable:end");
|
||||
});
|
||||
|
||||
$(document).disableSelection();
|
||||
|
||||
_this.trigger("draggable:start");
|
||||
});
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function ($) {
|
||||
$.fn.disableSelection = function () {
|
||||
return this.attr("unselectable", "on").css("user-select", "none").on("selectstart", false);
|
||||
};
|
||||
|
||||
$.fn.enableSelection = function () {
|
||||
return this.removeAttr("unselectable").css("user-select", "auto").off("selectstart", false);
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,140 @@
|
||||
'use strict';
|
||||
|
||||
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||||
|
||||
var elementSize = require("element-size");
|
||||
var sortDockable = require("./util/sort-dockables");
|
||||
|
||||
function px(pixels) {
|
||||
return pixels + "px";
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
init: function init() {
|
||||
var _this = this;
|
||||
|
||||
console.log("foo", this);
|
||||
var dockableAPI = {
|
||||
isActive: function isActive() {
|
||||
return _this.opts.dockableContainer != null;
|
||||
},
|
||||
stack: [],
|
||||
fillElement: null,
|
||||
recalculateLayout: function recalculateLayout() {
|
||||
dockableAPI.stack.forEach(function (item, i) {
|
||||
item.stackIndex = i;
|
||||
});
|
||||
|
||||
var orderedStack = dockableAPI.stack.slice().sort(sortDockable);
|
||||
|
||||
var reservedLeft = 0;
|
||||
var reservedRight = 0;
|
||||
var reservedTop = 0;
|
||||
var reservedBottom = 0;
|
||||
|
||||
orderedStack.forEach(function (item) {
|
||||
var element = item.tag.root;
|
||||
|
||||
/* We set the positioning to absolute *before* attempting
|
||||
* to obtain the element size - this way, we can be sure
|
||||
* that the element won't try to stretch to its container.
|
||||
* Instead, it'll be auto-sized, which is exactly what we
|
||||
* want. */
|
||||
element.style.position = "absolute";
|
||||
|
||||
var _elementSize = elementSize(element);
|
||||
|
||||
var _elementSize2 = _slicedToArray(_elementSize, 2);
|
||||
|
||||
var width = _elementSize2[0];
|
||||
var height = _elementSize2[1];
|
||||
|
||||
|
||||
if (item.heightHint != null) {
|
||||
height = item.heightHint;
|
||||
}
|
||||
|
||||
if (item.widthHint != null) {
|
||||
width = item.widthHint;
|
||||
}
|
||||
|
||||
// FIXME: Should the following really be errors?
|
||||
if ((item.side === "left" || item.side === "right") && width === 0) {
|
||||
throw new Error("Cannot horizontally dock an element without a width; you may need to specify a dock-width");
|
||||
} else if ((item.side === "top" || item.side === "bottom") && height === 0) {
|
||||
throw new Error("Cannot vertically dock an element without a height; you may need to specify a dock-height");
|
||||
}
|
||||
|
||||
if (item.side === "left") {
|
||||
Object.assign(element.style, {
|
||||
left: px(reservedLeft),
|
||||
top: px(reservedTop),
|
||||
bottom: px(reservedBottom)
|
||||
});
|
||||
|
||||
delete element.style.right;
|
||||
|
||||
reservedLeft += width;
|
||||
} else if (item.side === "right") {
|
||||
Object.assign(element.style, {
|
||||
right: px(reservedRight),
|
||||
top: px(reservedTop),
|
||||
bottom: px(reservedBottom)
|
||||
});
|
||||
|
||||
delete element.style.left;
|
||||
|
||||
reservedRight += width;
|
||||
} else if (item.side === "top") {
|
||||
Object.assign(element.style, {
|
||||
left: px(reservedLeft),
|
||||
right: px(reservedRight),
|
||||
top: px(reservedTop)
|
||||
});
|
||||
|
||||
delete element.style.bottom;
|
||||
|
||||
reservedTop += height;
|
||||
} else if (item.side === "bottom") {
|
||||
Object.assign(element.style, {
|
||||
left: px(reservedLeft),
|
||||
right: px(reservedRight),
|
||||
bottom: px(reservedBottom)
|
||||
});
|
||||
|
||||
delete element.style.top;
|
||||
|
||||
reservedBottom += height;
|
||||
}
|
||||
|
||||
console.log("reserved", reservedLeft, reservedRight, reservedTop, reservedBottom);
|
||||
});
|
||||
|
||||
var item = dockableAPI.fillElement;
|
||||
|
||||
if (item != null) {
|
||||
var element = item.root;
|
||||
|
||||
Object.assign(element.style, {
|
||||
position: "absolute",
|
||||
left: px(reservedLeft),
|
||||
right: px(reservedRight),
|
||||
top: px(reservedTop),
|
||||
bottom: px(reservedBottom)
|
||||
});
|
||||
}
|
||||
|
||||
console.log("ordered stack", orderedStack);
|
||||
}
|
||||
};
|
||||
|
||||
this._uikitDockableContainer = dockableAPI;
|
||||
|
||||
this.on("mount", function () {
|
||||
console.log("dockable-container mounted");
|
||||
if (dockableAPI.isActive()) {
|
||||
dockableAPI.recalculateLayout();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
'use strict';
|
||||
|
||||
var inArray = require("in-array");
|
||||
|
||||
function findContainer(tag) {
|
||||
var lastTag = tag;
|
||||
var dockableContainer = void 0;
|
||||
|
||||
while (dockableContainer == null && lastTag != null) {
|
||||
var candidate = lastTag.parent;
|
||||
|
||||
if (candidate != null && candidate._uikitDockableContainer != null && candidate._uikitDockableContainer.isActive()) {
|
||||
dockableContainer = candidate;
|
||||
} else {
|
||||
lastTag = candidate;
|
||||
}
|
||||
}
|
||||
|
||||
if (dockableContainer != null) {
|
||||
return dockableContainer;
|
||||
} else {
|
||||
// FIXME: Better error reporting?
|
||||
throw new Error("Could not find a dockable container for tag");
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
init: function init() {
|
||||
if (this.opts.dock != null) {
|
||||
var dockableContainer = findContainer(this);
|
||||
var containerData = dockableContainer._uikitDockableContainer;
|
||||
|
||||
if (inArray(["bottom", "top", "left", "right"], this.opts.dock)) {
|
||||
containerData.stack.push({
|
||||
tag: this,
|
||||
side: this.opts.dock,
|
||||
order: this.opts.dockOrder,
|
||||
widthHint: this.opts.dockWidth,
|
||||
heightHint: this.opts.dockHeight
|
||||
});
|
||||
} else if (this.opts.dock === "fill") {
|
||||
if (containerData.fillElement != null) {
|
||||
throw new Error("There can be only one tag with a `dock` setting of `fill` within a dockable container");
|
||||
} else {
|
||||
containerData.fillElement = this;
|
||||
}
|
||||
} else {
|
||||
throw new Error("Invalid `dock` property; must be one of bottom, top, left, right, fill");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function (a, b) {
|
||||
var aOrder = void 0,
|
||||
bOrder = void 0;
|
||||
|
||||
if (a.order != null) {
|
||||
aOrder = parseInt(a.order);
|
||||
}
|
||||
|
||||
if (b.order != null) {
|
||||
bOrder = parseInt(b.order);
|
||||
}
|
||||
|
||||
if (aOrder != null && bOrder == null) {
|
||||
return -1;
|
||||
} else if (aOrder == null && bOrder != null) {
|
||||
return 1;
|
||||
} else if (aOrder != null && bOrder != null) {
|
||||
if (aOrder < bOrder) {
|
||||
return -1;
|
||||
} else if (aOrder > bOrder) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
} else {
|
||||
if (a.stackIndex < b.stackIndex) {
|
||||
return -1;
|
||||
} else if (a.stackIndex > b.stackIndex) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
|
||||
var router = require("express-promise-router")();
|
||||
|
||||
router.get("/", function (req, res) {
|
||||
res.render("layout");
|
||||
});
|
||||
|
||||
router.get("/node/:uuid", function (req, res) {
|
||||
res.json({ uuid: req.params.uuid });
|
||||
});
|
||||
|
||||
router.get("/test1", function (req, res) {
|
||||
res.send("test ONE <a href='/test2'>go to 2 instead</a> <a href='/test2' target='_blank'>or in a new window</a>");
|
||||
});
|
||||
|
||||
router.get("/test2", function (req, res) {
|
||||
res.send("test TWO <a href='/test1'>go to 1 instead</a> <a href='/test1' target='_blank'>or in a new window</a>");
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
require("../../../components/uikit/frame");
|
||||
require("../../../components/uikit/toolbar");
|
||||
require("../../../components/uikit/button");
|
||||
require("../../../components/uikit/form-section");
|
||||
require("../../../components/uikit/input-spawner");
|
||||
require("../../../components/uikit/input");
|
||||
require("../../../components/uikit/textarea");
|
||||
require("../../../components/uikit/autocomplete");
|
||||
|
||||
require("../../../components/window-meta");
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Attribute",
|
||||
tableName: "attributes"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "AttributeSource",
|
||||
tableName: "attribute_sources"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "AttributeType",
|
||||
tableName: "attribute_types"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Bin",
|
||||
tableName: "bins"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "BinAuthorization",
|
||||
tableName: "bin_authorizations"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "BinItem",
|
||||
tableName: "bin_items"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "BinProjectAssociation",
|
||||
tableName: "bin_project_associations"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Clearance",
|
||||
tableName: "clearances"
|
||||
idAttribute: "id"
|
||||
@ -1,8 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Node",
|
||||
tableName: "nodes"
|
||||
idAttribute: "id"
|
||||
relationIdAttribute: "perma_id"
|
||||
type: -> this.belongsTo "NodeType", "type_id"
|
||||
tags: -> this.belongsToMany("NodeTag").through "NodeTagAssociation"
|
||||
attributes: -> this.hasMany "Attribute", "node_id"
|
||||
@ -1,8 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "NodeTag",
|
||||
tableName: "node_tags"
|
||||
idAttribute: "id"
|
||||
nodes: ->
|
||||
wrappedModel = Object.create(bookshelf.model("NodeTag"))
|
||||
wrappedModel.idAttribute =
|
||||
this.belongsToMany("NodeTag").through "NodeTagAssociation"
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "NodeTagAssociation",
|
||||
tableName: "node_tag_associations"
|
||||
idAttribute: "id"
|
||||
node: this.belongsTo "Node", "node_id"
|
||||
tag: this.belongsTo "NodeTag", "tag_id"
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "NodeType",
|
||||
tableName: "node_types"
|
||||
idAttribute: "id"
|
||||
nodes: this.hasMany "Node", "type_id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Project",
|
||||
tableName: "projects"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "ProjectAuthorization",
|
||||
tableName: "project_autorizations"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Reference",
|
||||
tableName: "references"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "Relationship",
|
||||
tableName: "relationships"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "RelationshipReference",
|
||||
tableName: "relationship_references"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "RelationshipSource",
|
||||
tableName: "relationship_sources"
|
||||
idAttribute: "id"
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = (bookshelf) ->
|
||||
bookshelf.model "RelationshipType",
|
||||
tableName: "relationship_types"
|
||||
idAttribute: "id"
|
||||
@ -1,6 +0,0 @@
|
||||
i {
|
||||
margin-right: 5px; }
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #148C29;
|
||||
color: white; }
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><polymer-element name="pn-button" constructor="pnButton" attributes="type icon label" noscript="noscript"><template><link rel="stylesheet" href="button.css"/><link rel="stylesheet" href="/stylesheets/pure-min.css"/><link rel="stylesheet" href="/stylesheets/font-awesome.min.css"/><button type="{{type}}" class="pure-button"><i class="fa fa-{{icon}}"></i>{{label}}</button></template></polymer-element>
|
||||
@ -1,2 +0,0 @@
|
||||
contents.main {
|
||||
overflow: auto; }
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><polymer-element name="pn-frame" constructor="pnFrame"><template><link rel="stylesheet" href="frame.css"/><div id="polymerWrapper"><content select="pn-toolbar" class="docks"></content><content class="main"></content></div></template><script src="frame.js"></script></polymer-element>
|
||||
@ -1,58 +0,0 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(1);
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
Polymer("pn-frame", {});
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ])
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><polymer-element name="openng-router" constructor="ngRouter"><script src="router.js"></script></polymer-element>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
||||
null;
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><polymer-element name="pn-toolbar" constructor="pnToolbar" attributes="dock align width height" noscript="noscript"><template><link rel="stylesheet" href="toolbar.css"/><content class="dock-{{dock}} align-{{align}}"></content></template></polymer-element>
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><polymer-element name="openng-window-manager" constructor="ngWindowManager"><script src="window-manager.js"></script></polymer-element>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,115 +0,0 @@
|
||||
.noscroll {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: hidden !important; }
|
||||
|
||||
/* Common styling */
|
||||
.wrapper {
|
||||
position: absolute; }
|
||||
|
||||
.title {
|
||||
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
box-shadow: 5px 5px 10px #1a1a1a;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
cursor: default;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
height: 16px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
padding-left: 7px;
|
||||
border-top: 1px solid #959595;
|
||||
border-right: 1px solid #959595;
|
||||
border-left: 1px solid #959595;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #525252), color-stop(1, #91acbe));
|
||||
background-image: -moz-linear-gradient(center bottom, #525252 0%, #91acbe 100%);
|
||||
filter: alpha(opacity=95);
|
||||
opacity: 0.95; }
|
||||
|
||||
.outer {
|
||||
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
box-shadow: 5px 5px 10px #1a1a1a;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
font-size: 13px;
|
||||
top: 25px;
|
||||
border-bottom: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
background-color: #F7F7F0;
|
||||
filter: alpha(opacity=95);
|
||||
opacity: 0.95; }
|
||||
|
||||
.inner-wrapper {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto; }
|
||||
|
||||
.inner {
|
||||
padding: 7px; }
|
||||
|
||||
.close {
|
||||
float: right; }
|
||||
.close a {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 2px;
|
||||
display: block;
|
||||
padding: 1px 4px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
border: 1px solid #014D8C; }
|
||||
.close a:hover {
|
||||
background-color: #014D8C;
|
||||
border: 1px solid white; }
|
||||
|
||||
.resizer {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
cursor: se-resize; }
|
||||
|
||||
/* Special states */
|
||||
.focused .title {
|
||||
border-top: 1px solid #6262FF;
|
||||
border-right: 1px solid #6262FF;
|
||||
border-left: 1px solid #6262FF;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0057b3), color-stop(1, #0099ff));
|
||||
background-image: -moz-linear-gradient(center bottom, #0057b3 0%, #0099ff 100%);
|
||||
filter: alpha(opacity=85);
|
||||
opacity: 0.85; }
|
||||
|
||||
.dragged .title {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: #0070D5;
|
||||
background-image: none; }
|
||||
.dragged .outer {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none; }
|
||||
.dragged .inner {
|
||||
visibility: hidden; }
|
||||
@ -1 +0,0 @@
|
||||
<link rel="import" href="/bower_components/polymer/polymer.html"/><link rel="import" href="/elements/router.html"/><polymer-element name="openng-window" constructor="ngWindow"><template><link rel="stylesheet" href="window.css"/><div id="polymerWrapper"><template if="{{visible}}"><div style="width: {{width}}px; height: {{height}}px; left: {{x}}px; top: {{y}}px; z-index: {{z}};" class="wrapper {{ {focused: focused, dragged: dragged} | tokenList }}"><div class="title"><div class="title-inner">{{ windowTitle }}</div><div class="close"><a href="#">X</a></div></div><div class="outer"><div class="inner-wrapper"><div class="inner"><!-- View goes here--><openng-router url="{{url}}" external-handler="{{_externalHandler}}"></openng-router></div></div><template if="{{resizable}}"><div class="resizer"></div></template></div></div></template></div></template><script src="window.js"></script></polymer-element>
|
||||
@ -1,284 +0,0 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(4);
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */,
|
||||
/* 2 */,
|
||||
/* 3 */,
|
||||
/* 4 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var RateLimitedCall, polymerDefer;
|
||||
|
||||
RateLimitedCall = __webpack_require__(5);
|
||||
|
||||
polymerDefer = __webpack_require__(6);
|
||||
|
||||
Polymer("openng-window", {
|
||||
publish: {
|
||||
windowTitle: "",
|
||||
url: "",
|
||||
x: 200,
|
||||
y: 200,
|
||||
z: 0,
|
||||
width: 400,
|
||||
height: 300,
|
||||
resizable: true,
|
||||
visible: true,
|
||||
focused: false,
|
||||
dragged: false,
|
||||
focus: function() {
|
||||
return polymerDefer((function(_this) {
|
||||
return function() {
|
||||
return _this._manager.focus(_this);
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
},
|
||||
_externalHandler: function(url, method, options) {
|
||||
var blankWindow;
|
||||
blankWindow = new ngWindow();
|
||||
blankWindow.url = url;
|
||||
return $(blankWindow).insertAfter($(this));
|
||||
},
|
||||
_findWindowManager: function() {
|
||||
var result;
|
||||
result = $(this).closest("openng-window-manager");
|
||||
if (result.length > 0) {
|
||||
return result[0];
|
||||
} else {
|
||||
return void 0;
|
||||
}
|
||||
},
|
||||
_register: function() {
|
||||
this._manager = this._findWindowManager();
|
||||
if (this._manager != null) {
|
||||
return polymerDefer((function(_this) {
|
||||
return function() {
|
||||
return _this._manager.add(_this);
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
},
|
||||
_unregister: function() {
|
||||
if (this._manager != null) {
|
||||
return this._manager.remove(this);
|
||||
}
|
||||
},
|
||||
_hookMoveEvents: function() {
|
||||
var moveCall, self;
|
||||
self = this;
|
||||
moveCall = new RateLimitedCall(60, function() {
|
||||
self.x = this.x - self.dragOffsetX;
|
||||
return self.y = this.y - self.dragOffsetY;
|
||||
});
|
||||
return this._shadowDOM.find(".title").on("mousedown", (function(_this) {
|
||||
return function(event) {
|
||||
var moveHandler;
|
||||
$("body").attr("unselectable", "on").css("user-select", "none").on("selectstart.disableSelect", false);
|
||||
_this.dragOffsetX = event.pageX - _this.x;
|
||||
_this.dragOffsetY = event.pageY - _this.y;
|
||||
moveHandler = function(event) {
|
||||
return moveCall.call(function() {
|
||||
this.x = event.pageX;
|
||||
return this.y = event.pageY;
|
||||
});
|
||||
};
|
||||
_this.dragged = true;
|
||||
$(document).on("mousemove", moveHandler);
|
||||
return $(document).one("mouseup", function(event) {
|
||||
_this.dragged = false;
|
||||
$(document).off("mousemove", moveHandler);
|
||||
return $("body").attr("unselectable", "off").css("user-select", "text").off("selectstart.disableSelect");
|
||||
});
|
||||
};
|
||||
})(this));
|
||||
},
|
||||
_hookResizeEvents: function() {
|
||||
var resizeCall, self;
|
||||
self = this;
|
||||
resizeCall = new RateLimitedCall(60, function() {
|
||||
self.width = this.x - self.resizeOffsetX - self.x;
|
||||
return self.height = this.y - self.resizeOffsetY - self.y;
|
||||
});
|
||||
return this._shadowDOM.find(".resizer").on("mousedown", (function(_this) {
|
||||
return function(event) {
|
||||
var resizeHandler;
|
||||
$("body").attr("unselectable", "on").css("user-select", "none").on("selectstart.disableSelect", false);
|
||||
_this.resizeOffsetX = (event.pageX - _this.x) - _this.width;
|
||||
_this.resizeOffsetY = (event.pageY - _this.y) - _this.height;
|
||||
resizeHandler = function(event) {
|
||||
return resizeCall.call(function() {
|
||||
this.x = event.pageX;
|
||||
return this.y = event.pageY;
|
||||
});
|
||||
};
|
||||
_this.dragged = true;
|
||||
$(document).on("mousemove", resizeHandler);
|
||||
return $(document).one("mouseup", function(event) {
|
||||
_this.dragged = false;
|
||||
$(document).off("mousemove", resizeHandler);
|
||||
return $("body").attr("unselectable", "off").css("user-select", "text").off("selectstart.disableSelect");
|
||||
});
|
||||
};
|
||||
})(this));
|
||||
},
|
||||
_hookCloseButton: function() {
|
||||
return this._shadowDOM.find(".close a").on("mousedown", function(event) {
|
||||
return event.stopPropagation();
|
||||
}).on("click", (function(_this) {
|
||||
return function(event) {
|
||||
return $(_this).remove();
|
||||
};
|
||||
})(this));
|
||||
},
|
||||
_hookFocus: function() {
|
||||
return this._shadowDOM.find(".wrapper").on("mousedown", (function(_this) {
|
||||
return function(event) {
|
||||
return _this.focus();
|
||||
};
|
||||
})(this));
|
||||
},
|
||||
ready: function() {
|
||||
this._externalHandler = this._externalHandler.bind(this);
|
||||
return this._shadowDOM = $(this.$.polymerWrapper);
|
||||
},
|
||||
domReady: function() {
|
||||
this._hookMoveEvents();
|
||||
this._hookResizeEvents();
|
||||
this._hookCloseButton();
|
||||
this._hookFocus();
|
||||
this._register();
|
||||
return this.focus();
|
||||
},
|
||||
detached: function() {
|
||||
return this._unregister();
|
||||
},
|
||||
urlChanged: function(oldValue, newValue) {
|
||||
if (newValue !== "") {
|
||||
return this._shadowDOM.find("openng-router")[0].navigate(newValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 5 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var RateLimitedCall;
|
||||
|
||||
module.exports = RateLimitedCall = (function() {
|
||||
RateLimitedCall.prototype.loopRunning = false;
|
||||
|
||||
RateLimitedCall.prototype._lastFrame = Date.now();
|
||||
|
||||
function RateLimitedCall(fps, frameHandler) {
|
||||
this.fps = fps;
|
||||
this.frameHandler = frameHandler;
|
||||
this._interval = 1000 / this.fps;
|
||||
}
|
||||
|
||||
RateLimitedCall.prototype._loop = function() {
|
||||
this.loopRunning = true;
|
||||
return this._frame();
|
||||
};
|
||||
|
||||
RateLimitedCall.prototype._frame = function() {
|
||||
var delta, now;
|
||||
now = Date.now();
|
||||
delta = now - this._lastFrame;
|
||||
if (delta > this._interval) {
|
||||
if (this.callActivated) {
|
||||
this.frameHandler.apply(this);
|
||||
this.callActivated = false;
|
||||
this._lastFrame = now - (delta % this._interval);
|
||||
} else {
|
||||
this.loopRunning = false;
|
||||
}
|
||||
}
|
||||
if (this.loopRunning) {
|
||||
return requestAnimationFrame(this._frame.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
RateLimitedCall.prototype._activateRateLimitedCall = function() {
|
||||
this.callActivated = true;
|
||||
if (!this.loopRunning) {
|
||||
return this._loop();
|
||||
}
|
||||
};
|
||||
|
||||
RateLimitedCall.prototype.call = function(func) {
|
||||
func.apply(this);
|
||||
return this._activateRateLimitedCall();
|
||||
};
|
||||
|
||||
return RateLimitedCall;
|
||||
|
||||
})();
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 6 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = function(func) {
|
||||
if (window.polymerReady) {
|
||||
return func();
|
||||
} else {
|
||||
return $(window).on("polymer-ready", function(event) {
|
||||
return func();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ])
|
||||
File diff suppressed because one or more lines are too long
@ -1,15 +0,0 @@
|
||||
router = require("express-promise-router")()
|
||||
|
||||
router.get "/", (req, res) ->
|
||||
res.render "layout"
|
||||
|
||||
router.get "/node/:uuid", (req, res) ->
|
||||
res.json {"uuid": req.params.uuid}
|
||||
|
||||
router.get "/test1", (req, res) ->
|
||||
res.send "test ONE <a href='/test2'>go to 2 instead</a> <a href='/test2' target='_blank'>or in a new window</a>"
|
||||
|
||||
router.get "/test2", (req, res) ->
|
||||
res.send "test TWO <a href='/test1'>go to 1 instead</a> <a href='/test1' target='_blank'>or in a new window</a>"
|
||||
|
||||
module.exports = router
|
||||
@ -1,6 +0,0 @@
|
||||
router = require("express-promise-router")()
|
||||
|
||||
router.get "/create", (req, res) ->
|
||||
res.render "nodes/create"
|
||||
|
||||
module.exports = router
|
||||
@ -1,10 +0,0 @@
|
||||
global.$ = $ = require "jquery"
|
||||
OverlayDrawer = require "./lib/OverlayDrawer"
|
||||
RateLimitedCall = require "./lib/RateLimitedCall"
|
||||
|
||||
$ ->
|
||||
overlayDrawer = new OverlayDrawer($ "canvas.overlay")
|
||||
|
||||
$(window).on "polymer-ready", (event) ->
|
||||
# This is for polymer-defer calls.
|
||||
window.polymerReady = true
|
||||
@ -1,97 +0,0 @@
|
||||
$ = require "jquery"
|
||||
|
||||
class OverlayDrawer
|
||||
_objects: []
|
||||
_targetCanvas: null
|
||||
_pendingWindowResize: null
|
||||
_lastDraw: Date.now()
|
||||
_interval: 1000 / 30
|
||||
_processCommonStyles: (context, style) ->
|
||||
context.fillStyle = style.fillColor ? "transparent"
|
||||
context.strokeStyle = style.lineColor ? "black"
|
||||
context.globalAlpha = style.lineColor ? 1
|
||||
context.lineWidth = style.lineWidth ? 1
|
||||
context.lineCap = style.lineCap ? "butt"
|
||||
context.lineJoin = style.lineJoin ? "miter"
|
||||
context.miterLimit = style.miterLimit ? 10
|
||||
return context
|
||||
_drawFrame: =>
|
||||
now = Date.now()
|
||||
delta = now - @_lastDraw
|
||||
|
||||
if delta > @_interval
|
||||
# Process any canvas resizes as a consequence of the parent window being resized by the user
|
||||
if @_pendingWindowResize
|
||||
[@_targetCanvas[0].width, @_targetCanvas[0].height] = @_pendingWindowResize
|
||||
@_targetCanvas.css
|
||||
width: @_pendingWindowResize[0]
|
||||
height: @_pendingWindowResize[1]
|
||||
@_pendingWindowResize = null
|
||||
|
||||
# Clear the canvas
|
||||
context = @_targetCanvas[0].getContext("2d");
|
||||
context.clearRect 0, 0, @_targetCanvas[0].width, @_targetCanvas[0].height
|
||||
|
||||
# Draw all the currently active objecs
|
||||
for object in @_objects
|
||||
object._draw context
|
||||
|
||||
# The following assumes that frame draw duration < frame draw interval!
|
||||
# TODO: Investigate other approaches for doing this...
|
||||
@_lastDraw = now - (delta % @_interval)
|
||||
|
||||
# If we still have objects left, request a new animation frame
|
||||
if @_objects.length > 0
|
||||
window.requestAnimationFrame @_drawFrame
|
||||
_triggerDraw: =>
|
||||
window.requestAnimationFrame @_drawFrame
|
||||
constructor: (canvas) ->
|
||||
@_targetCanvas = canvas
|
||||
|
||||
canvas.css
|
||||
position: "absolute"
|
||||
top: "0px"
|
||||
left: "0px"
|
||||
"z-index": "999999999"
|
||||
"pointer-events": "none"
|
||||
|
||||
resizeHandler = =>
|
||||
@_pendingWindowResize = [$(window).width(), $(window).height()]
|
||||
@_triggerDraw()
|
||||
|
||||
$ window
|
||||
.on "resize", resizeHandler
|
||||
|
||||
# Do an initial resize to make our canvas stretch across the screen
|
||||
resizeHandler()
|
||||
removeObject: (object) =>
|
||||
@_objects = (obj for obj in @_objects when obj != object)
|
||||
createLine: =>
|
||||
newObj = new OverlayLine(this)
|
||||
@_objects.push newObj
|
||||
@_triggerDraw()
|
||||
return newObj
|
||||
|
||||
class OverlayLine
|
||||
constructor: (drawer) ->
|
||||
@_drawer = drawer
|
||||
_startPosition: null
|
||||
_endPosition: null
|
||||
_style: {}
|
||||
_draw: (context) =>
|
||||
context.beginPath()
|
||||
context.moveTo @_startPosition[0], @_startPosition[1]
|
||||
context.lineTo @_endPosition[0], @_endPosition[1]
|
||||
@_drawer._processCommonStyles context, @_style
|
||||
context.stroke()
|
||||
setStyle: (style) =>
|
||||
@_style = style
|
||||
return this
|
||||
updateStart: (position) =>
|
||||
@_startPosition = position
|
||||
return this
|
||||
updateEnd: (position) =>
|
||||
@_endPosition = position
|
||||
return this
|
||||
|
||||
module.exports = OverlayDrawer
|
||||
@ -1,34 +0,0 @@
|
||||
module.exports = class RateLimitedCall
|
||||
loopRunning: false
|
||||
_lastFrame: Date.now()
|
||||
|
||||
constructor: (@fps, @frameHandler) ->
|
||||
@_interval = 1000 / @fps
|
||||
|
||||
_loop: ->
|
||||
@loopRunning = true
|
||||
@_frame()
|
||||
|
||||
_frame: ->
|
||||
now = Date.now()
|
||||
delta = now - @_lastFrame
|
||||
|
||||
if delta > @_interval
|
||||
if @callActivated
|
||||
@frameHandler.apply(this)
|
||||
@callActivated = false
|
||||
@_lastFrame = now - (delta % @_interval)
|
||||
else
|
||||
@loopRunning = false
|
||||
|
||||
if @loopRunning
|
||||
requestAnimationFrame @_frame.bind(this)
|
||||
|
||||
_activateRateLimitedCall: ->
|
||||
@callActivated = true
|
||||
if not @loopRunning
|
||||
@_loop()
|
||||
|
||||
call: (func) ->
|
||||
func.apply(this)
|
||||
@_activateRateLimitedCall()
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = (func) ->
|
||||
if window.polymerReady
|
||||
func()
|
||||
else
|
||||
$(window).on "polymer-ready", (event) ->
|
||||
func()
|
||||
@ -0,0 +1,50 @@
|
||||
app
|
||||
window(each="{windows}", router="{router}", window-title="{title}", width=640, height=480, x="{x}", y="{y}", z=0, resizable="true", url="{url}")
|
||||
|
||||
script.
|
||||
const stateRouter = require("../../frontend/riot-state-router");
|
||||
|
||||
this.mixin(require("../../frontend/riot-on-child"));
|
||||
this.mixin(require("riot-query").mixin);
|
||||
|
||||
this.windows = [
|
||||
{ title: "test one", x: 10, y: 10, url: "/" },
|
||||
{ title: "test two", x: 200, y: 200, url: "/" },
|
||||
{ title: "", x: 390, y: 390, url: "/nodes/create" }
|
||||
]
|
||||
|
||||
let currentZIndex = 0;
|
||||
|
||||
let router = stateRouter();
|
||||
|
||||
router.get("/", (req, res) => {
|
||||
res.render("sample", {
|
||||
text: "Hello World!"
|
||||
});
|
||||
});
|
||||
|
||||
router.get("/nodes/create", (req, res) => {
|
||||
res.render("node-create");
|
||||
});
|
||||
|
||||
this.router = router;
|
||||
|
||||
this.onChild("create:window", (window) => {
|
||||
window.on("focused", () => {
|
||||
this.query("window").filter((otherWindow) => {
|
||||
return otherWindow !== window;
|
||||
}).forEach((otherWindow) => {
|
||||
otherWindow.defocus();
|
||||
});
|
||||
|
||||
window.setZIndex(currentZIndex++);
|
||||
});
|
||||
|
||||
window.on("requestClose", () => {
|
||||
window.reportClose();
|
||||
this.windows = this.windows.filter((windowItem) => windowItem !== window._item);
|
||||
this.update();
|
||||
});
|
||||
|
||||
window.focus();
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
require("../window");
|
||||
|
||||
require("../../views/sample-view");
|
||||
|
||||
require("../../views/node/create");
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-autocomplete
|
||||
div
|
||||
!= "<yield/>"
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,24 @@
|
||||
uikit-button
|
||||
button.pure-button(type="{opts.type}", class="{confirm: opts.type === 'submit', cancel: opts.type === 'cancel', normal: opts.type == null}")
|
||||
i(if="{opts.icon != null}", class="fa fa-{opts.icon}")
|
||||
!= "<yield/>"
|
||||
|
||||
style(scoped, type="scss").
|
||||
button {
|
||||
font-weight: bold;
|
||||
|
||||
&.confirm {
|
||||
background-color: #006B00;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
background-color: #AF0000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.normal {
|
||||
background-color: #1B4AB5;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-form-section
|
||||
div
|
||||
!= "<yield/>"
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,16 @@
|
||||
uikit-frame
|
||||
.frame-wrapper
|
||||
!= "<yield/>"
|
||||
|
||||
script.
|
||||
this.mixin(require("../../../riot/mixins/dockable-container"));
|
||||
this.mixin(require("../../../riot/mixins/dockable"));
|
||||
|
||||
style(type="scss").
|
||||
uikit-frame {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-input-spawner
|
||||
div
|
||||
!= "<yield/>"
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-input
|
||||
label {opts.label}
|
||||
input(type="{opts.type}", name="{opts.name}")
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-textarea
|
||||
div
|
||||
!= "<yield/>"
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,8 @@
|
||||
uikit-toolbar
|
||||
div
|
||||
!= "<yield/>"
|
||||
|
||||
style.
|
||||
|
||||
script.
|
||||
this.mixin(require("../../../riot/mixins/dockable"));
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,41 @@
|
||||
view-manager
|
||||
script.
|
||||
const Promise = require("bluebird");
|
||||
const $ = require("jquery");
|
||||
const defaultValue = require("default-value");
|
||||
|
||||
Object.assign(this, {
|
||||
currentView: null,
|
||||
viewPrefix: defaultValue(opts.viewPrefix, "uikit-view"),
|
||||
|
||||
switchView: function(viewName, locals) {
|
||||
if (this.currentView != null) {
|
||||
this.currentView.unmount(); // FIXME: Do we need more cleanup here?
|
||||
}
|
||||
|
||||
let viewElementName = `${this.viewPrefix}-${viewName}`;
|
||||
let newViewElement = $(`<${viewElementName}>`).appendTo(this.root);
|
||||
|
||||
this.currentView = riot.mount(newViewElement[0], viewElementName, locals)[0];
|
||||
this.trigger("switched");
|
||||
},
|
||||
|
||||
navigate: function(method, uri, data = {}) {
|
||||
return Promise.try(() => {
|
||||
this.trigger("navigating");
|
||||
return opts.router.handle(method, uri, data);
|
||||
}).then((response) => {
|
||||
response.actions.forEach((action) => {
|
||||
if (action.type === "render") {
|
||||
this.switchView(action.viewName, action.locals);
|
||||
}
|
||||
});
|
||||
|
||||
this.trigger("navigated");
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
["get", "post", "put", "delete", "patch", "head"].forEach((method) => {
|
||||
this[method] = this.navigate.bind(this, method);
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,9 @@
|
||||
window-meta
|
||||
span
|
||||
|
||||
script.
|
||||
Object.assign(this, {
|
||||
windowTitle: opts.windowTitle,
|
||||
requestedWidth: opts.requestWidth,
|
||||
requestedHeight: opts.requestHeight
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
require("./component");
|
||||
@ -0,0 +1,377 @@
|
||||
window
|
||||
div(class="wrapper {focused: focused, dragged: dragged}")
|
||||
.title
|
||||
.title-inner { windowTitle }
|
||||
.close
|
||||
a(href="#") X
|
||||
.outer
|
||||
.inner-wrapper
|
||||
.inner
|
||||
view-manager(router="{router}", view-prefix="openng-view")
|
||||
.resizer(show="{opts.resizable}")
|
||||
|
||||
script.
|
||||
const $ = require("jquery");
|
||||
const debounce = require("debounce");
|
||||
const query = require("riot-query");
|
||||
|
||||
require("../../jquery/draggable")($);
|
||||
|
||||
this.mixin(query.mixin);
|
||||
this.mixin(require("../../frontend/riot-change"));
|
||||
|
||||
Object.assign(this, {
|
||||
dragged: false,
|
||||
focused: false,
|
||||
resized: false,
|
||||
width: parseInt(opts.width),
|
||||
height: parseInt(opts.height),
|
||||
windowTitle: opts.windowTitle,
|
||||
//x: parseInt(opts.x),
|
||||
//y: parseInt(opts.y),
|
||||
z: parseInt(opts.z),
|
||||
|
||||
focus: () => {
|
||||
this.trigger("focused");
|
||||
this.change({
|
||||
focused: true
|
||||
});
|
||||
},
|
||||
defocus: () => {
|
||||
this.trigger("defocused");
|
||||
this.change({
|
||||
focused: false
|
||||
});
|
||||
},
|
||||
setZIndex: (index) => {
|
||||
this.change({
|
||||
z: index
|
||||
});
|
||||
},
|
||||
setSize: (width, height) => {
|
||||
this.change({
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
},
|
||||
setWidth: (width) => {
|
||||
this.change({
|
||||
width: width
|
||||
});
|
||||
},
|
||||
setHeight: (height) => {
|
||||
this.change({
|
||||
height: height
|
||||
});
|
||||
},
|
||||
setTitle: (title) => {
|
||||
this.change({
|
||||
windowTitle: title
|
||||
});
|
||||
},
|
||||
reportClose: () => {
|
||||
this.trigger("closing");
|
||||
},
|
||||
|
||||
_handleMouseDown: (event) => {
|
||||
this.focus();
|
||||
}
|
||||
});
|
||||
|
||||
this.on("updated", () => {
|
||||
//console.log("UPDATED", this, opts);
|
||||
$(this.queryOne("//.wrapper")).css({
|
||||
left: `${this.x}px`,
|
||||
top: `${this.y}px`,
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}px`,
|
||||
zIndex: this.z
|
||||
});
|
||||
});
|
||||
|
||||
this.on("mount", () => {
|
||||
let viewManager = this.queryOne("view-manager");
|
||||
let resizeHandle = $(this.queryOne("//.resizer"));
|
||||
let titleBar = $(this.queryOne("//.title"));
|
||||
let closeButton = $(this.queryOne("//.close"));
|
||||
|
||||
if (opts.url != null) {
|
||||
viewManager.get(opts.url);
|
||||
}
|
||||
|
||||
viewManager.on("switched", () => {
|
||||
query(viewManager.currentView, "window-meta").forEach((windowMeta) => {
|
||||
if (windowMeta.windowTitle != null) {
|
||||
this.setTitle(windowMeta.windowTitle);
|
||||
}
|
||||
|
||||
if (windowMeta.requestedWidth != null) {
|
||||
this.setWidth(windowMeta.requestedWidth);
|
||||
}
|
||||
|
||||
if (windowMeta.requestedHeight != null) {
|
||||
this.setHeight(windowMeta.requestedHeight);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
closeButton.on("click", (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault;
|
||||
|
||||
this.trigger("requestClose");
|
||||
})
|
||||
|
||||
let startWidth, startHeight;
|
||||
|
||||
resizeHandle.draggable();
|
||||
|
||||
resizeHandle.on("draggable:start", (event) => {
|
||||
startWidth = this.width;
|
||||
startHeight = this.height;
|
||||
|
||||
this.change({
|
||||
resized: true
|
||||
});
|
||||
});
|
||||
|
||||
resizeHandle.on("draggable:end", (event) => {
|
||||
this.change({
|
||||
resized: false
|
||||
});
|
||||
});
|
||||
|
||||
resizeHandle.on("draggable:move", (event, data) => {
|
||||
this.change({
|
||||
width: startWidth + data.offsetX,
|
||||
height: startHeight + data.offsetY
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
let startX, startY;
|
||||
|
||||
titleBar.draggable();
|
||||
|
||||
titleBar.on("draggable:start", (event) => {
|
||||
startX = this.x;
|
||||
startY = this.y;
|
||||
|
||||
this.change({
|
||||
dragged: true
|
||||
});
|
||||
});
|
||||
|
||||
titleBar.on("draggable:end", (event) => {
|
||||
this.change({
|
||||
dragged: false
|
||||
});
|
||||
});
|
||||
|
||||
titleBar.on("draggable:move", (event, data) => {
|
||||
this.change({
|
||||
x: startX + data.offsetX,
|
||||
y: startY + data.offsetY
|
||||
});
|
||||
});
|
||||
|
||||
$(this.queryOne("//.wrapper")).on("mousedown", () => {
|
||||
this._handleMouseDown();
|
||||
});
|
||||
});
|
||||
|
||||
style(scoped, type="scss").
|
||||
.noscroll
|
||||
{
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
/* Common styling */
|
||||
|
||||
.wrapper
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@mixin shadow
|
||||
{
|
||||
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
box-shadow: 5px 5px 10px #1a1a1a;
|
||||
}
|
||||
|
||||
.title
|
||||
{
|
||||
@include shadow;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
cursor: default;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
height: 16px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
padding-left: 7px;
|
||||
border-top: 1px solid #959595;
|
||||
border-right: 1px solid #959595;
|
||||
border-left: 1px solid #959595;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, rgb(82,82,82)),
|
||||
color-stop(1, rgb(145,172,190))
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
rgb(82,82,82) 0%,
|
||||
rgb(145,172,190) 100%
|
||||
);
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
.outer
|
||||
{
|
||||
@include shadow;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
font-size: 13px;
|
||||
top: 25px;
|
||||
border-bottom: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
background-color: #F7F7F0;
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
.inner-wrapper
|
||||
{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.inner
|
||||
{
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.close
|
||||
{
|
||||
float: right;
|
||||
|
||||
a
|
||||
{
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 2px;
|
||||
display: block;
|
||||
padding: 1px 4px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
border: 1px solid #014D8C;
|
||||
|
||||
&:hover
|
||||
{
|
||||
background-color: #014D8C;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resizer
|
||||
{
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
/* Special states */
|
||||
|
||||
.focused
|
||||
{
|
||||
.title
|
||||
{
|
||||
border-top: 1px solid #6262FF;
|
||||
border-right: 1px solid #6262FF;
|
||||
border-left: 1px solid #6262FF;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, rgb(0,87,179)),
|
||||
color-stop(1, rgb(0,153,255))
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
rgb(0,87,179) 0%,
|
||||
rgb(0,153,255) 100%
|
||||
);
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin noShadow
|
||||
{
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@mixin unselectable {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
}
|
||||
|
||||
.dragged
|
||||
{
|
||||
.title
|
||||
{
|
||||
@include noShadow;
|
||||
background-color: #0070D5;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.outer
|
||||
{
|
||||
@include noShadow;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.inner
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.resized {
|
||||
@include unselectable;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
'use strict';
|
||||
|
||||
require("../view-manager");
|
||||
|
||||
require("./component");
|
||||
@ -1,25 +0,0 @@
|
||||
mixin pmImport(name)
|
||||
link(rel="import", href="/bower_components/#{name}/#{name}.html")
|
||||
|
||||
mixin pmImportPath(path)
|
||||
link(rel="import", href="#{path}.html")
|
||||
|
||||
mixin pmStylesheet(name)
|
||||
link(rel="stylesheet", href="#{name}.css")
|
||||
|
||||
mixin pmPureCSS
|
||||
link(rel="stylesheet", href="/stylesheets/pure-min.css")
|
||||
|
||||
mixin pmFontAwesome
|
||||
link(rel="stylesheet", href="/stylesheets/font-awesome.min.css")
|
||||
|
||||
mixin pmScript(name)
|
||||
script(src="#{name}.js")
|
||||
|
||||
mixin pmIf(conditional)
|
||||
template(if="{{#{conditional}}}")
|
||||
block
|
||||
|
||||
mixin pmRepeat(collection)
|
||||
template(repeat="{{#{collection}}}")
|
||||
block
|
||||
@ -1,12 +0,0 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
|
||||
polymer-element(name="pn-button", constructor="pnButton", attributes="type icon label", noscript)
|
||||
template
|
||||
+pmStylesheet("button")
|
||||
+pmPureCSS
|
||||
+pmFontAwesome
|
||||
button.pure-button(type="{{type}}")
|
||||
i(class="fa fa-{{icon}}")
|
||||
| {{label}}
|
||||
@ -1,10 +0,0 @@
|
||||
i
|
||||
{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button[type="submit"]
|
||||
{
|
||||
background-color: #148C29;
|
||||
color: white;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue