dodanie funkcjonalnosci zaznaczania masowego

kartofelek007 · Mar 6, 2020 · 52c919f · 52c919f
1 parent 6d22cbe
commit 52c919f
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 180 deletions.
diff --git a/colors.json b/colors.json
@@ -1 +1 @@
-{"colors":["#EFDC05","#f1865e","#58C9B9","#FFEEE4","#D1B6E1","#F17F42","#CE6D39","#000000","#30A9DE","#519D9E","#090707","#A593E0","#E0E3DA","#FFFFF3","#FBFFB9","#F6B352","#383A3F","#1F2124","#D7FFF1","#FDD692","#EC7357","#754F44","#F68657","#C5E99B","#8FBC94","#548687","#D499B9","#56445D","#E71D36","#2EC4B6","#EFFFE9","#011627","#DE6449","#791E94","#FFFFF2","#5CAB7D","#5A9367","#3F4B3B","#FFBC42","#D81159","#8F2D56","#218380","#E3E36A","#C16200","#881600","#49010F","#4F86C6","#6C49B8","#67D5B5","#EE7785","#C89EC4","#84B1ED","#F16B6F","#C5C6B6","#AACD6E","#3C3530","#6E7783","#D8E6E7","#9DC3C1","#AF4034","#3E4348","#C65146","#EC6A5C","#DE7E73","#CFAA9E","#D4DFE6","#8EC0E4","#CADBE9","#6AAFE6","#FADAD8","#56A902","#9B8281","#3B4E32","#F0E5DE","#ABD0CE","#7C7877","#D9D4CF","#AAABD3","#F8FAFF","#CBA6C3","#353866","#75D701","#F8F8FF","#1b995c","#007ac8","#000000","#de654a","#ffffff","#fee890","#ded777"]}
+{"colors":["#EFDC05","#f1865e","#D1B6E1","#F17F42","#CE6D39","#000000","#30A9DE","#519D9E","#090707","#A593E0","#E0E3DA","#FFFFF3","#FBFFB9","#F6B352","#383A3F","#D7FFF1","#FDD692","#EC7357","#754F44","#F68657","#C5E99B","#8FBC94","#548687","#D499B9","#56445D","#E71D36","#2EC4B6","#EFFFE9","#011627","#DE6449","#791E94","#FFFFF2","#5CAB7D","#5A9367","#3F4B3B","#FFBC42","#D81159","#8F2D56","#218380","#E3E36A","#C16200","#881600","#49010F","#4F86C6","#6C49B8","#67D5B5","#EE7785","#C89EC4","#84B1ED","#F16B6F","#C5C6B6","#AACD6E","#3C3530","#6E7783","#D8E6E7","#9DC3C1","#AF4034","#3E4348","#C65146","#EC6A5C","#DE7E73","#8EC0E4","#CADBE9","#6AAFE6","#FADAD8","#F0E5DE","#ABD0CE","#7C7877","#D9D4CF","#AAABD3","#F8FAFF","#CBA6C3","#353866","#75D701","#F8F8FF","#1b995c","#007ac8","#de654a","#ffffff","#fee890","#d0b8e0"]}
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,15 @@
+
 body {
     background: #1E1F1C;
     padding-top: 0px;
     font-family: sans-serif;
 }
 
