Björn
4 years ago
commit
3dc6186025
@ -0,0 +1 @@
|
||||
node_modules
|
||||
@ -0,0 +1,45 @@
|
||||
import * as riot from 'riot';
|
||||
import TinyFade from './src/tiny-fade.riot';
|
||||
|
||||
riot.install((component) => {
|
||||
|
||||
const {
|
||||
onBeforeMount,
|
||||
onMounted
|
||||
} = component
|
||||
|
||||
// patch the onBeforeMount to create slots in runtime
|
||||
component.onBeforeMount = (...args) => {
|
||||
|
||||
const html = component.root.innerHTML
|
||||
|
||||
if (html) {
|
||||
|
||||
// empty the component html
|
||||
component.root.innerHTML = ''
|
||||
|
||||
// define slot-html to runtime
|
||||
Object.defineProperty(component, 'slot-html', {
|
||||
value: html,
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
configurable: true,
|
||||
})
|
||||
}
|
||||
|
||||
// call the original onBeforeMount
|
||||
onBeforeMount.apply(component, ...args)
|
||||
}
|
||||
|
||||
component.onMounted = (...args) => {
|
||||
component.$('slot-html').outerHTML = component['slot-html']
|
||||
|
||||
// call the original onMounted
|
||||
onMounted.apply(component, ...args)
|
||||
}
|
||||
|
||||
return component
|
||||
})
|
||||
|
||||
riot.register('tiny-fade', TinyFade);
|
||||
riot.mount('tiny-fade');
|
||||
|
After Width: | Height: | Size: 123 KiB |
@ -0,0 +1 @@
|
||||
<!doctype html><html><head lang="en"><meta charset="utf-8"><title>Tiny Fade | i386 Demo</title><link rel="shortcut icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/><link href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css" rel="stylesheet"/><link href="css/demo-386.css" rel="stylesheet"/></head><body><main><div class="container"><div class="grid justify-center"><div class="col-12 col-md-8"><div class="hero"><header><h1>Tiny Tags</h1></header><p>Created with <a href="https://riot.js.org" target="_blank">Riot.js</a>!</p><p>Form Field Component to add Tags to a List. Will be handled as a Select-Element with Multiple Options that are selected.</p><p></p><blockquote>npm install tiny-tags --save</blockquote><p></p><p><a href="https://github.com/tentakelfabrik/tiny-tags" target="_blank"><svg class="icon vertical-align-sub"><use xlink:href="#icon-github"/></svg></a></p></div><h2>Try me:</h2><tiny-fade data-tag="img"><img src="hammer.gif"/> <img src="hammer.gif"/> <img src="hammer.gif"/><div class="test"><img src="hammer.gif"/></div></tiny-fade></div></div></div></main><footer><p>Crafted with enthusiasm by <a target="_blank" href="https://tentakelfabrik.de">Tentakelfabrik</a></p><p><a target="_blank" href="https://github.com/tentakelfabrik"><svg class="icon"><use xlink:href="#icon-github"/></svg></a></p></footer><script src="js/demo-386.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
/* Riot v4.13.2, @license MIT */
|
||||
|
||||
/*! (c) 2018 Andrea Giammarchi (ISC) */
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"/dist/js/demo-386.js": "/dist/js/demo-386.js",
|
||||
"/dist/hammer.gif": "/dist/hammer.gif"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "tiny-fade",
|
||||
"version": "1.0.0",
|
||||
"description": "Fade elements",
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"watch": "npm run development -- --watch",
|
||||
"watch-poll": "npm run watch -- --watch-poll",
|
||||
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"prod": "npm run production",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:tentakelfabrik/tiny-fade.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"riot": "^4.13.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/compiler": "^4.9.2",
|
||||
"@riotjs/webpack-loader": "^4.0.3",
|
||||
"cross-env": "^7.0.2",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"laravel-mix": "^5.0.4",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>Tiny Fade | i386 Demo</title>
|
||||
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="css/demo-386.css" type="text/css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<%= htmlWebpackPlugin.options.svg %>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="grid justify-center">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="hero">
|
||||
<header>
|
||||
<h1>Tiny Tags</h1>
|
||||
</header>
|
||||
<p>
|
||||
Created with <a href="https://riot.js.org" target="_blank">Riot.js</a>!
|
||||
</p>
|
||||
<p>
|
||||
Form Field Component to add Tags to a List. Will be handled as a Select-Element
|
||||
with Multiple Options that are selected.
|
||||
</p>
|
||||
<p>
|
||||
<blockquote>
|
||||
npm install tiny-tags --save
|
||||
</blockquote>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/tentakelfabrik/tiny-tags" target="_blank">
|
||||
<svg class="icon vertical-align-sub"><use xlink:href="#icon-github" /></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Try me:</h2>
|
||||
<tiny-fade data-tag="img">
|
||||
<img src="hammer.gif" />
|
||||
<img src="hammer.gif" />
|
||||
<img src="hammer.gif" />
|
||||
<div class="test">
|
||||
<img src="hammer.gif" />
|
||||
</div>
|
||||
</tiny-fade>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
Crafted with enthusiasm by <a target="_blank" href="https://tentakelfabrik.de">Tentakelfabrik</a>
|
||||
</p>
|
||||
<p>
|
||||
<a target="_blank" href="https://github.com/tentakelfabrik">
|
||||
<svg class="icon"><use xlink:href="#icon-github" /></svg>
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="js/demo-386.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 123 KiB |
@ -0,0 +1,19 @@
|
||||
<tiny-fade>
|
||||
<div class="tiny-fade">
|
||||
<div class="yield"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
onBeforeMount() {
|
||||
this.content = this.root.innerHTML;
|
||||
this.root.innerHTML = '';
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.$('.yield').innerHTML = this.content;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</tiny-fade>
|
||||
@ -0,0 +1,62 @@
|
||||
<tiny-fade>
|
||||
<div class="tiny-fade">
|
||||
<slot-html />
|
||||
</div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
|
||||
state: {
|
||||
show: 2,
|
||||
interval: 1000
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onMounted() {
|
||||
const elements = this.$$('.tiny-fade > *')
|
||||
|
||||
elements.forEach((element, index) => {
|
||||
element.classList.add('tiny-fade__item')
|
||||
|
||||
if (this.state.show > index) {
|
||||
element.classList.add('tiny-fade__item--active')
|
||||
}
|
||||
})
|
||||
|
||||
const timer = setInterval(() => {
|
||||
this.toggle()
|
||||
}, this.state.interval)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
toggle() {
|
||||
const elements = this.$('.tiny-fade__item--active:last-child')
|
||||
|
||||
console.log(elements)
|
||||
|
||||
//elements.forEach((element, index) => {
|
||||
//if (element.classList.contains('tiny-fade__item--active')) {
|
||||
// element.classList.remove('tiny-fade__item--active')
|
||||
//}
|
||||
//})*/
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
</tiny-fade>
|
||||
@ -0,0 +1,40 @@
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const fs = require('fs');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel application. By default, we are compiling the Sass
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.webpackConfig({
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'dist/index.html',
|
||||
template: 'src/assets/html/index.html.ejs',
|
||||
inject: false
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.riot$/,
|
||||
exclude: /node_modules/,
|
||||
use: [{
|
||||
loader: '@riotjs/webpack-loader',
|
||||
query: {
|
||||
hot: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
]}
|
||||
});
|
||||
|
||||
mix.js('demo-386.js', 'dist/js')
|
||||
.copy('src/assets/img/*', 'dist');
|
||||
Loading…
Reference in new issue