+ Console output (latest logs are at the top):
+
+ On this page we're using the following HTML snippet: +
+{% include_code lang:html dropbox/app.html %} + ++ Along with this JavaScript: +
+{% include_code lang:js dropbox/app.es6 %} + ++ And the following CSS: +
+{% include_code lang:css dropbox/app.css %} diff --git a/website/src/examples/dropbox/index.ejs b/website/src/examples/dropbox/index.ejs index 5b1dc88c6..833af4b94 100644 --- a/website/src/examples/dropbox/index.ejs +++ b/website/src/examples/dropbox/index.ejs @@ -2,7 +2,7 @@ title: Dropbox layout: example type: examples -order: 2 +order: 3 --- {% blockquote %} diff --git a/website/src/examples/i18n/index.ejs b/website/src/examples/i18n/index.ejs index 625f77ae7..cf94c3e08 100644 --- a/website/src/examples/i18n/index.ejs +++ b/website/src/examples/i18n/index.ejs @@ -2,7 +2,7 @@ title: i18n layout: example type: examples -order: 1 +order: 4 --- {% blockquote %} diff --git a/website/src/examples/modal/app.css b/website/src/examples/modal/app.css new file mode 100644 index 000000000..b72a0b491 --- /dev/null +++ b/website/src/examples/modal/app.css @@ -0,0 +1,137 @@ +html, +body { + background-color: #ccc; + height: 100%; + overflow: auto; +} + +.avgrund-popin { + position: absolute; + background: #fff; + padding: 10px; + overflow: hidden; + visibility: hidden; + opacity: 0; + filter: alpha(opacity=0); + top: 50%; + left: 50%; + z-index: 1000; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5); + width: 1200px; + height: 600px; + + -webkit-transform: translate(-50%, -50%) scale(0.8); + -moz-transform: translate(-50%, -50%) scale(0.8); + -ms-transform: translate(-50%, -50%) scale(0.8); + -o-transform: translate(-50%, -50%) scale(0.8); + transform: translate(-50%, -50%) scale(0.8); +} + +.avgrund-overlay { + background: #000; + width: 100%; + position: relative; + top: -1500px; + left: 0; + z-index: 101; + visibility: hidden; + opacity: 0; + filter: alpha(opacity=0); +} + +body.avgrund-ready, +.avgrund-ready .avgrund-overlay { + -webkit-transition: 1s all cubic-bezier(.87,.92,.83,.67); + -moz-transition: 1s all cubic-bezier(.87,.92,.83,.67); + -ms-transition: 1s all cubic-bezier(.87,.92,.83,.67); + -o-transition: 1s all cubic-bezier(.87,.92,.83,.67); + transition: 0.6s all cubic-bezier(.87,.92,.83,.67); +} + +.avgrund-ready .avgrund-popin { + -webkit-transition: 1.5s all ease; + -moz-transition: 1.5s all ease; + -ms-transition: 1.5s all ease; + -o-transition: 1.5s all ease; + transition: 1.5s all ease; +} + +body.avgrund-ready, +.avgrund-ready .avgrund-overlay, +.avgrund-ready .avgrund-popin { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; +} + +body.avgrund-active { + -webkit-transform: scale(0.9); + -moz-transform: scale(0.9); + -ms-transform: scale(0.9); + -o-transform: scale(0.9); + transform: scale(0.9); + overflow: hidden; +} + +.avgrund-active .avgrund-popin { + visibility: visible; + opacity: 1; + filter: alpha(opacity=100); + + -webkit-transform: scale(1.1) translate(-50%, -50%); + -moz-transform: scale(1.1) translate(-50%, -50%); + -ms-transform: scale(1.1) translate(-50%, -50%); + -o-transform: scale(1.1) translate(-50%, -50%); + transform: scale(1.1) translate(-50%, -50%); + + -webkit-transition: 0.3s all ease; + -moz-transition: 0.3s all ease; + -ms-transition: 0.3s all ease; + -o-transition: 0.3s all ease; + transition: 0.3s all ease; +} + +.avgrund-active .avgrund-overlay { + visibility: visible; + opacity: .5; + filter: alpha(opacity=50); + height: 20000px; +} + +.avgrund-popin.stack { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -ms-transform: scale(1.5); + -o-transform: scale(1.5); + transform: scale(1.5); +} + +.avgrund-active .avgrund-popin.stack { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); +} + +.avgrund-active .avgrund-blur { + -webkit-filter: blur(1px); + -moz-filter: blur(1px); + -ms-filter: blur(1px); + -o-filter: blur(1px); + filter: blur(1px); +} + +/* Optional close button styles */ +.avgrund-close { + display: block; + color: #555; + font-size: 13px; + text-decoration: none; + text-transform: uppercase; + position: absolute; + top: 6px; + right: 10px; +} diff --git a/website/src/examples/modal/app.es6 b/website/src/examples/modal/app.es6 new file mode 100644 index 000000000..a2552f27f --- /dev/null +++ b/website/src/examples/modal/app.es6 @@ -0,0 +1,154 @@ +import Uppy from 'uppy/core' +import { DragDrop, Tus10 } from 'uppy/plugins' + +const defaults = { + width: 380, // max = 640 + height: 280, // max = 350 + showClose: false, + showCloseText: '', + closeByEscape: true, + closeByDocument: true, + holderClass: '', + overlayClass: '', + enableStackAnimation: false, + onBlurContainer: '', + openOnEvent: true, + setEvent: 'click', + onLoad: false, + onUnload: false, + onClosing: false, + template: 'This is test popin content!
' +}; + +document.addEventListener('DOMContentLoaded', () => { + document.body.classList.add('avgrund-ready') + + // if ($('.avgrund-overlay').length === 0) { + // body.append(''); + // } + +// $(options.onBlurContainer).addClass('avgrund-blur'); + + const trigger = document.querySelector('.ModalTrigger') + trigger.addEventListener('click', (e) => { + let overlayElem = document.createElement('div') + overlayElem.classList.add('avgrund-overlay') + document.body.appendChild(overlayElem) + overlayElem.addEventListener('click', onDocumentClick) + activate(); + }) +}) + +function onDocumentKeyup (e) { + console.log('keyclick') + if (options.closeByEscape) { + if (e.keyCode === 27) { + deactivate(); + } + } +} + +function onDocumentClick (e) { + console.log('documentclick') + + e.preventDefault(); + deactivate(); +} + +function activate (e) { + setTimeout(function () { + document.body.classList.toggle('avgrund-ready'); + document.body.classList.toggle('avgrund-active'); + }, 100); + + var popin = document.createElement('div'); + popin.classList.add('avgrund-popin'); + popin.classList.add('ModalWindow'); + + popin.innerHTML = defaults.template; + console.log(defaults.template) + + var a = document.createElement('a') + var linkText = document.createTextNode("close") + a.appendChild(linkText) + a.classList.add('avgrund-close') + a.href = '#' + + popin.appendChild(a) + + document.body.appendChild(popin); + a.addEventListener('click', onDocumentClick) +} + + // document.body.addEventListener('keyup', document) + // body.bind('keyup', onDocumentKeyup) + // .bind('click', onDocumentClick); + function deactivate () { + document.body.classList.toggle('avgrund-ready'); + document.body.classList.toggle('avgrund-active'); + + setTimeout(function () { + var el = document.querySelector('.avgrund-popin') + el.remove(); + }, 500); + } + + +/** + * jQuery Avgrund Popin Plugin + * http://github.com/voronianski/jquery.avgrund.js/ + * + * (c) http://pixelhunter.me/ + * MIT licensed + */ + +// (function (factory) { +// if (typeof define === 'function' && define.amd) { +// // AMD +// define(['jquery'], factory); +// } else if (typeof exports === 'object') { +// // CommonJS +// module.exports = factory; +// } else { +// // Browser globals +// factory(jQuery); +// } +// }(function ($) { +// $.fn.avgrund = function (options) { + + +// options = $.extend(defaults, options); + +// return this.each(function () { +// var self = $(this), +// body = $('body'), +// maxWidth = options.width > 640 ? 640 : options.width, +// maxHeight = options.height > 350 ? 350 : options.height, +// template = typeof options.template === 'function' ? options.template(self) : options.template; + +// body.addClass('avgrund-ready'); + +// if ($('.avgrund-overlay').length === 0) { +// body.append(''); +// } + +// if (options.onBlurContainer !== '') { +// $(options.onBlurContainer).addClass('avgrund-blur'); +// } + +// if (options.openOnEvent) { +// self.bind(options.setEvent, function (e) { +// e.stopPropagation(); + +// if ($(e.target).is('a')) { +// e.preventDefault(); +// } + +// activate(); +// }); +// } else { +// activate(); +// } +// }); +// }; +// })); diff --git a/website/src/examples/modal/app.html b/website/src/examples/modal/app.html new file mode 100644 index 000000000..dc6f50a66 --- /dev/null +++ b/website/src/examples/modal/app.html @@ -0,0 +1 @@ + diff --git a/website/src/examples/modal/index.ejs b/website/src/examples/modal/index.ejs new file mode 100644 index 000000000..c560e61a0 --- /dev/null +++ b/website/src/examples/modal/index.ejs @@ -0,0 +1,35 @@ +--- +title: Modal +layout: example +type: examples +order: 5 +--- + +{% blockquote %} +This is a demo of the Uppy Modal. +{% endblockquote %} + + +<% include app.html %> + + +
+ Console output (latest logs are at the top):
+
+ On this page we're using the following HTML snippet: +
+{% include_code lang:html dropbox/app.html %} + ++ Along with this JavaScript: +
+{% include_code lang:js dropbox/app.es6 %} + ++ And the following CSS: +
+{% include_code lang:css dropbox/app.css %}