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/README.md | 2 ++ 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 + docs/index.html | 2 +- 7 files changed, 67 insertions(+), 1 deletion(-) 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') diff --git a/docs/README.md b/docs/README.md index a9c706e..ad120ac 100644 --- a/docs/README.md +++ b/docs/README.md @@ -79,6 +79,8 @@ position filed expects an array of two values. This determines where the notific number filed is the one which determines how much time notification should be visible. It expects time in **milliseconds**. Default value is *6000ms(6s)* +#### [example](http://libvyn.indrajith.surge.sh/example/example.html) + ### Support ME [![](https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0)](https://ko-fi.com/R6R36EBQ) \ No newline at end of file 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