Skip to content

Commit 778a498

Browse files
lazabogdanlazabogdan
committed
first commit
0 parents  commit 778a498

9 files changed

Lines changed: 343 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
demo/vendor

‎README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Breakpoints.js
2+
3+
Define breakpoints for one or multiple targets on your page, and Breakpoints.js will fire custom events on the targets when their size enters and/or exits a specific breakpoint.
4+
5+
[Breakpoints.js Demo](http://breakpoints.themekit.io)
6+
7+
## Usage
8+
### Initialize
9+
```js
10+
var breakpoints = new Breakpoints('body', {
11+
breakpoints: [320, 480, 768, 1024],
12+
distinct: true,
13+
interval: 250
14+
});
15+
```
16+
17+
### Destroy
18+
```js
19+
// You can also get the Breakpoints.js instance from data
20+
var breakpoints = $('body').data('breakpoints');
21+
22+
// Destroy
23+
breakpoints.destroy()
24+
```
25+
26+
### Events
27+
28+
```js
29+
$('body').on('enterBreakpoint320', function() {
30+
...
31+
});
32+
33+
$('body').on('exitBreakpoint320', function() {
34+
...
35+
});
36+
37+
```

‎demo/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Breakpoints.js</title>
6+
<script type="text/javascript" src="vendor/jquery.min.js"></script>
7+
<script type="text/javascript" src="vendor/breakpoints.js"></script>
8+
<script>
9+
$(function() {
10+
11+
function enter (breakpoint) {
12+
$('#log').append('<p>Entering ' + breakpoint + ' breakpoint</p>');
13+
$('#status .breakpoint' + breakpoint).addClass('active');
14+
}
15+
16+
function exit (breakpoint) {
17+
$('#log').append('<p>Exiting ' + breakpoint + ' breakpoint</p>');
18+
$('#status .breakpoint' + breakpoint).removeClass('active');
19+
}
20+
21+
// breakpoint values
22+
var values = [320, 480, 768, 1024];
23+
24+
// target selector
25+
var target = 'body';
26+
27+
// interval in miliseconds
28+
var interval = 250;
29+
30+
values.map(function(breakpoint) {
31+
$(target).on('exitBreakpoint' + breakpoint, function() {
32+
exit(breakpoint)
33+
});
34+
$(target).on('enterBreakpoint' + breakpoint, function() {
35+
enter(breakpoint)
36+
});
37+
});
38+
39+
var breakpoints = new Breakpoints(target, {
40+
breakpoints: values,
41+
distinct: true,
42+
interval: interval
43+
});
44+
45+
$('#distinct').on('click', function() {
46+
breakpoints.destroy();
47+
breakpoints = new Breakpoints(target, {
48+
breakpoints: values,
49+
distinct: $(this).is(':checked'),
50+
interval: interval
51+
});
52+
});
53+
54+
});
55+
</script>
56+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
57+
</head>
58+
<body>
59+
<div class="container-fluid">
60+
<h1>Breakpoints.js</h1>
61+
<p class="lead">Resize your browser window and watch custom events fire in the box below.</p>
62+
<p><input name="distinct" type="checkbox" id="distinct" checked /> <label for="distinct">Use only the largest available breakpoint</label></p>
63+
64+
<h3>Active Breakpoints</h3>
65+
<div id="status" class="list-group">
66+
<div class="list-group-item breakpoint1024">1024</div>
67+
<div class="list-group-item breakpoint768">768</div>
68+
<div class="list-group-item breakpoint480">480</div>
69+
<div class="list-group-item breakpoint320">320</div>
70+
</div>
71+
<div id="log">
72+
<h3>Event Log:</h3>
73+
</div>
74+
</div>
75+
</body>
76+
</html>

‎dist/breakpoints.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
(function webpackUniversalModuleDefinition(root, factory) {
2+
if(typeof exports === 'object' && typeof module === 'object')
3+
module.exports = factory();
4+
else if(typeof define === 'function' && define.amd)
5+
define([], factory);
6+
else if(typeof exports === 'object')
7+
exports["Breakpoints"] = factory();
8+
else
9+
root["Breakpoints"] = factory();
10+
})(this, function() {
11+
return /******/ (function(modules) { // webpackBootstrap
12+
/******/ // The module cache
13+
/******/ var installedModules = {};
14+
15+
/******/ // The require function
16+
/******/ function __webpack_require__(moduleId) {
17+
18+
/******/ // Check if module is in cache
19+
/******/ if(installedModules[moduleId])
20+
/******/ return installedModules[moduleId].exports;
21+
22+
/******/ // Create a new module (and put it into the cache)
23+
/******/ var module = installedModules[moduleId] = {
24+
/******/ exports: {},
25+
/******/ id: moduleId,
26+
/******/ loaded: false
27+
/******/ };
28+
29+
/******/ // Execute the module function
30+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31+
32+
/******/ // Flag the module as loaded
33+
/******/ module.loaded = true;
34+
35+
/******/ // Return the exports of the module
36+
/******/ return module.exports;
37+
/******/ }
38+
39+
40+
/******/ // expose the modules object (__webpack_modules__)
41+
/******/ __webpack_require__.m = modules;
42+
43+
/******/ // expose the module cache
44+
/******/ __webpack_require__.c = installedModules;
45+
46+
/******/ // __webpack_public_path__
47+
/******/ __webpack_require__.p = "";
48+
49+
/******/ // Load entry module and return exports
50+
/******/ return __webpack_require__(0);
51+
/******/ })
52+
/************************************************************************/
53+
/******/ ([
54+
/* 0 */
55+
/***/ function(module, exports, __webpack_require__) {
56+
57+
eval("'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _classCallCheck2 = __webpack_require__(1);\n\nvar _classCallCheck3 = _interopRequireDefault(_classCallCheck2);\n\nvar _createClass2 = __webpack_require__(2);\n\nvar _createClass3 = _interopRequireDefault(_createClass2);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar Breakpoints = function () {\n\tfunction Breakpoints(target) {\n\t\tvar _this = this;\n\n\t\tvar options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];\n\t\t(0, _classCallCheck3.default)(this, Breakpoints);\n\n\t\tthis.target = target instanceof jQuery === true ? target : $(target);\n\t\tthis.lastSize = 0;\n\t\tthis.options = $.extend({\n\t\t\tdistinct: true,\n\t\t\tbreakpoints: [320, 480, 768, 1024],\n\t\t\tinterval: 250\n\t\t}, options);\n\n\t\tthis.interval = setInterval(function () {\n\n\t\t\tvar w = _this.target.width();\n\t\t\tvar done = false;\n\n\t\t\t_this.options.breakpoints.sort(function (a, b) {\n\t\t\t\treturn b - a;\n\t\t\t}).forEach(function (breakpoint, index) {\n\n\t\t\t\t// fire onEnter when a browser expands into a new breakpoint\n\t\t\t\t// if in distinct mode, remove all other breakpoints first.\n\t\t\t\tif (!done && w >= breakpoint && _this.lastSize < breakpoint) {\n\t\t\t\t\tif (_this.options.distinct) {\n\t\t\t\t\t\tfor (var x in _this.options.breakpoints.sort(function (a, b) {\n\t\t\t\t\t\t\treturn b - a;\n\t\t\t\t\t\t})) {\n\t\t\t\t\t\t\tif (_this.target.hasClass('breakpoint-' + _this.options.breakpoints[x])) {\n\t\t\t\t\t\t\t\t_this.target.removeClass('breakpoint-' + _this.options.breakpoints[x]);\n\t\t\t\t\t\t\t\t_this.target.trigger('exitBreakpoint' + _this.options.breakpoints[x]);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdone = true;\n\t\t\t\t\t}\n\t\t\t\t\t_this.target.addClass('breakpoint-' + breakpoint);\n\t\t\t\t\t_this.target.trigger('enterBreakpoint' + breakpoint);\n\t\t\t\t}\n\n\t\t\t\t// fire onExit when browser contracts out of a larger breakpoint\n\t\t\t\tif (w < breakpoint && _this.lastSize >= breakpoint) {\n\t\t\t\t\t_this.target.removeClass('breakpoint-' + breakpoint);\n\t\t\t\t\t_this.target.trigger('exitBreakpoint' + breakpoint);\n\t\t\t\t}\n\n\t\t\t\t// if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint\n\t\t\t\tif (_this.options.distinct && // only one breakpoint at a time\n\t\t\t\tw >= breakpoint && // and we are in this one\n\t\t\t\tw < _this.options.breakpoints[index - 1] && // and smaller than the bigger one\n\t\t\t\t_this.lastSize > w && // and we contracted\n\t\t\t\t_this.lastSize > 0 && // and this is not the first time\n\t\t\t\t!_this.target.hasClass('breakpoint-' + breakpoint) // and we aren't already in this breakpoint\n\t\t\t\t) {\n\t\t\t\t\t\t_this.target.addClass('breakpoint-' + breakpoint);\n\t\t\t\t\t\t_this.target.trigger('enterBreakpoint' + breakpoint);\n\t\t\t\t\t}\n\t\t\t});\n\n\t\t\t// set up for next call\n\t\t\tif (_this.lastSize !== w) {\n\t\t\t\t_this.lastSize = w;\n\t\t\t}\n\t\t}, this.options.interval);\n\n\t\tthis.target.data('breakpoints', this);\n\t}\n\n\t(0, _createClass3.default)(Breakpoints, [{\n\t\tkey: 'destroy',\n\t\tvalue: function destroy() {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.lastSize = 0;\n\t\t}\n\t}]);\n\treturn Breakpoints;\n}();\n\n// EXPORT ES6\n\n\nexports.default = Breakpoints;\n\n// EXPORT ES5\n\nmodule.exports = exports.default;\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/index.js\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/index.js?");
58+
59+
/***/ },
60+
/* 1 */
61+
/***/ function(module, exports) {
62+
63+
eval("\"use strict\";\n\nexports.__esModule = true;\n\nexports.default = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/classCallCheck.js\n ** module id = 1\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./~/babel-runtime/helpers/classCallCheck.js?");
64+
65+
/***/ },
66+
/* 2 */
67+
/***/ function(module, exports, __webpack_require__) {
68+
69+
eval("\"use strict\";\n\nexports.__esModule = true;\n\nvar _defineProperty = __webpack_require__(3);\n\nvar _defineProperty2 = _interopRequireDefault(_defineProperty);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n (0, _defineProperty2.default)(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/createClass.js\n ** module id = 2\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./~/babel-runtime/helpers/createClass.js?");
70+
71+
/***/ },
72+
/* 3 */
73+
/***/ function(module, exports, __webpack_require__) {
74+
75+
eval("module.exports = { \"default\": __webpack_require__(4), __esModule: true };\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/define-property.js\n ** module id = 3\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./~/babel-runtime/core-js/object/define-property.js?");
76+
77+
/***/ },
78+
/* 4 */
79+
/***/ function(module, exports, __webpack_require__) {
80+
81+
eval("var $ = __webpack_require__(5);\nmodule.exports = function defineProperty(it, key, desc){\n return $.setDesc(it, key, desc);\n};\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/~/core-js/library/fn/object/define-property.js\n ** module id = 4\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./~/babel-runtime/~/core-js/library/fn/object/define-property.js?");
82+
83+
/***/ },
84+
/* 5 */
85+
/***/ function(module, exports) {
86+
87+
eval("var $Object = Object;\nmodule.exports = {\n create: $Object.create,\n getProto: $Object.getPrototypeOf,\n isEnum: {}.propertyIsEnumerable,\n getDesc: $Object.getOwnPropertyDescriptor,\n setDesc: $Object.defineProperty,\n setDescs: $Object.defineProperties,\n getKeys: $Object.keys,\n getNames: $Object.getOwnPropertyNames,\n getSymbols: $Object.getOwnPropertySymbols,\n each: [].forEach\n};\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/~/core-js/library/modules/$.js\n ** module id = 5\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./~/babel-runtime/~/core-js/library/modules/$.js?");
88+
89+
/***/ }
90+
/******/ ])
91+
});
92+
;

‎package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "breakpoints",
3+
"version": "1.0.0",
4+
"description": "Fire custom events when the browser enters and/or exits breakpoints",
5+
"main": "dist/breakpoints.js",
6+
"author": "MOSAICPRO <contact@mosaicpro.biz> (http://themeforest.net/user/mosaicpro/portfolio)",
7+
"license": "ISC",
8+
"scripts": {
9+
"test": "echo \"Error: no test specified\" && exit 1",
10+
"dev": "webpack --config src/build/webpack.config.dev.js --progress --watch",
11+
"build": "NODE_ENV=production webpack --config src/build/webpack.config.production.js --progress",
12+
"build-dev": "webpack --config src/build/webpack.config.dev.js --progress",
13+
"copy-vendor": "copyfiles -f node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js dist/breakpoints.js demo/vendor",
14+
"deploy": "surge --project ./demo --domain breakpoints.themekit.io"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.4.0",
18+
"babel-loader": "^6.2.1",
19+
"babel-plugin-transform-runtime": "^6.4.3",
20+
"babel-preset-es2015": "^6.3.13",
21+
"babel-runtime": "^5.8.34",
22+
"copyfiles": "^0.2.1",
23+
"eslint": "^1.10.3",
24+
"eslint-loader": "^1.2.0",
25+
"surge": "^0.17.7",
26+
"webpack": "^1.12.11",
27+
"webpack-config-api": "^0.2.1"
28+
},
29+
"keywords": [
30+
"breakpoints",
31+
"jquery"
32+
],
33+
"dependencies": {
34+
"jquery": "^2.2.3"
35+
}
36+
}

