HRB-3334 加上範例頁面(Web&Mobile)共用

76487890 · 冷佳娟 · c782140f · 76487890 · 76487890 · 76487890
Commit 76487890 authored Feb 24, 2020 by 冷佳娟 💪
16 changed files
--- a/demo/README.md
+++ b/demo/README.md
+# 根目錄 yarn install && npm run build 產生 dist/lottery-wheel.min.js
+
+# 到 demo yarn install && npm run start
+
+# demo 頁面為 localhost:3000/demo.html (RWD)
+
+# 其他使用範例為 localhost:3000/index.html
+
+# 更多詳細使用方式請參考 [https://github.com/fralonra/lottery-wheel]
\ No newline at end of file
--- a/demo/app.js
+++ b/demo/app.js
+'use strict'
+const express = require('express')
+// create Express app
+const app = express()
+
+app.use(express.static(__dirname + '/public'));
+
+app.get('/test', (req, res) => res.end('I\'m listening. Please access with static.'))
+
+// listen on port
+const port = process.env.PORT || 3000
+app.listen(port, () => {
+   console.log(`listening on ${port}`)
+})
--- a/demo/package.json
+++ b/demo/package.json
+{
+    "name": "h2u-lottery",
+    "version": "0.0.0",
+    "description": "H2U HRB Lottery",
+    "engines": {
+      "node": "10.x"
+    },
+    "main": "app.js",
+    "scripts": {
+      "start": "cp ../dist/lottery-wheel.min.js public/js && node app.js",
+      "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "dependencies": {
+      "@line/bot-sdk": "^6.8.4",
+      "express": "^4.17.1",
+      "node-fetch": "^2.6.0"
+    },
+    "devDependencies": {
+      "eslint": "^6.8.0",
+      "eslint-config-standard": "^14.1.0",
+      "eslint-plugin-import": "^2.19.1",
+      "eslint-plugin-node": "^11.0.0",
+      "eslint-plugin-promise": "^4.2.1",
+      "eslint-plugin-standard": "^4.0.1"
+    }
+  }
+  
\ No newline at end of file
--- a/demo/public/css/demo.css
+++ b/demo/public/css/demo.css
+* {
+	box-sizing: border-box;
+	outline: 0;
+	text-decoration: none;
+	word-wrap: break-word;
+}
+html {
+	font-size: 100%;
+	line-height: 1.5;
+}
+body {
+  margin: 0;
+  padding: 0;
+	overflow-x: hidden;
+}
+section {
+  color: #FFF;
+  text-align: center;
+  background-color: #358CA7;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+.main {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  background: #f5f5f5;
+}
+.showcase {
+  flex: 1 1 auto;
+  justify-content: center;
+  padding: 0.75rem;
+}
--- a/demo/index.css
+++ b/demo/index.css
--- a/demo/public/demo.html
+++ b/demo/public/demo.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lottery Wheel</title>
+    <link href="css/demo.css" rel="stylesheet">
+    <script src="js/lottery-wheel.min.js"></script>
+  </head>
+  <body>
+  	 <div class="main">
+	     <section>
+	     	<h2>H2U轉轉樂</h2>
+	     </section>
+	     <div class="showcase">
+	         <svg id="wheel1"></svg>
+	     </div>
+     </div>
+     <script type="text/javascript">
+		 function isMobile() {
+  			try{ 
+  				document.createEvent("TouchEvent"); 
+  				return true; 
+  			}catch(e){ 
+  				return false;
+  			}
+  			return false;
+		 }
+		 const radius = isMobile()? document.body.clientWidth /2 * 0.8: document.body.clientWidth /2 * 0.4;
+	     new Wheel({
+	       el: document.getElementById('wheel1'),
+	       data: ['早安嚴選折價卷', 'H2U藍芽體重計', 'H2U除臭噴霧', 'H2U點數', '日益沛益生菌', '蔘沛飲滋補禮盒'],
+	       theme: 'light',
+	       buttonText: '點選',
+	       radius,
+	       onButtonHover(anime, button) {
+	   	    anime({
+	   	      targets: button.node,
+	   	      scale: 1.2,
+	   	      duration: 500
+	   	    });
+	   	  },
+	       onSuccess(data) {
+	         alert(data.text);
+	       }
+	     });
+     </script>
+  </body>
+</html>
--- a/doc/images/button.png
+++ b/doc/images/button.png
--- a/doc/images/color.png
+++ b/doc/images/color.png
--- a/doc/images/data.png
+++ b/doc/images/data.png
--- a/doc/images/image.png
+++ b/doc/images/image.png
--- a/doc/images/prize.png
+++ b/doc/images/prize.png
--- a/doc/images/theme-dark.png
+++ b/doc/images/theme-dark.png
--- a/doc/images/theme-light.png
+++ b/doc/images/theme-light.png
--- a/doc/images/turntable.png
+++ b/doc/images/turntable.png
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,11 +4,11 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottery Wheel</title>
-    <link href="index.css" rel="stylesheet">
+    <link href="css/index.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/arta.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
-    <script src="../dist/lottery-wheel.min.js"></script>
+    <script src="js/lottery-wheel.min.js"></script>
  </head>
  <body>
    <div class="wrapper">

--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
    "build": "rollup -c rollup.config.js",
    "lint": "standard --fix src/*.js",
    "prepare": "npm run build",
-    "test": "npm run lint",
-    "start": "node src/index.js"
+    "test": "npm run lint"
  },
  "repository": {
    "type": "git",