diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2d2b47d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules \ No newline at end of file diff --git a/Readme.md b/Readme.md index c8a4ec3..2fe8f1a 100644 --- a/Readme.md +++ b/Readme.md @@ -1,8 +1,9 @@ Demonstrations: =============== -Are over here: http://mintchaos.github.io/flippant.js/ +Are over here: http://mintchaos.github.io/flippant.js/. +Local demo available in demo/demo.html using flippant bundle. Whys and hows: ============== @@ -50,3 +51,25 @@ The full API: -------------- Grab the JS and the CSS file. Use them. The JS file is a UMD package so require or commonjs it or just use it. It's not picky. + + +Flippant Bundle +--------------- + +/lib/flippant-bundle.js contains both the flippant script and styling as a standalone module, rather than +two separate files. + +Developers can rebuild this package if npm and Browserify are installed. + +Install cssify: +`npm install` + +`npm run-script browserify` + +Simple to use: + +`` + +... + +`flippant.flip(flipper, input + textarea)` \ No newline at end of file diff --git a/demo/browsery.js b/demo/browsery.js new file mode 100644 index 0000000..ce34188 --- /dev/null +++ b/demo/browsery.js @@ -0,0 +1,38 @@ +;(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s

' + var textarea = '
' + + if (e.target.classList.contains('card')) { + back = flippant.flip(flipper, input + textarea) + } else { + back = flippant.flip(flipper, input + textarea, 'modal') + } + + back.addEventListener('click', function(e) { + if (e.target.classList.contains('btn')) { + flipper.querySelector('h2').innerText = back.querySelector('input').value + flipper.querySelector('p').innerText = back.querySelector('textarea').value + event.trigger(back, 'close') + } + }) + + } +}) + + +},{"./event":2}],2:[function(require,module,exports){ +exports.trigger = function(elm, event_name, data) { + var evt = new CustomEvent(event_name, data) + elm.dispatchEvent(evt) +} +},{}]},{},[1]) +; \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html new file mode 100644 index 0000000..df700ee --- /dev/null +++ b/demo/demo.html @@ -0,0 +1,23 @@ + + + + Testbed + + + +
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

Modal » Card »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

Modal » Card »

+
+
+ + + + \ No newline at end of file diff --git a/lib/flip.js b/lib/flip.js index 025aaf3..dc874b1 100644 --- a/lib/flip.js +++ b/lib/flip.js @@ -1,3 +1,5 @@ +require('../flippant.css'); + exports.flip = flip function flip(flipper, content, type, class_name, timeout) { diff --git a/lib/flippant-bundle.js b/lib/flippant-bundle.js new file mode 100644 index 0000000..a2eb3b3 --- /dev/null +++ b/lib/flippant-bundle.js @@ -0,0 +1,121 @@ +!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.flippant=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o lib/flippant-bundle.js" + } +}