From 9b608b89b16953c8d717ed8fde02ae396eea6094 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Tue, 19 Dec 2017 19:10:01 +0530 Subject: * Webpack config changes * Updated documentation with example * removed unwanted dependencies from starter pack --- docs/example/64x64.png | Bin 0 -> 206 bytes docs/example/example.html | 23 +++++++++++++++++ docs/example/example.js | 38 ++++++++++++++++++++++++++++ docs/example/vanilla-yo-notification.js | 2 ++ docs/example/vanilla-yo-notification.js.map | 1 + 5 files changed, 64 insertions(+) create mode 100644 docs/example/64x64.png create mode 100644 docs/example/example.html create mode 100644 docs/example/example.js create mode 100644 docs/example/vanilla-yo-notification.js create mode 100644 docs/example/vanilla-yo-notification.js.map (limited to 'docs/example') diff --git a/docs/example/64x64.png b/docs/example/64x64.png new file mode 100644 index 0000000..d889069 Binary files /dev/null and b/docs/example/64x64.png differ diff --git a/docs/example/example.html b/docs/example/example.html new file mode 100644 index 0000000..4335544 --- /dev/null +++ b/docs/example/example.html @@ -0,0 +1,23 @@ + + + + + + + + Vanilla Yo Notification + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/example/example.js b/docs/example/example.js new file mode 100644 index 0000000..a0b53fa --- /dev/null +++ b/docs/example/example.js @@ -0,0 +1,38 @@ +(function(window){ + var notif = new VYN({ + position: ['bottom', 'right'] + }); + var counter = 0; + window.showNotificationSuccess = function(){ + + notif.show({ + title: 'Notification Title', + content: `This is a content ${counter}`, + timeout: 6000 + }); + + counter += 1; + } + window.showNotificationWarning = function(){ + + notif.show({ + title: 'Notification Title', + content: 'This is a content', + type: 'warning', + timeout: 1000 + }); + } + window.showNotificationError = function(){ + + notif.show({ + title: 'Notification Title', + content: 'This is a content with image ', + type: 'error', + timeout: 2000 + }); + } + + + + +})(window); \ No newline at end of file diff --git a/docs/example/vanilla-yo-notification.js b/docs/example/vanilla-yo-notification.js new file mode 100644 index 0000000..ec7e447 --- /dev/null +++ b/docs/example/vanilla-yo-notification.js @@ -0,0 +1,2 @@ +!function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(1);window.VYN=o.default},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),e(2);var o=function(){function t(t){this.defaultConfig={content:t.content?t.content:"",footer:t.footer?t.footer:"",timeout:t.timeout?t.timeout:3e3,title:t.title?t.title:"",type:t.type?t.type:"success",position:t.position&&2==t.position.length?t.position:["bottom","right"]},this.init()}return t.prototype.init=function(){this.buildContainers()},t.prototype.buildContainers=function(){this.container=document.createElement("div"),this.container.className="notif-mainContainer "+this.defaultConfig.position.join("-"),this.notifInner=document.createElement("div"),this.notifInner.className="notif-inner",this.container.appendChild(this.notifInner),document.body.appendChild(this.container)},t.prototype.show=function(t){var n=this,e=document.createElement("div");e.className="vanilla-yo-notification "+(t.type?t.type:this.defaultConfig.type),this.notificationTemplate='\n
\n
\n '+(t.title?t.title:this.defaultConfig.title)+'\n
\n
\n '+(t.content?t.content:this.defaultConfig.content)+'\n
\n
\n '+(t.footer?t.footer:this.defaultConfig.footer)+"\n
\n
\n ",e.innerHTML=this.notificationTemplate,this.notifInner.appendChild(e),setTimeout(function(){e.className=e.className+" close",n.destroyNotification(e)},t.timeout?t.timeout:this.defaultConfig.timeout)},t.prototype.destroyNotification=function(t){var n=this;setTimeout(function(){n.notifInner.removeChild(t)},100)},t}();n.default=o},function(t,n,e){var o=e(3);"string"==typeof o&&(o=[[t.i,o,""]]);var i={};i.transform=void 0;e(5)(o,i);o.locals&&(t.exports=o.locals)},function(t,n,e){n=t.exports=e(4)(void 0),n.push([t.i,'\n\n.notif-mainContainer {\n z-index: 999;\n position: fixed;\n width: 350px;\n max-width: 98%;\n font-family: "Segoe UI","Tahoma","Calibri","Verdana",sans-serif;\n color: #999;\n box-sizing: border-box;\n}\n\n.notif-mainContainer.top-right{\n top: 8px;\n right: 8px;\n}\n\n.notif-mainContainer.bottom-right{\n bottom: 8px;\n right: 8px;\n}\n\n.notif-mainContainer.top-left{\n top: 8px;\n left: 8px;\n}\n.notif-mainContainer.bottom-left{\n bottom: 8px;\n left: 8px;\n}\n\n.notif-inner {\n display: flex;\n flex-direction: column;\n}\n\n.vanilla-yo-notification{\n width: 250px;\n color: white;\n position: relative;\n cursor: pointer;\n padding: 8px;\n margin-bottom: 12px;\n display: flex;\n border-radius: 10px;\n -webkit-animation-duration: 500ms;animation-duration: 500ms;\n}\n\n.vanilla-yo-notification.error {\n background: #e74c3c;\n}\n\n.vanilla-yo-notification.warning {\n background: #f39c12;\n}\n\n.vanilla-yo-notification.success {\n background: #2ecc71;\n}\n\n\n\n@-webkit-keyframes fadeOut {\n 0% {opacity: 1;}\n 100% {opacity: 0;}\n }\n \n @keyframes fadeOut {\n 0% {opacity: 1;}\n 100% {opacity: 0;}\n }\n\n.close {\n -webkit-animation-name: fadeOut;\n animation-name: fadeOut;\n}\n\n\n\n\n.notification_header{\n\tfont-size: 15px;\n font-weight: bold\n}',""])},function(t,n){function e(t,n){var e=t[1]||"",i=t[3];if(!i)return e;if(n&&"function"==typeof btoa){var r=o(i);return[e].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([r]).join("\n")}return[e].join("\n")}function o(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var o=e(n,t);return n[2]?"@media "+n[2]+"{"+o+"}":o}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i=0&&g.splice(n,1)}function s(t){var n=document.createElement("style");return t.attrs.type="text/css",c(n,t.attrs),r(t,n),n}function f(t){var n=document.createElement("link");return t.attrs.type="text/css",t.attrs.rel="stylesheet",c(n,t.attrs),r(t,n),n}function c(t,n){Object.keys(n).forEach(function(e){t.setAttribute(e,n[e])})}function u(t,n){var e,o,i,r;if(n.transform&&t.css){if(!(r=n.transform(t.css)))return function(){};t.css=r}if(n.singleton){var c=y++;e=b||(b=s(n)),o=l.bind(null,e,c,!1),i=l.bind(null,e,c,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=f(n),o=d.bind(null,e,n),i=function(){a(e),e.href&&URL.revokeObjectURL(e.href)}):(e=s(n),o=p.bind(null,e),i=function(){a(e)});return o(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;o(t=n)}else i()}}function l(t,n,e,o){var i=e?"":o.css;if(t.styleSheet)t.styleSheet.cssText=w(n,i);else{var r=document.createTextNode(i),a=t.childNodes;a[n]&&t.removeChild(a[n]),a.length?t.insertBefore(r,a[n]):t.appendChild(r)}}function p(t,n){var e=n.css,o=n.media;if(o&&t.setAttribute("media",o),t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}function d(t,n,e){var o=e.css,i=e.sourceMap,r=void 0===n.convertToAbsoluteUrls&&i;(n.convertToAbsoluteUrls||r)&&(o=x(o)),i&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var a=new Blob([o],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var h={},m=function(t){var n;return function(){return void 0===n&&(n=t.apply(this,arguments)),n}}(function(){return window&&document&&document.all&&!window.atob}),v=function(t){var n={};return function(e){return void 0===n[e]&&(n[e]=t.call(this,e)),n[e]}}(function(t){return document.querySelector(t)}),b=null,y=0,g=[],x=e(6);t.exports=function(t,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");n=n||{},n.attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||(n.singleton=m()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var e=i(t,n);return o(e,n),function(t){for(var r=[],a=0;a\\n
\\n \" + (config.title ? config.title : this.defaultConfig.title) + \"\\n
\\n
\\n \" + (config.content ? config.content : this.defaultConfig.content) + \"\\n
\\n
\\n \" + (config.footer ? config.footer : this.defaultConfig.footer) + \"\\n
\\n \\n \";\r\n notifContainer.innerHTML = (this.notificationTemplate);\r\n this.notifInner.appendChild(notifContainer);\r\n setTimeout(function () {\r\n notifContainer.className = notifContainer.className + ' close';\r\n _this.destroyNotification(notifContainer);\r\n }, (config.timeout ? config.timeout : this.defaultConfig.timeout));\r\n };\r\n VYN.prototype.destroyNotification = function (container) {\r\n var _this = this;\r\n setTimeout(function () {\r\n _this.notifInner.removeChild(container);\r\n }, 100);\r\n };\r\n return VYN;\r\n}());\r\nexports.default = VYN;\r\n\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a