Browse Source

update 0.2

master
syui 2 years ago
parent
commit
b73d566bd7
No known key found for this signature in database GPG Key ID: ED2A0F5F1DA25512
  1. 7
      .babelrc
  2. 1
      .env
  3. 32
      .github/workflows/gh-pages.yml
  4. 32
      .gitignore
  5. 5
      babel.config.js
  6. BIN
      img/0.png
  7. BIN
      img/1.png
  8. BIN
      img/2.png
  9. 78
      package.json
  10. BIN
      public/favicon.ico
  11. 17
      public/index.html
  12. BIN
      public/manga/0.png
  13. BIN
      public/manga/1.png
  14. BIN
      public/manga/2.png
  15. BIN
      public/manga/3.png
  16. BIN
      public/manga/4.png
  17. 28
      readme.md
  18. 59
      src/App.vue
  19. 143
      src/index.html
  20. 95
      src/main.js
  21. BIN
      vue-sample-manga-page-slide-0.gif
  22. 14
      vue.config.js
  23. 114
      webpack.config.js
  24. 8239
      yarn.lock

7
.babelrc

@ -1,7 +0,0 @@
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}

1
.env

@ -0,0 +1 @@
VUE_APP_PAGE="4"

32
.github/workflows/gh-pages.yml

@ -1,32 +0,0 @@
name: github pages
on:
push:
branches:
- master
jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@v1
with:
node-version: 12
ref: src
submodules: true
- run: yarn install
- name: Build
env:
TZ: "Asia/Tokyo"
run: |
yarn build
cp -rf ./img ./public
- name: Deploy
uses: peaceiris/actions-gh-pages@v2.5.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./public

32
.gitignore

