Popup preview : refactor, cross browser, WIP

- moved preview controllers to pskl.controller.preview
- renamed PreviewFilmController to FramesListController
- renamed AnimatedPreviewController to PreviewController
- fixed init of popup preview on IE (use ownerDocument to create
  TiledFrameRenderer container) => should try with innerHTML
- moved open popup button inside the minimap (show on hover)

src/css/toolbox-animated-preview.css

@@ -79,4 +79,28 @@
 .preview-toggle-onion-skin-enabled,
 .preview-toggle-onion-skin-enabled:hover {
   color : gold;
-}
+}
+
+.open-popup-preview-button {
+  position : absolute;
+  z-index: 500;
+  right : 10px;
+  top : 10px;
+  width : 24px;
+  height: 18px;
+
+  border : 2px solid white;
+  background : rgba(0,0,0,0.3);
+  cursor : pointer;
+
+  opacity: 0;
+  transition: 0.3s opacity, 0.3s border-color;
+}
+
+.minimap-container:hover .open-popup-preview-button {
+  opacity: 1;
+}
+
+.open-popup-preview-button:hover {
+  border-color: gold;
+}

src/js/app.js

@@ -57,14 +57,14 @@
       this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 
-      this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#animated-preview-canvas-container'));
+      this.previewController = new pskl.controller.preview.PreviewController(this.piskelController, $('#animated-preview-canvas-container'));
-      this.animationController.init();
+      this.previewController.init();
 
-      this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('.minimap-container'));
+      this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.previewController, this.drawingController, $('.minimap-container'));
       this.minimapController.init();
 
-      this.previewFilmController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
+      this.framesListController = new pskl.controller.FramesListController(this.piskelController, $('#preview-list'));
-      this.previewFilmController.init();
+      this.framesListController.init();
 
       this.layersListController = new pskl.controller.LayersListController(this.piskelController);
       this.layersListController.init();
@@ -144,7 +144,7 @@
       pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
         piskel.setDescriptor(descriptor);
         pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(fps);
+        pskl.app.previewController.setFPS(fps);
       });
     },
 
@@ -165,8 +165,8 @@
 
     render : function (delta) {
       this.drawingController.render(delta);
-      this.animationController.render(delta);
+      this.previewController.render(delta);
-      this.previewFilmController.render(delta);
+      this.framesListController.render(delta);
     },
 
     getFirstFrameAsPng : function () {

src/js/controller/FramesListController.js

@@ -8,7 +8,7 @@
     NEW_FRAME : 'newframe'
   };
 
