SHARE
TWEET

Untitled

a guest May 23rd, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.                 let mouseDown = false;
  3.  
  4.                 let pixelArtEditors = {};
  5.                 let nextEditorKey = 0;
  6.  
  7.                 $.fn.PixelArtEditor = function (colorContainer, gridWidth, gridHeight, defaultColors) {
  8.                     let pixelArtEditor = this;
  9.                     let editorKey = nextEditorKey++;
  10.                     pixelArtEditors[editorKey] = this;
  11.                     for (let y = 0; y < gridHeight; y++) {
  12.                         let rowElement = $(document.createElement("DIV"));
  13.                         rowElement.addClass("row");
  14.                         if (y === 0) rowElement.addClass("row-first");
  15.                         if (y === gridHeight - 1) rowElement.addClass("row-last");
  16.                         for (let x = 0; x < gridWidth; x++) {
  17.                             let pixelElement = $(document.createElement("DIV"));
  18.                             pixelElement.addClass("pixel");
  19.                             if (x === 0) pixelElement.addClass("pixel-left");
  20.                             if (x === gridWidth - 1) pixelElement.addClass("pixel-right");
  21.                             rowElement.append(pixelElement);
  22.                         }
  23.                         this.append(rowElement);
  24.                     }
  25.                     this.grid = {};
  26.                     this.grid.container = this;
  27.                     this.grid.width = gridWidth;
  28.                     this.grid.height = gridHeight;
  29.                     this.grid.importColors = function (colors) {
  30.                         this.container.children().each(function () {
  31.                             let gridRow = this;
  32.                             $(gridRow).children().each(function () {
  33.                                 $(this).css("background-color",  colors[$(this).index() + ":" + $(gridRow).index()].color);
  34.                             })
  35.                         });
  36.                     }
  37.                     this.grid.exportColors = function () {
  38.                         let exportedColors = {};
  39.                         this.container.children().children().each(function () {
  40.                             console.log($(this).parent().index());
  41.                             exportedColors[$(this).index() + ":" + $(this).parent().index()] = {
  42.                                 "x": $(this).index(),
  43.                                 "y": $(this).parent().index(),
  44.                                 "color": $(this).css("background-color")
  45.                             };
  46.                         });
  47.                         return exportedColors;
  48.                     }
  49.  
  50.                     this.colorSelector = {};
  51.                     this.colorSelector.container = colorContainer;
  52.                     this.colorSelector.colors = defaultColors;
  53.                     this.colorSelector.selectedColor = defaultColors[0];
  54.                     this.colorSelector.selectedColorIndex = 0;
  55.                     this.colorSelector.updateColors = function () {
  56.                         this.colors = [];
  57.                         this.container.children().each(function () {
  58.                             pixelArtEditor.colorSelector.colors.push($(this).css("background-color"));
  59.                         });
  60.                         this.selectedColor = this.colors[this.selectedColorIndex];
  61.                     };
  62.  
  63.                     defaultColors.forEach(function (defaultColor, key) {
  64.                         let colorSelector = $(document.createElement("INPUT"));
  65.                         colorSelector.attr("type", "button");
  66.                         colorSelector.addClass("jsColor");
  67.                         colorSelector.addClass("{valueElement:null,value:'" + defaultColor + "',onFineChange:'pixelArtEditors[" + editorKey + "].colorSelector.updateColors()'}");
  68.                         colorSelector.addClass("colorPick");
  69.                         colorSelector.on("click", function () {
  70.                             pixelArtEditor.colorSelector.selectedColor = pixelArtEditor.colorSelector.colors[key];
  71.                             pixelArtEditor.colorSelector.selectedColorIndex = key;
  72.                         });
  73.                         pixelArtEditor.colorSelector.container.append(colorSelector);
  74.                     });
  75.  
  76.  
  77.                     this.find(".pixel").on("click", function () {
  78.                         $(this).css("background-color", pixelArtEditor.colorSelector.selectedColor);
  79.                     });
  80.                     this.find(".pixel").mousemove(function (event) {
  81.                         if (mouseDown) $(this).css("background-color", pixelArtEditor.colorSelector.selectedColor);
  82.                     });
  83.                     $("body").on("touchmove", function (event) {
  84.                         let target = document.elementFromPoint(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
  85.                         if ($(target).hasClass("pixel") && pixelArtEditor.has($(target)).length) {
  86.                             $(target).css("background-color", pixelArtEditor.colorSelector.selectedColor);
  87.                         }
  88.                     });
  89.                     return this;
  90.                 };
  91.                 $("body").mousedown(function () {
  92.                     mouseDown = true;
  93.                 });
  94.                 $("body").mouseup(function () {
  95.                     mouseDown = false;
  96.                 });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top