+.selection {
+    border: 2px solid rgba(30,144,255, 1);
+    background: rgba(30,144,255, 0.2);
+}
+
 .menu {
     display: flex;
     justify-content: flex-end;
@@ -19,8 +25,8 @@ body {
     transition: 0.2s;
 }
 .menu-btn svg {
-    width: 25px;
-    height: 25px;
+    width: 24px;
+    height: 24px;
     fill: #fff;
     stroke: none;
     transition: 0.2s;
@@ -57,8 +63,9 @@ body {
 }
 .menu-submenu input[type="checkbox"]::before {
     content: "";
-    width: 8px;
-    height: 8px;
+    width: 10px;
+    height: 10px;
+    border-radius: 1px;
     background: dodgerblue;
     display: block;
     transform: scale(0.5);
@@ -96,16 +103,16 @@ body {
 }
 
 .selected-colors {
-    background: rgba(0,0,0,0.8);
-    border-radius: 0 0 20px 0;
+    background: rgba(10,10,10,0.7);
+    border-radius: 0 20px 0 0;
     z-index: 200;
     position: fixed;
-    top:0;
+    bottom: 0;
     left:0;
     transition: 0.5s;
     display: flex;
-    flex-direction: column;
-    /* border-radius: 0 0 5px 0; */
+    max-height: 500px;
+    flex-wrap: wrap;;
     box-shadow: 0 0 4px rgba(0,0,0,0.7);
 }
 .selected-colors div {
@@ -150,16 +157,12 @@ body {
     position: relative;
     cursor: pointer;
     font-weight: bold;
-    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
-    -webkit-text-fill-color: white;
-    -webkit-text-stroke-width: 1px;
-    -webkit-text-stroke-color: rgba(0,0,0,0.4);
 }
-.palette-element:hover {
-    z-index: 2;
+.palette-element.selected {
     box-shadow:
-    inset 0 0 0 3px rgba(255,255,255,1),
-    inset 0 0 0 2px rgba(0,0,0,1)
+    inset 0 0 0 6px rgba(255,255,255,1),
+    inset 0 0 0 7px rgba(0,0,0,0.2);
+    /* transform: scale(0.9); */
 }
 .palette-element-delete {
     position: absolute;
@@ -194,30 +197,3 @@ body {
 .palette-element-add svg {
     fill: var(--color);
 }
-
-.selected {
-    animation: anim 0.2s 0s 1 alternate;
-}
-@keyframes anim {
-    100% {
-        transform:scale(1.1);
-    }
-}
-.popup {
-    position: fixed;
-    top:10px;
-    left:50%;
-    transform: translate(-50%, 0);
-    display: inline-block;
-    width:200px;
-    height:50px;
-    background: rgba(0,0,0,0.8);
-    color:#fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: sans-serif;
-    text-transform: uppercase;
-    border-radius: 4px;
-    z-index: 1000;
-}
diff --git a/images/dropper-icon.png b/images/dropper-icon.png
diff --git a/images/icon.ico b/images/icon.ico
diff --git a/images/icon.png b/images/icon.png
diff --git a/index.html b/index.html
@@ -16,12 +16,12 @@
         </div>
         <div class="menu-element">
             <div class="menu-manage menu-btn" id="menuCopySetup">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 5H22V7H13zM2 7L9 7 9 9 11 9 11 3 9 3 9 5 2 5zM9 17H22V19H9zM19 11H22V13H19zM17 15L17 9.012 15 9.012 15 11 2 11 2 13 15 13 15 15zM7 21L7 15 5 15 5 17 2 17 2 19 5 19 5 21z"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,3H4C2.897,3,2,3.897,2,5v14c0,1.103,0.897,2,2,2h16c1.103,0,2-0.897,2-2V5C22,3.897,21.103,3,20,3z M4,19V5h16 l0.002,14H4z"/><path d="M6 7H18V9H6zM6 11H18V13H6zM6 15H12V17H6z"/></svg>
             </div>
         </div>
         <div class="menu-element">
             <div class="menu-btn" id="menuManage">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 11h6c.553 0 1-.447 1-1V4c0-.553-.447-1-1-1H4C3.447 3 3 3.447 3 4v6C3 10.553 3.447 11 4 11zM4 21h6c.553 0 1-.447 1-1v-6c0-.553-.447-1-1-1H4c-.553 0-1 .447-1 1v6C3 20.553 3.447 21 4 21zM14 21h6c.553 0 1-.447 1-1v-6c0-.553-.447-1-1-1h-6c-.553 0-1 .447-1 1v6C13 20.553 13.447 21 14 21zM21.293 6.293l-3.586-3.586c-.391-.391-1.023-.391-1.414 0l-3.586 3.586c-.391.391-.391 1.023 0 1.414l3.586 3.586c.391.391 1.023.391 1.414 0l3.586-3.586C21.684 7.316 21.684 6.684 21.293 6.293z"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.513,12.833l9.022,5.04C11.687,17.958,11.854,18,12.022,18s0.335-0.042,0.486-0.126l8.978-5 C21.804,12.697,22,12.362,22,11.999s-0.197-0.698-0.516-0.874l-9.022-5c-0.301-0.167-0.667-0.167-0.968-0.001l-8.978,4.96 C2.198,11.26,2.001,11.594,2,11.958S2.195,12.656,2.513,12.833z M11.977,8.143l6.964,3.859l-6.917,3.853l-6.964-3.89L11.977,8.143z"/><path d="M3.485 15.126l-.971 1.748 9 5C11.665 21.958 11.833 22 12 22s.335-.042.485-.126l9-5-.971-1.748L12 19.856 3.485 15.126zM16 4H22V6H16z"/></svg>
             </div>
         </div>
     </div>

diff --git a/js/createPalette.js b/js/createPalette.js
@@ -1,34 +1,21 @@
-const fs = require("fs");
-const path = require("path");
-
 import copyToClipboard from "./utils/clipboard.js";
 import colorBrightness from "./utils/colorBrightness.js";
 import { saveColorsToFile, readColorsFromFile } from "./saveToFile.js";
 import {DragDrop} from "./utils/dragDrop.js";
 import {hexToRgb, rgbToHex} from "./utils/colors.js";
 import {options} from "./opions.js";
 
-options.loadFromStorage(); //poczatkowe wczytanie
-
 const colors = readColorsFromFile();
-let addKeyPress = false; //podczas naciskania ctrl lub shift mozna wybierac kikla kolorów
 let selectedColors = []; //wybrane kolory
 
 const paletteElement = document.querySelector("#palette");
 
+options.loadFromStorage(); //poczatkowe wczytanie
 options.subscribe(function() {
     copyColors();
     options.saveToStorage();
 })
 
-document.addEventListener("keydown", e => {
-    addKeyPress = e.ctrlKey || e.shiftKey;
-})
-
-document.addEventListener("keyup", e => {
-    addKeyPress = e.ctrlKey || e.shiftKey;
-})
-
 const copyColors = function() {
     const qt = options.opts.quote.status?'"':'';
     const cm = options.opts.comma.status?',':'';
@@ -44,14 +31,11 @@ const copyColors = function() {
     }
 
     if (selectedColors.length) {
-        console.log(`${qt}${colors.join(char)}${qt}`);
         copyToClipboard(`${qt}${colors.join(char)}${qt}`);
     }
 }
 
 
-
-
 const selectedColorsElement = document.querySelector("#selectedColors");
 
 const createSelected = function() {
@@ -67,15 +51,15 @@ const createSelected = function() {
             if (colorBrightness(el) > 100) {
                 div.querySelector("svg").style.fill = "#000";
             }
+            div.addEventListener("click", e => {
+                const that = e.currentTarget;
+                const children = that.parentElement.children;
+                const index = [...children].findIndex(el => el === that);
+                selectedColors.splice(index, 1);
+                createSelected();
+            })
         }
         selectedColorsElement.append(div);
-        div.addEventListener("click", e => {
-            const that = e.currentTarget;
-            const children = that.parentElement.children;
-            const index = [...children].findIndex(el => el === that);
-            selectedColors.splice(index, 1);
-            createSelected();
-        })
     })
     copyColors();
 }
@@ -96,39 +80,64 @@ const createColorElement = function(color) {
     }
     btn.addEventListener("click", e => {
         e.currentTarget.parentElement.remove();
+        createSelected();
         saveColorsToFile();
     })
     div.append(btn);
 
-    div.addEventListener('click', function() {
-        if (!palette.classList.contains("palette-manage")) {
-            //this.classList.add('selected');
-            if (!addKeyPress) {
-                selectedColors = [];
-            }
-
-            if (selectedColors.length === 0) {
-                selectedColors.push(this.dataset.color);
-            }
-            if (selectedColors[selectedColors.length-1] !== this.dataset.color) {
-                selectedColors.push(this.dataset.color);
-            }
-            createSelected();
-        }
-    });
-
     return div;
 }
 
-export default function() {
-    for (const color of colors) {
-        const element = createColorElement(color);
-        paletteElement.append(element);
+
+//https://github.com/Simonwep/selection
+const Selection = require("@simonwep/selection-js");
+const selection = new Selection({
+    class: 'selection',
+    frame: document,
+    startThreshold: 10,
+    disableTouch: false,
+    mode: 'touch',
+    tapMode: 'native',
+    singleClick: true,
+    selectables: [
+        ".palette-element"
+    ],
+    startareas: ['html'],
+    boundaries: ['html'],
+    selectionAreaContainer: 'body',
+    scrollSpeedDivider: 10,
+    manualScrollSpeed: 750
+}).on('start', ({inst, selected, oe}) => {
+    if (!oe.ctrlKey && !oe.metaKey) {
+        for (const el of selected) {
+            el.classList.remove('selected');
+            inst.removeFromSelection(el);
+        }
+        inst.clearSelection();
+    }
+
+}).on('move', ({changed: {removed, added}}) => {
+    for (const el of added) {
+        el.classList.add('selected');
+    }
+    for (const el of removed) {
+        el.classList.remove('selected');
     }
+    selectedColors = [...paletteElement.querySelectorAll(".selected")].map(el => el.dataset.color)
+    createSelected();
+}).on('stop', ({inst}) => {
+    inst.keepSelection();
+});
+
+
+for (const color of colors) {
+    const element = createColorElement(color);
+    paletteElement.append(element);
 }
 
 
 
+//---------------------------------------
 //MENU
 //---------------------------------------
 const manageBtn = document.querySelector('#menuManage');
@@ -139,12 +148,22 @@ const drag = new DragDrop('#palette', {
     className : "palette-element"
 });
 
+const clearSelected = function() {
+    selectedColors = [];
+    selection.clearSelection()
+    paletteElement.querySelectorAll(".selected").forEach(el => el.classList.remove("selected"));
+    createSelected();
+}
+
 manageBtn.addEventListener("click", e => {
     palette.classList.toggle("palette-manage");
     if (palette.classList.contains("palette-manage")) {
+        selection.disable();
+        clearSelected();
         drag.initDraggable();
         selectedColorsElement.style.display = "none";
     } else {
+        selection.enable();
         drag.removeDraggable();
         selectedColorsElement.style.display = "";
     }

diff --git a/js/opions.js b/js/opions.js
@@ -1,7 +1,7 @@
 export let options = {
     opts : {
         newLine : {status: false, textInMenu: "Znak nowej linii"},
-        comma   : {status: false, textInMenu: "Przecinek między kolorami"},
+        comma   : {status: false, textInMenu: "Przecinek pomiędzy kolorami"},
         quote   : {status: false, textInMenu: "Kolory w cudzysłowach"},
         rgba    : {status: false, textInMenu: "Kolory jako RGBA"}
     },

diff --git a/js/saveToFile.js b/js/saveToFile.js
@@ -12,13 +12,19 @@ export const saveColorsToFile = function() {
     for (const el of elements) {
         json.colors.push(el.dataset.color);
     }
-
-    fs.writeFile(fileUrl, JSON.stringify(json), 'utf8', () => {});
+    try {
+    fs.writeFileSync(fileUrl, JSON.stringify(json));
+    } catch (err) {
+        alert("Wystąpił błąd w czasie zapisu", err);
+    }
 }
 
 export const readColorsFromFile = function() {
-    const urlJSONFile = "./colors.json";
-    const rawData = fs.readFileSync(fileUrl);
-    const json = JSON.parse(rawData);
-    return [...json.colors];
+    try {
+        const rawData = fs.readFileSync(fileUrl);
+        const json = JSON.parse(rawData);
+        return [...json.colors];
+    } catch (err) {
+        return [];
+    }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"colors":["#EFDC05","#f1865e","#58C9B9","#FFEEE4","#D1B6E1","#F17F42","#CE6D39","#000000","#30A9DE","#519D9E","#090707","#A593E0","#E0E3DA","#FFFFF3","#FBFFB9","#F6B352","#383A3F","#1F2124","#D7FFF1","#FDD692","#EC7357","#754F44","#F68657","#C5E99B","#8FBC94","#548687","#D499B9","#56445D","#E71D36","#2EC4B6","#EFFFE9","#011627","#DE6449","#791E94","#FFFFF2","#5CAB7D","#5A9367","#3F4B3B","#FFBC42","#D81159","#8F2D56","#218380","#E3E36A","#C16200","#881600","#49010F","#4F86C6","#6C49B8","#67D5B5","#EE7785","#C89EC4","#84B1ED","#F16B6F","#C5C6B6","#AACD6E","#3C3530","#6E7783","#D8E6E7","#9DC3C1","#AF4034","#3E4348","#C65146","#EC6A5C","#DE7E73","#CFAA9E","#D4DFE6","#8EC0E4","#CADBE9","#6AAFE6","#FADAD8","#56A902","#9B8281","#3B4E32","#F0E5DE","#ABD0CE","#7C7877","#D9D4CF","#AAABD3","#F8FAFF","#CBA6C3","#353866","#75D701","#F8F8FF","#1b995c","#007ac8","#000000","#de654a","#ffffff","#fee890","#ded777"]}
		{"colors":["#EFDC05","#f1865e","#D1B6E1","#F17F42","#CE6D39","#000000","#30A9DE","#519D9E","#090707","#A593E0","#E0E3DA","#FFFFF3","#FBFFB9","#F6B352","#383A3F","#D7FFF1","#FDD692","#EC7357","#754F44","#F68657","#C5E99B","#8FBC94","#548687","#D499B9","#56445D","#E71D36","#2EC4B6","#EFFFE9","#011627","#DE6449","#791E94","#FFFFF2","#5CAB7D","#5A9367","#3F4B3B","#FFBC42","#D81159","#8F2D56","#218380","#E3E36A","#C16200","#881600","#49010F","#4F86C6","#6C49B8","#67D5B5","#EE7785","#C89EC4","#84B1ED","#F16B6F","#C5C6B6","#AACD6E","#3C3530","#6E7783","#D8E6E7","#9DC3C1","#AF4034","#3E4348","#C65146","#EC6A5C","#DE7E73","#8EC0E4","#CADBE9","#6AAFE6","#FADAD8","#F0E5DE","#ABD0CE","#7C7877","#D9D4CF","#AAABD3","#F8FAFF","#CBA6C3","#353866","#75D701","#F8F8FF","#1b995c","#007ac8","#de654a","#ffffff","#fee890","#d0b8e0"]}