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

adding

master
Björn 3 years ago
parent
c8211930b8
commit
ca585d5149
11 changed files with 11166 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -1
      README.md
  2. +1
    -0
      demo/demo.css
  3. +3
    -0
      demo/demo.js
  4. +24
    -0
      demo/index.html
  5. +4
    -0
      mix-manifest.json
  6. +10906
    -0
      package-lock.json
  7. +23
    -0
      package.json
  8. +5
    -0
      src/demo/demo.js
  9. +39
    -0
      src/demo/demo.scss
  10. +101
    -0
      src/tiny-accordion.riot
  11. +36
    -0
      webpack.mix.js

+ 24
- 1
README.md View File

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

+ 1
- 0
demo/demo.css View File

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

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


+ 24
- 0
demo/index.html View File

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

+ 4
- 0
mix-manifest.json View File

@ -0,0 +1,4 @@
{
"/demo/demo.js": "/demo/demo.js",
"/demo/demo.css": "/demo/demo.css"
}

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


+ 23
- 0
package.json View File

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

+ 5
- 0
src/demo/demo.js View File

@ -0,0 +1,5 @@
import * as riot from 'riot'
import TinyAccordion from './../tiny-accordion.riot'
riot.register('tiny-accordion', TinyAccordion)
riot.mount('tiny-accordion')

+ 39
- 0
src/demo/demo.scss View File

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

+ 101
- 0
src/tiny-accordion.riot View File

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

+ 36
- 0
webpack.mix.js View File

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

Write Preview
Loading…
Cancel
Save