Skip to content

GitLab

Verified Commit 08b6b2b5 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Add Tingle + Enforce UTF-8

parent b7989185
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3571 additions and 0 deletions
lib/tingle/LICENSE 0 → 100644
View file @ 08b6b2b5
The MIT License (MIT)
Copyright (c) 2015 Robin Parisi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
lib/tingle/README.md 0 → 100644
View file @ 08b6b2b5
![Logo Tingle](logo.png)
## Documentation
Documentation and demo can be found here:
[https://robinparisi.github.io/tingle/](https://robinparisi.github.io/tingle/)
## Introduction
Tingle is a minimalist and easy-to-use modal plugin written in pure JavaScript:
* No dependencies required
* Fully customizable via CSS
* CSS transitions
* Simple API
* No extra files to download
* Created with UX in mind
## Roadmap
* ~~Flexbox support~~
* ~~Better responsive~~
* alert/dialog
* Accessibility (any help is welcome)
## Contribute
Run the demo and listen for changes:
```bash
$ git clone git@github.com:robinparisi/tingle.git
$ cd tingle
$ npm install
$ gulp serve
```
## License
© 2018 [Robin Parisi](https://github.com/robinparisi)
Released under the [MIT LICENSE](http://opensource.org/licenses/MIT)
lib/tingle/doc/demo.css 0 → 100644
View file @ 08b6b2b5
/* rythm
-------------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
line-height: 1.5;
}
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
textarea {
margin: 1.5em 0;
font-size: 1em; /* equiv 16px */
line-height: 1.5;
}
h1,
.h1-like {
margin: 1.4118em 0 .7059em 0;
font-size: 2.125em; /* equiv 34px */
line-height: 1.4118;
}
h2,
.h2-like {
margin: 1.8462em 0 .9231em 0;
font-size: 1.625em; /* equiv 26px */
line-height: 1.8462;
}
h3,
.h3-like {
margin: 2em 0 1em 0;
font-size: 1.5em; /* equiv 24px */
line-height: 1;
}
h4,
.h4-like {
margin: 2.1818em 0 1.0909em 0;
font-size: 1.375em; /* equiv 22px */
line-height: 1.0909;
}
h5,
.h5-like {
margin: 2.4em 0 1.2em 0;
font-size: 1.25em; /* equiv 20px */
line-height: 1.2;
}
h6,
.h6-like {
margin: 2.6666em 0 1.3333em 0;
font-size: 1.125em; /* equiv 18px */
line-height: 1.3333;
}
.smaller {
margin: 2.4em 0 2.4em 0;
font-size: .625em; /* equiv 10px */
line-height: 2.4;
}
.small {
margin: 2em 0 2em 0;
font-size: .75em; /* equiv 12px */
line-height: 2;
}
.big {
margin: 1.3333em 0 1.3333em 0;
font-size: 1.125em; /* equiv 18px */
line-height: 1.3333;
}
.bigger {
margin: 1.2em 0 1.2em 0;
font-size: 1.25em; /* equiv 20px */
line-height: 1.2;
}
.biggest {
margin: 1.0909em 0 1.0909em 0;
font-size: 1.375em; /* equiv 22px */
line-height: 1.0909;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* avoid last-child bottom margin */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
margin-bottom: 0;
}
/* avoid supp margin on nested elements */
li p,
li ul {
margin-top: 0;
margin-bottom: 0;
}
/* you shall not pass */
textarea,
table,
td,
th,
code,
pre,
samp,
div,
p {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
}
code,
pre,
samp {
white-space: pre-wrap;
font-family: consolas, "DejaVu Sans Mono", courier, monospace;
}
code {
line-height: 1;
}
table {
margin-bottom: 1.5em;
}
/* style
-------------------------------------------------------------- */
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Varela Round", sans-serif;
}
a,
a:hover,
a:visited {
color: #39df7f;
text-decoration: underline;
}
h2,
h3 {
border-bottom: 1px dotted #dfece6;
}
.important {
text-decoration: underline;
}
.container {
margin-right: auto;
margin-left: auto;
width: 70%;
}
.header {
position: relative;
margin-bottom: 60px;
padding: 30px 0 60px 0;
height: 220px;
background-color: #39df7f;
color: #fff;
text-align: center;
}
.header__title {
margin-bottom: 10px;
font-size: 4rem;
}
.header__tagline {
margin-bottom: 30px;
font-size: 1.8rem;
}
.content {
padding-bottom: 30px;
}
.header__github {
position: absolute;
right: 10%;
bottom: 0;
width: 60px;
height: 60px;
transform: rotate(180deg) translateZ(0);
transform-origin: center;
animation-name: github;
animation-duration: .5s;
animation-timing-function: cubic-bezier(.91,.79,.57,1.01);
animation-iteration-count: 1;
animation-fill-mode: forwards;;
}
.title {
position: relative;
margin-bottom: 30px;
margin-left: 30px;
border-bottom: 2px solid #39df7f;
color: #39df7f;
line-height: 1.5;
}
.title::before {
position: absolute;
top: 5px;
left: 0;
left: -50px;
width: 35px;
height: 35px;
border: 2px solid #39df7f;
border-radius: 50%;
content: attr(data-bullet);
text-align: center;
font-size: 25px;
line-height: 35px;;
}
h3 {
color: #39df7f;
}
.btn {
display: inline-block;
padding: .5em 1.5em;
outline: 0;
border: 0;
border: 2px solid #39df7f;
border-radius: 4px;
background: none;
box-shadow: none;
color: #39df7f;
text-align: center;
text-decoration: none;
font-weight: 400;
font-size: 1em;
line-height: 1.65em;
cursor: pointer;
-webkit-appearance: none;
}
.btn-demo {
margin-right: 1rem;
margin-bottom: 1rem;
}
.hljs {
padding: 15px 20px;
line-height: 1.3;
}
.tingle-demo {
display: none;
}
.mr1 {
margin-right: 10px;
}
.list-blh {
line-height: 1.8;
}
img {
max-width: 100%;
height: auto;
}
.methods {
display: table;
}
.methods {
width: 100%;
table-layout: fixed;
}
.methods tr:nth-child(odd) {
background-color: #f9f9f9;
}
.methods td {
padding: 10px;
}
.methods th {
padding: 10px;
background-color: #39df7f;
color: #fff;
text-align: left;
}
.footer {
text-align: center;
}
.w20 {
width: 20%;
}
.w60 {
width: 60%;
}
/* tags
-------------------------------------------------------------- */
.tag {
display: inline-block;
padding: .1em .5em;
border-radius: 4px;
color: #fff;
vertical-align: middle;
font-size: 1.3rem;
}
.tag--warning {
background-color: #f39c12;
}
/* animations
-------------------------------------------------------------- */
@keyframes github {
0% {
top: 220px;
transform: rotate(180deg);
}
100% {
top: 0;
transform: rotate(0);
}
}
/* responsive
-------------------------------------------------------------- */
@media (max-width: 540px) {
.container {
width: 90%;
}
.btn {
display: block;
margin-bottom: 20px;
width: 100%;
}
.header__pic {
width: 100px;
}
.title {
margin-left: 0;
}
.title:before {
display: none;
}
}
lib/tingle/doc/github.svg 0 → 100644
View file @ 08b6b2b5
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="56px" height="44px" viewBox="0 0 56 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title></title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop" sketch:type="MSArtboardGroup" transform="translate(-1100.000000, 0.000000)" fill="#FFFFFF">
<path d="M1121.42857,28.2857143 C1121.42857,29.1785759 1121.28906,30.0937453 1121.01004,31.03125 C1120.73103,31.9687547 1120.25112,32.8169605 1119.57031,33.5758929 C1118.88951,34.3348252 1118.08036,34.7142857 1117.14286,34.7142857 C1116.20535,34.7142857 1115.39621,34.3348252 1114.7154,33.5758929 C1114.03459,32.8169605 1113.55469,31.9687547 1113.27567,31.03125 C1112.99665,30.0937453 1112.85714,29.1785759 1112.85714,28.2857143 C1112.85714,27.3928527 1112.99665,26.4776833 1113.27567,25.5401786 C1113.55469,24.6026739 1114.03459,23.7544681 1114.7154,22.9955357 C1115.39621,22.2366033 1116.20535,21.8571429 1117.14286,21.8571429 C1118.08036,21.8571429 1118.88951,22.2366033 1119.57031,22.9955357 C1120.25112,23.7544681 1120.73103,24.6026739 1121.01004,25.5401786 C1121.28906,26.4776833 1121.42857,27.3928527 1121.42857,28.2857143 L1121.42857,28.2857143 Z M1142.85714,28.2857143 C1142.85714,29.1785759 1142.71764,30.0937453 1142.43862,31.03125 C1142.1596,31.9687547 1141.67969,32.8169605 1140.99888,33.5758929 C1140.31808,34.3348252 1139.50893,34.7142857 1138.57143,34.7142857 C1137.63392,34.7142857 1136.82478,34.3348252 1136.14397,33.5758929 C1135.46317,32.8169605 1134.98326,31.9687547 1134.70424,31.03125 C1134.42522,30.0937453 1134.28571,29.1785759 1134.28571,28.2857143 C1134.28571,27.3928527 1134.42522,26.4776833 1134.70424,25.5401786 C1134.98326,24.6026739 1135.46317,23.7544681 1136.14397,22.9955357 C1136.82478,22.2366033 1137.63392,21.8571429 1138.57143,21.8571429 C1139.50893,21.8571429 1140.31808,22.2366033 1140.99888,22.9955357 C1141.67969,23.7544681 1142.1596,24.6026739 1142.43862,25.5401786 C1142.71764,26.4776833 1142.85714,27.3928527 1142.85714,28.2857143 L1142.85714,28.2857143 Z M1148.21429,28.2857143 C1148.21429,25.6071295 1147.4442,23.3303665 1145.90402,21.4553571 C1144.36383,19.5803478 1142.2768,18.6428571 1139.64286,18.6428571 C1138.72767,18.6428571 1136.55136,18.8772298 1133.11384,19.3459821 C1131.52901,19.5915191 1129.7768,19.7142857 1127.85714,19.7142857 C1125.93749,19.7142857 1124.18528,19.5915191 1122.60045,19.3459821 C1119.20757,18.8772298 1117.03125,18.6428571 1116.07143,18.6428571 C1113.43749,18.6428571 1111.35045,19.5803478 1109.81027,21.4553571 C1108.27008,23.3303665 1107.5,25.6071295 1107.5,28.2857143 C1107.5,30.2500098 1107.85714,31.9631623 1108.57143,33.4252232 C1109.28572,34.8872841 1110.18973,36.0368262 1111.28348,36.8738839 C1112.37724,37.7109417 1113.73883,38.3805778 1115.3683,38.8828125 C1116.99778,39.3850472 1118.56026,39.7142849 1120.0558,39.8705357 C1121.55135,40.0267865 1123.21428,40.1049107 1125.04464,40.1049107 L1130.66964,40.1049107 C1132.50001,40.1049107 1134.16294,40.0267865 1135.65848,39.8705357 C1137.15403,39.7142849 1138.71651,39.3850472 1140.34598,38.8828125 C1141.97545,38.3805778 1143.33705,37.7109417 1144.4308,36.8738839 C1145.52456,36.0368262 1146.42857,34.8872841 1147.14286,33.4252232 C1147.85715,31.9631623 1148.21429,30.2500098 1148.21429,28.2857143 L1148.21429,28.2857143 Z M1155.71429,22.3928571 C1155.71429,27.013416 1155.03349,30.7075754 1153.67188,33.4754464 C1152.82366,35.194205 1151.64621,36.6785652 1150.13951,37.9285714 C1148.6328,39.1785777 1147.05916,40.1383895 1145.41853,40.8080357 C1143.77789,41.4776819 1141.88059,42.0078105 1139.72656,42.3984375 C1137.57253,42.7890645 1135.65849,43.0345977 1133.98438,43.1350446 C1132.31026,43.2354916 1130.44644,43.2857143 1128.39286,43.2857143 C1126.65178,43.2857143 1125.06697,43.2522325 1123.63839,43.1852679 C1122.20981,43.1183032 1120.56363,42.9787957 1118.69978,42.7667411 C1116.83593,42.5546864 1115.13394,42.2198684 1113.59375,41.7622768 C1112.05356,41.3046852 1110.52456,40.7299142 1109.0067,40.0379464 C1107.48883,39.3459787 1106.1384,38.4419699 1104.95536,37.3258929 C1103.77232,36.2098158 1102.8125,34.9263465 1102.07589,33.4754464 C1100.69196,30.729897 1100,27.0357375 1100,22.3928571 C1100,17.1026521 1101.51784,12.6830535 1104.55357,9.13392857 C1103.95089,7.30356228 1103.64955,5.40625982 1103.64955,3.44196429 C1103.64955,0.852665625 1104.21874,-1.58034576 1105.35714,-3.85714286 C1107.76787,-3.85714286 1109.88838,-3.41629905 1111.71875,-2.53459821 C1113.54912,-1.65289738 1115.65847,-0.274562946 1118.04688,1.60044643 C1121.32814,0.819192522 1124.77677,0.428571429 1128.39286,0.428571429 C1131.69645,0.428571429 1134.82141,0.785710714 1137.76786,1.5 C1140.11162,-0.330366295 1142.19865,-1.68079922 1144.02902,-2.55133929 C1145.85938,-3.42187935 1147.96874,-3.85714286 1150.35714,-3.85714286 C1151.49554,-1.58034576 1152.06473,0.852665625 1152.06473,3.44196429 C1152.06473,5.38393828 1151.7634,7.25891953 1151.16071,9.06696429 C1154.19644,12.6384107 1155.71429,17.0803306 1155.71429,22.3928571 L1155.71429,22.3928571 Z" id="" sketch:type="MSShapeGroup" transform="translate(1127.857143, 19.714286) rotate(-180.000000) translate(-1127.857143, -19.714286) "></path>
</g>
</g>
</svg>
\ No newline at end of file
lib/tingle/doc/index.html 0 → 100644
View file @ 08b6b2b5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal plugin written in pure JavaScript - Tingle</title>
<meta name="description" content="A minimalist and easy-to-neuse modal plugin written in pure JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.css" media="all">
<link rel="stylesheet" href="vendor/highlight/styles/monokai_sublime.css" media="all">
<link rel="stylesheet" href="demo.css" media="all">
<link rel="stylesheet" href="tingle/tingle.css" media="all">
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="tingle-content-wrapper">
<header class="header">
<div class="container">
<h1 class="header__title">tingle.js</h1>
<div class="header__tagline">A minimalist and easy-to-use modal plugin written in pure JavaScript</div>
<img class="header__pic" src="modal.svg" alt="Pure JavaScript modal plugin">
<a href="https://github.com/robinparisi/tingle" class="header__github" target="_blank"><img src="github.svg" alt="Github"></a>
</div>
</header>
<div class="container content">
<h2 data-bullet="1" class="title">Give it a try</h2>
<p>
Tingle is a simple <strong>modal plugin</strong> written in pure JavaScript (<a href="https://github.com/robinparisi/tingle">Source code on GitHub</a>).
</p>
<ul>
<li>No dependencies required</li>
<li>Fully customizable via CSS</li>
<li>CSS transitions</li>
<li>Simple API</li>
<li>No extra files to download</li>
<li>Created with UX in mind</li>
</ul>
<p>Below you will find some examples for using tingle: </p>
<button class="btn btn--primary btn-demo js-tingle-modal-1">A simple modal</button>
<button class="btn btn--secondary btn-demo js-tingle-modal-2">Need buttons?</button>
<button class="btn btn--secondary btn-demo js-tingle-modal-3">Big content? No problem!</button>
<button class="btn btn--secondary btn-demo js-tingle-modal-4">Stick to me!</button>
<button class="btn btn--secondary btn-demo js-tingle-modal-5">Close with footer button only</button>
<button class="btn btn--secondary btn-demo js-tingle-modal-6">?</button>
<h2 data-bullet="2" class="title">Installation</h2>
<table class="methods">
<thead>
<tr>
<th>Method</th>
<th class="w60">Procedure</th>
</tr>
</thead>
<tr>
<td>Bower</td>
<td>bower install tingle --save</td>
</tr>
<tr>
<td>NPM</td>
<td>npm install tingle.js --save</td>
</tr>
<tr>
<td>Basic download</td>
<td><a href="https://github.com/robinparisi/tingle/archive/master.zip" title="Download tingle">download zip</a></td>
</tr>
</table>
<p>Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit your needs.</p>
<pre class="html"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;tingle.min.css&quot;&gt;</code></pre>
<p>Then, just include tingle in your document:</p>
<pre class="html"><code>&lt;script src=&quot;tingle.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<h2 data-bullet="3" class="title">Use</h2>
<pre class="javascript"><code>
// instanciate new modal
var modal = new tingle.modal({
footer: true,
stickyFooter: false,
closeMethods: ['overlay', 'button', 'escape'],
closeLabel: "Close",
cssClass: ['custom-class-1', 'custom-class-2'],
onOpen: function() {
console.log('modal open');
},
onClose: function() {
console.log('modal closed');
},
beforeClose: function() {
// here's goes some logic
// e.g. save content before closing the modal
return true; // close the modal
return false; // nothing happens
}
});
// set content
modal.setContent('&lt;h1&gt;here\'s some content&lt;/h1&gt;');
// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
// here goes some logic
modal.close();
});
// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
// here goes some logic
modal.close();
});
// open modal
modal.open();
// close modal
modal.close();
</code></pre>
<h2 data-bullet="4" class="title">Options</h2>
<table class="methods">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="w60">Description</th>
</tr>
</thead>
<tr>
<td>footer</td>
<td>boolean</td>
<td>Display a footer or not</td>
</tr>
<tr>
<td>stickyFooter</td>
<td>boolean</td>
<td>Set to true for a footer always visible on screen</td>
</tr>