diff --git a/editor.coffee b/editor.coffee index a3d6411..513e5e6 100644 --- a/editor.coffee +++ b/editor.coffee @@ -13,6 +13,7 @@ Drop = require "./drop" GridGen = require "grid-gen" Notifications = require "./notifications" Postmaster = require "postmaster" +RemoteInterface = require "./remote-interface" Tools = require "./tools" Undo = require "undo" @@ -44,7 +45,7 @@ module.exports = (I={}, self=Model(I)) -> self.include Undo self.include Tools - Postmaster(self) + self.include RemoteInterface activeTool = self.activeTool diff --git a/main.coffee b/main.coffee index eb2a1bc..8585e03 100644 --- a/main.coffee +++ b/main.coffee @@ -11,8 +11,7 @@ launch = -> editorElement = Template editor document.body.appendChild editorElement - try - editor.invokeRemote "childLoaded" + editor.invokeRemote? "childLoaded" updateViewportCentering = -> {height: mainHeight, width: mainWidth} = editorElement.querySelector(".main").getBoundingClientRect() @@ -29,9 +28,9 @@ if PACKAGE.name is "ROOT" global.PACKAGE = PACKAGE global.require = require - runtime = require("runtime")(PACKAGE) - runtime.boot() - runtime.applyStyleSheet(require('./style')) + styleNode = document.createElement("style") + styleNode.innerHTML = require('./style') + document.head.appendChild(styleNode) metaTag = document.createElement('meta') metaTag.name = "viewport" diff --git a/pixie.cson b/pixie.cson index b1882ea..3e4ba76 100644 --- a/pixie.cson +++ b/pixie.cson @@ -9,8 +9,7 @@ dependencies: matrix: "distri/matrix:v0.3.1" observable: "distri/observable:v0.3.7" point: "distri/point:v0.2.0" - postmaster: "distri/postmaster:v0.5.2" - runtime: "distri/runtime:v0.3.0" + postmaster: "distri/postmaster:v0.5.3" size: "distri/size:v0.1.4" "touch-canvas": "distri/touch-canvas:v0.4.2" "undo": "distri/undo:v0.2.0" diff --git a/remote-interface.coffee b/remote-interface.coffee new file mode 100644 index 0000000..c5c5fa3 --- /dev/null +++ b/remote-interface.coffee @@ -0,0 +1,18 @@ +module.exports = (I, self) -> + # Embedded package in ZineOS + if system? and postmaster? + console.info "Attached ZineOS remote delegate" + self.invokeRemote = postmaster.invokeRemote + postmaster.delegate = self + else if window.location.origin is "null" + # Assume we're in a secure enough embedded iframe + console.info "Attached remote interface" + localPostmaster = require("postmaster")(self) + else if window is window.parent + # Not embedded, no need to enable remote interface + console.info "Not embedded, no remote interface" + else + # otherwise we can't allow the remote interface as it could enable XSS + console.warn "Remote interface disabled, iframe must be sandboxed" + + return self diff --git a/style.styl b/style.styl index de3a53b..0c89e2e 100644 --- a/style.styl +++ b/style.styl @@ -42,10 +42,12 @@ body width: 100% -.editor +editor background-color: #AAA box-sizing: border-box + display: block height: 100% + line-height: initial padding: 0px 50px 64px 35px position: relative user-select: none diff --git a/templates/editor.haml.md b/templates/editor.haml.md deleted file mode 100644 index 603bcf9..0000000 --- a/templates/editor.haml.md +++ /dev/null @@ -1,58 +0,0 @@ -Editor template - - - activeIndex = @activeIndex - - activeTool = @activeTool - - previousTool = @previousTool - - editor = this - - Symmetry = require "../symmetry" - - - Action = require "./action" - - ActionPresenter = require "../presenters/action" - - Palette = require "./palette" - - Tool = require "./tool" - - ToolPresenter = require "../presenters/tool" - - .editor(class=@loadingClass) - -The toolbar holds our tools. - - .toolbar - .tools - - @tools.each (tool) -> - = Tool ToolPresenter(editor, tool) - %h2 Symmetry - .tools - - symmetryMode = @symmetryMode - - ["normal", "flip", "flop", "quad"].forEach (mode) -> - - activeClass = -> "active" if mode is symmetryMode() - - activate = -> symmetryMode(mode) - .tool(style="background-image: url(#{Symmetry.icon[mode]})" class=activeClass click=activate) - -Our layers and preview canvases are placed in the viewport. - - .main - .viewport(style=@viewportStyle class=@viewportCenter class=@viewportChecker) - .overlay(style=@gridStyle) - = @canvas.element() - = @previewCanvas.element() - .thumbnail(click=@thumbnailClick) - = @thumbnailCanvas.element() - - .position - = @positionDisplay - - .notifications - - @notifications.forEach (notification) -> - %p - = notification - -The palette holds our colors. - - = Palette(this) - - .actions - - @actions.forEach (action) -> - = Action ActionPresenter action, editor - - #loader - %progress.vertical-center(value=@loadingProgress) diff --git a/templates/editor.jadelet b/templates/editor.jadelet new file mode 100644 index 0000000..a95a786 --- /dev/null +++ b/templates/editor.jadelet @@ -0,0 +1,48 @@ +- activeIndex = @activeIndex +- activeTool = @activeTool +- previousTool = @previousTool +- editor = this +- Symmetry = require "../symmetry" + +- Action = require "./action" +- ActionPresenter = require "../presenters/action" +- Palette = require "./palette" +- Tool = require "./tool" +- ToolPresenter = require "../presenters/tool" + +editor(class=@loadingClass) + .toolbar + .tools + - @tools.each (tool) -> + = Tool ToolPresenter(editor, tool) + h2 Symmetry + .tools + - symmetryMode = @symmetryMode + - ["normal", "flip", "flop", "quad"].forEach (mode) -> + - activeClass = -> "active" if mode is symmetryMode() + - activate = -> symmetryMode(mode) + .tool(style="background-image: url(#{Symmetry.icon[mode]})" class=activeClass click=activate) + + .main + .viewport(style=@viewportStyle class=@viewportCenter class=@viewportChecker) + .overlay(style=@gridStyle) + = @canvas.element() + = @previewCanvas.element() + .thumbnail(click=@thumbnailClick) + = @thumbnailCanvas.element() + + .position + = @positionDisplay + + .notifications + - @notifications.forEach (notification) -> + p= notification + + = Palette(this) + + .actions + - @actions.forEach (action) -> + = Action ActionPresenter action, editor + + #loader + progress.vertical-center(value=@loadingProgress)