diff --git a/demo/index.pug b/demo/index.pug index b09190f..37ea8d5 100644 --- a/demo/index.pug +++ b/demo/index.pug @@ -37,71 +37,63 @@ html(lang='en') h1#home The check browser version plugin p Latest version is 1.0.0 p You can use default view of this plugin look like so (See under) or create himself warning block - .row - .col-md-12 - .old-browser-warning - .old-browser-warning__left-side - h3.text-primary.h3 Warning! - p.old-browser-warning__text You use the oldest version of a browser. It may be a reason of incorrect work and view of a website. - p.old-browser-warning__text For comfortable work, please download latest version of a browser convenient for you from official website. - p.old-browser-warning__text - | Please read our - a.old-browser-warning__link(href='#') documentation - | . - .old-browser-warning__right-side - a.old-browser-warning__img-link.browser-sprite.browser-chrome(href='https://www.google.com/intl/ru/chrome/browser/', target='_blank', title='Chrome') - a.old-browser-warning__img-link.browser-sprite.browser-firefox(href='http://www.mozilla.org/ru/firefox/new/', target='_blank', title='Firefox') - a.old-browser-warning__img-link.browser-sprite.browser-ie(href='http://windows.microsoft.com/ru-ru/internet-explorer/download-ie', target='_blank', title='Internet Explorer') - a.old-browser-warning__img-link.browser-sprite.browser-opera(href='http://www.opera.com/ru', target='_blank', title='Opera') - i#close-old-browser-warning.icon-remove(title='Close') + .old-browser-warning + .old-browser-warning__left-side + h3.text-primary.h3 Warning! + p.old-browser-warning__text You use the oldest version of a browser. It may be a reason of incorrect work and view of a website. + p.old-browser-warning__text For comfortable work, please download latest version of a browser convenient for you from official website. + p.old-browser-warning__text + | Please read our + a.old-browser-warning__link(href='#') documentation + | . + .old-browser-warning__right-side + a.old-browser-warning__img-link.browser-sprite.browser-chrome(href='https://www.google.com/intl/ru/chrome/browser/', target='_blank', title='Chrome') + a.old-browser-warning__img-link.browser-sprite.browser-firefox(href='http://www.mozilla.org/ru/firefox/new/', target='_blank', title='Firefox') + a.old-browser-warning__img-link.browser-sprite.browser-ie(href='http://windows.microsoft.com/ru-ru/internet-explorer/download-ie', target='_blank', title='Internet Explorer') + a.old-browser-warning__img-link.browser-sprite.browser-opera(href='http://www.opera.com/ru', target='_blank', title='Opera') + i#close-old-browser-warning.icon-remove(title='Close') .row .col-md-12 p For begin you need check - you use jquery or not use? If you not add jquery plugin - you need do it p And inicialize plugin pre code.language-javascript. - $(document).ready(function () { - $('body').checkBrowser(); - }); - + checkBrowser(); p All supported params: pre code.language-javascript. - $(document).ready(function () { - $('body').checkBrowser({ - once: 'No', - warningBoxName: '.old-browser-warning', - closeBtnName: '#close-old-browser-warning', - duration: 1200, - easing: 'swing', - - browsers: { - Firefox: 27, - Chrome: 30, - Opera: 15, - IE: 10 - } - }); + checkBrowser({ + once: false, + warningEl: '.old-browser-warning', + closeBtnName: '#close-old-browser-warning', + duration: 1200, + easing: 'swing', + browsers: { + Firefox: 27, + Chrome: 30, + Opera: 15, + IE: 10 + } }); p In this option you can change amount of show pre code.language-javascript. - $('body').checkBrowser({ - once: 'No' + checkBrowser({ + once: false }); pre code.language-javascript. - $('body').checkBrowser({ - warningBoxName: '.old-browser-warning' + checkBrowser({ + warningEl: '.old-browser-warning' }); pre code.language-javascript. - $('body').checkBrowser({ + checkBrowser({ closeBtnName: '#close-old-browser-warning' }); pre code.language-javascript. - $('body').checkBrowser({ + checkBrowser({ duration: 1200 }); pre @@ -111,7 +103,7 @@ html(lang='en') }); pre code.language-javascript. - $('body').checkBrowser({ + checkBrowser({ browsers: { Firefox: 27, Chrome: 30, diff --git a/gulpfile.js b/gulpfile.js index a7ca0ca..d91a3ff 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,19 +1,25 @@ const gulp = require('gulp'), del = require('del'), - // config = require('./gulp/config'), + config = require('./gulp/config'), tasks = require('./gulp/tasks'), plugins = require('gulp-load-plugins')(); gulp.task('build', tasks.build); -const clean = () => del(['build']); +const clean = () => del([config.paths.build]); exports.clean = clean; +function watch() { + gulp.watch(config.paths.stylusWatch, tasks.build); + gulp.watch(config.paths.pugWatch, tasks.build); +} + // gulp.task('deploy', () => // gulp.src(paths.dist + '**/*') // .pipe(plugins.ghPages()) // ); // The default task (called when you run `gulp` from cli) -gulp.task('default', tasks.build); +const dev = gulp.parallel(tasks.build, watch); +gulp.task('default', dev); diff --git a/src/check-browser.js b/src/check-browser.js index 2270477..7e5f004 100644 --- a/src/check-browser.js +++ b/src/check-browser.js @@ -1,38 +1,38 @@ const defaults = { once: true, - warningBox: '.old-browser-warning', + warningEl: '.old-browser-warning', closeBtn: '#close-old-browser-warning', duration: 1200, easing: 'swing', browsers: { Firefox: 27, - Chrome: 30, + Chrome: 60, Opera: 15, IE: 11 } }; -function checkBrowser( +function checkBrowser({ once = defaults.once, - warningBox = document.querySelector(defaults.warningBox), + warningEl = document.querySelector(defaults.warningEl), closeBtn = document.querySelector(defaults.closeBtn), duration = defaults.duration, easing = defaults.easing, - browsers = defaults.browsers) { - 'use strict'; + browsers = defaults.browsers +}) { - warningBox.classList.add('hide'); + warningEl.classList.add('hide'); // Old browser warning close button - closeBtn.onclick = hidePopUp(); + closeBtn.addEventListener('click', hidePopup); - function hidePopUp() { + function hidePopup() { // Check if parameter is setup we will save user press close button - if($once) { - sessionStorage.setItem('DoNotShowMeItAgain', 'true'); + if(once) { + sessionStorage.setItem('browserWarningClose', true); } - warningBox.classList.add('hide'); + warningEl.classList.add('hide'); } // Detecting browser version @@ -57,21 +57,28 @@ function checkBrowser( return M; })(); + let currentBrowser = { + name: browserDetect[0], + version: Number(browserDetect[1]) + } - var checkBrowser = function(takesBrowsers) { - let storage = sessionStorage.getItem('DoNotShowMeItAgain'); + function findBrowser(browsers) { + let close = sessionStorage.getItem('browserWarningClose'); - // Check if user press close button - if(storage === 'true') { + // Check if user press on close button + if(close === 'true') { return false; } - // If version of browser more old you will see window - for(let name in takesBrowsers) { - if(browserDetect.indexOf(name) !== -1 && takesBrowsers[name] > browserDetect[1]) { - warningBox.show(); + // If version of browser is older - you will see the window + for(let name in browsers) { + let version = browsers[name]; + if(name === currentBrowser.name && version > currentBrowser.version) { + warningEl.classList.remove('hide'); break; } } - }(browsers); -}; + } + + findBrowser(browsers); +}