‎src/build/webpack.config.dev.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var config = require('./webpack.config')
2+
module.exports = config.dev({ devtool: 'eval' }).getConfig()

‎src/build/webpack.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var path = require('path')
2+
var WebpackConfig = require('webpack-config-api')
3+
var config = new WebpackConfig()
4+
.addFileExtension('js')
5+
.register('babel', require('webpack-config-api/extensions/babel')).use('babel')
6+
.register('eslint', require('webpack-config-api/extensions/eslint')).use('eslint')
7+
.withStandaloneEntry('breakpoints')
8+
.withLibrary('Breakpoints')
9+
.withAlias({
10+
'breakpoints': path.resolve(__dirname, '..')
11+
})
12+
.webpack({
13+
externals: [{
14+
'jquery': {
15+
root: '$',
16+
commonjs2: 'jquery',
17+
commonjs: 'jquery',
18+
amd: 'jquery'
19+
}
20+
}]
21+
})
22+
23+
module.exports = config

‎src/build/webpack.config.production.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var config = require('./webpack.config')
2+
module.exports = config.production().getConfig()

‎src/index.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
class Breakpoints {
2+
constructor (target, options = {}) {
3+
this.target = target instanceof jQuery === true ? target : $(target)
4+
this.lastSize = 0
5+
this.options = $.extend({
6+
distinct: true,
7+
breakpoints: [320, 480, 768, 1024],
8+
interval: 250
9+
}, options)
10+
11+
this.interval = setInterval(() => {
12+
13+
let w = this.target.width()
14+
let done = false
15+
16+
this.options.breakpoints.sort((a, b) => (b - a)).forEach((breakpoint, index) => {
17+
18+
// fire onEnter when a browser expands into a new breakpoint
19+
// if in distinct mode, remove all other breakpoints first.
20+
if (!done && w >= breakpoint && this.lastSize < breakpoint) {
21+
if (this.options.distinct) {
22+
for (var x in this.options.breakpoints.sort((a, b) => (b - a))) {
23+
if (this.target.hasClass('breakpoint-' + this.options.breakpoints[x])) {
24+
this.target.removeClass('breakpoint-' + this.options.breakpoints[x])
25+
this.target.trigger('exitBreakpoint' + this.options.breakpoints[x])
26+
}
27+
}
28+
done = true
29+
}
30+
this.target.addClass('breakpoint-' + breakpoint)
31+
this.target.trigger('enterBreakpoint' + breakpoint)
32+
}
33+
34+
// fire onExit when browser contracts out of a larger breakpoint
35+
if (w < breakpoint && this.lastSize >= breakpoint) {
36+
this.target.removeClass('breakpoint-' + breakpoint)
37+
this.target.trigger('exitBreakpoint' + breakpoint)
38+
}
39+
40+
// if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint
41+
if (
42+
this.options.distinct && // only one breakpoint at a time
43+
w >= breakpoint && // and we are in this one
44+
w < this.options.breakpoints[index - 1] && // and smaller than the bigger one
45+
this.lastSize > w && // and we contracted
46+
this.lastSize > 0 && // and this is not the first time
47+
!this.target.hasClass('breakpoint-' + breakpoint) // and we aren't already in this breakpoint
48+
) {
49+
this.target.addClass('breakpoint-' + breakpoint)
50+
this.target.trigger('enterBreakpoint' + breakpoint)
51+
}
52+
})
53+
54+
// set up for next call
55+
if (this.lastSize !== w) {
56+
this.lastSize = w
57+
}
58+
}, this.options.interval)
59+
60+
this.target.data('breakpoints', this)
61+
}
62+
63+
destroy () {
64+
clearInterval(this.interval)
65+
this.lastSize = 0
66+
}
67+
}
68+
69+
// EXPORT ES6
70+
export default Breakpoints
71+
72+
// EXPORT ES5
73+
module.exports = exports.default

0 commit comments

Comments
 (0)