mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-01-09 14:27:55 -05:00
Updated preset-deliminator
This commit is contained in:
@@ -107,7 +107,7 @@ To implement lax you need to create at least one _driver_, to provide values for
|
||||
The easiest way to get started is to use presets via html classes. For example:
|
||||
|
||||
```html
|
||||
<div class="lax lax_preset_fadeIn-50-100 lax_preset_spin"></div>
|
||||
<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>
|
||||
```
|
||||
|
||||
Multiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https://alexfox.dev/lax.js/preset-explorer) to explore effects and see a simple example [here](https://alexfox.dev/lax.js/html-inline).
|
||||
|
||||
@@ -37,5 +37,5 @@
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="square lax lax_preset_spin-400-360 lax_preset_flipX"></div>
|
||||
<div class="square lax lax_preset_spin:400:360 lax_preset_flipX"></div>
|
||||
</body>
|
||||
2
docs/lib/lax.min.js
vendored
2
docs/lib/lax.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -153,7 +153,7 @@
|
||||
|
||||
enabledPresets.forEach((presetName) => {
|
||||
const control = controlData[presetName]
|
||||
const controlStr = control ? "-" + control.map(c => c.value).join("-") : ''
|
||||
const controlStr = control ? ":" + control.map(c => c.value).join(":") : ''
|
||||
const settingString = `${presetName}${controlStr}`
|
||||
presets.push(settingString)
|
||||
})
|
||||
|
||||
31
lib/lax.js
31
lib/lax.js
@@ -1,5 +1,9 @@
|
||||
"use strict";
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
@@ -12,10 +16,6 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
(function () {
|
||||
var inOutMap = function inOutMap() {
|
||||
var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
|
||||
@@ -314,6 +314,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
||||
});
|
||||
flattenedStyles.transform = "translate3d(".concat(translate3dValues.translateX, "px, ").concat(translate3dValues.translateY, "px, ").concat(translate3dValues.translateZ, "px) ").concat(flattenedStyles.transform);
|
||||
return flattenedStyles;
|
||||
} // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
|
||||
|
||||
|
||||
function getScrollPosition() {
|
||||
var supportPageOffset = window.pageXOffset !== undefined;
|
||||
var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
|
||||
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
|
||||
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
|
||||
return [y, x];
|
||||
}
|
||||
|
||||
function parseValue(val, _ref, index) {
|
||||
@@ -330,8 +339,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
||||
var pageWidth = document.body.scrollWidth;
|
||||
var screenWidth = window.innerWidth;
|
||||
var screenHeight = window.innerHeight;
|
||||
var scrollTop = window.scrollY;
|
||||
var scrollLeft = window.scrollX;
|
||||
|
||||
var _getScrollPosition = getScrollPosition(),
|
||||
_getScrollPosition2 = _slicedToArray(_getScrollPosition, 2),
|
||||
scrollTop = _getScrollPosition2[0],
|
||||
scrollLeft = _getScrollPosition2[1];
|
||||
|
||||
var left = x + scrollLeft;
|
||||
var right = left + width;
|
||||
var top = y + scrollTop;
|
||||
@@ -366,7 +379,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
||||
var value = _this.lastValue;
|
||||
|
||||
if (frame % _this.frameStep === 0) {
|
||||
value = _this.getValueFn();
|
||||
value = _this.getValueFn(frame);
|
||||
}
|
||||
|
||||
if (_this.inertiaEnabled) {
|
||||
@@ -386,7 +399,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
||||
Object.keys(options).forEach(function (key) {
|
||||
_this[key] = options[key];
|
||||
});
|
||||
this.lastValue = this.getValueFn();
|
||||
this.lastValue = this.getValueFn(0);
|
||||
};
|
||||
|
||||
var LaxElement = function LaxElement(selector, laxInstance, domElement, transformsData) {
|
||||
@@ -478,7 +491,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
||||
var _styleBindings$preset = styleBindings.presets,
|
||||
presets = _styleBindings$preset === void 0 ? [] : _styleBindings$preset;
|
||||
presets.forEach(function (presetString) {
|
||||
var _presetString$split = presetString.split("_"),
|
||||
var _presetString$split = presetString.split(":"),
|
||||
_presetString$split2 = _slicedToArray(_presetString$split, 3),
|
||||
presetName = _presetString$split2[0],
|
||||
y = _presetString$split2[1],
|
||||
|
||||
2
lib/lax.min.js
vendored
2
lib/lax.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lax.js",
|
||||
"version": "2.0.2",
|
||||
"version": "2.0.3",
|
||||
"scripts": {
|
||||
"build": "babel src -d lib && uglifyjs lib/lax.js -o lib/lax.min.js -c -m && gzip -c lib/lax.min.js > lib/lax.min.js.gz && cp lib/lax.min.js docs/lib/lax.min.js"
|
||||
},
|
||||
|
||||
@@ -440,7 +440,7 @@
|
||||
|
||||
presets.forEach((presetString) => {
|
||||
|
||||
const [presetName, y, str] = presetString.split("_")
|
||||
const [presetName, y, str] = presetString.split(":")
|
||||
|
||||
const presetFn = window.lax.presets[presetName]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user