diff --git a/.gitignore b/.gitignore index 249476e..7a767f8 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ bower_components # Build build + +# OSX +.DS_store diff --git a/README.md b/README.md index 2e4306a..54640b5 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # Check browser Check browser version and show pop-up if version is less then recommended + + bower i + npm i diff --git a/bower.json b/bower.json index 8ee4db5..bf6ba18 100644 --- a/bower.json +++ b/bower.json @@ -3,13 +3,13 @@ "description": "script to check browser version", "main": "src/check-browser.js", "authors": [ - "IamEmpty" + "pure-js" ], "license": "MIT", "keywords": [ "js" ], - "homepage": "https://github.com/iamempty/check-browser", + "homepage": "https://github.com/pure-js/check-browser", "ignore": [ "**/.*", "node_modules", diff --git a/demo/demo.html b/demo/demo.html deleted file mode 100644 index f019ede..0000000 --- a/demo/demo.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - Check browser plugin demonstration - - - - - - - - - - - - - - -
-
-
- -
-
-

Warning!

-

You use oldest version of a browser. It may be a reason of incorrect work and view of a website.

-

For comfortable work, please download latest version of a browser convenient for you from official website.

-

Please read ourdocumentation.

-
- -
- - - - -
- - -
- -
-
- - -
- - - \ No newline at end of file diff --git a/demo/index.pug b/demo/index.pug index 8ca0435..37ea8d5 100644 --- a/demo/index.pug +++ b/demo/index.pug @@ -9,16 +9,6 @@ html(lang='en') link(rel='stylesheet', href='old-browser.css') //- SyntaxHighlighter style link(rel='stylesheet', href='prism.css') - //- Add jquery - script(src='https://code.jquery.com/jquery-1.11.0.min.js') - //- Latest compiled and minified Bootstrap JavaScript - script(src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js') - //- Add plugin Check browser - script(src='check-browser.js') - //- Syntax highlighter Prism js - script(src='prism.js') - //- Own main javascript file - script(src='main.js') body(data-spy='scroll', data-target='#bs-example-navbar-collapse-1', data-offset='170') header.header nav.navbar.navbar-default.navbar-fixed-top(role='navigation') @@ -47,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 @@ -121,7 +103,7 @@ html(lang='en') }); pre code.language-javascript. - $('body').checkBrowser({ + checkBrowser({ browsers: { Firefox: 27, Chrome: 30, @@ -129,3 +111,16 @@ html(lang='en') IE: 10 } }); + //- Add plugin Check browser + script(src='check-browser.js') + //- Syntax highlighter Prism js + script(src='prism.js') + //- Own main javascript file + script. + checkBrowser({ + once: true, + duration: 1000, + browsers: { + Chrome: 57 + } + }); diff --git a/demo/js/main.js b/demo/js/main.js deleted file mode 100644 index 600e78b..0000000 --- a/demo/js/main.js +++ /dev/null @@ -1,9 +0,0 @@ -$(document).ready(function () { - $('body').checkBrowser({ - once: 'Yes', - duration: 1000, - browsers: { - Chrome: 52 - } - }); -}); diff --git a/gulp/config.js b/gulp/config.js new file mode 100644 index 0000000..7b85261 --- /dev/null +++ b/gulp/config.js @@ -0,0 +1,19 @@ +module.exports = { + paths: { + pug: 'demo/index.pug', + pugWatch: [ + 'demo/index.pug', + ], + styl: [ + 'stylesheets/old-browser.styl' + ], + stylWatch: [ + 'src/blocks/**/*.styl' + ], + copy: ['bower_components/prism/prism.js', 'bower_components/prism/themes/prism.css', 'src/check-browser.js'], + build: 'build/' + }, + names: { + css: 'app.min.css' + } +}; diff --git a/gulp/tasks/build.js b/gulp/tasks/build.js new file mode 100644 index 0000000..03409ce --- /dev/null +++ b/gulp/tasks/build.js @@ -0,0 +1,28 @@ +const gulp = require('gulp'), + config = require('../config'), + plugins = require('gulp-load-plugins')(); + +const build = gulp.parallel(html, css, copy); + +module.exports = build; + +function html() { + return gulp.src(config.paths.pug) + .pipe(plugins.pug({ + pretty: true + })) + .pipe(gulp.dest(config.paths.build)); +} + +function css() { + return gulp.src(config.paths.styl) + .pipe(plugins.stylus({ + 'include css': true + })) + .pipe(gulp.dest(config.paths.build)); +} + +function copy() { + return gulp.src(config.paths.copy) + .pipe(gulp.dest(config.paths.build)); +} diff --git a/gulp/tasks/index.js b/gulp/tasks/index.js new file mode 100644 index 0000000..641ea60 --- /dev/null +++ b/gulp/tasks/index.js @@ -0,0 +1,5 @@ +module.exports = require('require-dir')('.', { + camelcase: true, + recurse: true + } +); diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..d91a3ff --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,25 @@ +const gulp = require('gulp'), + del = require('del'), + config = require('./gulp/config'), + tasks = require('./gulp/tasks'), + plugins = require('gulp-load-plugins')(); + +gulp.task('build', tasks.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) +const dev = gulp.parallel(tasks.build, watch); +gulp.task('default', dev); diff --git a/package.json b/package.json index d7f7617..e7596f1 100644 --- a/package.json +++ b/package.json @@ -2,33 +2,32 @@ "name": "check-browser", "version": "0.0.1", "description": "script to check browser version", - "main": "README.md", + "main": "src/check-browser.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "pug": "pug demo --out build", - "stylus": "stylus stylesheets/old-browser.styl -o build", - "copy1": "cp bower_components/prism/prism.js build", - "copy2": "cp bower_components/prism/themes/prism.css build", - "copy3": "cp src/check-browser.js build", - "copy4": "cp demo/js/main.js build", - "build": "npm run pug && npm run stylus && npm run copy1 && npm run copy2 && npm run copy3 && npm run copy4" + "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "git+https://github.com/IamEmpty/check-browser.git" + "url": "git+https://github.com/pure-js/check-browser.git" }, "keywords": [ "js" ], - "author": "IamEmpty", + "author": "pure-js", "license": "MIT", "bugs": { - "url": "https://github.com/IamEmpty/check-browser/issues" + "url": "https://github.com/pure-js/check-browser/issues" }, - "homepage": "https://github.com/IamEmpty/check-browser#readme", + "homepage": "https://github.com/pure-js/check-browser#readme", "devDependencies": { + "del": "^2.2.2", + "gulp-load-plugins": "^1.4.0", "jshint": "^2.8.0", - "pug": "^2.0.0-beta2", - "stylus": "^0.54.5" + "require-dir": "^0.3.1" + }, + "dependencies": { + "gulp": "github:gulpjs/gulp#4.0", + "gulp-pug": "^3.1.0", + "gulp-stylus": "^2.6.0" } } diff --git a/src/check-browser.js b/src/check-browser.js index a5b962a..7e5f004 100644 --- a/src/check-browser.js +++ b/src/check-browser.js @@ -1,85 +1,84 @@ -// Old browser check -(function($) { - 'use strict'; - - $.fn.checkBrowser = function(options) { - - var defaults = { - once: 'No', - warningBoxName: '.old-browser-warning', - closeBtnName: '#close-old-browser-warning', - duration: 1200, - easing: 'swing', - - browsers: { - Firefox: 27, - Chrome: 30, - Opera: 15, - IE: 10 +const defaults = { + once: true, + warningEl: '.old-browser-warning', + closeBtn: '#close-old-browser-warning', + duration: 1200, + easing: 'swing', + browsers: { + Firefox: 27, + Chrome: 60, + Opera: 15, + IE: 11 + } +}; + +function checkBrowser({ + once = defaults.once, + warningEl = document.querySelector(defaults.warningEl), + closeBtn = document.querySelector(defaults.closeBtn), + duration = defaults.duration, + easing = defaults.easing, + browsers = defaults.browsers +}) { + + warningEl.classList.add('hide'); + + // Old browser warning close button + closeBtn.addEventListener('click', hidePopup); + + function hidePopup() { + // Check if parameter is setup we will save user press close button + if(once) { + sessionStorage.setItem('browserWarningClose', true); + } + + warningEl.classList.add('hide'); + } + + // Detecting browser version + let browserDetect = (function () { + let ua = navigator.userAgent, tem, + M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; + + if (/trident/i.test(M[1])) { + tem = /\brv[ :]+(\d+)/g.exec(ua) || []; + return 'IE ' + (tem[1] || ''); + } + + if (M[1] === 'Chrome') { + tem = ua.match(/\bOPR\/(\d+)/); + if (tem !== null) return 'Opera ' + tem[1]; + } + + M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']; + + if ((tem = ua.match(/version\/(\d+)/i)) !== null) M.splice(1, 1, tem[1]); + + return M; + })(); + + let currentBrowser = { + name: browserDetect[0], + version: Number(browserDetect[1]) + } + + function findBrowser(browsers) { + let close = sessionStorage.getItem('browserWarningClose'); + + // Check if user press on close button + if(close === 'true') { + return false; + } + + // 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; } - }; - - - return this.each(function() { - - var settings = $.extend( {}, defaults, options), - $once = settings.once, - $warningBoxName = $(settings.warningBoxName, this), - $closeBtnName = settings.closeBtnName, - $duration = settings.duration, - $easing = settings.easing; - - - $warningBoxName.hide(); - - - // Old browser warning close button - $warningBoxName.on('click', $closeBtnName, function(e) { - e.preventDefault(); - - // Check if parameter is setup we will save user press close button - if($once == 'Yes') { - sessionStorage.setItem('DoNotShowMeItAgain', 'Yes'); - } - - $warningBoxName.fadeToggle($duration, $easing); - }); - - - // Detecting version of using browser - var browserDetect = (function () { - var ua = navigator.userAgent, tem, - M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; - if (/trident/i.test(M[1])) { - tem = /\brv[ :]+(\d+)/g.exec(ua) || []; - return 'IE ' + (tem[1] || ''); - } - if (M[1] === 'Chrome') { - tem = ua.match(/\bOPR\/(\d+)/); - if (tem !== null) return 'Opera ' + tem[1]; - } - M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']; - if ((tem = ua.match(/version\/(\d+)/i)) !== null) M.splice(1, 1, tem[1]); - return M; - })(); - - - var checkBrowser = function(takesBrowsers) { - var storage = sessionStorage.getItem('DoNotShowMeItAgain'); - - // Check if user press close button - if(storage == 'Yes') { - return false; - } - - // If version of browser more old you will see window - for(var name in takesBrowsers) { - if(browserDetect.indexOf(name) != -1 && takesBrowsers[name] > browserDetect[1]) { - $warningBoxName.show(); - break; - } - } - }(settings.browsers); - }); - }; -}(jQuery)); + } + } + + findBrowser(browsers); +}