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