-  ns.PreviewFilmController = function (piskelController, container) {
+  ns.FramesListController = function (piskelController, container) {
 
     this.piskelController = piskelController;
     this.container = container;
@@ -21,7 +21,7 @@
     this.cachedFrameProcessor.setOutputCloner(this.clonePreviewCanvas_.bind(this));
   };
 
-  ns.PreviewFilmController.prototype.init = function() {
+  ns.FramesListController.prototype.init = function() {
     $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
     $.subscribe(Events.PISKEL_RESET, this.flagForRedraw_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.flagForRedraw_.bind(this));
@@ -33,22 +33,22 @@
     this.updateScrollerOverflows();
   };
 
-  ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
+  ns.FramesListController.prototype.flagForRedraw_ = function () {
     this.redrawFlag = true;
   };
 
-  ns.PreviewFilmController.prototype.refreshZoom_ = function () {
+  ns.FramesListController.prototype.refreshZoom_ = function () {
     this.zoom = this.calculateZoom_();
   };
 
-  ns.PreviewFilmController.prototype.render = function () {
+  ns.FramesListController.prototype.render = function () {
     if (this.redrawFlag) {
       this.createPreviews_();
       this.redrawFlag = false;
     }
   };
 
-  ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
+  ns.FramesListController.prototype.updateScrollerOverflows = function () {
     var scroller = $('#preview-list-scroller');
     var scrollerHeight = scroller.height();
     var scrollTop = scroller.scrollTop();
@@ -70,7 +70,7 @@
     wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
   };
 
-  ns.PreviewFilmController.prototype.onContainerClick_ = function (event) {
+  ns.FramesListController.prototype.onContainerClick_ = function (event) {
     var target = pskl.utils.Dom.getParentWithData(event.target, 'tileAction');
     if (!target) {
       return;
@@ -92,7 +92,7 @@
     }
   };
 
-  ns.PreviewFilmController.prototype.createPreviews_ = function () {
+  ns.FramesListController.prototype.createPreviews_ = function () {
 
     this.container.html("");
     // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
@@ -122,7 +122,7 @@
   /**
    * @private
    */
-  ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
+  ns.FramesListController.prototype.initDragndropBehavior_ = function () {
 
     $("#preview-list").sortable({
       placeholder: "preview-tile-drop-proxy",
@@ -135,7 +135,7 @@
   /**
    * @private
    */
-  ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
+  ns.FramesListController.prototype.onUpdate_ = function( event, ui ) {
     var originFrameId = parseInt(ui.item.data("tile-number"), 10);
     var targetInsertionId = $('.preview-tile').index(ui.item);
 
@@ -148,7 +148,7 @@
    * @private
    * TODO(vincz): clean this giant rendering function & remove listeners.
    */
-  ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
+  ns.FramesListController.prototype.createPreviewTile_ = function(tileNumber) {
     var currentFrame = this.piskelController.getCurrentLayer().getFrameAt(tileNumber);
 
     var previewTileRoot = document.createElement("li");
@@ -213,12 +213,12 @@
     return previewTileRoot;
   };
 
-  ns.PreviewFilmController.prototype.getCanvasForFrame = function (frame) {
+  ns.FramesListController.prototype.getCanvasForFrame = function (frame) {
     var canvas = this.cachedFrameProcessor.get(frame, this.zoom);
     return canvas;
   };
 
-  ns.PreviewFilmController.prototype.frameToPreviewCanvas_ = function (frame) {
+  ns.FramesListController.prototype.frameToPreviewCanvas_ = function (frame) {
     var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, this.zoom);
     canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
     var canvas = canvasRenderer.render();
@@ -226,7 +226,7 @@
     return canvas;
   };
 
-  ns.PreviewFilmController.prototype.clonePreviewCanvas_ = function (canvas) {
+  ns.FramesListController.prototype.clonePreviewCanvas_ = function (canvas) {
     var clone = pskl.utils.CanvasUtils.clone(canvas);
     clone.classList.add('tile-view', 'canvas');
     return clone;
@@ -235,7 +235,7 @@
   /**
    * Calculate the preview zoom depending on the piskel size
    */
-  ns.PreviewFilmController.prototype.calculateZoom_ = function () {
+  ns.FramesListController.prototype.calculateZoom_ = function () {
     var frame = this.piskelController.getCurrentFrame();
     var frameSize = Math.max(frame.getHeight(), frame.getWidth());
 

src/js/controller/MinimapController.js

@@ -1,9 +1,9 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.MinimapController = function (piskelController, animationController, drawingController, container) {
+  ns.MinimapController = function (piskelController, previewController, drawingController, container) {
     this.piskelController = piskelController;
-    this.animationController = animationController;
+    this.previewController = previewController;
     this.drawingController = drawingController;
     this.container = container;
 
@@ -50,11 +50,11 @@
     // if the sprite is not a square, a margin is needed on the appropriate coordinate
     // before adding the offset coming from the drawing area
     var leftMargin = (containerWidth - Math.max(minimapSize.width, previewSize.width))/2;
-    var leftOffset = offset.x * this.animationController.getZoom();
+    var leftOffset = offset.x * this.previewController.getZoom();
     var left = leftMargin + leftOffset;
 
     var topMargin = (containerHeight - Math.max(minimapSize.height, previewSize.height))/2;
-    var topOffset = offset.y * this.animationController.getZoom();
+    var topOffset = offset.y * this.previewController.getZoom();
     var top = topMargin + topOffset;
 
     this.minimapEl.style.display = 'block';
@@ -69,7 +69,7 @@
   ns.MinimapController.prototype.getMinimapSize_ = function () {
     // Calculate the ratio to translate drawing area sizes to animated preview sizes
     var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
-    var animatedPreviewZoom = this.animationController.getZoom();
+    var animatedPreviewZoom = this.previewController.getZoom();
     var ratio = drawingAreaZoom / animatedPreviewZoom;
 
     var displaySize = this.drawingController.getRenderer().getDisplaySize();
@@ -84,8 +84,8 @@
 
   ns.MinimapController.prototype.getPreviewSize_ = function () {
     var frame = this.piskelController.getCurrentFrame();
-    var previewWidth = frame.getWidth() * this.animationController.getZoom();
+    var previewWidth = frame.getWidth() * this.previewController.getZoom();
-    var previewHeight = frame.getHeight() * this.animationController.getZoom();
+    var previewHeight = frame.getHeight() * this.previewController.getZoom();
 
     return {
       width : previewWidth,
@@ -114,7 +114,7 @@
   };
 
   ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
-    var frameCoords = this.animationController.getCoordinates(x, y);
+    var frameCoords = this.previewController.getCoordinates(x, y);
 
     var frameWidth = this.piskelController.getCurrentFrame().getWidth();
     var frameHeight = this.piskelController.getCurrentFrame().getHeight();

src/js/controller/PopupPreviewController.js

@@ -1,45 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller');
-
-  ns.PopupPreviewController = function (piskelController) {
-    this.popup = null;
-    this.renderer = null;
-  };
-
-  ns.PopupPreviewController.prototype.init = function () {
-    pskl.utils.Event.addEventListener('.open-popup-preview-button', 'click', this.onOpenPopupPreviewClick_, this);
-    pskl.utils.Event.addEventListener(window, 'unload', this.onMainWindowUnload_, this);
-  };
-
-  ns.PopupPreviewController.prototype.isOpen = function () {
-    return !!this.popup;
-  };
-
-  ns.PopupPreviewController.prototype.onOpenPopupPreviewClick_ = function () {
-    if (!this.isOpen()) {
-      this.popup = this.createPopup_();
-      window.setTimeout(function () {
-        var container = this.popup.document.querySelector('.preview-container');
-        this.renderer = new pskl.rendering.frame.TiledFrameRenderer($(container));
-      }.bind(this), 200);
-    }
-  };
-
-  ns.PopupPreviewController.prototype.createPopup_ = function () {
-    var popup = window.open('about:blank', '', 'width=320,height=320');
-    popup.document.body.innerHTML = pskl.utils.Template.get('popup-preview-partial');
-    return popup;
-  };
-
-  ns.PopupPreviewController.prototype.render = function (frame) {
-    if (this.isOpen() && this.renderer) {
-      this.renderer.render(frame);
-    }
-  };
-
-  ns.PopupPreviewController.prototype.onMainWindowUnload_ = function () {
-    if (this.isOpen()) {
-      this.popup.close();
-    }
-  };
-})();

src/js/controller/dialogs/ImportImageController.js

@@ -140,6 +140,6 @@
     var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
 
     pskl.app.piskelController.setPiskel(piskel);
-    pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
+    pskl.app.previewController.setFPS(Constants.DEFAULT.FPS);
   };
 })();

src/js/controller/piskel/PiskelController.js

@@ -38,12 +38,12 @@
   /**
    * TODO : this should be removed
    * FPS should be stored in the Piskel model and not in the
-   * animationController
+   * previewController
    * Then piskelController should be able to return this information
    * @return {Number} Frames per second for the current animation
    */
   ns.PiskelController.prototype.getFPS = function () {
-    return pskl.app.animationController.getFPS();
+    return pskl.app.previewController.getFPS();
   };
 
   ns.PiskelController.prototype.getLayers = function () {

src/js/controller/preview/PopupPreviewController.js

@@ -0,0 +1,82 @@
+(function () {
+  var ns = $.namespace('pskl.controller.preview');
+
+  ns.PopupPreviewController = function (piskelController) {
+    this.piskelController = piskelController;
+    this.popup = null;
+    this.renderer = null;
+    this.renderFlag = false;
+  };
+
+  ns.PopupPreviewController.prototype.init = function () {
+    pskl.utils.Event.addEventListener(window, 'unload', this.onMainWindowUnload_, this);
+  };
+
+  ns.PopupPreviewController.prototype.isOpen = function () {
+    return !!this.popup;
+  };
+
+  ns.PopupPreviewController.prototype.open = function () {
+    if (!this.isOpen()) {
+      this.popup = window.open('/popup-preview.html', '', 'width=320,height=320');
+    }
+  };
+
+  ns.PopupPreviewController.prototype.onPopupLoaded = function () {
+    pskl.utils.Event.addEventListener(this.popup, 'resize', this.onWindowResize_, this);
+    pskl.utils.Event.addEventListener(this.popup, 'unload', this.onPopupClosed_, this);
+    var container = this.popup.document.querySelector('.preview-container');
+    this.renderer = new pskl.rendering.frame.TiledFrameRenderer($(container));
+    this.updateZoom_();
+    this.renderFlag = true;
+  };
+
+
+  ns.PopupPreviewController.prototype.render = function (frame) {
+    if (this.isOpen() && this.renderer) {
+      this.renderer.render(frame);
+      this.renderFlag = false;
+    }
+  };
+
+  ns.PopupPreviewController.prototype.onWindowResize_ = function (frame) {
+    this.updateZoom_();
+    this.renderFlag = true;
+  };
+
+  ns.PopupPreviewController.prototype.updateZoom_ = function () {
+    var documentElement = this.popup.document.documentElement;
+    var wZoom = documentElement.clientWidth / this.piskelController.getWidth();
+    var hZoom = documentElement.clientHeight / this.piskelController.getHeight();
+    var zoom = Math.min(wZoom, hZoom);
+
+    this.renderer.setZoom(zoom);
+
+    var height = this.piskelController.getHeight() * zoom;
+    var width = this.piskelController.getWidth() * zoom;
+
+    var container = this.popup.document.querySelector('.preview-container');
+    container.style.height = height + 'px';
+    container.style.width = width + 'px';
+
+    var horizontalMargin = (documentElement.clientHeight - height) / 2;
+    container.style.marginTop = horizontalMargin + 'px';
+    container.style.marginBottom = horizontalMargin + 'px';
+
+    var verticalMargin = (documentElement.clientWidth - width) / 2;
+    container.style.marginLeft = verticalMargin + 'px';
+    container.style.marginRight = verticalMargin + 'px';
+  };
+
+  ns.PopupPreviewController.prototype.onPopupClosed_ = function () {
+    var popup = this.popup;
+    console.log(popup);
+    this.popup = null;
+  };
+
+  ns.PopupPreviewController.prototype.onMainWindowUnload_ = function () {
+    if (this.isOpen()) {
+      this.popup.close();
+    }
+  };
+})();

src/js/controller/preview/PreviewController.js

@@ -1,10 +1,10 @@
 (function () {
-  var ns = $.namespace('pskl.controller');
+  var ns = $.namespace('pskl.controller.preview');
 
   // Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE
   var PREVIEW_SIZE = 200;
 
-  ns.AnimatedPreviewController = function (piskelController, container) {
+  ns.PreviewController = function (piskelController, container) {
     this.piskelController = piskelController;
     this.container = container;
 
@@ -21,10 +21,10 @@
     var frame = this.piskelController.getCurrentFrame();
 
     this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
-    this.popupPreviewController = new pskl.controller.PopupPreviewController();
+    this.popupPreviewController = new ns.PopupPreviewController(piskelController);
   };
 
-  ns.AnimatedPreviewController.prototype.init = function () {
+  ns.PreviewController.prototype.init = function () {
     // the oninput event won't work on IE10 unfortunately, but at least will provide a
     // consistent behavior across all other browsers that support the input type range
     // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
@@ -34,6 +34,8 @@
     this.toggleOnionSkinEl = document.querySelector('.preview-toggle-onion-skin');
     this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
 
+    pskl.utils.Event.addEventListener('.open-popup-preview-button', 'click', this.onOpenPopupPreviewClick_, this);
+
     pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
@@ -50,7 +52,11 @@
     this.updateContainerDimensions_();
   };
 
-  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+  ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () {
+    this.popupPreviewController.open();
+  };
+
+  ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
     if (name == pskl.UserSettings.ONION_SKIN) {
       this.updateOnionSkinPreview_();
     } else if (name == pskl.UserSettings.MAX_FPS) {
@@ -61,7 +67,7 @@
     }
   };
 
-  ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
+  ns.PreviewController.prototype.updateOnionSkinPreview_ = function () {
     var enabledClassname = 'preview-toggle-onion-skin-enabled';
     if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
       this.toggleOnionSkinEl.classList.add(enabledClassname);
@@ -70,23 +76,23 @@
     }
   };
 
-  ns.AnimatedPreviewController.prototype.updateMaxFPS_ = function () {
+  ns.PreviewController.prototype.updateMaxFPS_ = function () {
     var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     this.fpsRangeInput.get(0).setAttribute('max', maxFps);
     this.setFPS(Math.min(this.fps, maxFps));
   };
 
-  ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
+  ns.PreviewController.prototype.updateZoom_ = function () {
     var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
     var zoom = isTiled ? 1 : this.calculateZoom_();
     this.renderer.setZoom(zoom);
   };
 
-  ns.AnimatedPreviewController.prototype.getZoom = function () {
+  ns.PreviewController.prototype.getZoom = function () {
     return this.calculateZoom_();
   };
 
-  ns.AnimatedPreviewController.prototype.getCoordinates = function(x, y) {
+  ns.PreviewController.prototype.getCoordinates = function(x, y) {
     var containerOffset = this.container.offset();
     x = x - containerOffset.left;
     y = y - containerOffset.top;
@@ -97,12 +103,12 @@
     };
   };
 
-  ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
+  ns.PreviewController.prototype.onFPSSliderChange = function (evt) {
     this.setFPS(parseInt(this.fpsRangeInput[0].value, 10));
 
   };
 
-  ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
+  ns.PreviewController.prototype.setFPS = function (fps) {
     if (typeof fps === 'number') {
       this.fps = fps;
       // reset
@@ -114,23 +120,24 @@
     }
   };
 
-  ns.AnimatedPreviewController.prototype.getFPS = function () {
+  ns.PreviewController.prototype.getFPS = function () {
     return this.fps;
   };
 
-  ns.AnimatedPreviewController.prototype.render = function (delta) {
+  ns.PreviewController.prototype.render = function (delta) {
     this.elapsedTime += delta;
     var index = this.getNextIndex_(delta);
-    if (this.renderFlag || this.currentIndex != index) {
+    if (this.shoudlRender_() || this.currentIndex != index) {
       this.currentIndex = index;
       var frame = this.piskelController.getFrameAt(this.currentIndex);
       this.renderer.render(frame);
-      this.popupPreviewController.render(frame);
       this.renderFlag = false;
+
+      this.popupPreviewController.render(frame);
     }
   };
 
-  ns.AnimatedPreviewController.prototype.getNextIndex_ = function (delta) {
+  ns.PreviewController.prototype.getNextIndex_ = function (delta) {
     if (this.fps === 0) {
       return this.piskelController.getCurrentFrameIndex();
     } else {
@@ -146,7 +153,7 @@
   /**
    * Calculate the preview zoom depending on the framesheet size
    */
-  ns.AnimatedPreviewController.prototype.calculateZoom_ = function () {
+  ns.PreviewController.prototype.calculateZoom_ = function () {
     var frame = this.piskelController.getCurrentFrame();
     var hZoom = PREVIEW_SIZE / frame.getHeight(),
         wZoom = PREVIEW_SIZE / frame.getWidth();
@@ -154,12 +161,12 @@
     return Math.min(hZoom, wZoom);
   };
 
-  ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
+  ns.PreviewController.prototype.onFrameSizeChange_ = function () {
     this.updateZoom_();
     this.updateContainerDimensions_();
   };
 
-  ns.AnimatedPreviewController.prototype.updateContainerDimensions_ = function () {
+  ns.PreviewController.prototype.updateContainerDimensions_ = function () {
     var containerEl = this.container.get(0);
     var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
     var height, width;
@@ -186,11 +193,15 @@
     containerEl.style.marginRight = verticalMargin + 'px';
   };
 
-  ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) {
+  ns.PreviewController.prototype.setRenderFlag_ = function (bool) {
     this.renderFlag = bool;
   };
 
-  ns.AnimatedPreviewController.prototype.toggleOnionSkin_ = function () {
+  ns.PreviewController.prototype.shoudlRender_ = function () {
+    return this.renderFlag || this.popupPreviewController.renderFlag;
+  };
+
+  ns.PreviewController.prototype.toggleOnionSkin_ = function () {
     var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
     pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
   };

src/js/controller/settings/ImportController.js

@@ -69,7 +69,7 @@
       pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel, descriptor, fps) {
         piskel.setDescriptor(descriptor);
         pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(fps);
+        pskl.app.previewController.setFPS(fps);
       });
       this.closeDrawer_();
     }

src/js/rendering/frame/TiledFrameRenderer.js

@@ -5,7 +5,9 @@
     this.container = container;
     this.setZoom(zoom);
 
-    this.displayContainer = document.createElement('div');
+    var containerEl = container.get(0);
+    var containerDocument = containerEl.ownerDocument;
+    this.displayContainer = containerDocument.createElement('div');
     this.displayContainer.classList.add('tiled-frame-container');
     container.get(0).appendChild(this.displayContainer);
 

src/js/service/BackupService.js

@@ -56,7 +56,7 @@
     pskl.utils.serialization.Deserializer.deserialize(previousPiskel, function (piskel) {
       piskel.setDescriptor(new pskl.model.piskel.Descriptor(previousInfo.name, previousInfo.description, true));
       pskl.app.piskelController.setPiskel(piskel);
-      pskl.app.animationController.setFPS(previousInfo.fps);
+      pskl.app.previewController.setFPS(previousInfo.fps);
     });
   };
 

src/js/service/FileDropperService.js

@@ -56,7 +56,7 @@
     if (window.confirm('This will replace your current animation')) {
       piskel.setDescriptor(descriptor);
       pskl.app.piskelController.setPiskel(piskel);
-      pskl.app.animationController.setFPS(fps);
+      pskl.app.previewController.setFPS(fps);
     }
   };
 

src/js/service/LocalStorageService.js

@@ -29,7 +29,7 @@
     pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
       piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, description, true));
       pskl.app.piskelController.setPiskel(piskel);
-      pskl.app.animationController.setFPS(fps);
+      pskl.app.previewController.setFPS(fps);
     });
   };
 

src/piskel-script-list.js

@@ -83,10 +83,10 @@
   "js/controller/CursorCoordinatesController.js",
   "js/controller/DrawingController.js",
   "js/controller/drawing/DragHandler.js",
-  "js/controller/PreviewFilmController.js",
+  "js/controller/FramesListController.js",
   "js/controller/LayersListController.js",
-  "js/controller/PopupPreviewController.js",
+  "js/controller/preview/PopupPreviewController.js",
-  "js/controller/AnimatedPreviewController.js",
+  "js/controller/preview/PreviewController.js",
   "js/controller/MinimapController.js",
   "js/controller/ToolController.js",
   "js/controller/PaletteController.js",

src/piskel-style-list.js

@@ -29,6 +29,6 @@
   "css/spectrum/spectrum-overrides.css",
   "css/bootstrap/bootstrap.css",
   "css/bootstrap/bootstrap-tooltip-custom.css",
-  "css/preview-film-section.css",
+  "css/frames-list.css",
   "css/minimap.css"
 ];

src/popup-preview.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html>
+  <head>
+    <style>
+
+      body,
+      .popup-container ,
+      .preview-container,
+      .tiled-frame-container {
+        width : 100%;
+        height : 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      .popup-container {
+        position: absolute;
+        background : #333;
+      }
+
+      .preview-container {
+        position: relative;
+      }
+
+      .tiled-frame-container {
+        position: relative;
+        background-repeat : no-repeat;
+      }
+
+      .canvas-container .canvas-background {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      .light-picker-background,
+      .light-canvas-background .canvas-background {
+        background: url(../img/canvas_background/light_canvas_background.png) repeat;
+      }
+
+      .medium-picker-background,
+      .medium-canvas-background .canvas-background {
+        background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+      }
+
+      .lowcont-medium-picker-background,
+      .lowcont-medium-canvas-background .canvas-background {
+        background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+      }
+
+      .lowcont-dark-picker-background,
+      .lowcont-dark-canvas-background .canvas-background {
+        background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+      }
+    </style>
+    <title>Preview</title>
+  </head>
+  <body>
+    <div class="popup-container  lowcont-dark-canvas-background ">
+      <div class="preview-container  canvas-container">
+        <div class="canvas-background"></div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      window.addEventListener('load', function () {
+        window.opener.pskl.app.previewController.popupPreviewController.onPopupLoaded()
+      });
+    </script>
+  </body>
+</html>

src/templates/misc-templates.html

@@ -6,28 +6,4 @@
       <div class="progress-bar-item progress-bar-status">{{status}}%</div>
     </div>
   </script>
-
-  <script type="text/template" id="popup-preview-partial">
-    <style>
-      body {
-        margin: 0;
-      }
-
-      .preview-container {
-        width : 100%;
-        height : 100%;
-      }
-
-      .tiled-frame-container {
-        height: 100%;
-        width: 100%;
-        position: relative;
-        background-repeat : repeat;
-      }
-    </style>
-    <div class="popup-container">
-      <div class="preview-container"></div>
-    </div>
-  </script>
-
 </div>

src/templates/preview.html

@@ -1,5 +1,6 @@
 <div id="animated-preview-container" class="preview-container">
   <div class="canvas-container-wrapper minimap-container">
+    <div class="open-popup-preview-button" title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
     <div id="animated-preview-canvas-container" class="canvas-container">
       <div class="canvas-background"></div>
     </div>
@@ -13,6 +14,5 @@
     <input id="preview-fps" class="range-fps" type="range" min="0" max="24"/>
   </div>
   <div>
-    <button class="open-popup-preview-button">Open in popup</button>
   </div>
 </div>