Updated preset-deliminator

This commit is contained in:
Alex Fox
2020-12-28 18:19:23 +00:00
parent 6b5fce714a
commit 42dd4d8e50
9 changed files with 29 additions and 16 deletions

View File

@@ -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).

View File

@@ -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

File diff suppressed because one or more lines are too long

View File

@@ -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)
})

View File

@@ -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

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@@ -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"
},

View File

@@ -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]