├── .babelrc ├── .browserslist ├── .browserslistrc ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .stylelintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── dist ├── css │ ├── index.css │ └── index.min.css ├── index.html └── js │ ├── index.js │ └── index.min.js ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── index.html ├── js │ └── index.js └── scss │ └── index.scss └── test └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | "last 5 versions", 9 | "Explorer >= 10" 10 | ] 11 | } 12 | } 13 | ] 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.browserslist: -------------------------------------------------------------------------------- 1 | and_chr 91 2 | and_ff 89 3 | and_qq 10.4 4 | and_uc 12.12 5 | android 91 6 | baidu 7.12 7 | chrome 91 8 | chrome 90 9 | edge 91 10 | edge 90 11 | firefox 90 12 | firefox 89 13 | firefox 78 14 | ie 11 15 | ie 10 16 | ios_saf 14.5-14.7 17 | ios_saf 14.0-14.4 18 | ios_saf 13.4-13.7 19 | kaios 2.5 20 | op_mini all 21 | op_mob 62 22 | opera 77 23 | opera 76 24 | safari 14.1 25 | safari 14 26 | samsung 14.0 27 | samsung 13.0 28 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | Explorer >= 10 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | 10 | [*.{js,css,scss}] 11 | indent_style = tab 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "rules": { 8 | "indent": [ 9 | "error", 10 | 4 11 | ], 12 | "quotes": [ 13 | "error", 14 | "single" 15 | ], 16 | "semi": [ 17 | "error", 18 | "always" 19 | ], 20 | "no-inner-declarations": 0 21 | }, 22 | "parserOptions": { 23 | "sourceType": "module" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | npm-debug.log 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-recommended", "stylelint-config-recommended-scss"] 3 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | const sass = require('node-sass'); 4 | 5 | grunt.initConfig({ 6 | 7 | settings: { 8 | srcPath: 'src/', 9 | distPath: 'dist/', 10 | library: 'jPopup' 11 | }, 12 | 13 | eslint: { 14 | options: { 15 | configFile: '.eslintrc.json' 16 | }, 17 | target: ['<%= settings.srcPath %>js/index.js'] 18 | }, 19 | 20 | stylelint: { 21 | options: { 22 | configFile: '.stylelintrc' 23 | }, 24 | all: ['<%= settings.srcPath %>scss/**/*.scss'] 25 | }, 26 | 27 | babel: { 28 | dist: { 29 | files: { 30 | '<%= settings.distPath %>js/index.js': [ 31 | '<%= settings.srcPath %>js/index.js' 32 | ] 33 | } 34 | } 35 | }, 36 | 37 | uglify: { 38 | minify: { 39 | options: { 40 | beautify: false 41 | }, 42 | files: { 43 | '<%= settings.distPath %>js/index.min.js': [ 44 | '<%= settings.distPath %>js/index.js' 45 | ] 46 | } 47 | } 48 | }, 49 | 50 | umd: { 51 | all: { 52 | options: { 53 | src: '<%= settings.distPath %>js/index.js', 54 | dest: '<%= settings.distPath %>js/index.js', 55 | objectToExport: '<%= settings.library %>', 56 | } 57 | } 58 | }, 59 | 60 | sass: { 61 | app: { 62 | files: [{ 63 | expand: true, 64 | cwd: '<%= settings.srcPath %>scss', 65 | src: ['**/*.scss'], 66 | dest: '<%= settings.distPath %>css', 67 | ext: '.css' 68 | }], 69 | options: { 70 | implementation: sass, 71 | outputStyle: 'expanded', 72 | sourceMap: false, 73 | precision: 5 74 | } 75 | } 76 | }, 77 | 78 | postcss: { 79 | options: { 80 | map: false, 81 | processors: [ 82 | require('autoprefixer')() 83 | ] 84 | }, 85 | dist: { 86 | src: '<%= settings.distPath %>css/**/*.css' 87 | } 88 | }, 89 | 90 | cssmin: { 91 | target: { 92 | files: [{ 93 | expand: true, 94 | cwd: '<%= settings.distPath %>css', 95 | src: ['*.css', '!*.min.css'], 96 | dest: '<%= settings.distPath %>css', 97 | ext: '.min.css' 98 | }] 99 | } 100 | }, 101 | 102 | htmlmin: { 103 | dist: { 104 | options: { 105 | removeComments: true, 106 | collapseWhitespace: true 107 | }, 108 | files: [{ 109 | expand: true, 110 | cwd: '<%= settings.srcPath %>', 111 | src: ['**/*.html'], 112 | dest: '<%= settings.distPath %>' 113 | }] 114 | } 115 | }, 116 | 117 | karma: { 118 | unit: { 119 | configFile: 'karma.conf.js', 120 | autoWatch: true, 121 | background: true, 122 | singleRun: false, 123 | files: [ 124 | { src: ['<%= settings.srcPath %>js/index.js'], served: true, included: true, type: 'module' }, 125 | { src: ['test/index.js'], served: true, included: true, type: 'module' }, 126 | ] 127 | } 128 | }, 129 | 130 | browserSync: { 131 | bsFiles: { 132 | src : [ 133 | '<%= settings.distPath %>' 134 | ], 135 | }, 136 | options: { 137 | server: { 138 | baseDir: '<%= settings.distPath %>' 139 | } 140 | } 141 | }, 142 | 143 | watch: { 144 | javascript: { 145 | expand: true, 146 | files: ['<%= settings.srcPath %>js/**/*.js'], 147 | tasks: ['eslint', 'babel', 'umd', 'uglify'], 148 | options: { 149 | spawn: false 150 | } 151 | }, 152 | scss: { 153 | expand: true, 154 | files: ['<%= settings.srcPath %>scss/**/*.scss'], 155 | tasks: ['stylelint', 'sass', 'postcss', 'cssmin'], 156 | options: { 157 | spawn: false 158 | } 159 | }, 160 | html: { 161 | files: ['<%= settings.srcPath %>*.html'], 162 | tasks: ['htmlmin'], 163 | options: { 164 | spawn: false 165 | } 166 | }, 167 | browserSync: { 168 | files: ['<%= settings.distPath %>'], 169 | tasks: ['browserSync'], 170 | options: { 171 | spawn: false 172 | } 173 | }, 174 | karma: { 175 | tasks: ['karma:unit:start'], 176 | files: ['<%= settings.srcPath %>js/index.js', 'test/index.js'] 177 | } 178 | } 179 | }); 180 | 181 | require('load-grunt-tasks')(grunt); 182 | 183 | grunt.registerTask('default', ['watch', 'browserSync']); 184 | grunt.registerTask('build', [ 185 | 'eslint', 'stylelint', 186 | 'babel', 'umd', 'uglify', 187 | 'sass', 'postcss', 'cssmin', 188 | 'htmlmin' 189 | ]); 190 | 191 | }; 192 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Robert Velickovski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jPopup # 2 | ### Simple lightweight (<2kB) and easy-to-use javascript popup plugin ### 3 | 4 | ### Another popop? ### 5 | Yep, I needed simple as possible popup plugin for personal use, so jPopup was born. 6 | 7 | ### Demo ### 8 | 9 | Demo available [here](https://robiveli.github.io/jpopup/). 10 | 11 | ### Install ### 12 | 13 | With npm: 14 | ``` 15 | npm install jpopup --save 16 | ``` 17 | 18 | ### Usage ### 19 | 20 | Include required javascript: 21 | 22 | ``` 23 | import jPopup from 'jPopup'; 24 | ``` 25 | 26 | Optionally, include stylings (or style it as you wish): 27 | ``` 28 | @import 'jPopup'; 29 | ``` 30 | 31 | Define new instance and open popup: 32 | ``` 33 | 47 | ``` 48 | 49 | And that's that! Now you should see HTML markup in document tree: 50 | ``` 51 |
52 | 53 |

Lorem Ipsum...

54 |
55 | ``` 56 | 57 | ### Options ### 58 | 59 | jPopup can take just several parameters - an object of key/value settings: 60 | 61 | Name | Required | Type | Default | Description | 62 | | --- | --- | --- | --- | --- | 63 | | content | true | [String] | '' | Content to display | 64 | | transition | false | [String] | 'fade' | Type of appearance animation. Possible animation transitions: 'fade', 'slideInFromTop', 'slideInFromBottom', 'slideInFromLeft' and 'slideInFromRight' | 65 | | onOpen | false | [Function] | null | Callback to execute when popup is open, returned argument is popup (type: *Element*) | 66 | | onClose | false | [Function] | null | Callback to execute when popup is closed, returned argument is popup (type: *Element*) | 67 | 68 | 69 | ### API ### 70 | 71 | `open()` - open popup 72 | 73 | `close()` - close popup 74 | 75 | `setContent(content)` - set popup content (`@param {String}`) 76 | 77 | `getContent()` - get popup content (`@return {String}`) 78 | 79 | `destroy()` - destroy popup (remove from DOM and unbind events) 80 | 81 | 82 | ### Browser support ### 83 | 84 | It works in every modern browser. 85 | 86 | --- 87 | 88 | ### License ### 89 | 90 | jPopup is licensed under the [MIT license](http://opensource.org/licenses/MIT). 91 | -------------------------------------------------------------------------------- /dist/css/index.css: -------------------------------------------------------------------------------- 1 | .jPopup { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | z-index: 9999; 8 | max-width: 100%; 9 | padding: 6rem; 10 | background: #fff; 11 | opacity: 0; 12 | } 13 | 14 | .jPopup--fade { 15 | pointer-events: none; 16 | } 17 | 18 | .jPopup--slideInFromTop { 19 | transform: translateY(-100%); 20 | } 21 | 22 | .jPopup--slideInFromBottom { 23 | transform: translateY(100%); 24 | } 25 | 26 | .jPopup--slideInFromRight { 27 | transform: translateX(100%); 28 | } 29 | 30 | .jPopup--slideInFromLeft { 31 | transform: translateX(-100%); 32 | } 33 | 34 | .jPopup-closeBtn { 35 | position: absolute; 36 | right: 1rem; 37 | top: 1rem; 38 | width: 5rem; 39 | height: 5rem; 40 | outline: 0; 41 | border: 0; 42 | background-color: transparent; 43 | cursor: pointer; 44 | } 45 | 46 | .jPopup-closeBtn:before, .jPopup-closeBtn:after { 47 | content: ''; 48 | position: absolute; 49 | left: 50%; 50 | top: 50%; 51 | height: 2.6rem; 52 | width: 0.3rem; 53 | background-color: #adadad; 54 | } 55 | 56 | .jPopup-closeBtn:before { 57 | transform: translate(-50%, -50%) rotate(45deg); 58 | } 59 | 60 | .jPopup-closeBtn:after { 61 | transform: translate(-50%, -50%) rotate(-45deg); 62 | } 63 | 64 | .jPopup-content { 65 | top: 50%; 66 | left: 1.5rem; 67 | right: 1.5rem; 68 | position: absolute; 69 | transform: translateY(-50%); 70 | } 71 | 72 | .jPopup--isOpen .jPopup, .jPopup--isOpen body { 73 | overflow: hidden; 74 | } 75 | 76 | .jPopup--isOpen .jPopup { 77 | pointer-events: all; 78 | } 79 | 80 | .jPopup--isOpen .jPopup--fade { 81 | -webkit-animation: fade 350ms ease-in-out forwards; 82 | animation: fade 350ms ease-in-out forwards; 83 | } 84 | 85 | .jPopup--isOpen .jPopup--slideInFromTop { 86 | -webkit-animation: slideInFromTop 350ms ease-in-out forwards; 87 | animation: slideInFromTop 350ms ease-in-out forwards; 88 | } 89 | 90 | .jPopup--isOpen .jPopup--slideInFromBottom { 91 | -webkit-animation: slideInFromBottom 350ms ease-in-out forwards; 92 | animation: slideInFromBottom 350ms ease-in-out forwards; 93 | } 94 | 95 | .jPopup--isOpen .jPopup--slideInFromLeft { 96 | -webkit-animation: slideInFromLeft 350ms ease-in-out forwards; 97 | animation: slideInFromLeft 350ms ease-in-out forwards; 98 | } 99 | 100 | .jPopup--isOpen .jPopup--slideInFromRight { 101 | -webkit-animation: slideInFromRight 350ms ease-in-out forwards; 102 | animation: slideInFromRight 350ms ease-in-out forwards; 103 | } 104 | 105 | @-webkit-keyframes fade { 106 | 0% { 107 | opacity: 0; 108 | } 109 | 100% { 110 | opacity: 1; 111 | } 112 | } 113 | 114 | @keyframes fade { 115 | 0% { 116 | opacity: 0; 117 | } 118 | 100% { 119 | opacity: 1; 120 | } 121 | } 122 | 123 | @-webkit-keyframes slideInFromTop { 124 | 0% { 125 | opacity: 0; 126 | transform: translateY(-100%); 127 | } 128 | 100% { 129 | transform: translateY(0); 130 | opacity: 1; 131 | } 132 | } 133 | 134 | @keyframes slideInFromTop { 135 | 0% { 136 | opacity: 0; 137 | transform: translateY(-100%); 138 | } 139 | 100% { 140 | transform: translateY(0); 141 | opacity: 1; 142 | } 143 | } 144 | 145 | @-webkit-keyframes slideInFromBottom { 146 | 0% { 147 | opacity: 0; 148 | transform: translateY(100%); 149 | } 150 | 100% { 151 | transform: translateY(0); 152 | opacity: 1; 153 | } 154 | } 155 | 156 | @keyframes slideInFromBottom { 157 | 0% { 158 | opacity: 0; 159 | transform: translateY(100%); 160 | } 161 | 100% { 162 | transform: translateY(0); 163 | opacity: 1; 164 | } 165 | } 166 | 167 | @-webkit-keyframes slideInFromRight { 168 | 0% { 169 | opacity: 0; 170 | transform: translateX(100%); 171 | } 172 | 100% { 173 | transform: translateX(0); 174 | opacity: 1; 175 | } 176 | } 177 | 178 | @keyframes slideInFromRight { 179 | 0% { 180 | opacity: 0; 181 | transform: translateX(100%); 182 | } 183 | 100% { 184 | transform: translateX(0); 185 | opacity: 1; 186 | } 187 | } 188 | 189 | @-webkit-keyframes slideInFromLeft { 190 | 0% { 191 | opacity: 0; 192 | transform: translateX(-100%); 193 | } 194 | 100% { 195 | transform: translateX(0); 196 | opacity: 1; 197 | } 198 | } 199 | 200 | @keyframes slideInFromLeft { 201 | 0% { 202 | opacity: 0; 203 | transform: translateX(-100%); 204 | } 205 | 100% { 206 | transform: translateX(0); 207 | opacity: 1; 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /dist/css/index.min.css: -------------------------------------------------------------------------------- 1 | .jPopup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;max-width:100%;padding:6rem;background:#fff;opacity:0}.jPopup--fade{pointer-events:none}.jPopup--slideInFromTop{transform:translateY(-100%)}.jPopup--slideInFromBottom{transform:translateY(100%)}.jPopup--slideInFromRight{transform:translateX(100%)}.jPopup--slideInFromLeft{transform:translateX(-100%)}.jPopup-closeBtn{position:absolute;right:1rem;top:1rem;width:5rem;height:5rem;outline:0;border:0;background-color:transparent;cursor:pointer}.jPopup-closeBtn:after,.jPopup-closeBtn:before{content:'';position:absolute;left:50%;top:50%;height:2.6rem;width:.3rem;background-color:#adadad}.jPopup-closeBtn:before{transform:translate(-50%,-50%) rotate(45deg)}.jPopup-closeBtn:after{transform:translate(-50%,-50%) rotate(-45deg)}.jPopup-content{top:50%;left:1.5rem;right:1.5rem;position:absolute;transform:translateY(-50%)}.jPopup--isOpen .jPopup,.jPopup--isOpen body{overflow:hidden}.jPopup--isOpen .jPopup{pointer-events:all}.jPopup--isOpen .jPopup--fade{-webkit-animation:fade 350ms ease-in-out forwards;animation:fade 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromTop{-webkit-animation:slideInFromTop 350ms ease-in-out forwards;animation:slideInFromTop 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromBottom{-webkit-animation:slideInFromBottom 350ms ease-in-out forwards;animation:slideInFromBottom 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromLeft{-webkit-animation:slideInFromLeft 350ms ease-in-out forwards;animation:slideInFromLeft 350ms ease-in-out forwards}.jPopup--isOpen .jPopup--slideInFromRight{-webkit-animation:slideInFromRight 350ms ease-in-out forwards;animation:slideInFromRight 350ms ease-in-out forwards}@-webkit-keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes fade{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes slideInFromTop{0%{opacity:0;transform:translateY(-100%)}100%{transform:translateY(0);opacity:1}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-100%)}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}100%{transform:translateY(0);opacity:1}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes slideInFromRight{0%{opacity:0;transform:translateX(100%)}100%{transform:translateX(0);opacity:1}}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(100%)}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-100%)}100%{transform:translateX(0);opacity:1}}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-100%)}100%{transform:translateX(0);opacity:1}} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | jPopup - Simple and easy-to-use lightweight JavaScript popup plugin

jPopup

Simple lightweight JavaScript popup plugin

-------------------------------------------------------------------------------- /dist/js/index.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (root === undefined && window !== undefined) root = window; 3 | if (typeof define === 'function' && define.amd) { 4 | // AMD. Register as an anonymous module unless amdModuleId is set 5 | define([], function () { 6 | return (root['jPopup'] = factory()); 7 | }); 8 | } else if (typeof module === 'object' && module.exports) { 9 | // Node. Does not work with strict CommonJS, but 10 | // only CommonJS-like environments that support module.exports, 11 | // like Node. 12 | module.exports = factory(); 13 | } else { 14 | root['jPopup'] = factory(); 15 | } 16 | }(this, function () { 17 | 18 | "use strict"; 19 | 20 | { 21 | /** 22 | * @param {Object} 23 | */ 24 | var jPopup = function jPopup() { 25 | var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 26 | this.options = Object.assign({ 27 | transition: 'fade' 28 | }, params); 29 | 30 | this._init(); 31 | }; 32 | 33 | var $html; 34 | jPopup.prototype = { 35 | _init: function _init() { 36 | this._render(this.options.content)._setupEvents(); 37 | }, 38 | _render: function _render() { 39 | $html = document.querySelector('html'); 40 | document.body.insertAdjacentHTML('beforeend', "
").concat(this.options.content, "
")); 41 | this.$el = $html.querySelector('.jPopup'); 42 | this.$closeBtn = $html.querySelector('.jPopup-closeBtn'); 43 | return this; 44 | }, 45 | _setupEvents: function _setupEvents() { 46 | var _this = this; 47 | 48 | this.$closeBtn.addEventListener('click', function () { 49 | return _this.close(); 50 | }); 51 | window.addEventListener('keydown', function (e) { 52 | return _this._onEscPress(e); 53 | }); 54 | }, 55 | 56 | /** 57 | * @param {Object} 58 | */ 59 | _onEscPress: function _onEscPress(event) { 60 | if (event.keyCode == 27) { 61 | this.close(); 62 | } 63 | }, 64 | close: function close() { 65 | $html.classList.remove('jPopup--isOpen'); 66 | 67 | if (this.options.onClose && typeof this.options.onClose == 'function') { 68 | this.options.onClose(this.$el); 69 | } 70 | }, 71 | open: function open() { 72 | if (this.options.onOpen && typeof this.options.onOpen == 'function') { 73 | this.options.onOpen(this.$el); 74 | } 75 | 76 | $html.classList.add('jPopup--isOpen'); 77 | }, 78 | 79 | /** 80 | * @param {String} 81 | */ 82 | setContent: function setContent(content) { 83 | this.options.content = content; 84 | this.$el.querySelector('.jPopup-content').innerHTML = this.options.content; 85 | }, 86 | 87 | /** 88 | * @return {String} 89 | */ 90 | getContent: function getContent() { 91 | return this.options.content; 92 | }, 93 | destroy: function destroy() { 94 | window.removeEventListener('keydown', this._onEscPress); 95 | this.$el.parentNode.removeChild(this.$el); 96 | } 97 | }; 98 | } 99 | 100 | return jPopup; 101 | 102 | })); 103 | -------------------------------------------------------------------------------- /dist/js/index.min.js: -------------------------------------------------------------------------------- 1 | !function(t,n){void 0===t&&void 0!==window&&(t=window),"function"==typeof define&&define.amd?define([],function(){return t.jPopup=n()}):"object"==typeof module&&module.exports?module.exports=n():t.jPopup=n()}(this,function(){"use strict";function t(){this.options=Object.assign({transition:"fade"},0
').concat(this.options.content,"
")),this.$el=n.querySelector(".jPopup"),this.$closeBtn=n.querySelector(".jPopup-closeBtn"),this},_setupEvents:function(){var n=this;this.$closeBtn.addEventListener("click",function(){return n.close()}),window.addEventListener("keydown",function(t){return n._onEscPress(t)})},_onEscPress:function(t){27==t.keyCode&&this.close()},close:function(){n.classList.remove("jPopup--isOpen"),this.options.onClose&&"function"==typeof this.options.onClose&&this.options.onClose(this.$el)},open:function(){this.options.onOpen&&"function"==typeof this.options.onOpen&&this.options.onOpen(this.$el),n.classList.add("jPopup--isOpen")},setContent:function(t){this.options.content=t,this.$el.querySelector(".jPopup-content").innerHTML=this.options.content},getContent:function(){return this.options.content},destroy:function(){window.removeEventListener("keydown",this._onEscPress),this.$el.parentNode.removeChild(this.$el)}},t}); -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | process.env.CHROME_BIN = require('puppeteer').executablePath(); 2 | 3 | module.exports = function (config) { 4 | 5 | 'use strict'; 6 | 7 | config.set({ 8 | port: 9876, 9 | autoWatch: false, 10 | singleRun: true, 11 | browsers: ['ChromeHeadless'], 12 | frameworks: ['mocha', 'chai', 'sinon'], 13 | reporters: ['mocha', 'coverage'], 14 | files: [ 15 | 'https://code.jquery.com/jquery-2.2.4.min.js', 16 | ], 17 | preprocessors: { 18 | '**/src/js/*.js': 'coverage', 19 | 'src/js/*.js': ['babel'], 20 | 'test/*.js': ['babel'] 21 | }, 22 | babelPreprocessor: { 23 | options: { 24 | presets: ['@babel/preset-env'], 25 | sourceMap: 'inline' 26 | } 27 | }, 28 | coverageReporter: { 29 | type : 'html', 30 | dir : 'coverage/', 31 | subdir: 'report', 32 | reporters: [ 33 | { type: 'html' }, 34 | { type: 'text-summary' } 35 | ], 36 | includeAllSources: true, 37 | watermarks: { 38 | statements: [50, 90], 39 | functions: [50, 90], 40 | branches: [50, 90], 41 | lines: [50, 90] 42 | } 43 | } 44 | }); 45 | }; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jpopup", 3 | "title": "jPopup.js", 4 | "description": "Simple lightweight (<2kB) javascript popup modal plugin", 5 | "version": "1.3.0", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Robert Velickovski", 9 | "email": "roby@rvdizajn.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/robiveli/jpopup.git" 14 | }, 15 | "main": "dist/js/index.js", 16 | "style": "dist/css/index.css", 17 | "keywords": [ 18 | "popup", 19 | "modal", 20 | "modal-plugin", 21 | "vanilla", 22 | "simple", 23 | "lightweight", 24 | "plugin", 25 | "javascript", 26 | "dependency-free" 27 | ], 28 | "devDependencies": { 29 | "@babel/core": "^7.14.6", 30 | "@babel/polyfill": "^7.8.7", 31 | "@babel/preset-env": "^7.14.7", 32 | "@lodder/grunt-postcss": "^3.0.1", 33 | "autoprefixer": "^10.3.1", 34 | "chai": "^4.3.4", 35 | "concurrently": "^6.2.0", 36 | "eslint": "^7.31.0", 37 | "grunt": "^1.4.1", 38 | "grunt-babel": "^8.0.0", 39 | "grunt-browser-sync": "^2.2.0", 40 | "grunt-contrib-cssmin": "^4.0.0", 41 | "grunt-contrib-htmlmin": "^3.1.0", 42 | "grunt-contrib-uglify": "^5.0.1", 43 | "grunt-contrib-watch": "^1.1.0", 44 | "grunt-eslint": "^23.0.0", 45 | "grunt-karma": "^4.0.2", 46 | "grunt-sass": "^3.1.0", 47 | "grunt-stylelint": "^0.16.0", 48 | "grunt-umd": "^3.0.0", 49 | "karma": "^6.3.4", 50 | "karma-babel-preprocessor": "^8.0.1", 51 | "karma-chai": "^0.1.0", 52 | "karma-chrome-launcher": "^3.1.0", 53 | "karma-coverage": "^2.0.3", 54 | "karma-mocha": "^2.0.1", 55 | "karma-mocha-reporter": "^2.2.5", 56 | "karma-sinon": "^1.0.5", 57 | "load-grunt-tasks": "^5.1.0", 58 | "mocha": "^9.0.2", 59 | "node-sass": "^7.0.0", 60 | "postcss": "^8.3.5", 61 | "puppeteer": "^10.1.0", 62 | "sinon": "^11.1.1", 63 | "stylelint": "^13.13.1", 64 | "stylelint-config-recommended": "^5.0.0", 65 | "stylelint-config-recommended-scss": "^4.3.0", 66 | "stylelint-scss": "^3.19.0" 67 | }, 68 | "scripts": { 69 | "preinstall": "npm install -g np npm-check-updates", 70 | "dev": "ncu && grunt build && concurrently \"grunt watch\" \"grunt browserSync\"", 71 | "build": "grunt build && ncu && npm run browserslist", 72 | "test": "karma start", 73 | "test-dev": "grunt karma:unit:start watch", 74 | "dependency-check": "ncu", 75 | "dependency-update": "ncu -u && rm -rf node_modules/ && npm install --save-dev && npm audit fix", 76 | "browserslist": "npx browserslist > .browserslist", 77 | "publish": "npm run test && np --no-yarn" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jPopup - Simple and easy-to-use lightweight JavaScript popup plugin 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 162 | 163 | 164 | 165 |
166 | 167 |
168 |

jPopup

169 |
170 | 171 |

Simple lightweight JavaScript popup plugin

172 | 173 | 174 | 181 | 182 |
183 | 184 |
185 | 187 | 188 | 189 | 192 | 193 | 194 | 197 | 198 |
199 | 200 | 201 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | { 2 | 3 | let $html; 4 | 5 | /** 6 | * @param {Object} 7 | */ 8 | function jPopup(params = {}) { 9 | this.options = Object.assign({ 10 | transition: 'fade' 11 | }, params); 12 | 13 | this._init(); 14 | } 15 | 16 | jPopup.prototype = { 17 | 18 | _init() { 19 | this._render(this.options.content) 20 | ._setupEvents(); 21 | }, 22 | 23 | _render() { 24 | $html = document.querySelector('html'); 25 | 26 | document.body.insertAdjacentHTML('beforeend', 27 | `
${this.options.content}
` 28 | ); 29 | 30 | this.$el = $html.querySelector('.jPopup'); 31 | this.$closeBtn = $html.querySelector('.jPopup-closeBtn'); 32 | 33 | return this; 34 | }, 35 | 36 | _setupEvents() { 37 | this.$closeBtn.addEventListener('click', () => this.close()); 38 | window.addEventListener('keydown', (e) => this._onEscPress(e)); 39 | }, 40 | 41 | /** 42 | * @param {Object} 43 | */ 44 | _onEscPress(event) { 45 | 46 | if (event.keyCode == 27) { 47 | this.close(); 48 | } 49 | }, 50 | 51 | close() { 52 | $html.classList.remove('jPopup--isOpen'); 53 | 54 | if (this.options.onClose && typeof this.options.onClose == 'function') { 55 | this.options.onClose(this.$el); 56 | } 57 | }, 58 | 59 | open() { 60 | 61 | if (this.options.onOpen && typeof this.options.onOpen == 'function') { 62 | this.options.onOpen(this.$el); 63 | } 64 | 65 | $html.classList.add('jPopup--isOpen'); 66 | }, 67 | 68 | /** 69 | * @param {String} 70 | */ 71 | setContent(content) { 72 | this.options.content = content; 73 | 74 | this.$el.querySelector('.jPopup-content').innerHTML = this.options.content; 75 | }, 76 | 77 | /** 78 | * @return {String} 79 | */ 80 | getContent() { 81 | return this.options.content; 82 | }, 83 | 84 | destroy() { 85 | window.removeEventListener('keydown', this._onEscPress); 86 | this.$el.parentNode.removeChild(this.$el); 87 | } 88 | }; 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | .jPopup { 2 | $baseBreakpoint: 680px; // breakpoint 3 | $bgColor: #fff; // popup background color 4 | $closeBtnColor: #adadad; // close button color 5 | $zIndex: 9999; // popup z-index value 6 | 7 | $root: &; 8 | 9 | position: fixed; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | left: 0; 14 | z-index: $zIndex; 15 | max-width: 100%; 16 | padding: 6rem; 17 | background: $bgColor; 18 | opacity: 0; 19 | 20 | &--fade { 21 | pointer-events: none; 22 | } 23 | 24 | &--slideInFromTop { 25 | transform: translateY(-100%); 26 | } 27 | 28 | &--slideInFromBottom { 29 | transform: translateY(100%); 30 | } 31 | 32 | &--slideInFromRight { 33 | transform: translateX(100%); 34 | } 35 | 36 | &--slideInFromLeft { 37 | transform: translateX(-100%); 38 | } 39 | 40 | &-closeBtn { 41 | position: absolute; 42 | right: 1rem; 43 | top: 1rem; 44 | width: 5rem; 45 | height: 5rem; 46 | outline: 0; 47 | border: 0; 48 | background-color: transparent; 49 | cursor: pointer; 50 | 51 | &:before, 52 | &:after { 53 | content: ''; 54 | position: absolute; 55 | left: 50%; 56 | top: 50%; 57 | height: 2.6rem; 58 | width: 0.3rem; 59 | background-color: $closeBtnColor; 60 | } 61 | 62 | &:before { 63 | transform: translate(-50%, -50%) rotate(45deg); 64 | } 65 | 66 | &:after { 67 | transform: translate(-50%, -50%) rotate(-45deg); 68 | } 69 | } 70 | 71 | &-content { 72 | top: 50%; 73 | left: 1.5rem; 74 | right: 1.5rem; 75 | position: absolute; 76 | transform: translateY(-50%); 77 | } 78 | 79 | &--isOpen { 80 | 81 | #{$root}, body { 82 | overflow: hidden; 83 | } 84 | 85 | #{$root} { 86 | pointer-events: all; 87 | } 88 | 89 | #{$root}--fade { 90 | animation: fade 350ms ease-in-out forwards; 91 | } 92 | 93 | #{$root}--slideInFromTop { 94 | animation: slideInFromTop 350ms ease-in-out forwards; 95 | } 96 | 97 | #{$root}--slideInFromBottom { 98 | animation: slideInFromBottom 350ms ease-in-out forwards; 99 | } 100 | 101 | #{$root}--slideInFromLeft { 102 | animation: slideInFromLeft 350ms ease-in-out forwards; 103 | } 104 | 105 | #{$root}--slideInFromRight { 106 | animation: slideInFromRight 350ms ease-in-out forwards; 107 | } 108 | } 109 | } 110 | 111 | // Animations 112 | @keyframes fade { 113 | 0% { 114 | opacity: 0; 115 | } 116 | 100% { 117 | opacity: 1; 118 | } 119 | } 120 | 121 | @keyframes slideInFromTop { 122 | 123 | 0% { 124 | opacity: 0; 125 | transform: translateY(-100%); 126 | } 127 | 128 | 100% { 129 | transform: translateY(0); 130 | opacity: 1; 131 | } 132 | } 133 | 134 | @keyframes slideInFromBottom { 135 | 136 | 0% { 137 | opacity: 0; 138 | transform: translateY(100%); 139 | } 140 | 141 | 100% { 142 | transform: translateY(0); 143 | opacity: 1; 144 | } 145 | } 146 | 147 | @keyframes slideInFromRight { 148 | 149 | 0% { 150 | opacity: 0; 151 | transform: translateX(100%); 152 | } 153 | 154 | 100% { 155 | transform: translateX(0); 156 | opacity: 1; 157 | } 158 | } 159 | 160 | @keyframes slideInFromLeft { 161 | 162 | 0% { 163 | opacity: 0; 164 | transform: translateX(-100%); 165 | } 166 | 167 | 100% { 168 | transform: translateX(0); 169 | opacity: 1; 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | describe('jPopup', () => { 2 | 3 | const openClass = 'jPopup--isOpen'; 4 | 5 | var dummyPopup, 6 | dummyContent; 7 | 8 | before(() => { 9 | 10 | dummyContent = '

Title

'; 11 | dummyPopup = new jPopup({ 12 | content: dummyContent 13 | }); 14 | }); 15 | 16 | describe('open()', () => { 17 | 18 | it('should open new popup with passed content', () => { 19 | dummyPopup.open(); 20 | 21 | expect(document.querySelector('html').classList.contains(openClass)).equal(true); 22 | expect(document.querySelectorAll('.jPopup').length).equal(1); 23 | expect(document.querySelector('.jPopup-content').innerHTML).equal(dummyContent); 24 | }); 25 | }); 26 | 27 | describe('close()', () => { 28 | 29 | it('should remove popup element from DOM', () => { 30 | dummyPopup.close(); 31 | 32 | expect(document.querySelector('html').classList.contains(openClass)).equal(false); 33 | }); 34 | }); 35 | }); 36 | --------------------------------------------------------------------------------