@studio-kit/utils-browser 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @studio-kit/utils-browser
+
+## 1.0.2
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @studio-kit/utils-common@2.0.1
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @studio-kit/utils-common@2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-kit/utils-browser",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "type": "module",
   "main": "./src/index.js",
@@ -11,8 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@studio-kit/utils-common": "^1.0.0",
+    "@studio-kit/utils-common": "^2.0.1",
     "axios": "^1.7.9",
+    "chroma-js": "^3.1.2",
     "nanoid": "^5.1.2"
   },
   "exports": {

package/src/DOM.js

@@ -60,4 +60,9 @@ export default class DOM {
             }
         }
     }
+    static addStyleSheetCode({ code }) {
+        const styleDom = document.createElement('style')
+        styleDom.innerHTML = code
+        document.head.appendChild(styleDom)
+    }
 }

package/src/Effect.js

@@ -0,0 +1,8 @@
+import cta from "./cta";
+export default class Effect {
+    static morph({ sourceEl, targetEl, duration }) {
+        return cta(sourceEl, targetEl, {
+            duration, // seconds
+        });
+    }
+}

package/src/Num.js

@@ -0,0 +1,2 @@
+import Num from '@studio-kit/utils-common/Num.js'
+export default Num

package/src/Style.js

@@ -0,0 +1,21 @@
+import chroma from 'chroma-js';
+export default class Style {
+    static getCssVar({ varKey }) {
+        const root = document.documentElement;
+        const computedStyle = window.getComputedStyle(root);
+        // 获取CSS变量的值
+        const varValue = computedStyle.getPropertyValue(varKey);
+        return varValue
+    }
+    static getThemeImageFilter({ themeColor, imageColor = '#000000' }) {
+        const hue2 = this.createColor(themeColor).hsl()[0]
+        let hue1 = this.createColor(imageColor).hsl()[0]
+        if (!hue1) hue1 = 0
+        const hueRotation = (hue2 - hue1 + 360) % 360
+        return `hue-rotate(${hueRotation}deg)`
+    }
+    static createColor(cssColorString) {
+        cssColorString = cssColorString.replace(/\s/g, '')
+        return chroma(cssColorString)
+    }
+}

package/src/UserInput.js