@ -1,6 +1,30 @@
.DS_Store
yarn.lock
node_modules
gh-pages
gh-pages.pub
public
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.DS_Store
*/.DS_Store
*/*/.DS_Store
*/*/*/.DS_Store
*/*/*/*/.DS_Store
*/*/*/*/*/.DS_Store
*/*/*/*/*/*/.DS_Store
*/*/*/*/*/*/*/.DS_Store
*/*/*/*/*/*/*/*/.DS_Store

5
babel.config.js

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

BIN
img/0.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
img/1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
img/2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

78
package.json

@ -1,49 +1,43 @@
{
"name": "vue-example",
"description": "example vue",
"version": "0.0.1",
"author": "syui <syui@syui.cf>",
"license": "MIT",
"name": "sample-vue-manga-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0 --port 7000",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build:watch": "cross-env NODE_ENV=production WEBPACK_WATCH=true webpack --progress --hide-modules",
"demo:index": "mv public/index.html public/main.html && sed -i 's/index\\.html/main\\.html/' public/demo.html && mv public/demo.html public/index.html",
"deploy": "npm run demo:index && ghpages -p public"
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"onsenui": "^2.10.10",
"vue": "^2.6.10",
"vue-onsenui": "^2.6.2",
"vuex": "^3.1.1"
"core-js": "^3.6.4",
"hooper": "^0.3.4",
"vue": "^2.6.11"
},
"devDependencies": {
"@babel/cli": "^7.7.0",
"@babel/core": "^7.7.2",
"@babel/node": "^7.7.0",
"@babel/preset-env": "^7.7.1",
"axios": "^0.19.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.0.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.0.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^3",
"postcss": "^6.0.11",
"postcss-base64": "^0.7.1",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.0.6",
"postcss-smart-import": "^0.7.5",
"postcss-url": "^7.1.2",
"style-loader": "^0.18.2",
"vue-loader": "^12.0.4",
"vue-template-compiler": "^2.4.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

BIN
public/manga/0.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

BIN
public/manga/1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 KiB

BIN
public/manga/2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 KiB

BIN
public/manga/3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 KiB

BIN
public/manga/4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 491 KiB

28
readme.md

@ -1,12 +1,26 @@
## comic.page
# sample-vue-project
This simple image viewer pages created with vue.js.
![](./vue-sample-manga-page-slide-0.gif)
demo : https://syui.github.io/comic.page
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
```sh
$ yarn install
$ yarn dev
$ yarn build
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

59
src/App.vue

@ -0,0 +1,59 @@
<template>
<hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n">
<img :src="'/manga/'+ (index) +'.png'" />
<div class="page_n">{{ n }}</div>
</slide>
<hooper-navigation slot="hooper-addons"></hooper-navigation>
<hooper-pagination slot="hooper-addons"></hooper-pagination>
<hooper-progress slot="hooper-addons"></hooper-progress>
</hooper>
</template>
<script>
import {
Hooper,
Slide,
Progress as HooperProgress,
Pagination as HooperPagination,
Navigation as HooperNavigation
} from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide,
HooperProgress,
HooperPagination,
HooperNavigation
},
data() {
return {
products: [...Array(Number(process.env.VUE_APP_PAGE)).keys()],
hooperSettings: {
itemsToShow: 1,
centerMode: true
}
};
}
};
</script>
<style>
.hooper {
height: 100%;
}
button.hooper-indicator {
background-color: #000;
}
img {
width:640px;
}
.page_n {
text-align: center;
height: 50px;
}
</style>

143
src/index.html

@ -1,143 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>comic.page</title>
<style>
img {
width: 100%;
max-width: 700px;
margin-left:55px;
}
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
.slide-enter-active, .slide-leave-active {
transition: transform .5s
}
.slide-enter {
transform: translateX(300px)
}
.slide-leave-active {
transform: translateX(-300px);
}
button#start-stop {
display:none;
width: 148px;
height: 30px;
background-color: #008fc7;
border: 1px #ccc solid;
margin-bottom: 15px;
color: #fff;
}
button#next-comic {
width: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
height: 950px;
max-height: 950px;
background-color: #008fc7c9;
color: #fff;
}
@media screen and (max-width: 1000px){
img {
margin-left:0px;
}
}
</style>
</head>
<body>
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key | capitalize }}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<div id="app">
<transition name="slide">
<img v-bind:src="'/img/' + products[product] + '.png'"/>
</transition>
<div class="image-button">
<button id="next-comic" @click="nextSlide">&gt;</button> <button id="start-stop" @click="offTimer">{{ btnString }}</button>
</div>
</div>
</body>
</html>

95
src/main.js

@ -1,93 +1,10 @@
import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'
var page = 3;
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
var app = new Vue({
el: '#app',
data: {
product: 0,
products: [...Array(page).keys()],
timer: 1
},
computed: {
btnString: function() {
return this.timer === null ? "▶" : "■";
}
},
mounted: function() {
//this.onTimer();
},
methods: {
nextSlide: function() {
this.product = this.product < this.products.length - 1 ? this.product += 1 : 0;
},
onTimer: function () {
this.timer = setInterval(() => {
this.nextSlide();
}, 1000)
},
offTimer: function () {
if(this.timer === null) {
this.onTimer();
} else {
clearInterval(this.timer);
this.timer = null;
}
}
}
});

BIN
vue-sample-manga-page-slide-0.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

14
vue.config.js

@ -0,0 +1,14 @@
module.exports = {
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
},
},
}

114
webpack.config.js

@ -1,114 +0,0 @@
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'production',
watch: process.env.WEBPACK_WATCH === 'true',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './public'),
publicPath: '',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-smart-import')(),
require('postcss-url')(),
require('postcss-base64')({
extensions: ['.svg'],
root: 'src'
}),
require('postcss-cssnext')({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
features: { autoprefixer: { remove: false } } // 'background-image: radial-gradient' broken in autoprefixer
})
]
}
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
//// For development:
// 'vue-onsenui$': path.join(__dirname, '..', 'OnsenUI', 'bindings', 'vue', 'dist', 'vue-onsenui'),
// 'onsenui$': path.join(__dirname, '..', 'OnsenUI', 'build', 'js', 'onsenui'),
// 'onsenui': path.join(__dirname, '..', 'OnsenUI', 'build'),
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//new webpack.optimize.UglifyJsPlugin({
// sourceMap: true,
// compress: {
// warnings: false
// }
//}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
]);
}

8239
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save