Incomplete attempt at converting to Polymer
Sven Slootweg
10 years ago
parent
500afa8b18
commit
ce10940e06
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "openNG",
|
||||
"dependencies": {
|
||||
"platform": "Polymer/platform#~0.4.2",
|
||||
"polymer": "Polymer/polymer#~0.5.5"
|
||||
},
|
||||
"devDependencies": {}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
i {
|
||||
margin-right: 5px; }
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #148C29;
|
||||
color: white; }
|
||||
@ -0,0 +1 @@
|
||||
<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>
|
||||
@ -0,0 +1,2 @@
|
||||
contents.main {
|
||||
overflow: auto; }
|
||||
@ -0,0 +1 @@
|
||||
<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>
|
||||
@ -0,0 +1,58 @@
|
||||
/******/ (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", {});
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ])
|
||||
@ -0,0 +1 @@
|
||||
<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 @@
|
||||
<div>Hi! Gah!</div>
|
||||
@ -0,0 +1 @@
|
||||
<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>
|
||||
@ -0,0 +1 @@
|
||||
<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
@ -0,0 +1,115 @@
|
||||
.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; }
|
||||
@ -0,0 +1 @@
|
||||
<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>
|
||||
@ -0,0 +1,284 @@
|
||||
/******/ (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();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***/ }
|
||||
/******/ ])
|
||||
@ -0,0 +1,6 @@
|
||||
router = require("express-promise-router")()
|
||||
|
||||
router.get "/create", (req, res) ->
|
||||
res.render "nodes/create"
|
||||
|
||||
module.exports = router
|
||||
@ -1,2 +1,10 @@
|
||||
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
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = (func) ->
|
||||
if window.polymerReady
|
||||
func()
|
||||
else
|
||||
$(window).on "polymer-ready", (event) ->
|
||||
func()
|
||||
@ -0,0 +1,25 @@
|
||||
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
|
||||
@ -0,0 +1,12 @@
|
||||
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}}
|
||||
@ -0,0 +1,10 @@
|
||||
i
|
||||
{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button[type="submit"]
|
||||
{
|
||||
background-color: #148C29;
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Polymer "pn-frame", {}
|
||||
@ -0,0 +1,12 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
|
||||
polymer-element(name="pn-frame", constructor="pnFrame")
|
||||
template
|
||||
+pmStylesheet("frame")
|
||||
#polymerWrapper
|
||||
content.docks(select="pn-toolbar")
|
||||
content.main
|
||||
|
||||
+pmScript("frame")
|
||||
@ -0,0 +1,4 @@
|
||||
contents.main
|
||||
{
|
||||
overflow: auto;
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
__ = require "lodash"
|
||||
|
||||
Polymer "openng-router",
|
||||
_lastNavigatedURL: ""
|
||||
_lastNavigatedMethod: ""
|
||||
|
||||
publish:
|
||||
url: ""
|
||||
'external-handler': null
|
||||
navigate: (url, method = "GET", options = {}) ->
|
||||
if url == ""
|
||||
return
|
||||
|
||||
options.type ?= method
|
||||
|
||||
$.ajax url, options
|
||||
.done (data, textStatus, xhr) =>
|
||||
$(this).html(data)
|
||||
ready: ->
|
||||
self = this
|
||||
|
||||
$(this)
|
||||
.on "click", "a", (event) ->
|
||||
event.preventDefault()
|
||||
url = $(this).attr("href")
|
||||
|
||||
if $(this).attr("target") == "_blank" and self['external-handler']?
|
||||
self['external-handler'](url)
|
||||
else
|
||||
self.navigate url
|
||||
|
||||
@navigate(@url)
|
||||
urlChanged: (oldValue, newValue) ->
|
||||
console.log "URL CHANGED", this.url, oldValue, newValue
|
||||
@ -0,0 +1,6 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
|
||||
polymer-element(name="openng-router", constructor="ngRouter")
|
||||
+pmScript("router")
|
||||
@ -1 +0,0 @@
|
||||
null
|
||||
@ -1 +0,0 @@
|
||||
div Hi! Gah!
|
||||
@ -0,0 +1,8 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
|
||||
polymer-element(name="pn-toolbar", constructor="pnToolbar", attributes="dock align width height", noscript)
|
||||
template
|
||||
+pmStylesheet("toolbar")
|
||||
content(class="dock-{{dock}} align-{{align}}")
|
||||
@ -0,0 +1,24 @@
|
||||
__ = require "lodash"
|
||||
|
||||
Polymer "openng-window-manager",
|
||||
_currentFocus: null
|
||||
_currentZ: 1000
|
||||
_windows: []
|
||||
_unfocusAll: ->
|
||||
for window in @_windows
|
||||
window.focused = false
|
||||
publish:
|
||||
add: (window) ->
|
||||
@_windows.push window
|
||||
remove: (window) ->
|
||||
@_windows = __(@_windows)
|
||||
.without window
|
||||
.value()
|
||||
focus: (window) ->
|
||||
if not window.focused
|
||||
@_unfocusAll()
|
||||
@_currentFocus = window
|
||||
window.focused = true
|
||||
window.z = (@_currentZ++)
|
||||
ready: ->
|
||||
#
|
||||
@ -0,0 +1,6 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
|
||||
polymer-element(name="openng-window-manager", constructor="ngWindowManager")
|
||||
+pmScript("window-manager")
|
||||
@ -0,0 +1,166 @@
|
||||
RateLimitedCall = require "../coffee/lib/RateLimitedCall"
|
||||
polymerDefer = require "../coffee/lib/polymer-defer"
|
||||
|
||||
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: ->
|
||||
polymerDefer =>
|
||||
@_manager.focus(this)
|
||||
|
||||
_externalHandler: (url, method, options) ->
|
||||
# FIXME: Do something with 'method' and 'options'?
|
||||
blankWindow = new ngWindow()
|
||||
blankWindow.url = url
|
||||
$(blankWindow).insertAfter($(this))
|
||||
|
||||
_findWindowManager: ->
|
||||
result = $(this).closest("openng-window-manager")
|
||||
|
||||
if result.length > 0
|
||||
return result[0]
|
||||
else
|
||||
return undefined
|
||||
|
||||
_register: ->
|
||||
@_manager = @_findWindowManager()
|
||||
|
||||
if @_manager?
|
||||
polymerDefer =>
|
||||
@_manager.add this
|
||||
|
||||
_unregister: ->
|
||||
if @_manager?
|
||||
@_manager.remove this
|
||||
|
||||
_hookMoveEvents: ->
|
||||
self = this
|
||||
|
||||
moveCall = new RateLimitedCall 60, ->
|
||||
self.x = @x - self.dragOffsetX
|
||||
self.y = @y - self.dragOffsetY
|
||||
|
||||
@_shadowDOM
|
||||
.find ".title"
|
||||
.on "mousedown", (event) =>
|
||||
# Disable text selection application-wide to prevent accidental selection while dragging
|
||||
# FIXME: Are there more performant options for this?
|
||||
# FIXME: Currently bugs out in Chrome on <input> - will select contents of those anyway.
|
||||
$("body")
|
||||
.attr "unselectable", "on"
|
||||
.css "user-select", "none"
|
||||
.on "selectstart.disableSelect", false
|
||||
|
||||
# Record drag offset (ie. coordinates of mouse relative to the top-left corner of the window)
|
||||
@dragOffsetX = event.pageX - @x
|
||||
@dragOffsetY = event.pageY - @y
|
||||
|
||||
# Actual window movement
|
||||
moveHandler = (event) =>
|
||||
moveCall.call ->
|
||||
@x = event.pageX
|
||||
@y = event.pageY
|
||||
|
||||
@dragged = true
|
||||
$(document).on "mousemove", moveHandler
|
||||
|
||||
# Release-drag handling...
|
||||
$(document).one "mouseup", (event) =>
|
||||
# Disable dragging mode
|
||||
@dragged = false
|
||||
$(document).off "mousemove", moveHandler
|
||||
|
||||
# Re-enable text selection
|
||||
$("body")
|
||||
.attr "unselectable", "off"
|
||||
.css "user-select", "text"
|
||||
.off "selectstart.disableSelect"
|
||||
|
||||
_hookResizeEvents: ->
|
||||
self = this
|
||||
|
||||
resizeCall = new RateLimitedCall 60, ->
|
||||
self.width = @x - self.resizeOffsetX - self.x
|
||||
self.height = @y - self.resizeOffsetY - self.y
|
||||
|
||||
@_shadowDOM
|
||||
.find ".resizer"
|
||||
.on "mousedown", (event) =>
|
||||
# Disable text selection application-wide to prevent accidental selection while dragging
|
||||
# FIXME: Are there more performant options for this?
|
||||
# FIXME: Currently bugs out in Chrome on <input> - will select contents of those anyway.
|
||||
$("body")
|
||||
.attr "unselectable", "on"
|
||||
.css "user-select", "none"
|
||||
.on "selectstart.disableSelect", false
|
||||
|
||||
# Record drag offset (ie. coordinates of mouse relative to the top-left corner of the window)
|
||||
@resizeOffsetX = (event.pageX - @x) - @width
|
||||
@resizeOffsetY = (event.pageY - @y) - @height
|
||||
|
||||
# Actual window resizing
|
||||
resizeHandler = (event) =>
|
||||
resizeCall.call ->
|
||||
@x = event.pageX
|
||||
@y = event.pageY
|
||||
|
||||
@dragged = true
|
||||
$(document).on "mousemove", resizeHandler
|
||||
|
||||
# Release-drag handling...
|
||||
$(document).one "mouseup", (event) =>
|
||||
# Disable dragging mode
|
||||
@dragged = false
|
||||
$(document).off "mousemove", resizeHandler
|
||||
|
||||
# Re-enable text selection
|
||||
$("body")
|
||||
.attr "unselectable", "off"
|
||||
.css "user-select", "text"
|
||||
.off "selectstart.disableSelect"
|
||||
|
||||
_hookCloseButton: ->
|
||||
@_shadowDOM
|
||||
.find ".close a"
|
||||
.on "mousedown", (event) -> event.stopPropagation()
|
||||
.on "click", (event) =>
|
||||
$(this).remove()
|
||||
|
||||
_hookFocus: ->
|
||||
@_shadowDOM
|
||||
.find ".wrapper"
|
||||
.on "mousedown", (event) =>
|
||||
@focus()
|
||||
|
||||
ready: ->
|
||||
@_externalHandler = @_externalHandler.bind(this)
|
||||
@_shadowDOM = $(@$.polymerWrapper)
|
||||
|
||||
domReady: ->
|
||||
@_hookMoveEvents()
|
||||
@_hookResizeEvents()
|
||||
@_hookCloseButton()
|
||||
@_hookFocus()
|
||||
@_register()
|
||||
@focus()
|
||||
|
||||
detached: ->
|
||||
@_unregister()
|
||||
|
||||
urlChanged: (oldValue, newValue) ->
|
||||
if newValue != ""
|
||||
@_shadowDOM
|
||||
.find("openng-router")[0]
|
||||
.navigate newValue
|
||||
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
include _polymer
|
||||
|
||||
+pmImport("polymer")
|
||||
+pmImportPath("/elements/router")
|
||||
|
||||
polymer-element(name="openng-window", constructor="ngWindow")
|
||||
template
|
||||
+pmStylesheet("window")
|
||||
#polymerWrapper
|
||||
+pmIf("visible")
|
||||
div(class="wrapper {{ {focused: focused, dragged: dragged} | tokenList }}", style="width: {{width}}px; height: {{height}}px; left: {{x}}px; top: {{y}}px; z-index: {{z}};")
|
||||
.title
|
||||
.title-inner {{ windowTitle }}
|
||||
.close
|
||||
a(href="#") X
|
||||
.outer
|
||||
.inner-wrapper
|
||||
.inner
|
||||
// View goes here
|
||||
openng-router(url="{{url}}", external-handler="{{_externalHandler}}")
|
||||
+pmIf("resizable")
|
||||
.resizer
|
||||
+pmScript("window")
|
||||
@ -0,0 +1,181 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.dragged
|
||||
{
|
||||
.title
|
||||
{
|
||||
@include noShadow;
|
||||
background-color: #0070D5;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.outer
|
||||
{
|
||||
@include noShadow;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.inner
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
title Create new node
|
||||
form(method="post", action="/nodes/create")
|
||||
pn-frame
|
||||
pn-toolbar(dock="bottom", align="right")
|
||||
pn-button(type="submit", label="Create", icon="check")
|
||||
|
||||
pn-form-section
|
||||
pn-input(name="name", label="Name")
|
||||
pn-autocomplete(name="type", label="Type")
|
||||
pn-textarea(name="notes", label="Notes")
|
||||
|
||||
pn-form-section(name="Properties")
|
||||
pn-input-spawner
|
||||
pn-autocomplete.grouped(name="key[]", placeholder="Name")
|
||||
pn-autocomplete.grouped(name="value[]", placeholder="Value")
|
||||
Loading…
Reference in New Issue