Björn
4 years ago
parent
c8211930b8
commit
ca585d5149
@ -1,2 +1,25 @@
|
||||
# tiny-accordion
|
||||
# Tiny Accordion
|
||||
|
||||
Created with [Riot.js](https://riot.js.org)
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @tentakelfabrik/tiny-accordion --save
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
```javascript
|
||||
<tiny-accordion>
|
||||
<div title="first">
|
||||
<p>
|
||||
Poke you probably haven't heard of them schlitz kale chips, semiotics vice DIY blue bottle bitters.
|
||||
</p>
|
||||
</div>
|
||||
<div title="second">
|
||||
<p>
|
||||
Pork belly freegan seitan skateboard art party la croix locavore flexitarian small batch taxidermy chillwave.
|
||||
</p>
|
||||
</div>
|
||||
</tiny-accordion>
|
||||
```
|
||||
|
||||
@ -0,0 +1 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.tiny-accordion__header ul{margin:0;padding:0;list-style:none}.tiny-accordion__header ul li{display:inline-block;padding:.25em .5em;background:grey;margin:5px 0 5px 5px}.tiny-accordion__header ul li:hover{cursor:pointer}.tiny-accordion__header ul li.active{background-color:red}.tiny-accordion__item{display:none}.tiny-accordion__item--active{display:block}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Demo | Tiny Accordion</title>
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
<link href="demo.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<tiny-accordion>
|
||||
<div title="first">
|
||||
<p>
|
||||
Poke you probably haven't heard of them schlitz kale chips, semiotics vice DIY blue bottle bitters.
|
||||
</p>
|
||||
</div>
|
||||
<div title="second">
|
||||
<p>
|
||||
Pork belly freegan seitan skateboard art party la croix locavore flexitarian small batch taxidermy chillwave.
|
||||
</p>
|
||||
</div>
|
||||
</tiny-accordion>
|
||||
<script type="text/javascript" src="demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"/demo/demo.js": "/demo/demo.js",
|
||||
"/demo/demo.css": "/demo/demo.css"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "@tentakelfabrik/tiny-accordion",
|
||||
"version": "1.0.0",
|
||||
"description": "Accordion for riotjs",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:tentakelfabrik/tiny-accordion.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"riot": "^5.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/compiler": "^5.1.3",
|
||||
"@riotjs/webpack-loader": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"laravel-mix": "^6.0.5",
|
||||
"postcss": "^8.2.1",
|
||||
"sass": "^1.32.0",
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import * as riot from 'riot'
|
||||
import TinyAccordion from './../tiny-accordion.riot'
|
||||
|
||||
riot.register('tiny-accordion', TinyAccordion)
|
||||
riot.mount('tiny-accordion')
|
||||
@ -0,0 +1,39 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
|
||||
/*# sourceMappingURL=normalize.min.css.map */
|
||||
|
||||
body {
|
||||
|
||||
}
|
||||
|
||||
.tiny-accordion {
|
||||
&__header {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
background: gray;
|
||||
margin: 5px 0 5px 5px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: none;
|
||||
|
||||
&--active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
<tiny-accordion>
|
||||
<div class="tiny-accordion">
|
||||
<div class="tiny-accordion__header">
|
||||
<ul>
|
||||
<li class={ getCurrentClass(index) } each={ (item, index) in state.items } onclick={ () => handleClick(event, index) }>
|
||||
{ item }
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
items: [],
|
||||
index: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* getting innerHTML and remove it
|
||||
*
|
||||
*/
|
||||
onBeforeMount()
|
||||
{
|
||||
this.content = this.root.innerHTML
|
||||
this.root.innerHTML = ''
|
||||
},
|
||||
|
||||
/**
|
||||
* create wrapper for
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {object} state
|
||||
*
|
||||
*/
|
||||
onMounted(props, state) {
|
||||
const header = this.$('.tiny-accordion__header')
|
||||
|
||||
state.wrapper = document.createElement('div')
|
||||
|
||||
state.wrapper.innerHTML = this.content
|
||||
header.after(state.wrapper)
|
||||
|
||||
// run through all items and add a css-class and current class to first element
|
||||
for (let i = 0; i < state.wrapper.children.length; i++) {
|
||||
state.items.push(state.wrapper.children[i].title)
|
||||
state.wrapper.children[i].classList.add('tiny-accordion__item')
|
||||
|
||||
if (i === 0) {
|
||||
state.wrapper.children[i].classList.add('tiny-accordion__item--active')
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* remove all active classes and add active-classes to clicked
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {object} index
|
||||
*
|
||||
*/
|
||||
handleClick(event, index) {
|
||||
for (let i = 0; i < this.state.wrapper.children.length; i++) {
|
||||
this.state.wrapper.children[i].classList.remove('tiny-accordion__item--active')
|
||||
|
||||
if (i === index) {
|
||||
this.state.wrapper.children[i].classList.add('tiny-accordion__item--active')
|
||||
this.state.index = i
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
* getting class for active accordion in header
|
||||
*
|
||||
*/
|
||||
getCurrentClass(index)
|
||||
{
|
||||
let classes = []
|
||||
|
||||
if (index === this.state.index) {
|
||||
classes.push('active')
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</tiny-accordion>
|
||||
@ -0,0 +1,36 @@
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 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 your application, as well as bundling up your JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.webpackConfig({
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.riot$/,
|
||||
exclude: '/node_modules/',
|
||||
use: [{
|
||||
loader: '@riotjs/webpack-loader',
|
||||
options: {
|
||||
hot: false
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
mix.js('src/demo/demo.js', 'demo')
|
||||
.sass('src/demo/demo.scss', 'demo')
|
||||
.options({
|
||||
terser: {
|
||||
extractComments: false,
|
||||
},
|
||||
processCssUrls: false
|
||||
})
|
||||
Loading…
Reference in new issue