|
| 1 | +# DADA.js |
| 2 | +Bring DADA to your website! |
| 3 | + |
| 4 | +[](//matthias-vogt.github.io/DADA.js) |
| 5 | + |
| 6 | +Demo: [matthias-vogt.github.io/DADA.js](//matthias-vogt.github.io/DADA.js) |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +## What even |
| 11 | +> **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. [...] |
| 12 | +> 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. |
| 13 | +> 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." |
| 14 | +
|
| 15 | + — [Wikipedia](https://en.wikipedia.org/wiki/Dada) |
| 16 | + |
| 17 | +In this spirit and to celebrate DADA's 100th anniversary, this plugin is supposed to bring confusion, havoc and fun to the web. |
| 18 | +**It can also be used to announce DADA performances** ;) |
| 19 | + |
| 20 | +## Usage |
| 21 | +`DADA.js` depends on [jQuery](https://jquery.com/), so make sure you have that loaded. You can use it like this: |
| 22 | +```javascript |
| 23 | +$.DADA(options); |
| 24 | +``` |
| 25 | + |
| 26 | +### Install |
| 27 | + |
| 28 | +```html |
| 29 | +<link href="stylesheet" type="text/css" href="DADA.min.css"> |
| 30 | +<link href="stylesheet" type="text/css" href="DADA-button.min.css"> <!-- optional --> |
| 31 | +<script src="jquery.min.js"></script> |
| 32 | +<script src="DADA.min.js"></script> |
| 33 | +``` |
| 34 | + |
| 35 | +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. |
| 36 | +```html |
| 37 | +<div class="dada-button-container"> |
| 38 | + <button class="dada-button" title="DADA expressly dissociates itself from the contents of this website.">DADA!</button> |
| 39 | + <span>Please click the button now!</span> |
| 40 | +</div> |
| 41 | +``` |
| 42 | +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. |
| 43 | + |
| 44 | +Install and update easily using [npm](http://npmjs.com): |
| 45 | +```sh |
| 46 | +npm install dada --save |
| 47 | +``` |
| 48 | + |
| 49 | +### Options |
| 50 | +```javascript |
| 51 | +{ |
| 52 | + |
| 53 | + // content |
| 54 | + |
| 55 | + phrases: [ |
| 56 | + // possible random phrases for dialogs |
| 57 | + // expects array of strings |
| 58 | + "DADA is DADA is DADA" |
| 59 | + ], |
| 60 | + icons: [ |
| 61 | + // possible random icons for dialogs |
| 62 | + // expects array of URIs as strings |
| 63 | + ], |
| 64 | + sounds: { |
| 65 | + random: [ |
| 66 | + // possible random sounds for dialogs |
| 67 | + // expects array of URIs as strings |
| 68 | + ], |
| 69 | + special: { |
| 70 | + // possible random sounds for special events of dialogs |
| 71 | + |
| 72 | + close: [ |
| 73 | + // possible random sounds for when dialogs close |
| 74 | + ], |
| 75 | + start: [ |
| 76 | + // possible random sounds for the first modal |
| 77 | + ] |
| 78 | + } |
| 79 | + }, |
| 80 | + |
| 81 | + // callbacks |
| 82 | + |
| 83 | + on: { |
| 84 | + start: function() { |
| 85 | + // when the first modal opens |
| 86 | + }, |
| 87 | + end: function() { |
| 88 | + // when DADA ends |
| 89 | + }, |
| 90 | + ok: function() { |
| 91 | + // when any OK button is clicked |
| 92 | + }, |
| 93 | + cancel: function() { |
| 94 | + // when any Cancel button is clicked |
| 95 | + } |
| 96 | + }, |
| 97 | + |
| 98 | + // timing |
| 99 | + |
| 100 | + time: 20000, // total time DADA should run |
| 101 | + baseTimePerDialog: 1500, // time before a new dialog pops up (+- a little randomization) |
| 102 | + waitTimeAfterFirstDialog: 8000, // time to wait after the first pop up (suspense) |
| 103 | + |
| 104 | + // window markup |
| 105 | + |
| 106 | + windowTemplate: '' + // template for windows' markups |
| 107 | + '<div class="window">' + |
| 108 | + ' <div class="bar">' + |
| 109 | + ' {{title}}' + |
| 110 | + ' <button class="close js-cancel">×</button>' + |
| 111 | + ' </div>' + |
| 112 | + ' <div class="content">' + |
| 113 | + ' <img class="icon" alt="DADA Icon">' + |
| 114 | + ' <div class="text">' + |
| 115 | + ' <br>' + |
| 116 | + ' <button class="js-ok">{{ok}}</button>' + |
| 117 | + ' <button class="js-cancel">{{cancel}}</button>' + |
| 118 | + ' </div>' + |
| 119 | + ' </div>' + |
| 120 | + '</div>', |
| 121 | + words: { // context for windows' templates |
| 122 | + title: "DADA-Error!!1", |
| 123 | + ok: "OK", |
| 124 | + cancel: "Cancel" |
| 125 | + }, |
| 126 | + |
| 127 | +} |
| 128 | +``` |
| 129 | + |
| 130 | + |
| 131 | +### Destroying |
| 132 | +DADA cannot be stopped. |
| 133 | + |
| 134 | +## Browser support |
| 135 | +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. |
| 136 | + |
| 137 | +Yes, it's responsive*.<br>*kinda |
| 138 | + |
| 139 | +## Contributing |
| 140 | +You are very welcome to contribute! Please send pull requests and issues. |
| 141 | + |
| 142 | +## Feature requests |
| 143 | +Feel free to post issues to ask for features. |
| 144 | + |
| 145 | +## TODO |
| 146 | +- [ ] support CommonJS and AMD |
| 147 | +- [ ] Clean up gulpfile |
| 148 | + |
| 149 | +## License |
| 150 | +WTFPL, no warranty. Attribution would be appreciated. |
0 commit comments