fixed comozilla#49

Ayato0404 · May 7, 2016 · bafc989 · bafc989
1 parent dd36df9
commit bafc989
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 102 deletions.
diff --git a/js/frames-controller.js b/js/frames-controller.js
@@ -2,6 +2,7 @@ import Frame from "./frame";
 import eventPublisher from "./publisher";
 import CanvasModel from "./canvas-model";
 
+// frame の追加・削除、currentFrameの切り替えをModel上で行う
 class FramesController{
 constructor() {
   let updateImageDataToNextData;
@@ -19,13 +20,15 @@ constructor() {
   };
   eventPublisher.subscribe("currentFrameId", updateImageDataToNextData);
 }
-append() {
+// パラメータ id : どこの後ろに追加するのか（今は実装していない）
+
+append(id) {
    const frame = new Frame();
   // 今はいいが、あとで splice に変える
   this.frames.push(frame);
   eventPublisher.publish("frames", this.frames);
 }
-remove() {
+remove(id) {
   if (this.frames.length <= 1) {
     throw new Error("残りフレーム数が1なので、削除することができません。");
   }
@@ -40,11 +43,11 @@ remove() {
   eventPublisher.publish("currentFrameId", nextCurrentFrameId);
 };
 
-setCurrentFrame(){
+setCurrentFrame(frameId){
   eventPublisher.publish("currentFrameId", frameId);
 }
 
- getFrameById(){
+ getFrameById(frameId){
     return this.frames[frameId];
  }
 
@@ -53,12 +56,9 @@ getCurrentFrame(){
 }
 }
 
-// frame の追加・削除、currentFrameの切り替えをModel上で行う
 
-    // beforeFrameは削除されている可能性がある
 
 
-// パラメータ id : どこの後ろに追加するのか（今は実装していない）
 
   // 今はいいが、あとで splice に変える
 

diff --git a/js/view/color-picker-view.js b/js/view/color-picker-view.js
@@ -1,8 +1,8 @@
 import eventPublisher from "./../publisher";
 
-function ColorPickerView(elem) {
-  // このelem には、ul要素が入ってくる（はず）。
-  this.element = elem;
+class colorpickerview{
+  constructor(){
+    this.element = elem;
   eventPublisher.subscribe("color", (color) => {
     let selectedPalette = this.element.querySelector(".selected-palette");
     let nextPalette;
@@ -14,9 +14,9 @@ function ColorPickerView(elem) {
       nextPalette.classList.add("selected-palette");
     }
   });
-}
+  }
 
-ColorPickerView.prototype.addPalette = function(color) {
+addPalette(){
   let palette;
 
   if (!isColor(color)) {
@@ -31,17 +31,20 @@ ColorPickerView.prototype.addPalette = function(color) {
   palette.addEventListener("click", event => {
     eventPublisher.publish("color", event.target.style.backgroundColor);
   });
-};
-
-ColorPickerView.prototype.clearPalette = function() {
+}
+clearPalette(){
   this.element.innerHTML = "";
 };
+}
 
-function isColor(color) {
-  const testElement = document.createElement("span");
+class isColor{
+  constructor(){
+    const testElement = document.createElement("span");
   testElement.style.backgroundColor = color;
 
   return testElement.style.backgroundColor !== "";
-}
+  }
+  }
+
 
 export default ColorPickerView;
diff --git a/js/view/line-width-picker-view.js b/js/view/line-width-picker-view.js
@@ -1,22 +1,23 @@
 import eventPublisher from "./../publisher";
 
-function LineWidthPickerPanel(elem) {
-  // このelem には、input[type="range"] 要素が入ってくる（はず）。
-  this.element = elem;
+class LineWidthPickerPanel{
+  constructor(){
+     this.element = elem;
   eventPublisher.subscribe("lineWidth", (lineWidth) => {
     this.element.value = lineWidth;
   });
   this.element.addEventListener("change", event => {
     eventPublisher.publish("lineWidth", event.target.value);
   });
-}
+  }
 
-LineWidthPickerPanel.prototype.changeMaxLineWidth = function(maxLineWidth) {
-  // TODO
-};
+changeMaxLineWidth(){
 
-LineWidthPickerPanel.prototype.changeMinLineWidth = function(minLineWidth) {
   // TODO
 };
 
+changeMinLineWidth(){
+   // TODO
+}
+}
 export default LineWidthPickerPanel;
diff --git a/js/view/menu-view.js b/js/view/menu-view.js
@@ -1,7 +1,8 @@
 import eventPublisher from "./../publisher";
 
-function MenuView() {
-  this.isOpen = false;
+class MenuView{
+  constructor(){
+    this.isOpen = false;
   this.isPlaying = false;
   this.setCollapsibleButtonMode(false);
   eventPublisher.subscribe("drawState", (newState) => {
@@ -25,28 +26,28 @@ function MenuView() {
         this.setMenuVisible(!this.isOpen);
       }
     });
-}
+  }
 
-MenuView.prototype.setMenuVisible = function(isOpen) {
+setMenuVisible(){
   const menu = document.getElementById("menu");
   const direction = isOpen ? "alternate" : "alternate-reverse";
   this.isOpen = isOpen;
   menu.animate(
       [{ transform: "translate(-20vw)" }, { transform: "translate(0px)" }],
       { direction: direction, duration: 250, fill: "both", easing: "ease-in-out"
     });
-};
-
+}
 // collapsibleButton : メニューの右側にあるボタン
-MenuView.prototype.setCollapsibleButtonVisible = function(visible) {
+
+setCollapsibleButtonVisible(){
   const collapsibleButton = document.getElementById("menu-collapsible-btn");
   const direction = visible ? "alternate" : "alternate-reverse";
   collapsibleButton.animate(
     [{ transform: "translate(-30px)" }, { transform: "translate(0px)" }],
     { direction: direction, duration: 100, fill: "both" });
-};
+}
 
-MenuView.prototype.setCollapsibleButtonMode = function(isPlaying) {
+setCollapsibleButtonMode(){
   this.isPlaying = isPlaying;
   const icon = document.querySelector("#menu-collapsible-btn i");
   if (isPlaying) {
@@ -56,5 +57,6 @@ MenuView.prototype.setCollapsibleButtonMode = function(isPlaying) {
     icon.classList.add("fa-cog");
     icon.classList.remove("fa-pause");
   }
-};
+}
+}
 export default MenuView;
diff --git a/js/view/player-view.js b/js/view/player-view.js
@@ -1,10 +1,12 @@
 import eventPublisher from "./../publisher";
 
-function PlayerView(element) {
-  this.element = element;
+class PlayerView{
+  constructor(){
+   this.element = element;
   this.element.addEventListener("click", () => {
     eventPublisher.publish("isPlaying", true);
-  });
+  }); 
+  }
 }
 
 export default PlayerView;
diff --git a/js/view/sequence-view.js b/js/view/sequence-view.js
@@ -1,7 +1,8 @@
 import eventPublisher from "./../publisher";
 
-function SequencePanel(elem, framesController) {
-  this.elem = elem;
+class SequencePanel{
+  constructor(){
+      this.elem = elem;
   this.maxFrameId = 0;
   this.currentFrameId = 0;
   this.framesController = framesController;
@@ -21,6 +22,7 @@ function SequencePanel(elem, framesController) {
   document.getElementById("sequence-add-btn").addEventListener("click", () => {
     this.framesController.append(++this.maxFrameId);
   });
+  }
 }
 
 /* フレームの構造
@@ -37,71 +39,66 @@ function SequencePanel(elem, framesController) {
   </div>
 </div>
 */
-function getFrameTemplate(
-    frameId,
+class getFrameTemplate{
+  constructor(frameId,
     mousedownFrameCallback,
-    mousedownRemoveCallback) {
-  let frame = document.createElement("div");
-  let frameDeleteBtn = document.createElement("button");
-  let frameUpBtn = document.createElement("button");
-  let frameDownBtn = document.createElement("button");
-  frame.dataset.frameIndex = frameId;
-  frame.classList.add("thumbnail");
-  frame.addEventListener("mousedown", mousedownFrameCallback);
-  frameDeleteBtn.classList.add("frame-delete");
-  frameUpBtn.classList.add("frame-up");
-  frameDownBtn.classList.add("frame-down");
-  frameDeleteBtn.innerHTML = "<i class=\"fa fa-times\"></i>";
-  frameDeleteBtn.addEventListener("mousedown", mousedownRemoveCallback);
-  frameUpBtn.innerHTML = "<i class=\"fa fa-sort-asc\"></i>";
-  frameDownBtn.innerHTML = "<i class=\"fa fa-sort-desc\"></i>";
-  frame.appendChild(frameDeleteBtn);
-  frame.appendChild(frameUpBtn);
-  frame.appendChild(frameDownBtn);
-
-  return frame;
-}
+    mousedownRemoveCallback){
+    let frame = document.createElement("div");
+    let frameDeleteBtn = document.createElement("button");
+    let frameUpBtn = document.createElement("button");
+    let frameDownBtn = document.createElement("button");
+    frame.dataset.frameIndex = frameId;
+    frame.classList.add("thumbnail");
+    frame.addEventListener("mousedown", mousedownFrameCallback);
+    frameDeleteBtn.classList.add("frame-delete");
+    frameUpBtn.classList.add("frame-up");
+    frameDownBtn.classList.add("frame-down");
+    frameDeleteBtn.innerHTML = "<i class=\"fa fa-times\"></i>";
+    frameDeleteBtn.addEventListener("mousedown", mousedownRemoveCallback);
+    frameUpBtn.innerHTML = "<i class=\"fa fa-sort-asc\"></i>";
+    frameDownBtn.innerHTML = "<i class=\"fa fa-sort-desc\"></i>";
+    frame.appendChild(frameDeleteBtn);
+    frame.appendChild(frameUpBtn);
+    frame.appendChild(frameDownBtn);
 
-SequencePanel.prototype.append = function(frameId) {
-  let newFrame = getFrameTemplate(frameId, (event) => {
-    // 子要素のmousedownによる発生を防ぐ
-    if (event.target.classList.contains("thumbnail")) {
-      eventPublisher.publish("currentFrameId", frameId);
-      this.setCurrentFrame(newFrame);
-    }
-  }, () => {
-    // フレーム数が１つの時は、エラーになるため削除しない。
-    if (this.maxFrameId > 0) {
-      this.framesController.remove(frameId);
+    return frame;
+  }
+  append(){
+    let newFrame = getFrameTemplate(frameId, (event) => {
+      // 子要素のmousedownによる発生を防ぐ
+      if (event.target.classList.contains("thumbnail")) {
+        eventPublisher.publish("currentFrameId", frameId);
+        this.setCurrentFrame(newFrame);
+      }
+    }, () => {
+      // フレーム数が１つの時は、エラーになるため削除しない。
+      if (this.maxFrameId > 0) {
+        this.framesController.remove(frameId);
+      }
+    });
+    this.elem.appendChild(newFrame);
+  }
+  clear(){
+    this.elem.innerHTML = "";
+  }
+  remove(){
     }
-  });
-  this.elem.appendChild(newFrame);
-};
-
-SequencePanel.prototype.clear = function() {
-  this.elem.innerHTML = "";
-};
-
-SequencePanel.prototype.remove = function(frame) {
-};
-
-SequencePanel.prototype.moveUp = function() {
-  // TODO
-};
-
-SequencePanel.prototype.moveDown = function() {
-  // TODO
-};
-
-SequencePanel.prototype.setCurrentFrame = function(frameIndex) {
-  let frame = this.elem.querySelector(`[data-frame-index="${frameIndex}"]`);
-  if (frame !== null) {
-    const selectedFrame = this.elem.querySelector(".thumbnail-selected");
-    if (selectedFrame) {
-      selectedFrame.classList.remove("thumbnail-selected");
+  moveUp(){
+    // TODO
+  }
+  moveDown(){
+    // TODO 
+  }
+  setCurrentFrame(){
+    let frame = this.elem.querySelector(`[data-frame-index="${frameIndex}"]`);
+    if (frame !== null) {
+      const selectedFrame = this.elem.querySelector(".thumbnail-selected");
+      if (selectedFrame) {
+        selectedFrame.classList.remove("thumbnail-selected");
+      }
+      frame.classList.add("thumbnail-selected");
     }
-    frame.classList.add("thumbnail-selected");
   }
-};
+}
 
 export default SequencePanel;