tentakelfabrik
/
tiny-image-loader
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

master
Björn 4 years ago
commit
3dc6186025
14 changed files with 10567 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      .gitignore
  2. +45
    -0
      demo-386.js
  3. BIN
      dist/hammer.gif
  4. +1
    -0
      dist/index.html
  5. +2
    -0
      dist/js/demo-386.js
  6. +3
    -0
      dist/js/demo-386.js.LICENSE.txt
  7. +4
    -0
      mix-manifest.json
  8. +10292
    -0
      package-lock.json
  9. +31
    -0
      package.json
  10. +67
    -0
      src/assets/html/index.html.ejs
  11. BIN
      src/assets/img/hammer.gif
  12. +19
    -0
      src/tiny-fade-single.riot
  13. +62
    -0
      src/tiny-fade.riot
  14. +40
    -0
      webpack.mix.js

+ 1
- 0
.gitignore View File

@ -0,0 +1 @@
node_modules

+ 45
- 0
demo-386.js View File

@ -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');

BIN
dist/hammer.gif View File

Before After
Width: 372  |  Height: 236  |  Size: 123 KiB

+ 1
- 0
dist/index.html View File

@ -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>

+ 2
- 0
dist/js/demo-386.js
File diff suppressed because it is too large
View File


+ 3
- 0
dist/js/demo-386.js.LICENSE.txt View File

@ -0,0 +1,3 @@
/* Riot v4.13.2, @license MIT */
/*! (c) 2018 Andrea Giammarchi (ISC) */

+ 4
- 0
mix-manifest.json View File

@ -0,0 +1,4 @@
{
"/dist/js/demo-386.js": "/dist/js/demo-386.js",
"/dist/hammer.gif": "/dist/hammer.gif"
}

+ 10292
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 31
- 0
package.json View File

@ -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"
}
}

+ 67
- 0
src/assets/html/index.html.ejs View File

@ -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>

BIN
src/assets/img/hammer.gif View File

Before After
Width: 372  |  Height: 236  |  Size: 123 KiB

+ 19
- 0
src/tiny-fade-single.riot View File

@ -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>

+ 62
- 0
src/tiny-fade.riot View File

@ -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>

+ 40
- 0
webpack.mix.js View File

@ -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');

Write Preview
Loading…
Cancel
Save