@@ -0,0 +1,91 @@
+const defaultWindow = window
+const useEventListener = (target, type, listener, options) => {
+    target = target || defaultWindow
+    console.log('target', target)
+    target.addEventListener(type, listener, options)
+    return () => target.removeEventListener(type, listener, options)
+}
+
+function createKeyPredicate(keyFilter) {
+    if (typeof keyFilter === "function") return keyFilter
+    else if (typeof keyFilter === "string")
+        return event => event.key === keyFilter
+    else if (Array.isArray(keyFilter))
+        return event => keyFilter.includes(event.key)
+
+    return () => true
+}
+export default class UserInput {
+    static onKeyStroke(...args) {
+        let key
+        let handler
+        let options = {}
+
+        if (args.length === 3) {
+            key = args[0]
+            handler = args[1]
+            options = args[2]
+        } else if (args.length === 2) {
+            if (typeof args[1] === "object") {
+                key = true
+                handler = args[0]
+                options = args[1]
+            } else {
+                key = args[0]
+                handler = args[1]
+            }
+        } else {
+            key = true
+            handler = args[0]
+        }
+
+        const {
+            target = defaultWindow,
+            eventName = "keydown",
+            passive = false,
+            dedupe = false
+        } = options
+        const predicate = createKeyPredicate(key)
+        const listener = e => {
+            if (e.repeat && dedupe) return
+            if (predicate(e)) handler(e)
+        }
+        return useEventListener(target, eventName, listener, passive)
+    }
+}
+
+/**
+ * Listen to the keydown event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export function onKeyDown(key, handler, options = {}) {
+    return onKeyStroke(key, handler, { ...options, eventName: "keydown" })
+}
+
+/**
+ * Listen to the keypress event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export function onKeyPressed(key, handler, options = {}) {
+    return onKeyStroke(key, handler, { ...options, eventName: "keypress" })
+}
+
+/**
+ * Listen to the keyup event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export function onKeyUp(key, handler, options = {}) {
+    return onKeyStroke(key, handler, { ...options, eventName: "keyup" })
+}

package/src/cta.js

@@ -0,0 +1,189 @@
+var isSupportedBrowser = (function () {
+	// Firefox doesn't have `ontransitionend` on window. Hence we check for `transition`
+	// key in style object to check for unprefixed transition support.
+	return window.ontransitionend !== undefined || document.documentElement.style.transition !== undefined;
+})();
+
+// Credits to angular-animate for the nice animation duration detection code.
+// Detect proper transitionend/animationend event names.
+var TRANSITION_PROP, ANIMATION_PROP;
+var DURATION_KEY = 'Duration';
+var PROPERTY_KEY = 'Property';
+var DELAY_KEY = 'Delay';
+var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount';
+var ONE_SECOND = 1000;
+
+if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
+	TRANSITION_PROP = 'WebkitTransition';
+} else {
+	TRANSITION_PROP = 'transition';
+}
+
+if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) {
+	ANIMATION_PROP = 'WebkitAnimation';
+} else {
+	ANIMATION_PROP = 'animation';
+}
+
+function parseMaxTime(str) {
+	var maxValue = 0, value;
+	var values = typeof (str) === 'string' ?
+		str.split(/\s*,\s*/) :
+		[];
+	for (var i = values.length; i--;) {
+		value = values[i];
+		maxValue = Math.max(parseFloat(value) || 0, maxValue);
+	}
+	return maxValue;
+}
+
+function getAnimationTime(element) {
+	var transitionDuration = 0;
+	var transitionDelay = 0;
+	var animationDuration = 0;
+	var animationDelay = 0;
+	var elementStyles = window.getComputedStyle(element) || {};
+
+	var transitionDurationStyle = elementStyles[TRANSITION_PROP + DURATION_KEY];
+	transitionDuration = Math.max(parseMaxTime(transitionDurationStyle), transitionDuration);
+
+	var transitionDelayStyle = elementStyles[TRANSITION_PROP + DELAY_KEY];
+	transitionDelay = Math.max(parseMaxTime(transitionDelayStyle), transitionDelay);
+
+	var animationDelayStyle = elementStyles[ANIMATION_PROP + DELAY_KEY];
+	animationDelay = Math.max(parseMaxTime(elementStyles[ANIMATION_PROP + DELAY_KEY]), animationDelay);
+
+	var aDuration = parseMaxTime(elementStyles[ANIMATION_PROP + DURATION_KEY]);
+
+	if (aDuration > 0) {
+		aDuration *= parseInt(elementStyles[ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY], 10) || 1;
+	}
+	animationDuration = Math.max(aDuration, animationDuration);
+
+	return animationDuration || transitionDuration;
+}
+
+function getBackgroundStyle(element) {
+	var computedStyle = window.getComputedStyle(element);
+	// Need to fallback to `backgroundColor` as `background` return nothing in Firefox.
+	return computedStyle.background || computedStyle.backgroundColor;
+}
+
+var defaults = {
+	duration: 0.3, // Duration for the animation to happen (seconds)
+
+	// Duration in which the target will become visible, (seconds)
+	targetShowDuration: 0,
+
+	// Extra time just to ensure continuity between dummy element and target (seconds)
+	extraTransitionDuration: 1,
+
+	// Whether to position the dummy animating element relative to window (fixed positioned) or not.
+	relativeToWindow: false
+};
+
+function cta(trigger, target, options, callback) {
+	// Support optional arguments
+	if (typeof options === 'function') {
+		callback = options;
+		options = {};
+	}
+
+	if (!isSupportedBrowser) {
+		if (callback) {
+			callback(target);
+		}
+		return;
+	}
+
+	var targetBackground,
+		triggerBackground,
+		targetBounds,
+		triggerBounds,
+		scaleXRatio,
+		scaleYRatio,
+		diffX,
+		diffY,
+		dummy;
+
+	options = options || {};
+	options.duration = options.duration || defaults.duration;
+	options.targetShowDuration = options.targetShowDuration || getAnimationTime(target) || defaults.targetShowDuration;
+	options.relativeToWindow = options.relativeToWindow || defaults.relativeToWindow;
+	options.extraTransitionDuration = options.extraTransitionDuration || defaults.extraTransitionDuration;
+
+	// Set some properties to make the target visible so we can get its dimensions.
+	// Set `display` to `block` only when its already hidden. Otherwise changing an already visible
+	// element's `display` property can lead to its position getting changed.
+	if (window.getComputedStyle(target).display === 'none') {
+		target.style.setProperty('display', 'block', 'important');
+	}
+
+	// Calculate some property differences to animate.
+	targetBackground = getBackgroundStyle(target);
+	triggerBackground = getBackgroundStyle(trigger);
+	targetBounds = target.getBoundingClientRect();
+	triggerBounds = trigger.getBoundingClientRect();
+	scaleXRatio = triggerBounds.width / targetBounds.width;
+	scaleYRatio = triggerBounds.height / targetBounds.height;
+	diffX = triggerBounds.left - targetBounds.left;
+	diffY = triggerBounds.top - targetBounds.top;
+
+	// Remove the props we put earlier.
+	target.style.removeProperty('display');
+
+	// Create a dummy element for transition.
+	dummy = document.createElement('div');
+	dummy.style.setProperty('pointer-events', 'none', 'important');
+	dummy.style.setProperty('position', (options.relativeToWindow ? 'fixed' : 'absolute'), 'important');
+	dummy.style.setProperty('-webkit-transform-origin', 'top left', 'important');
+	dummy.style.setProperty('transform-origin', 'top left', 'important');
+	dummy.style.setProperty('transition', options.duration + 's ease');
+
+	// Set dummy element's dimensions to final state.
+	dummy.style.setProperty('width', targetBounds.width + 'px', 'important');
+	dummy.style.setProperty('height', targetBounds.height + 'px', 'important');
+	dummy.style.setProperty('left', (targetBounds.left + (options.relativeToWindow ? 0 : window.pageXOffset)) + 'px', 'important');
+	dummy.style.setProperty('top', (targetBounds.top + (options.relativeToWindow ? 0 : window.pageYOffset)) + 'px', 'important');
+	dummy.style.setProperty('background', triggerBackground, 'important');
+	dummy.style.setProperty('z-index', 1, 'important');
+
+	// Apply a reverse transform to bring back dummy element to the dimensions of the trigger/starting element.
+	// Credits: This technique is inspired by Paul Lewis: http://aerotwist.com/blog/flip-your-animations/ He is amazing!
+	dummy.style.setProperty('-webkit-transform', 'translate(' + diffX + 'px, ' + diffY + 'px) scale(' + scaleXRatio + ', ' + scaleYRatio + ')', 'important');
+	dummy.style.setProperty('transform', 'translate(' + diffX + 'px, ' + diffY + 'px) scale(' + scaleXRatio + ', ' + scaleYRatio + ')', 'important');
+	document.body.appendChild(dummy);
+
+	// Trigger a layout to let styles apply.
+	var justReadIt = dummy.offsetTop;
+
+	// Change properties to let things animate.
+	dummy.style.setProperty('background', targetBackground, 'important');
+
+	// Remove the reverse transforms to get the dummy transition back to its normal/final state.
+	dummy.style.removeProperty('-webkit-transform');
+	dummy.style.removeProperty('transform');
+
+	dummy.addEventListener('transitionend', function transitionEndCallback() {
+		dummy.removeEventListener('transitionend', transitionEndCallback);
+
+		if (callback) {
+			callback(target);
+		}
+		// Animate the dummy element to zero opacity while the target is getting rendered.
+		dummy.style.transitionDuration = (options.targetShowDuration + options.extraTransitionDuration) + 's';
+		dummy.style.opacity = 0;
+		setTimeout(function () {
+			dummy.parentNode.removeChild(dummy);
+		}, (options.targetShowDuration + options.extraTransitionDuration) * 1000);
+	});
+
+	// Return a reverse animation function for the called animation.
+	return function (options, callback) {
+		cta(target, trigger, options, callback);
+	};
+}
+
+cta.isSupported = isSupportedBrowser;
+
+export default cta;