diff --git a/package-lock.json b/package-lock.json index eaf4fcd..23aaa4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cheetah-os", - "version": "2.9.23", + "version": "2.10.02", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cheetah-os", - "version": "2.9.23", + "version": "2.10.02", "license": "MIT", "dependencies": { "@angular/animations": "^18.0.0", diff --git a/src/app/system-apps/startmenu/startmenu.component.css b/src/app/system-apps/startmenu/startmenu.component.css index ec8b841..e5e05f8 100644 --- a/src/app/system-apps/startmenu/startmenu.component.css +++ b/src/app/system-apps/startmenu/startmenu.component.css @@ -64,7 +64,7 @@ display:flex; width: 315px; height: 500px; - background-color: rgba(33,33, 33, 0.6); + background-color: rgba(51,51, 51, 1); backdrop-filter: blur(12px); } @@ -94,11 +94,14 @@ border: 2px solid transparent; } -.start-menu-list-li:hover{ - border: 2px solid white; -} .start-menu-list-btn{ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; + /* padding: 1rem 2rem; */ + background-color: rgba(51, 51, 51, 1); + color: #fff; + border: 0; + transition: all 200ms ease; display: flex; width: 100%; height: 32px; diff --git a/src/app/system-apps/startmenu/startmenu.component.html b/src/app/system-apps/startmenu/startmenu.component.html index b890fb0..0a6371c 100644 --- a/src/app/system-apps/startmenu/startmenu.component.html +++ b/src/app/system-apps/startmenu/startmenu.component.html @@ -69,7 +69,7 @@
  1. - +``` +#### JavaScript +```js +applyEffect('.btn', { + lightColor: 'rgba(255,255,255,0.1)', + gradientSize: 150, +}); +``` + +#### Enable Ripple click effect +````js +applyEffect('.btn', { + clickEffect: true, +}); +```` + +### Apply border and background effect +#### HTML mockup +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +#### JavaScript +```js +applyEffect('.effect-group-container', { + clickEffect: true, + lightColor: 'rgba(255,255,255,0.6)', + gradientSize: 80, + isContainer: true, + children: { + borderSelector: '.btn-border', + elementSelector: '.btn', + lightColor: 'rgba(255,255,255,0.3)', + gradientSize: 150 + } +}) +``` + +## Donate +If you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it. + +Thanks for your gratitude and finance help! + + +Buy me a beer? + + + + +## License +[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_large) diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/LICENSE.txt b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/LICENSE.txt new file mode 100644 index 0000000..65ff31c --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/LICENSE.txt @@ -0,0 +1,24 @@ +/*! + * MIT License + * + * Copyright (c) 2018 Phap Dieu Duong + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/fluentRevealEffect.d.ts b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/fluentRevealEffect.d.ts new file mode 100644 index 0000000..62c4d51 --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/fluentRevealEffect.d.ts @@ -0,0 +1,4 @@ +import { IUserEffectOptions } from './types'; +export declare const applyElementEffect: (element: HTMLElement, userOptions?: IUserEffectOptions) => void; +export declare const applyElementsEffect: (elements: NodeListOf, userOptions?: IUserEffectOptions) => void; +export declare const applyEffect: (selector: string, userOptions?: IUserEffectOptions) => void; diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/helpers/index.d.ts b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/helpers/index.d.ts new file mode 100644 index 0000000..b209091 --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/helpers/index.d.ts @@ -0,0 +1,9 @@ +import { IResource, IIsPressed, IEffectOptions } from '../types'; +export declare function enableBorderEffects(resource: IResource, childrenBorders: IResource[], options: IEffectOptions, isPressed: IIsPressed): void; +export declare function enableNormalBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void; +export declare function enableChildrenBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void; +export declare function enableNormalClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void; +export declare function enableChildrenClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed): void; +export declare function preProcessElement(element: HTMLElement): IResource; +export declare function preProcessElements(elements: NodeListOf): IResource[]; +export declare function preProcessSelector(selector: string): IResource[]; diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.d.ts b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.d.ts new file mode 100644 index 0000000..86b6ba1 --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.d.ts @@ -0,0 +1,2 @@ +export * from './fluentRevealEffect'; +export * from './types'; diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js new file mode 100644 index 0000000..5b59dec --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js @@ -0,0 +1,11 @@ +/*! + Fluent Reveal Effect v3.0.11 + ---------------------------------------- + Copyright (c) 2023 Duong Dieu Phap. + Homepage: https://github.com/d2phap/fluent-reveal-effect#readme + Released under the MIT License. + + License information can be found in LICENSE.txt. + */ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("fluent-reveal-effect",[],t):"object"==typeof exports?exports["fluent-reveal-effect"]=t():e["fluent-reveal-effect"]=t()}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e,t){const n=function(e){const t=e.getBoundingClientRect();return{top:t.top,left:t.left}}(e);return[t.pageX-n.left-window.scrollX,t.pageY-n.top-window.scrollY]}function o(e,t,n,o){return`radial-gradient(circle ${e}px at ${t}px ${n}px, ${o}, rgba(255,255,255,0))`}function r(e,t,n,r,i,l=null){const c=null===l?o(i,t,n,r):l;e.style.backgroundImage=c}function i(e,t,o,i){const[l,c]=n(e,i);r(e,l,c,t,o)}function l(e,t,i,l){const[c,f]=n(e,l),u=function(e,t,n,r){return`${o(e,t,n,r)}, radial-gradient(circle 70px at ${t}px ${n}px, rgba(255,255,255,0), ${r}, rgba(255,255,255,0), rgba(255,255,255,0))`}(i,c,f,t);r(e,c,f,t,i,u)}function c(e,t){t[0]=!1,e.el.style.backgroundImage=e.oriBg}function f(e,t,n,o,r){const l=e.el;!function(e,t,n,o){const r={left:t-o,right:t+o,top:n-o,bottom:n+o},i=e.getBoundingClientRect(),l={left:i.left,right:i.right,top:i.top,bottom:i.bottom};var c,f;return!((f=l).left>(c=r).right||f.rightc.bottom||f.bottom{o&&r[0]?l(f,t,n,e):i(f,t,n,e)})),f.addEventListener("mouseleave",(()=>{c(e,r)}))}function a(e,t,n,o){const r=e.el;r.addEventListener("mousedown",(e=>{o[0]=!0,l(r,t,n,e)})),r.addEventListener("mouseup",(e=>{o[0]=!1,i(r,t,n,e)}))}function d(e,t,n){u(e,t.lightColor,t.gradientSize,t.clickEffect,n)}function s(e,t,n){u(e,t.children?.lightColor||"",t.children?.gradientSize||100,t.clickEffect,n)}function g(e,t,n){a(e,t.lightColor,t.gradientSize,n)}function p(e,t,n){a(e,t.children?.lightColor||"",t.children?.gradientSize||100,n)}function b(e){return{oriBg:getComputedStyle(e).backgroundImage,el:e}}function m(e){const t=[],n=e.length;for(let o=0;o{for(let r=0;r{for(let e=0;e$,applyElementEffect:()=>x,applyElementsEffect:()=>j});const x=(e,t={})=>{const n=[!1],o=v(t),r=b(e);if(o.isContainer){E(r,o,n,s,p)}else{y(r,o,n,d,g)}},j=(e,t={})=>{const n=[!1],o=v(t),r=m(e);if(o.isContainer){C(r,o,n,s,p)}else{S(r,o,n,d,g)}},$=(e,t={})=>{const n=[!1],o=v(t),r=h(e);if(o.isContainer){C(r,o,n,s,p)}else{S(r,o,n,d,g)}};return t})())); +//# sourceMappingURL=main.js.map \ No newline at end of file diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js.map b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js.map new file mode 100644 index 0000000..4ac6b35 --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/main.js.map @@ -0,0 +1 @@ +{"version":3,"file":"main.js","mappings":"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","sources":["webpack://fluent-reveal-effect/webpack/universalModuleDefinition","webpack://fluent-reveal-effect/webpack/bootstrap","webpack://fluent-reveal-effect/webpack/runtime/define property getters","webpack://fluent-reveal-effect/webpack/runtime/hasOwnProperty shorthand","webpack://fluent-reveal-effect/webpack/runtime/make namespace object","webpack://fluent-reveal-effect/./src/helpers/index.ts","webpack://fluent-reveal-effect/./src/fluentRevealEffect.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"fluent-reveal-effect\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"fluent-reveal-effect\"] = factory();\n\telse\n\t\troot[\"fluent-reveal-effect\"] = factory();\n})(this, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { IResource, IIsPressed, IArea, IEffectOptions } from '../types';\n\n// ** Postion ******************************************************************\nfunction getOffset(element: HTMLElement) {\n const bounding = element.getBoundingClientRect();\n\n return ({\n top: bounding.top,\n left: bounding.left,\n });\n}\n\n// with Mouse\nfunction getXY(element: HTMLElement, e: MouseEvent) {\n const offset = getOffset(element);\n const x = e.pageX - offset.left - window.scrollX;\n const y = e.pageY - offset.top - window.scrollY;\n\n return [x, y];\n}\n\n\n// for Container\nfunction intersectRect(r1: IArea, r2: IArea) {\n return !(\n r2.left > r1.right ||\n r2.right < r1.left ||\n r2.top > r1.bottom ||\n r2.bottom < r1.top\n );\n}\nfunction isIntersected(element: HTMLElement, cursorX: number, cursorY: number, gradientSize: number) {\n const cursorArea: IArea = {\n left: cursorX - gradientSize,\n right: cursorX + gradientSize,\n top: cursorY - gradientSize,\n bottom: cursorY + gradientSize,\n };\n\n const bounding = element.getBoundingClientRect();\n const elArea: IArea = {\n left: bounding.left,\n right: bounding.right,\n top: bounding.top,\n bottom: bounding.bottom,\n };\n\n const result = intersectRect(cursorArea, elArea);\n return result;\n}\n\n// ** CSS Effect ***************************************************************\nfunction lightHoverEffect(gradientSize: number, x: number, y: number, lightColor: string) {\n return `radial-gradient(circle ${gradientSize}px at ${x}px ${y}px, ${lightColor}, rgba(255,255,255,0))`;\n}\n\nfunction lightClickEffect(gradientSize: number, x: number, y: number, lightColor: string) {\n return `${lightHoverEffect(gradientSize, x, y, lightColor)}, radial-gradient(circle ${70}px at ${x}px ${y}px, rgba(255,255,255,0), ${lightColor}, rgba(255,255,255,0), rgba(255,255,255,0))`;\n}\n\n// ** Basic Draw Effect ********************************************************\nfunction drawEffect(\n element: HTMLElement,\n x: number,\n y: number,\n lightColor: string,\n gradientSize: number,\n cssLightEffect: string | null = null) {\n const lightBg = cssLightEffect === null\n ? lightHoverEffect(gradientSize, x, y, lightColor)\n : cssLightEffect;\n\n element.style.backgroundImage = lightBg;\n}\n\n// with Mouse\nfunction drawHoverEffect(element: HTMLElement, lightColor: string, gradientSize: number, e: MouseEvent) {\n const [x, y] = getXY(element, e);\n drawEffect(element, x, y, lightColor, gradientSize);\n}\n\nfunction drawClickEffect(element: HTMLElement, lightColor: string, gradientSize: number, e: MouseEvent) {\n const [x, y] = getXY(element, e);\n\n const cssLightEffect = lightClickEffect(gradientSize, x, y, lightColor);\n drawEffect(element, x, y, lightColor, gradientSize, cssLightEffect);\n}\n\n// ** SideEffect Draw Effect ***************************************************\nfunction clearEffect(resource: IResource, isPressed: IIsPressed) {\n isPressed[0] = false;\n resource.el.style.backgroundImage = resource.oriBg;\n}\n\nfunction drawContainerHoverEffect(resource: IResource, lightColor: string, gradientSize: number,\n isPressed: IIsPressed, e: MouseEvent) {\n const element = resource.el;\n\n if (isIntersected(element, e.clientX, e.clientY, gradientSize)) {\n drawHoverEffect(element, lightColor, gradientSize, e);\n }\n else {\n clearEffect(resource, isPressed);\n }\n}\n\n// Wrapper\nfunction enableBackgroundEffects(resource: IResource, lightColor: string, gradientSize: number,\n clickEffect: boolean, isPressed: IIsPressed) {\n const element = resource.el;\n element.addEventListener('mousemove', (e) => {\n if (clickEffect && isPressed[0]) {\n drawClickEffect(element, lightColor, gradientSize, e);\n }\n else {\n drawHoverEffect(element, lightColor, gradientSize, e);\n }\n });\n\n element.addEventListener('mouseleave', () => {\n clearEffect(resource, isPressed);\n });\n}\n\nexport function enableBorderEffects(resource: IResource, childrenBorders: IResource[], options: IEffectOptions, isPressed: IIsPressed) {\n const element = resource.el;\n const childrenBorderL = childrenBorders.length;\n\n element.addEventListener('mousemove', (e) => {\n for (let i = 0; i < childrenBorderL; i++) {\n drawContainerHoverEffect(childrenBorders[i], options.lightColor, options.gradientSize, isPressed, e);\n }\n });\n\n element.addEventListener('mouseleave', () => {\n for (let i = 0; i < childrenBorderL; i++) {\n clearEffect(childrenBorders[i], isPressed);\n }\n });\n}\n\nfunction enableClickEffects(resource: IResource, lightColor: string, gradientSize: number,\n isPressed: IIsPressed) {\n const element = resource.el;\n element.addEventListener('mousedown', (e) => {\n isPressed[0] = true;\n drawClickEffect(element, lightColor, gradientSize, e);\n });\n\n element.addEventListener('mouseup', (e) => {\n isPressed[0] = false;\n drawHoverEffect(element, lightColor, gradientSize, e);\n });\n}\n\n// Interface\nexport function enableNormalBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed) {\n enableBackgroundEffects(resource, options.lightColor, options.gradientSize, options.clickEffect, isPressed);\n}\nexport function enableChildrenBackgroundEffetcs(resource: IResource, options: IEffectOptions, isPressed: IIsPressed) {\n enableBackgroundEffects(resource, options.children?.lightColor || '', options.children?.gradientSize || 100, options.clickEffect, isPressed);\n}\nexport function enableNormalClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed) {\n enableClickEffects(resource, options.lightColor, options.gradientSize, isPressed);\n}\nexport function enableChildrenClickEffects(resource: IResource, options: IEffectOptions, isPressed: IIsPressed) {\n enableClickEffects(resource, options.children?.lightColor || '', options.children?.gradientSize || 100, isPressed);\n}\n\n// ** Element Processing *******************************************************\nexport function preProcessElement(element: HTMLElement): IResource {\n return ({\n oriBg: getComputedStyle(element).backgroundImage,\n el: element,\n });\n}\n\nexport function preProcessElements(elements: NodeListOf) {\n const ressources: IResource[] = [];\n const elementsL = elements.length;\n for (let i = 0; i < elementsL; i++) {\n const element = elements[i];\n ressources.push(preProcessElement(element));\n }\n\n return ressources;\n}\n\nexport function preProcessSelector(selector: string) {\n return preProcessElements(document.querySelectorAll(selector));\n}\n","import {\n IResource,\n IIsPressed,\n IEffectOptions,\n IUserEffectOptions,\n IEnableEffectFunc,\n} from './types';\nimport {\n preProcessElement,\n preProcessElements,\n preProcessSelector,\n enableNormalBackgroundEffetcs,\n enableChildrenBackgroundEffetcs,\n enableNormalClickEffects,\n enableChildrenClickEffects,\n enableBorderEffects,\n} from './helpers';\n\n// ** Option *******************************************************************\nfunction applyEffectOption(userOptions: IUserEffectOptions): IEffectOptions {\n const defaultOptions: IEffectOptions = {\n lightColor: 'rgba(255,255,255,0.25)',\n gradientSize: 150,\n clickEffect: false,\n isContainer: false,\n children: {\n borderSelector: '.eff-reveal-border',\n elementSelector: '.eff-reveal',\n lightColor: 'rgba(255,255,255,0.25)',\n gradientSize: 150,\n },\n };\n\n return Object.assign(defaultOptions, userOptions);\n}\n\n// ** Children Effect **********************************************************\nfunction applyChildrenElementEffect(\n resource: IResource,\n options: IEffectOptions,\n isPressed: IIsPressed,\n enableBackgroundEffectsFunc: IEnableEffectFunc,\n enableClickEffectsFunc: IEnableEffectFunc,\n) {\n enableBackgroundEffectsFunc(resource, options, isPressed);\n\n if (options.clickEffect) {\n enableClickEffectsFunc(resource, options, isPressed);\n }\n}\n\nfunction applyChildrenEffect(\n resources: IResource[],\n options: IEffectOptions,\n isPressed: IIsPressed,\n enableBackgroundEffectsFunc: IEnableEffectFunc,\n enableClickEffectsFunc: IEnableEffectFunc,\n) {\n const resourceL = resources.length;\n\n for (let i = 0; i < resourceL; i++) {\n const resource = resources[i];\n applyChildrenElementEffect(resource, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n}\n\n// ** Container Effect *********************************************************\nfunction applyContainerElementEffect(\n resource: IResource,\n options: IEffectOptions,\n isPressed: IIsPressed,\n enableBackgroundEffectsFunc: IEnableEffectFunc,\n enableClickEffectsFunc: IEnableEffectFunc,\n) {\n // Container\n const childrenBorders = preProcessSelector(options.children?.borderSelector || '');\n enableBorderEffects(resource, childrenBorders, options, isPressed);\n\n // Children\n const childrens = preProcessSelector(options.children?.elementSelector || '');\n applyChildrenEffect(childrens, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n}\n\nfunction applyContainerEffect(\n resources: IResource[],\n options: IEffectOptions,\n isPressed: IIsPressed,\n enableBackgroundEffectsFunc: IEnableEffectFunc,\n enableClickEffectsFunc: IEnableEffectFunc,\n) {\n const resourceL = resources.length;\n\n for (let i = 0; i < resourceL; i++) {\n const resource = resources[i];\n applyContainerElementEffect(resource, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n}\n\n// ** Apply Effect *************************************************************\nexport const applyElementEffect = (element: HTMLElement, userOptions: IUserEffectOptions = {}) => {\n const isPressed: IIsPressed = [false];\n const options = applyEffectOption(userOptions);\n const resource = preProcessElement(element);\n\n if (!options.isContainer) {\n const enableBackgroundEffectsFunc = enableNormalBackgroundEffetcs;\n const enableClickEffectsFunc = enableNormalClickEffects;\n applyChildrenElementEffect(resource, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n else {\n const enableBackgroundEffectsFunc = enableChildrenBackgroundEffetcs;\n const enableClickEffectsFunc = enableChildrenClickEffects;\n applyContainerElementEffect(resource, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n};\n\nexport const applyElementsEffect = (elements: NodeListOf, userOptions: IUserEffectOptions = {}) => {\n const isPressed: IIsPressed = [false];\n const options = applyEffectOption(userOptions);\n const resources = preProcessElements(elements);\n\n if (!options.isContainer) {\n const enableBackgroundEffectsFunc = enableNormalBackgroundEffetcs;\n const enableClickEffectsFunc = enableNormalClickEffects;\n applyChildrenEffect(resources, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n else {\n const enableBackgroundEffectsFunc = enableChildrenBackgroundEffetcs;\n const enableClickEffectsFunc = enableChildrenClickEffects;\n applyContainerEffect(resources, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n};\n\nexport const applyEffect = (selector: string, userOptions: IUserEffectOptions = {}) => {\n const isPressed: IIsPressed = [false];\n const options = applyEffectOption(userOptions);\n const resoures = preProcessSelector(selector);\n\n if (!options.isContainer) {\n const enableBackgroundEffectsFunc = enableNormalBackgroundEffetcs;\n const enableClickEffectsFunc = enableNormalClickEffects;\n applyChildrenEffect(resoures, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n else {\n const enableBackgroundEffectsFunc = enableChildrenBackgroundEffetcs;\n const enableClickEffectsFunc = enableChildrenClickEffects;\n applyContainerEffect(resoures, options, isPressed, enableBackgroundEffectsFunc, enableClickEffectsFunc);\n }\n};\n"],"names":["root","factory","exports","module","define","amd","this","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","getXY","element","e","offset","bounding","getBoundingClientRect","top","left","getOffset","pageX","window","scrollX","pageY","scrollY","lightHoverEffect","gradientSize","x","y","lightColor","drawEffect","cssLightEffect","lightBg","style","backgroundImage","drawHoverEffect","drawClickEffect","lightClickEffect","clearEffect","resource","isPressed","el","oriBg","drawContainerHoverEffect","cursorX","cursorY","cursorArea","right","bottom","elArea","r1","r2","isIntersected","clientX","clientY","enableBackgroundEffects","clickEffect","addEventListener","enableClickEffects","enableNormalBackgroundEffetcs","options","enableChildrenBackgroundEffetcs","children","enableNormalClickEffects","enableChildrenClickEffects","preProcessElement","getComputedStyle","preProcessElements","elements","ressources","elementsL","length","i","push","preProcessSelector","selector","document","querySelectorAll","applyEffectOption","userOptions","assign","isContainer","borderSelector","elementSelector","applyChildrenElementEffect","enableBackgroundEffectsFunc","enableClickEffectsFunc","applyChildrenEffect","resources","resourceL","applyContainerElementEffect","childrenBorders","childrenBorderL","enableBorderEffects","applyContainerEffect","applyElementEffect","applyElementsEffect","applyEffect","resoures"],"sourceRoot":""} \ No newline at end of file diff --git a/src/osdrive/Cheetah/System/Fluent Effect/fs-src/types.d.ts b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/types.d.ts new file mode 100644 index 0000000..3dcbd5a --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/fs-src/types.d.ts @@ -0,0 +1,27 @@ +export interface IResource { + oriBg: string; + el: HTMLElement; +} +export type IIsPressed = [boolean]; +export interface IArea { + left: number; + right: number; + top: number; + bottom: number; +} +export interface IEffectOptions { + lightColor: string | 'rgba(255,255,255,0.1)'; + gradientSize: number | 200; + clickEffect: boolean | false; + isContainer: boolean | false; + children?: { + borderSelector: string | '.eff-reveal-border'; + elementSelector: string | '.eff-reveal'; + lightColor: string | 'rgba(255,255,255,0.1)'; + gradientSize: number | 200; + }; +} +export type IUserEffectOptions = Partial; +export interface IEnableEffectFunc { + (element: IResource, options: IEffectOptions, is_pressed: IIsPressed): void; +} diff --git a/src/osdrive/Cheetah/System/Fluent Effect/package.json b/src/osdrive/Cheetah/System/Fluent Effect/package.json new file mode 100644 index 0000000..a8d3666 --- /dev/null +++ b/src/osdrive/Cheetah/System/Fluent Effect/package.json @@ -0,0 +1,57 @@ +{ + "name": "fluent-reveal-effect", + "displayName": "Fluent Reveal Effect", + "version": "3.0.11", + "description": "Reveal Effect (Fluent Design)", + "main": "fs-src/main.js", + "types": "fs-src/main.d.ts", + "files": [ + "fs-src" + ], + "scripts": { + "start": "webpack --watch --config ./webpack.config.js --progress --mode=development", + "build": "webpack --config ./webpack.config.js --progress --mode=production", + "test": "" + }, + "keywords": [ + "fluent", + "design", + "ui", + "toolkit", + "fluent design", + "fluent interface", + "fluent design system", + "css framework", + "javascript plugin", + "ui components", + "ui kit", + "fluent ui", + "fluent reveal effect" + ], + "author": "Duong Dieu Phap", + "license": "MIT", + "bugs": { + "url": "https://github.com/d2phap/fluent-reveal-effect/issues" + }, + "homepage": "https://github.com/d2phap/fluent-reveal-effect#readme", + "devDependencies": { + "@babel/core": "^7.21.0", + "@babel/preset-env": "^7.20.2", + "@typescript-eslint/eslint-plugin": "^5.54.1", + "@typescript-eslint/parser": "^5.54.1", + "babel-loader": "^9.1.2", + "clean-webpack-plugin": "*", + "css-loader": "^6.7.3", + "eslint": "^8.36.0", + "eslint-config-airbnb-typescript": "^17.0.0", + "eslint-plugin-import": "^2.27.5", + "eslint-webpack-plugin": "^4.0.0", + "node-sass": "^8.0.0", + "sass-loader": "^13.2.0", + "ts-loader": "^9.4.2", + "tsconfig-paths-webpack-plugin": "^4.0.1", + "typescript": "^4.9.5", + "webpack": "^5.76.1", + "webpack-cli": "^5.0.1" + } +}