From 2299f359778a8f19559f130deaf59a33d11b5c85 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 11 Aug 2013 01:26:38 +0200 Subject: [PATCH] Introducing iframe based templates --- cheap-partials.js | 7 ++ index.html | 120 ++-------------------------- piskel-boot.js | 42 ++++++++++ piskel-script-list.js | 68 ++++++++++++++++ templates/drawing-tools.html | 18 +++++ templates/frames-list.html | 7 ++ templates/options.html | 11 +++ templates/preview.html | 9 +++ templates/user-settings-drawer.html | 30 +++++++ 9 files changed, 199 insertions(+), 113 deletions(-) create mode 100644 cheap-partials.js create mode 100644 piskel-boot.js create mode 100644 piskel-script-list.js create mode 100644 templates/drawing-tools.html create mode 100644 templates/frames-list.html create mode 100644 templates/options.html create mode 100644 templates/preview.html create mode 100644 templates/user-settings-drawer.html diff --git a/cheap-partials.js b/cheap-partials.js new file mode 100644 index 00000000..0b4dae45 --- /dev/null +++ b/cheap-partials.js @@ -0,0 +1,7 @@ +// SUPER CHEAP TEMPLATES ! +window._ctl = function (event) { + var iframe=event.target || event.srcElement, div=document.createElement("div"); + div.innerHTML = iframe.contentWindow.document.body.innerHTML; + if (div.children.length == 1) div = div.children[0]; + iframe.parentNode.replaceChild(div, iframe); +}; \ No newline at end of file diff --git a/index.html b/index.html index e453d74c..cbf0d05e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Piskel @@ -16,85 +15,24 @@ +
-
-
-
-
    -
    -
    - - -
    -
    -
    - -
    -
    -
    -
    -
    -
    +
    -
    -
    - -
    -
    - GIF -
    -
    - PNG -
    -
    -
    -
    -
    -
    - Canvas settings: -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    + +
    - -
    -
    -
      -
      -
      -
      -
      +
      @@ -106,55 +44,11 @@
      -
      -
      -
      -
      -
      - 12 FPS - -
      -
      +
      - + diff --git a/piskel-boot.js b/piskel-boot.js new file mode 100644 index 00000000..f3933cb9 --- /dev/null +++ b/piskel-boot.js @@ -0,0 +1,42 @@ +(function () { + + var loadScript = function (src, callback) { + var script = window.document.createElement('script'); + script.setAttribute('src',src); + script.setAttribute('onload',callback); + window.document.body.appendChild(script); + }; + + if (window.location.href.indexOf("debug") != -1) { + window.exports = {}; + var scriptIndex = 0; + window.loadNextScript = function () { + if (scriptIndex == exports.scripts.length) { + pskl.app.init(); + // cleanup + delete window.exports; + delete window.loadDebugScripts; + delete window.done; + } else { + loadScript(exports.scripts[scriptIndex], "loadNextScript()"); + scriptIndex ++; + } + }; + loadScript("script-load-list.js", "loadNextScript()"); + } else { + var script; + if (window.location.href.indexOf("pack") != -1) { + script = "build/piskel-packaged.js"; + } else { + script = "build/piskel-packaged-min.js"; + } + var loaderInterval = window.setInterval(function () { + if (document.querySelectorAll("._ctl").length === 0) { + window.clearInterval(loaderInterval); + loadScript(script, "pskl.app.init()"); + } else { + console.log("waiting for templates to load ...."); + } + }, 100); + } +})(); \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js new file mode 100644 index 00000000..3636619c --- /dev/null +++ b/piskel-script-list.js @@ -0,0 +1,68 @@ +// This list is used both by the grunt build and index.html (in debug mode) + +exports.scripts = [ + // Core libraries + "js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js", + // GIF Encoding libraries + "js/lib/gif/gif.worker.js", + "js/lib/gif/gif.js", + + // Application wide configuration + "js/Constants.js", + "js/Events.js", + + // Libraries + "js/utils/core.js", + "js/utils/PixelUtils.js", + "js/utils/CanvasUtils.js", + "js/utils/UserSettings.js", + "js/lib/jsColor_1_4_0/jscolor.js", + + // Application libraries--> + "js/rendering/DrawingLoop.js", + + // Models + "js/model/Frame.js", + "js/model/FrameSheet.js", + "js/selection/SelectionManager.js", + "js/selection/BaseSelection.js", + "js/selection/RectangularSelection.js", + "js/selection/ShapeSelection.js", + + // Rendering + "js/rendering/CanvasRenderer.js", + "js/rendering/FrameRenderer.js", + "js/rendering/SpritesheetRenderer.js", + + // Controllers + "js/controller/DrawingController.js", + "js/controller/PreviewFilmController.js", + "js/controller/AnimatedPreviewController.js", + "js/controller/ToolController.js", + "js/controller/PaletteController.js", + "js/controller/NotificationController.js", + "js/controller/SettingsController.js", + + // Services + "js/service/LocalStorageService.js", + "js/service/HistoryService.js", + "js/service/KeyboardEventService.js", + + // Tools + "js/drawingtools/BaseTool.js", + "js/drawingtools/SimplePen.js", + "js/drawingtools/VerticalMirrorPen.js", + "js/drawingtools/Eraser.js", + "js/drawingtools/Stroke.js", + "js/drawingtools/PaintBucket.js", + "js/drawingtools/Rectangle.js", + "js/drawingtools/Circle.js", + "js/drawingtools/Move.js", + "js/drawingtools/selectiontools/BaseSelect.js", + "js/drawingtools/selectiontools/RectangleSelect.js", + "js/drawingtools/selectiontools/ShapeSelect.js", + "js/drawingtools/ColorPicker.js", + + // Application controller and initialization + "js/piskel.js" +]; \ No newline at end of file diff --git a/templates/drawing-tools.html b/templates/drawing-tools.html new file mode 100644 index 00000000..af80f65f --- /dev/null +++ b/templates/drawing-tools.html @@ -0,0 +1,18 @@ +
      +
      +
      +
        +
        +
        + + +
        +
        +
        + +
        +
        +
        +
        +
        +
        \ No newline at end of file diff --git a/templates/frames-list.html b/templates/frames-list.html new file mode 100644 index 00000000..5312ecfd --- /dev/null +++ b/templates/frames-list.html @@ -0,0 +1,7 @@ +
        +
        +
          +
          +
          +
          +
          \ No newline at end of file diff --git a/templates/options.html b/templates/options.html new file mode 100644 index 00000000..afda7981 --- /dev/null +++ b/templates/options.html @@ -0,0 +1,11 @@ +
          +
          + +
          +
          + GIF +
          +
          + PNG +
          +
          \ No newline at end of file diff --git a/templates/preview.html b/templates/preview.html new file mode 100644 index 00000000..bab12e72 --- /dev/null +++ b/templates/preview.html @@ -0,0 +1,9 @@ +
          +
          +
          +
          +
          + 12 FPS + +
          +
          \ No newline at end of file diff --git a/templates/user-settings-drawer.html b/templates/user-settings-drawer.html new file mode 100644 index 00000000..83219bdf --- /dev/null +++ b/templates/user-settings-drawer.html @@ -0,0 +1,30 @@ +
          +
          +
          +
          + Canvas settings: +
          +
          + +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + +
          +
          +
          +
          +