init 7

public/index.html

@@ -36,6 +36,7 @@
             <label for="taWorkshopId">WorkshopIDs</label>
             <textarea id="taWorkshopId" class="u-full-width" x-model="ids"></textarea>
             <button x-on:click="getModDescription()">load mod descriptions</button>
+            <button @click="copyToClipboard()" x-bind:disabled="checkedItems.length == 0">Copy selected</button>
         </div>
     </div>
     <template x-if="items.length > 0">
@@ -63,7 +64,6 @@
                     </template>
                     </tbody>
                 </table>
-                <span x-text="JSON.stringify(checkedItems)"></span>
             </div>
         </div>
     </template>

src/index.js

@@ -3,7 +3,7 @@ import './skeleton.css'
 import './style.scss'
 
 import Alpine from 'alpinejs'
-import {defer, orderBy, sortBy} from "lodash";
+import { defer } from "lodash";
 import * as cheerio from 'cheerio';
 
 window.Alpine = Alpine;
@@ -16,6 +16,9 @@ document.addEventListener('alpine:init', () => {
         items: [],
         loading: false,
         checkedItems: [],
+        copyToClipboard() {            
+            navigator.clipboard.writeText(this.checkedItems.join(';'));
+        },
         checkItems(e) {
             if (e.target.checked) {
                 this.checkedItems = this.items.map(item => item.id);

src/style.scss

@@ -2,6 +2,7 @@ $text: #906b3a;
 $hover: #C9AE5D;
 $bg: #222;
 $secColor: #333;
+$primary: #ccc;
 
 body {
   color: $text;
@@ -10,15 +11,17 @@ body {
 
 a, button {
   color: $text;
-  background-color: $bg;
+  background-color: $primary;
 }
 
-button:focus {
-  color: $text;
-  background-color: $bg;
+button[disabled] {
+  background:$bg;
+  border-color: $primary;
+  color: $secColor;
+  text-shadow:none;
 }
 
-button:hover {
+button[disabled=false]:hover {
   color: $bg;
   background-color: $text;
 }