Migrated to Svelte 3.

sciactive · Apr 24, 2019 · fa6a9fe · fa6a9fe
1 parent d0aabd5
commit fa6a9fe
Show file tree

Hide file tree

Showing 8 changed files with 4,293 additions and 814 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,59 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
+/lib/
+/dist/
 node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
diff --git a/compile.js b/compile.js
@@ -0,0 +1,13 @@
+const svelte = require('svelte/compiler');
+const fs = require('fs');
+
+const filename = 'src/MultiCarousel.html';
+const code = fs.readFileSync(filename, 'utf8');
+
+const result = svelte.compile(code, {
+  filename,
+  css: false,
+});
+
+fs.writeFileSync('lib/MultiCarousel.js', result.js.code);
+fs.writeFileSync('lib/MultiCarousel.css', result.css.code);
diff --git a/demo/index.html b/demo/index.html
@@ -1,8 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
   <title>MultiCarousel</title>
+  <meta charset="utf-8" />
   <style type="text/css">
+    html {
+      font-family: Verdana, Geneva, sans-serif;
+      color: #333;
+    }
     .multicarousel .items > * {
       height: 200px;
       background: #FFF9CD;
@@ -12,7 +17,7 @@
       font-size: 30px;
     }
   </style>
-  <script src="../lib/MultiCarousel.js"></script>
+  <script src="../dist/MultiCarousel.js"></script>
 </head>
 <body>
   <header>
@@ -36,33 +41,21 @@ <h1>MultiCarousel</h1>
   </div>
   <div>
     Methods:<br />
-    <button onclick="previous()">Previous</button>
-    <button onclick="pause()">Pause</button>
-    <button onclick="start()">Start</button>
-    <button onclick="next()">Next</button>
+    <button onclick="carousel.previous()">Previous</button>
+    <button onclick="carousel.pause()">Pause</button>
+    <button onclick="carousel.start()">Start</button>
+    <button onclick="carousel.next()">Next</button>
   </div>
   <script>
-    var container = document.getElementById('MyCarousel');
-    var carousel = new MultiCarousel({
+    const container = document.getElementById('MyCarousel');
+    const carousel = new MultiCarousel({
       target: container,
-      data: {
+      props: {
         delay: 2000,
-        items: Array.prototype.slice.call(container.children),
+        items: [...container.children],
         count: 5
       }
     });
-    function previous() {
-      carousel.previous();
-    }
-    function pause() {
-      carousel.pause();
-    }
-    function start() {
-      carousel.start();
-    }
-    function next() {
-      carousel.next();
-    }
   </script>
 
   <p>
@@ -80,34 +73,55 @@ <h1>MultiCarousel</h1>
   </div>
   <div>
     Methods:<br />
-    <button onclick="previous2()">Previous</button>
-    <button onclick="pause2()">Pause</button>
-    <button onclick="start2()">Start</button>
-    <button onclick="next2()">Next</button>
+    <button onclick="carousel2.previous()">Previous</button>
+    <button onclick="carousel2.pause()">Pause</button>
+    <button onclick="carousel2.start()">Start</button>
+    <button onclick="carousel2.next()">Next</button>
   </div>
   <script>
-  var container2 = document.getElementById('MyCarousel2');
-    var carousel2 = new MultiCarousel({
+    const container2 = document.getElementById('MyCarousel2');
+    const carousel2 = new MultiCarousel({
       target: container2,
-      data: {
+      props: {
         delay: 2000,
-        items: Array.prototype.slice.call(container2.children),
+        items: [...container2.children],
         count: 1,
         controls: []
       }
     });
-    function previous2() {
-      carousel2.previous();
-    }
-    function pause2() {
-      carousel2.pause();
-    }
-    function start2() {
-      carousel2.start();
-    }
-    function next2() {
-      carousel2.next();
-    }
+  </script>
+
+  <p>
+    Two Items, Only "Previous" Control:
+  </p>
+  <div id="MyCarousel3">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+  </div>
+  <div>
+    Methods:<br />
+    <button onclick="carousel3.previous()">Previous</button>
+    <button onclick="carousel3.pause()">Pause</button>
+    <button onclick="carousel3.start()">Start</button>
+    <button onclick="carousel3.next()">Next</button>
+  </div>
+  <script>
+    const container3 = document.getElementById('MyCarousel3');
+    const carousel3 = new MultiCarousel({
+      target: container3,
+      props: {
+        delay: 2000,
+        items: [...container3.children],
+        count: 2,
+        controls: ['previous']
+      }
+    });
   </script>
 </body>
 </html>