DO DE DADA

stopft euch mit pralinen
spült euch das gehirn
dadadudel
dudeldada
jetzt gibts sprudel

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+*.log
+
+# TODOs
+*.todo
+todo
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules

.npmignore

@@ -0,0 +1,30 @@
+# Distributions
+**/dist/
+
+# Logs
+*.log
+
+# TODOs
+*.todo
+todo
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules

LICENSE

@@ -0,0 +1,22 @@
+       DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                   Version 2, December 2004
+
+Copyright (C) 2016 Matthias Vogt
+
+Everyone is permitted to copy and distribute verbatim or modified
+copies of this license document, and changing it is allowed as long
+as the name is changed.
+
+           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+ 0. You just DO WHAT THE FUCK YOU WANT TO.
+
+
+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 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.

README.md

@@ -0,0 +1,150 @@
+# DADA.js
+Bring DADA to your website!
+
+[![Demo](//raw.githubusercontent.com/matthias-vogt/DADA.js/gh-pages/demo-media/img/demo.gif)](//matthias-vogt.github.io/DADA.js)
+
+Demo: [matthias-vogt.github.io/DADA.js](//matthias-vogt.github.io/DADA.js)
+
+This is a [`jQuery`](//jquery.com) plugin to plant something that looks like a Virus on your website. When activated, lots of `Windows 98` dialogs pop up with configurable random phrases, icons and sounds. The dialogs are spinning, pulsing, rotating, and even move away from your cursor if you try to close them.
+
+## What even
+> **Dada** ([/ˈdɑːdɑː/](https://en.wikipedia.org/wiki/Help:IPA_for_English)) or **Dadaism** was an [art movement](https://en.wikipedia.org/wiki/Art_movement) of the European [avant-garde](https://en.wikipedia.org/wiki/Avant-garde) in the early 20th century. [...]
+> The beginnings of Dada correspond to the outbreak of [World War I](https://en.wikipedia.org/wiki/World_War_I). For many participants, the movement was a protest against the [bourgeois](https://en.wikipedia.org/wiki/Bourgeoisie) [nationalist](https://en.wikipedia.org/wiki/Nationalism) and [colonialist](https://en.wikipedia.org/wiki/Colonialism) interests, which many Dadaists believed were the root cause of the war, and against the cultural and intellectual conformity—in art and more broadly in society—that corresponded to the war.
+> Many Dadaists believed that the 'reason' and 'logic' of bourgeois [capitalist](https://en.wikipedia.org/wiki/Capitalism) society had led people into war. They expressed their rejection of that ideology in artistic expression that appeared to reject logic and embrace [chaos](https://en.wikipedia.org/wiki/Randomness) and [irrationality](https://en.wikipedia.org/wiki/Irrationality). For example, [George Grosz](https://en.wikipedia.org/wiki/George_Grosz) later recalled that his Dadaist art was intended as a protest "against this world of mutual destruction."
+
+ — [Wikipedia](https://en.wikipedia.org/wiki/Dada)
+
+In this spirit and to celebrate DADA's 100th anniversary, this plugin is supposed to bring confusion, havoc and fun to the web.
+**It can also be used to announce DADA performances** ;)
+
+## Usage
+`DADA.js` depends on [jQuery](https://jquery.com/), so make sure you have that loaded. You can use it like this:
+```javascript
+$.DADA(options);
+```
+
+### Install
+
+```html
+<link href="stylesheet" type="text/css" href="DADA.min.css">
+<link href="stylesheet" type="text/css" href="DADA-button.min.css"> <!-- optional -->
+<script src="jquery.min.js"></script>
+<script src="DADA.min.js"></script>
+```
+
+The plugin comes with `DADA-button.scss` which helps you style a cool looking button users can click to initiate the DADA. Kinda ruins the whole point of surprise and confusion but whatever.
+```html
+<div class="dada-button-container">
+    <button class="dada-button" title="DADA expressly dissociates itself from the contents of this website.">DADA!</button>
+    <span>Please click the button now!</span>
+</div>
+```
+For better loading performance, I'd recommend loading the script as non-critical content (by putting the `<script>` and `<style>` tags at the end of the body tag). Please also consider concatenating it with your other dependencies.
+
+Install and update easily using [npm](http://npmjs.com):
+```sh
+npm install dada --save
+```
+
+### Options
+```javascript
+{
+
+    // content
+
+    phrases: [
+        // possible random phrases for dialogs
+        // expects array of strings
+        "DADA is DADA is DADA"
+    ],
+    icons: [
+        // possible random icons for dialogs
+        // expects array of URIs as strings
+    ],
+    sounds: {
+        random: [
+            // possible random sounds for dialogs
+            // expects array of URIs as strings
+        ],
+        special: {
+            // possible random sounds for special events of dialogs
+
+            close: [
+                // possible random sounds for when dialogs close
+            ],
+            start: [
+                // possible random sounds for the first modal
+            ]
+        }
+    },
+
+    // callbacks
+
+    on: {
+        start: function() {
+            // when the first modal opens
+        },
+        end: function() {
+            // when DADA ends
+        },
+        ok: function() {
+            // when any OK button is clicked
+        },
+        cancel: function() {
+            // when any Cancel button is clicked
+        }
+    },
+
+    // timing
+
+    time: 20000, // total time DADA should run
+    baseTimePerDialog: 1500, // time before a new dialog pops up (+- a little randomization)
+    waitTimeAfterFirstDialog: 8000, // time to wait after the first pop up (suspense)
+
+    // window markup
+
+    windowTemplate: '' + // template for windows' markups
+        '<div class="window">' +
+        '    <div class="bar">' +
+        '        {{title}}' +
+        '        <button class="close js-cancel">×</button>' +
+        '    </div>' +
+        '    <div class="content">' +
+        '        <img class="icon" alt="DADA Icon">' +
+        '        <div class="text">' +
+        '            <br>' +
+        '            <button class="js-ok">{{ok}}</button>' +
+        '            <button class="js-cancel">{{cancel}}</button>' +
+        '        </div>' +
+        '    </div>' +
+        '</div>',
+    words: { // context for windows' templates
+        title: "DADA-Error!!1",
+        ok: "OK",
+        cancel: "Cancel"
+    },
+
+}
+```
+
+
+### Destroying
+DADA cannot be stopped.
+
+## Browser support
+This uses CSS3 transitions, animations and filters, so full [browser support](http://caniuse.com/#feat=css-transitions) is ie10+. Everything >ie8 should degrade just fine, though.
+
+Yes, it's responsive*.<br>*kinda
+
+## Contributing
+You are very welcome to contribute! Please send pull requests and issues.
+
+## Feature requests
+Feel free to post issues to ask for features.
+
+## TODO
+- [ ] support CommonJS and AMD
+- [ ] Clean up gulpfile
+
+## License
+WTFPL, no warranty. Attribution would be appreciated.

demo-media/css/_checkbox.scss

@@ -0,0 +1,94 @@
+/*
+  Copyright Matthias Vogt 2016
+  All rights reserved.
+*/
+
+$checkmarkSVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" filter="url(#dropShadow)" fill="white" viewBox="0 0 9 9"><defs><filter id="dropShadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0" /><feGaussianBlur stdDeviation=".4"></feGaussianBlur><feOffset dx="0" dy=".5" result="shadow"></feOffset><feComposite in="SourceGraphic" in2="shadow" operator="over"></feComposite></filter></defs><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>';
+// checkmark could also be replaced with an icon font or unicode but zoom animations would be harder
+
+[type="checkbox"].substituted {
+  // can't have visibility: hidden; or display: none; or they wouldn't be focusable/usable
+  position: fixed;
+  top: -999px;
+
+  &+label:before {
+    content: "";
+    display: inline-block;
+    vertical-align: top;
+    height: 1.15em;
+    width: 1.15em;
+    margin-right: .275em;
+
+    color: rgba(0,0,0,0.275);
+    border: solid .06em;
+    box-shadow:
+      0 0 .04em,
+      0 .06em 0.16em -0.03em inset,
+      0 0 0 .07em transparent inset; // only here because transitions should be color-only
+    border-radius: 0.2em;
+    background: url('data:image/svg+xml;charset=UTF-8,#{$checkmarkSVG}')
+    no-repeat center / 0, white;
+
+    will-change: color, border, background, background-size, box-shadow;
+    transform: translate3d(0,0,0); // hardware acceleration hack for no support for will-change
+    transition:
+      color .1s,
+      border .1s,
+      background .15s,
+      box-shadow .1s;
+  }
+  /*
+   label:active -> when label clicked
+   input:active -> when spacebar pressed while focused
+  */
+  &:enabled:active+label:before,
+  &:enabled+label:active:before {
+    box-shadow:
+      0 0 0.04em,
+      0 .06em 0.16em -0.03em transparent inset,
+      0 0 0 .07em rgba(0,0,0,.1) inset;
+    background-color: rgb(240, 240, 240);
+  }
+
+  &:checked {
+    &+label:before {
+      background-color: #3B99FC;
+      background-size: 0.75em;
+
+      color: rgba(0, 0, 0, 0.075);
+    }
+    &:enabled:active+label:before,
+    &:enabled+label:active:before {
+      background-color: #0a7ffb;
+      color: rgba(0,0,0,0.275);
+    }
+  }
+
+  // faking focus outline
+  &:focus+label:before {
+    box-shadow:
+      // inherited
+      0 0 0.04em,
+      0 .06em 0.16em -0.03em transparent inset,
+      0 0 0 .07em rgba(0,0,0,.1) inset,
+      // additional
+      0 0 0 3px rgba(65, 159, 255, 0.55),
+      0 0 0 4px rgba(65, 159, 255, 0.3);
+  }
+  &:focus:active+label:before,
+  &:focus+label:active:before {
+    box-shadow:
+      // inherited
+      0 0 0.04em,
+      0 .06em 0.16em -0.03em transparent inset,
+      0 0 0 .07em rgba(0,0,0,.1) inset,
+      // additional
+      0 0 0 3px rgba(65, 159, 255, 0.55),
+      0 0 0 4px rgba(65, 159, 255, 0.3);
+  }
+
+  // disabled
+  &:disabled+label:before {
+    opacity: .5;
+  }
+}