mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-10-04 17:22:30 +02:00
break project up into modular components
This commit is contained in:
Kuldeep M
GitHub
parent
6e60ee1a3e
commit
ee4dbc7570
2
.github/workflows/gh-pages-deploy.yml
vendored
2
.github/workflows/gh-pages-deploy.yml
vendored
@ -23,4 +23,4 @@ jobs:
|
||||
uses: JamesIves/github-pages-deploy-action@4.1.3
|
||||
with:
|
||||
branch: gh-pages
|
||||
folder: build/web
|
||||
folder: dist/web
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,4 +1,3 @@
|
||||
.DS_Store
|
||||
dev
|
||||
build
|
||||
dist
|
||||
node_modules
|
||||
|
||||
@ -60,7 +60,7 @@ representative at an online or offline event.
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported to the community leaders responsible for enforcement at
|
||||
kombiezombiefox@gmail.com
|
||||
kombiezombiefox@gmail.com.
|
||||
All complaints will be reviewed and investigated promptly and fairly.
|
||||
|
||||
All community leaders are obligated to respect the privacy and security of the
|
||||
|
||||
72
README.md
72
README.md
@ -1,48 +1,14 @@
|
||||
# NIGHTTAB
|
||||
A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab -- a custom start page.
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab -- a custom start page.
|
||||
|
||||
| [See the demo in action](https://zombiefox.github.io/nightTab/) | [Install nightTab Extension](https://chrome.google.com/webstore/detail/nighttab/hdpcadigjkbcpnlcpbcohpafiaefanki) | [Install nightTab Add On](https://addons.mozilla.org/en-GB/firefox/addon/nighttab/) | [Buy me a coffee](https://www.buymeacoffee.com/zombieFox/) |
|
||||
|:-------------:|:-------------:|:-------------:|:-------------:|
|
||||
| [](https://zombiefox.github.io/nightTab/) | [](https://chrome.google.com/webstore/detail/nighttab/hdpcadigjkbcpnlcpbcohpafiaefanki) | [](https://addons.mozilla.org/en-GB/firefox/addon/nighttab/) | [](https://www.buymeacoffee.com/zombieFox/) |
|
||||
| [<img src="./src/icon/icon-512.svg" width="48px" height="48px">](https://zombiefox.github.io/nightTab/) | [](https://chrome.google.com/webstore/detail/nighttab/hdpcadigjkbcpnlcpbcohpafiaefanki) | [](https://addons.mozilla.org/en-GB/firefox/addon/nighttab/) | [](https://www.buymeacoffee.com/zombieFox/) |
|
||||
|
||||
---
|
||||
|
||||
### Features
|
||||
- Header
|
||||
- Greeting
|
||||
- Name, Style, Size
|
||||
- Clock
|
||||
- Hours, Minutes, Seconds, Separator, Meridiem, Hour/24, Size
|
||||
- Date
|
||||
- Day, Date, Month, Year, Separator, D/M or M/D format, Size
|
||||
- Search
|
||||
- Filter, Search engine, Size
|
||||
- Add and remove, Accent
|
||||
- Bookmarks
|
||||
- Drag and drop sort, sort by Letter, Icon, Name
|
||||
- Letter or icon, Names, URLs, Open in new tab, Size
|
||||
- Layout
|
||||
- Vertical and horizontal alignment, Padding, Gutter, Width, Title
|
||||
- Theme
|
||||
- Accent colour, Random accent colour, Light/Dark theme, Radius
|
||||
- Background
|
||||
- Image, Blur, Scale, Opacity, Grayscale, Accent colour
|
||||
- Saves data to local storage
|
||||
- Keyboard shortcuts
|
||||
- <kbd>esc</kbd> *to dismiss most things*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>a</kbd> *to add a new bookmark*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>g</kbd> *to add a new group*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>m</kbd> *to open menu*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>e</kbd> *to toggle edit state*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>d</kbd> *to toggle dark and light mode*
|
||||
- <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>r</kbd> *random theme if option is turned on in* `menu > layout > random Accent colour`
|
||||
- Responsive design
|
||||
|
||||
---
|
||||
|
||||
### Wiki
|
||||
### Wiki & help
|
||||
|
||||
- [Recovering user settings and bookmarks](https://github.com/zombieFox/nightTab/wiki/Recovering-user-settings-and-bookmarks)
|
||||
- [Setting nightTab as your Firefox homepage](https://github.com/zombieFox/nightTab/wiki/Setting-nightTab-as-your-Firefox-homepage)
|
||||
@ -52,27 +18,27 @@ A neutral new tab page accented with a chosen colour. Customise the layout, styl
|
||||
### Development
|
||||
|
||||
When developing use:
|
||||
- `npm run dev`
|
||||
- `npm start`
|
||||
|
||||
A Development copy will be created in `/dev/`. Open `/dev/index.html` in a browser to test. Make changes to files in the `/src/` directory and refresh browser to see changes.
|
||||
A development server will run on `http://localhost:5000/`
|
||||
|
||||
|
||||
To build the project use:
|
||||
- `npm run build`
|
||||
|
||||
A web ready folder will be created in `/build/web/`.
|
||||
A browser addon/extension ready zip will be created in `/build/extension/`.
|
||||
A web ready folder will be created in `/dist/web/`.
|
||||
A browser addon/extension ready zip will be created in `/dist/extension/`.
|
||||
|
||||
---
|
||||
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
[](https://zombiefox.github.io/nightTab/)
|
||||
|
||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
BIN
asset/screenshot/screenshot-001.png
Normal file
BIN
asset/screenshot/screenshot-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
asset/screenshot/screenshot-002.png
Normal file
BIN
asset/screenshot/screenshot-002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
1
asset/screenshot/screenshot-003.json
Normal file
1
asset/screenshot/screenshot-003.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-003.png
Normal file
BIN
asset/screenshot/screenshot-003.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
1
asset/screenshot/screenshot-004.json
Normal file
1
asset/screenshot/screenshot-004.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-004.png
Normal file
BIN
asset/screenshot/screenshot-004.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
1
asset/screenshot/screenshot-005.json
Normal file
1
asset/screenshot/screenshot-005.json
Normal file
@ -0,0 +1 @@
|
||||
{"nightTab":true,"version":"7.0.0","state":{"layout":{"area":{"header":{"width":100,"justify":"center"},"bookmark":{"width":100,"justify":"center"}},"alignment":"center-center","order":"header-bookmark","direction":"vertical","size":100,"width":90,"padding":40,"gutter":20,"breakpoint":"xs","scrollbar":"auto","title":"","overscroll":false},"header":{"item":{"justify":"center"},"greeting":{"show":false,"type":"good","custom":"","name":"","size":100,"newLine":false},"transitional":{"show":false,"type":"timeanddate","size":100,"newLine":false},"clock":{"hour":{"show":true,"display":"number"},"minute":{"show":true,"display":"number"},"second":{"show":false,"display":"number"},"separator":{"show":true,"text":""},"meridiem":{"show":true},"hour24":{"show":false},"size":150,"newLine":false},"date":{"day":{"show":true,"display":"word","weekStart":"monday","length":"short"},"date":{"show":true,"display":"number","ordinal":false},"month":{"show":true,"display":"word","length":"short","ordinal":true},"year":{"show":true,"display":"number"},"separator":{"show":true,"text":""},"format":"date-month","size":150,"newLine":false},"search":{"show":false,"width":{"by":"auto","size":30},"focus":false,"engine":{"selected":"google","custom":{"name":"","url":"","queryName":""}},"text":{"justify":"center"},"size":100,"newLine":false,"newTab":false},"order":["clock","date","toolbar"],"edit":false},"bookmark":{"size":100,"url":{"show":true},"line":{"show":true},"shadow":{"show":true},"hoverScale":{"show":true},"orientation":"bottom","style":"list","newTab":false,"edit":false,"add":false,"show":false,"item":{}},"group":{"area":{"justify":"left"},"name":{"size":100},"order":"header-body","openAll":{"size":100},"edit":false,"add":false},"toolbar":{"location":"header","position":"bottom-right","size":100,"accent":{"show":false},"add":{"show":false},"edit":{"show":false},"newLine":false},"theme":{"color":{"range":{"primary":{"h":0,"s":69}},"contrast":{"start":15,"end":80},"shades":14},"accent":{"hsl":{"h":35,"s":100,"l":50},"rgb":{"r":255,"g":150,"b":0},"random":{"active":false,"style":"any"},"cycle":{"active":false,"speed":300,"step":10}},"font":{"display":{"name":"Big Shoulders Display","weight":400,"style":"normal"},"ui":{"name":"Montserrat","weight":400,"style":"normal"}},"background":{"type":"image","color":{"hsl":{"h":221,"s":47,"l":17},"rgb":{"r":23,"g":36,"b":64}},"gradient":{"angle":30,"start":{"hsl":{"h":358,"s":100,"l":15},"rgb":{"r":77,"g":0,"b":3}},"end":{"hsl":{"h":9,"s":99,"l":40},"rgb":{"r":203,"g":31,"b":1}}},"image":{"url":"https://github.com/zombieFox/nightTabAssets/blob/main/images/1628355202943.jpeg?raw=true","blur":0,"grayscale":0,"scale":100,"accent":0,"opacity":15,"vignette":{"opacity":25,"start":90,"end":35}},"video":{"url":"","blur":0,"grayscale":0,"scale":100,"accent":0,"opacity":100,"vignette":{"opacity":0,"start":90,"end":70}}},"opacity":{"general":10},"layout":{"divider":{"size":1}},"header":{"color":{"by":"theme","opacity":10,"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0}},"search":{"opacity":10}},"bookmark":{"color":{"by":"theme","opacity":10,"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0}},"item":{"border":0,"opacity":10}},"group":{"openAll":{"opacity":10}},"toolbar":{"opacity":10},"style":"dark","radius":60,"shadow":100,"shade":{"opacity":10,"blur":0},"custom":{"all":[],"edit":false}},"search":false,"modal":false,"menu":false,"autoSuggest":false},"bookmark":[]}
|
||||
BIN
asset/screenshot/screenshot-005.png
Normal file
BIN
asset/screenshot/screenshot-005.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
1
asset/screenshot/screenshot-006.json
Normal file
1
asset/screenshot/screenshot-006.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-006.png
Normal file
BIN
asset/screenshot/screenshot-006.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
1
asset/screenshot/screenshot-007.json
Normal file
1
asset/screenshot/screenshot-007.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-007.png
Normal file
BIN
asset/screenshot/screenshot-007.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1012 KiB |
1
asset/screenshot/screenshot-008.json
Normal file
1
asset/screenshot/screenshot-008.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-008.png
Normal file
BIN
asset/screenshot/screenshot-008.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 9.9 MiB |
1
asset/screenshot/screenshot-009.json
Normal file
1
asset/screenshot/screenshot-009.json
Normal file
@ -0,0 +1 @@
|
||||
{"nightTab":true,"version":"7.0.0","state":{"layout":{"area":{"header":{"width":100,"justify":"center"},"bookmark":{"width":100,"justify":"center"}},"alignment":"center-center","order":"header-bookmark","direction":"vertical","size":100,"width":100,"padding":40,"gutter":20,"breakpoint":"xs","scrollbar":"auto","title":"","overscroll":false},"header":{"item":{"justify":"right"},"greeting":{"show":false,"type":"good","custom":"","name":"","size":100,"newLine":false},"transitional":{"show":false,"type":"timeanddate","size":100,"newLine":false},"clock":{"hour":{"show":true,"display":"number"},"minute":{"show":true,"display":"number"},"second":{"show":false,"display":"number"},"separator":{"show":true,"text":""},"meridiem":{"show":false},"hour24":{"show":true},"size":100,"newLine":false},"date":{"day":{"show":true,"display":"word","weekStart":"monday","length":"long"},"date":{"show":true,"display":"number","ordinal":true},"month":{"show":true,"display":"word","length":"long","ordinal":true},"year":{"show":false,"display":"number"},"separator":{"show":true,"text":""},"format":"date-month","size":100,"newLine":false},"search":{"show":false,"width":{"by":"auto","size":30},"focus":false,"engine":{"selected":"google","custom":{"name":"","url":"","queryName":""}},"text":{"justify":"center"},"size":100,"newLine":false,"newTab":false},"order":["clock","date","toolbar"],"edit":false},"bookmark":{"size":100,"url":{"show":true},"line":{"show":true},"shadow":{"show":true},"hoverScale":{"show":true},"orientation":"bottom","style":"block","newTab":false,"edit":false,"add":false,"show":false,"item":{}},"group":{"area":{"justify":"left"},"name":{"size":100},"order":"header-body","openAll":{"size":100},"edit":false,"add":false},"toolbar":{"location":"header","position":"bottom-right","size":100,"accent":{"show":false},"add":{"show":false},"edit":{"show":false},"newLine":false},"theme":{"color":{"range":{"primary":{"h":200,"s":27}},"contrast":{"start":11,"end":77},"shades":14},"accent":{"hsl":{"h":180,"s":100,"l":50},"rgb":{"r":0,"g":255,"b":255},"random":{"active":false,"style":"any"},"cycle":{"active":false,"speed":300,"step":10}},"font":{"display":{"name":"Unica One","weight":400,"style":"normal"},"ui":{"name":"Inria Sans","weight":400,"style":"normal"}},"background":{"type":"video","color":{"rgb":{"r":0,"g":0,"b":0},"hsl":{"h":0,"s":0,"l":0}},"gradient":{"angle":160,"start":{"hsl":{"h":206,"s":16,"l":40},"rgb":{"r":86,"g":104,"b":118}},"end":{"hsl":{"h":219,"s":28,"l":12},"rgb":{"r":22,"g":28,"b":39}}},"image":{"url":"","blur":0,"grayscale":0,"scale":100,"accent":10,"opacity":60,"vignette":{"opacity":0,"start":90,"end":70}},"video":{"url":"https://github.com/zombieFox/nightTabAssets/blob/main/videos/1626342605376.mp4?raw=true","blur":0,"grayscale":0,"scale":100,"accent":20,"opacity":80,"vignette":{"opacity":70,"start":90,"end":25}}},"opacity":{"general":0},"layout":{"divider":{"size":1}},"header":{"color":{"by":"custom","opacity":20,"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0}},"search":{"opacity":0}},"bookmark":{"color":{"by":"theme","opacity":10,"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0}},"item":{"border":0,"opacity":0}},"group":{"openAll":{"opacity":0}},"toolbar":{"opacity":0},"style":"dark","radius":25,"shadow":50,"shade":{"opacity":2,"blur":0},"custom":{"all":[],"edit":false}},"search":false,"modal":false,"menu":false,"autoSuggest":false},"bookmark":[]}
|
||||
BIN
asset/screenshot/screenshot-009.png
Normal file
BIN
asset/screenshot/screenshot-009.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
1
asset/screenshot/screenshot-010.json
Normal file
1
asset/screenshot/screenshot-010.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-010.png
Normal file
BIN
asset/screenshot/screenshot-010.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
1
asset/screenshot/screenshot-011.json
Normal file
1
asset/screenshot/screenshot-011.json
Normal file
File diff suppressed because one or more lines are too long
BIN
asset/screenshot/screenshot-011.png
Normal file
BIN
asset/screenshot/screenshot-011.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 438 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 679 KiB |
@ -1 +0,0 @@
|
||||
{"nighttab":true,"version":"6.0.0","state":{"header":{"area":{"width":100,"justify":"center","align":"center"},"item":{"justify":"right"},"clock":{"hours":{"show":true,"display":"number"},"minutes":{"show":true,"display":"number"},"seconds":{"show":false,"display":"number"},"separator":{"show":true,"text":":"},"meridiem":{"show":true},"hour24":{"show":true},"size":1.2,"newLine":false},"date":{"day":{"show":true,"display":"word","weekStart":"monday","length":"long"},"date":{"show":true,"display":"number","ordinal":true},"month":{"show":true,"display":"word","length":"long","ordinal":true},"year":{"show":false,"display":"number"},"separator":{"show":true,"text":"/"},"format":"datemonth","size":1.2,"newLine":false},"search":{"show":false,"width":{"by":"auto","size":30},"focus":false,"engine":{"selected":"google","google":{"url":"https://www.google.com/search","name":"Google"},"duckduckgo":{"url":"https://duckduckgo.com/","name":"DuckDuckGo"},"youtube":{"url":"https://www.youtube.com/results?search_query=","name":"YouTube"},"giphy":{"url":"https://giphy.com/search/","name":"Giphy"},"custom":{"url":"","name":"","queryName":""},"bing":{"url":"https://www.bing.com/search?q=","name":"Bing"}},"text":{"justify":"center"},"size":1,"newLine":false,"newTab":false,"opacity":1},"border":{"top":0,"bottom":0},"greeting":{"show":false,"type":"good","name":"","size":1,"newLine":false},"transitional":{"show":false,"type":"timeanddate","size":1,"newLine":false},"radius":false,"position":"sticky","color":{"show":true,"style":"always","opacity":0.67,"by":"theme","rgb":{"r":0,"g":0,"b":0},"hsl":{"h":0,"s":0,"l":0}},"order":["greeting","transitional","clock","date","search","editAdd","colorAccent","menu"],"menu":{"show":true,"size":1,"newLine":false,"opacity":0},"editAdd":{"show":false,"size":1,"newLine":false,"opacity":0},"colorAccent":{"dot":{"show":true},"show":false,"size":1,"newLine":false,"opacity":0}},"link":{"area":{"width":100,"justify":"center","direction":"ltr"},"item":{"display":{"alignment":"bottomright","rotate":0,"translate":{"x":0,"y":0},"name":{"show":true,"size":0.9},"order":"visualname","direction":"vertical","gutter":2,"visual":{"letter":{"size":3},"icon":{"size":3},"image":{"size":3},"shadow":{"size":0}}},"url":{"show":true},"size":1,"line":{"show":false},"hoverScale":{"show":true},"newTab":false,"border":0,"shadow":{"show":true},"color":{"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0},"opacity":1,"by":"theme"},"accent":{"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0},"by":"theme"},"background":{"opacity":1}},"show":false,"edit":false,"style":"block","add":false,"orientation":"bottom","breakpoint":"xl"},"layout":{"alignment":"centercenter","padding":4,"gutter":2,"width":100,"scrollPastEnd":false,"title":"New Tab","order":"headerlink","size":1,"scrollbars":"auto","direction":"vertical"},"theme":{"accent":{"random":{"active":false,"style":"any"},"rgb":{"r":0,"g":255,"b":255},"cycle":{"active":false,"speed":300,"step":10},"hsl":{"h":180,"s":100,"l":50}},"style":"dark","radius":0.25,"color":{"hsl":{"h":215,"s":18,"l":32},"rgb":{"r":67,"g":79,"b":96},"contrast":{"light":2,"dark":2},"generated":{"negative":{"1":{"r":63,"g":74,"b":90},"2":{"r":59,"g":69,"b":84},"3":{"r":54,"g":64,"b":78},"4":{"r":50,"g":59,"b":72},"5":{"r":46,"g":54,"b":66},"6":{"r":42,"g":49,"b":60},"7":{"r":38,"g":44,"b":54},"8":{"r":33,"g":39,"b":48},"9":{"r":29,"g":35,"b":42},"10":{"r":25,"g":30,"b":36}},"positive":{"1":{"r":71,"g":84,"b":102},"2":{"r":75,"g":89,"b":108},"3":{"r":80,"g":94,"b":114},"4":{"r":84,"g":99,"b":120},"5":{"r":88,"g":104,"b":126},"6":{"r":92,"g":109,"b":132},"7":{"r":96,"g":114,"b":138},"8":{"r":101,"g":119,"b":144},"9":{"r":105,"g":123,"b":150},"10":{"r":111,"g":129,"b":154}}}},"font":{"display":{"name":"Unica One","weight":400,"style":"normal"},"ui":{"name":"Inria Sans","weight":400,"style":"normal"}},"custom":{"all":[],"edit":false},"shadow":0.5,"shade":{"opacity":0.02}},"background":{"color":{"by":"theme","rgb":{"r":0,"g":0,"b":0},"hsl":{"h":0,"s":0,"l":0}},"visual":{"show":true,"type":"video","image":{"type":"url","file":{"name":"","data":""},"url":""},"video":{"url":"https://pixabay.com/videos/download/video-40581_large.mp4"},"blur":0,"scale":1,"opacity":0.6,"grayscale":0,"accent":0.1,"vignette":{"opacity":23,"start":90,"end":17}}},"edge":true,"search":false,"menu":true,"modal":false,"autoSuggest":false,"pagelock":true,"shade":true,"group":{"area":{"justify":"left"},"name":{"size":1},"border":0,"order":"headerbody","add":false,"edit":false,"openAll":{"size":1,"opacity":1}},"dropdown":false,"edit":true},"bookmarks":[{"name":{"show":true,"text":"Group 1"},"items":[],"openAll":{"show":true}}]}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 653 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 663 KiB |
233
gulpfile.js
233
gulpfile.js
@ -1,233 +0,0 @@
|
||||
const {
|
||||
src,
|
||||
dest,
|
||||
parallel
|
||||
} = require('gulp');
|
||||
|
||||
const fileinclude = require('gulp-file-include');
|
||||
|
||||
const csso = require('gulp-csso');
|
||||
|
||||
const concat = require('gulp-concat');
|
||||
|
||||
const uglify = require('gulp-uglify');
|
||||
|
||||
const uglifycss = require('gulp-uglifycss');
|
||||
|
||||
const replace = require('gulp-replace');
|
||||
|
||||
const htmlmin = require('gulp-htmlmin');
|
||||
|
||||
const minifyinline = require('gulp-minify-inline');
|
||||
|
||||
const watch = require('gulp-watch');
|
||||
|
||||
const filter = require('gulp-filter');
|
||||
|
||||
const path = {
|
||||
src: 'src',
|
||||
dev: 'dev',
|
||||
build: 'build/web',
|
||||
nodeModules: 'node_modules',
|
||||
}
|
||||
|
||||
const filename = {
|
||||
css: 'nighttab.min.css',
|
||||
js: 'nighttab.min.js'
|
||||
}
|
||||
|
||||
const jsDependencies = [
|
||||
path.nodeModules + '/html5sortable/dist/html5sortable.min.js',
|
||||
path.nodeModules + '/moment/min/moment.min.js',
|
||||
path.nodeModules + '/webfontloader/webfontloader.js'
|
||||
]
|
||||
|
||||
const cssFiles = [
|
||||
path.src + '/css/reset.css',
|
||||
path.src + '/css/variables.css',
|
||||
path.src + '/css/utilities.css',
|
||||
path.src + '/css/base.css',
|
||||
path.src + '/css/layout.css',
|
||||
path.src + '/css/edge.css',
|
||||
path.src + '/css/animation.css',
|
||||
path.src + '/css/fonts.css',
|
||||
path.src + '/css/icons.css',
|
||||
path.src + '/css/state.css',
|
||||
path.src + '/css/typography.css',
|
||||
path.src + '/css/spacing.css',
|
||||
path.src + '/css/button.css',
|
||||
path.src + '/css/form.css',
|
||||
path.src + '/css/shade.css',
|
||||
path.src + '/css/modal.css',
|
||||
path.src + '/css/tip.css',
|
||||
path.src + '/css/menu.css',
|
||||
path.src + '/css/header.css',
|
||||
path.src + '/css/date.css',
|
||||
path.src + '/css/clock.css',
|
||||
path.src + '/css/greeting.css',
|
||||
path.src + '/css/transitional.css',
|
||||
path.src + '/css/search.css',
|
||||
path.src + '/css/background.css',
|
||||
path.src + '/css/group.css',
|
||||
path.src + '/css/link.css',
|
||||
path.src + '/css/theme.css',
|
||||
path.src + '/css/auto-suggest.css',
|
||||
path.src + '/css/coffee.css',
|
||||
path.src + '/css/fontawesome.css'
|
||||
]
|
||||
|
||||
const jsFiles = [
|
||||
path.src + '/js/helper.js',
|
||||
path.src + '/js/data.js',
|
||||
path.src + '/js/ready.js',
|
||||
path.src + '/js/fontawesome.js',
|
||||
path.src + '/js/update.js',
|
||||
path.src + '/js/state.js',
|
||||
path.src + '/js/bookmarks.js',
|
||||
path.src + '/js/control.js',
|
||||
path.src + '/js/menu.js',
|
||||
path.src + '/js/header.js',
|
||||
path.src + '/js/modal.js',
|
||||
path.src + '/js/tip.js',
|
||||
path.src + '/js/shade.js',
|
||||
path.src + '/js/theme.js',
|
||||
path.src + '/js/date.js',
|
||||
path.src + '/js/greeting.js',
|
||||
path.src + '/js/transitional.js',
|
||||
path.src + '/js/clock.js',
|
||||
path.src + '/js/search.js',
|
||||
path.src + '/js/link.js',
|
||||
path.src + '/js/version.js',
|
||||
path.src + '/js/keyboard.js',
|
||||
path.src + '/js/background.js',
|
||||
path.src + '/js/layout.js',
|
||||
path.src + '/js/auto-suggest.js',
|
||||
path.src + '/js/pagelock.js',
|
||||
path.src + '/js/edge.js',
|
||||
path.src + '/js/dropdown.js',
|
||||
path.src + '/js/init.js'
|
||||
]
|
||||
|
||||
const build = {
|
||||
manifest: function() {
|
||||
return src(path.src + '/manifest.json')
|
||||
.pipe(dest(path.build))
|
||||
},
|
||||
html: function() {
|
||||
return src(path.src + '/index.html')
|
||||
.pipe(fileinclude({
|
||||
prefix: '@@',
|
||||
basepath: '@file'
|
||||
}))
|
||||
.pipe(replace(/\<\!\-\-\ css\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-css\-block\ \-\-\>/mg, '<link rel="stylesheet" href="css/' + filename.css + '">'))
|
||||
.pipe(replace(/\<\!\-\-\ js\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-js\-block\ \-\-\>/mg, '<script src="js/' + filename.js + '"></script>'))
|
||||
.pipe(htmlmin({
|
||||
collapseWhitespace: true
|
||||
}))
|
||||
.pipe(minifyinline())
|
||||
.pipe(dest(path.build))
|
||||
},
|
||||
fonts: function() {
|
||||
return src(path.src + '/fonts/**/*.*')
|
||||
.pipe(dest(path.build + '/fonts'))
|
||||
},
|
||||
icons: function() {
|
||||
return src(path.src + '/icons/**/*.*')
|
||||
.pipe(dest(path.build + '/icons'))
|
||||
},
|
||||
css: function() {
|
||||
return src(cssFiles)
|
||||
.pipe(concat(filename.css))
|
||||
.pipe(csso())
|
||||
.pipe(uglifycss({
|
||||
"uglyComments": true
|
||||
}))
|
||||
.pipe(dest(path.build + '/css'))
|
||||
},
|
||||
js: function() {
|
||||
const noVendors = filter(jsFiles, {
|
||||
restore: true
|
||||
});
|
||||
return src(jsDependencies.concat(jsFiles), {
|
||||
sourcemaps: true
|
||||
})
|
||||
.pipe(noVendors)
|
||||
.pipe(uglify())
|
||||
.pipe(noVendors.restore)
|
||||
.pipe(concat(filename.js))
|
||||
.pipe(dest(path.build + '/js', {
|
||||
sourcemaps: '.'
|
||||
}))
|
||||
},
|
||||
initialBackground: function() {
|
||||
return src(path.src + '/js/initial-background.js')
|
||||
.pipe(uglify())
|
||||
.pipe(dest(path.build + '/js'))
|
||||
}
|
||||
}
|
||||
|
||||
const dev = {
|
||||
manifest: function() {
|
||||
watch(path.src + '/manifest.json', {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(path.src + '/manifest.json')
|
||||
.pipe(dest(path.dev))
|
||||
})
|
||||
},
|
||||
html: function() {
|
||||
watch(path.src + '/**/*.html', {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(path.src + '/index.html')
|
||||
.pipe(fileinclude({
|
||||
prefix: '@@',
|
||||
basepath: '@file'
|
||||
}))
|
||||
.pipe(dest(path.dev))
|
||||
})
|
||||
},
|
||||
fonts: function() {
|
||||
watch(path.src + '/fonts/**/*.*', {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(path.src + '/fonts/**/*.*')
|
||||
.pipe(dest(path.dev + '/fonts'))
|
||||
})
|
||||
},
|
||||
icons: function() {
|
||||
watch(path.src + '/icons/**/*.*', {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(path.src + '/icons/**/*.*')
|
||||
.pipe(dest(path.dev + '/icons'))
|
||||
})
|
||||
},
|
||||
css: function() {
|
||||
watch(cssFiles, {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(cssFiles)
|
||||
.pipe(dest(path.dev + '/css'))
|
||||
})
|
||||
},
|
||||
js: function() {
|
||||
watch(jsFiles, {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(jsFiles)
|
||||
.pipe(dest(path.dev + '/js'))
|
||||
})
|
||||
},
|
||||
initialBackground: function() {
|
||||
watch(path.src + '/js/initial-background.js', {
|
||||
ignoreInitial: false
|
||||
}, function() {
|
||||
return src(path.src + '/js/initial-background.js')
|
||||
.pipe(dest(path.dev + '/js'))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
exports.dev = parallel(dev.manifest, dev.html, dev.fonts, dev.icons, dev.css, dev.js, dev.initialBackground)
|
||||
exports.build = parallel(build.manifest, build.html, build.fonts, build.icons, build.css, build.js, build.initialBackground)
|
||||
18777
package-lock.json
generated
18777
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
@ -1,61 +1,29 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "6.6.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "7.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "npm run clean-dev; gulp dev",
|
||||
"build": "npm run clean-build; npm run build-web; npm run build-extension",
|
||||
"build-web": "gulp build",
|
||||
"build-extension": "web-ext build -s build/web -a build/extension",
|
||||
"lint": "npm run lint-extension",
|
||||
"lint-extension": "web-ext lint -s build/web",
|
||||
"clean": "npm run clean-dev; npm run clean-build",
|
||||
"clean-dev": "rm -rf dev",
|
||||
"clean-build": "rm -rf build",
|
||||
"deploy-gh-pages": "npm run clean-build; gulp build; gh-pages -d build/web"
|
||||
"start": "webpack serve --mode=development",
|
||||
"build": "webpack --mode=production"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zombieFox/nightTab.git"
|
||||
},
|
||||
"keywords": [
|
||||
"startpage",
|
||||
"start-page",
|
||||
"newtabpage",
|
||||
"new-tab-page",
|
||||
"tab",
|
||||
"chrome-extension",
|
||||
"extension",
|
||||
"bookmarks",
|
||||
"links"
|
||||
],
|
||||
"author": "zombieFox",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "GPL-3",
|
||||
"bugs": {
|
||||
"url": "https://github.com/zombieFox/nightTab/issues"
|
||||
},
|
||||
"homepage": "https://github.com/zombieFox/nightTab#readme",
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"gh-pages": "^3.1.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-cli": "^2.3.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-csso": "^4.0.1",
|
||||
"gulp-file-include": "^2.2.2",
|
||||
"gulp-filter": "^6.0.0",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-minify-inline": "^1.1.0",
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-uglifycss": "^1.1.0",
|
||||
"gulp-watch": "^5.0.1",
|
||||
"html5sortable": "^0.9.18",
|
||||
"moment": "^2.27.0",
|
||||
"web-ext": "^5.5.0",
|
||||
"webfontloader": "^1.6.28"
|
||||
},
|
||||
"dependencies": {}
|
||||
"copy-webpack-plugin": "^6.4.1",
|
||||
"css-loader": "^5.2.5",
|
||||
"css-minimizer-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
"mini-css-extract-plugin": "^1.6.0",
|
||||
"moment": "^2.29.1",
|
||||
"sortablejs": "^1.13.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"webfontloader": "^1.6.28",
|
||||
"webpack": "^5.37.1",
|
||||
"webpack-cli": "^4.7.0",
|
||||
"webpack-dev-server": "^3.11.2",
|
||||
"zip-webpack-plugin": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
99
src/component/accentPreset/index.js
Normal file
99
src/component/accentPreset/index.js
Normal file
@ -0,0 +1,99 @@
|
||||
const accentPreset = {};
|
||||
|
||||
accentPreset.get = () => {
|
||||
return [
|
||||
{ name: 'Grey', prefix: 'Super extra light', type: 'grey', hsl: { h: 0, s: 0, l: 90 } },
|
||||
{ name: 'Grey', prefix: 'Extra light', type: 'grey', hsl: { h: 0, s: 0, l: 77 } },
|
||||
{ name: 'Grey', prefix: 'Light', type: 'grey', hsl: { h: 0, s: 0, l: 63 } },
|
||||
{ name: 'Grey', prefix: false, type: 'grey', hsl: { h: 0, s: 0, l: 50 } },
|
||||
{ name: 'Grey', prefix: 'Dark', type: 'grey', hsl: { h: 0, s: 0, l: 37 } },
|
||||
{ name: 'Grey', prefix: 'Extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 23 } },
|
||||
{ name: 'Grey', prefix: 'Super extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 10 } },
|
||||
{ name: 'Red', prefix: 'Super extra light', type: 'primary', hsl: { h: 0, s: 40, l: 90 } },
|
||||
{ name: 'Red', prefix: 'Extra light', type: 'primary', hsl: { h: 0, s: 60, l: 77 } },
|
||||
{ name: 'Red', prefix: 'Light', type: 'primary', hsl: { h: 0, s: 80, l: 63 } },
|
||||
{ name: 'Red', prefix: false, type: 'primary', hsl: { h: 0, s: 100, l: 50 } },
|
||||
{ name: 'Red', prefix: 'Dark', type: 'primary', hsl: { h: 0, s: 80, l: 37 } },
|
||||
{ name: 'Red', prefix: 'Extra dark', type: 'primary', hsl: { h: 0, s: 60, l: 23 } },
|
||||
{ name: 'Red', prefix: 'Super extra dark', type: 'primary', hsl: { h: 0, s: 40, l: 10 } },
|
||||
{ name: 'Orange', prefix: 'Super extra light', type: 'secondary', hsl: { h: 30, s: 40, l: 90 } },
|
||||
{ name: 'Orange', prefix: 'Extra light', type: 'secondary', hsl: { h: 30, s: 60, l: 77 } },
|
||||
{ name: 'Orange', prefix: 'Light', type: 'secondary', hsl: { h: 30, s: 80, l: 63 } },
|
||||
{ name: 'Orange', prefix: false, type: 'secondary', hsl: { h: 30, s: 100, l: 50 } },
|
||||
{ name: 'Orange', prefix: 'Dark', type: 'secondary', hsl: { h: 30, s: 80, l: 37 } },
|
||||
{ name: 'Orange', prefix: 'Extra dark', type: 'secondary', hsl: { h: 30, s: 60, l: 23 } },
|
||||
{ name: 'Orange', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 30, s: 40, l: 10 } },
|
||||
{ name: 'Yellow', prefix: 'Super extra light', type: 'primary', hsl: { h: 60, s: 40, l: 90 } },
|
||||
{ name: 'Yellow', prefix: 'Extra light', type: 'primary', hsl: { h: 60, s: 60, l: 77 } },
|
||||
{ name: 'Yellow', prefix: 'Light', type: 'primary', hsl: { h: 60, s: 80, l: 63 } },
|
||||
{ name: 'Yellow', prefix: false, type: 'primary', hsl: { h: 60, s: 100, l: 50 } },
|
||||
{ name: 'Yellow', prefix: 'Dark', type: 'primary', hsl: { h: 60, s: 80, l: 37 } },
|
||||
{ name: 'Yellow', prefix: 'Extra dark', type: 'primary', hsl: { h: 60, s: 60, l: 23 } },
|
||||
{ name: 'Yellow', prefix: 'Super extra dark', type: 'primary', hsl: { h: 60, s: 40, l: 10 } },
|
||||
{ name: 'Lime', prefix: 'Super extra light', type: 'secondary', hsl: { h: 90, s: 40, l: 90 } },
|
||||
{ name: 'Lime', prefix: 'Extra light', type: 'secondary', hsl: { h: 90, s: 60, l: 77 } },
|
||||
{ name: 'Lime', prefix: 'Light', type: 'secondary', hsl: { h: 90, s: 80, l: 63 } },
|
||||
{ name: 'Lime', prefix: false, type: 'secondary', hsl: { h: 90, s: 100, l: 50 } },
|
||||
{ name: 'Lime', prefix: 'Dark', type: 'secondary', hsl: { h: 90, s: 80, l: 37 } },
|
||||
{ name: 'Lime', prefix: 'Extra dark', type: 'secondary', hsl: { h: 90, s: 60, l: 23 } },
|
||||
{ name: 'Lime', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 90, s: 40, l: 10 } },
|
||||
{ name: 'Green', prefix: 'Super extra light', type: 'primary', hsl: { h: 120, s: 40, l: 90 } },
|
||||
{ name: 'Green', prefix: 'Extra light', type: 'primary', hsl: { h: 120, s: 60, l: 77 } },
|
||||
{ name: 'Green', prefix: 'Light', type: 'primary', hsl: { h: 120, s: 80, l: 63 } },
|
||||
{ name: 'Green', prefix: false, type: 'primary', hsl: { h: 120, s: 100, l: 50 } },
|
||||
{ name: 'Green', prefix: 'Dark', type: 'primary', hsl: { h: 120, s: 80, l: 37 } },
|
||||
{ name: 'Green', prefix: 'Extra dark', type: 'primary', hsl: { h: 120, s: 60, l: 23 } },
|
||||
{ name: 'Green', prefix: 'Super extra dark', type: 'primary', hsl: { h: 120, s: 40, l: 10 } },
|
||||
{ name: 'Aqua', prefix: 'Super extra light', type: 'secondary', hsl: { h: 150, s: 40, l: 90 } },
|
||||
{ name: 'Aqua', prefix: 'Extra light', type: 'secondary', hsl: { h: 150, s: 60, l: 77 } },
|
||||
{ name: 'Aqua', prefix: 'Light', type: 'secondary', hsl: { h: 150, s: 80, l: 63 } },
|
||||
{ name: 'Aqua', prefix: false, type: 'secondary', hsl: { h: 150, s: 100, l: 50 } },
|
||||
{ name: 'Aqua', prefix: 'Dark', type: 'secondary', hsl: { h: 150, s: 80, l: 37 } },
|
||||
{ name: 'Aqua', prefix: 'Extra dark', type: 'secondary', hsl: { h: 150, s: 60, l: 23 } },
|
||||
{ name: 'Aqua', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 150, s: 40, l: 10 } },
|
||||
{ name: 'Cyan', prefix: 'Super extra light', type: 'primary', hsl: { h: 180, s: 40, l: 90 } },
|
||||
{ name: 'Cyan', prefix: 'Extra light', type: 'primary', hsl: { h: 180, s: 60, l: 77 } },
|
||||
{ name: 'Cyan', prefix: 'Light', type: 'primary', hsl: { h: 180, s: 80, l: 63 } },
|
||||
{ name: 'Cyan', prefix: false, type: 'primary', hsl: { h: 180, s: 100, l: 50 } },
|
||||
{ name: 'Cyan', prefix: 'Dark', type: 'primary', hsl: { h: 180, s: 80, l: 37 } },
|
||||
{ name: 'Cyan', prefix: 'Extra dark', type: 'primary', hsl: { h: 180, s: 60, l: 23 } },
|
||||
{ name: 'Cyan', prefix: 'Super extra dark', type: 'primary', hsl: { h: 180, s: 40, l: 10 } },
|
||||
{ name: 'Teal', prefix: 'Super extra light', type: 'secondary', hsl: { h: 210, s: 40, l: 90 } },
|
||||
{ name: 'Teal', prefix: 'Extra light', type: 'secondary', hsl: { h: 210, s: 60, l: 77 } },
|
||||
{ name: 'Teal', prefix: 'Light', type: 'secondary', hsl: { h: 210, s: 80, l: 63 } },
|
||||
{ name: 'Teal', prefix: false, type: 'secondary', hsl: { h: 210, s: 100, l: 50 } },
|
||||
{ name: 'Teal', prefix: 'Dark', type: 'secondary', hsl: { h: 210, s: 80, l: 37 } },
|
||||
{ name: 'Teal', prefix: 'Extra dark', type: 'secondary', hsl: { h: 210, s: 60, l: 23 } },
|
||||
{ name: 'Teal', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 210, s: 40, l: 10 } },
|
||||
{ name: 'Blue', prefix: 'Super extra light', type: 'primary', hsl: { h: 240, s: 40, l: 90 } },
|
||||
{ name: 'Blue', prefix: 'Extra light', type: 'primary', hsl: { h: 240, s: 60, l: 77 } },
|
||||
{ name: 'Blue', prefix: 'Light', type: 'primary', hsl: { h: 240, s: 80, l: 63 } },
|
||||
{ name: 'Blue', prefix: false, type: 'primary', hsl: { h: 240, s: 100, l: 50 } },
|
||||
{ name: 'Blue', prefix: 'Dark', type: 'primary', hsl: { h: 240, s: 80, l: 37 } },
|
||||
{ name: 'Blue', prefix: 'Extra dark', type: 'primary', hsl: { h: 240, s: 60, l: 23 } },
|
||||
{ name: 'Blue', prefix: 'Super extra dark', type: 'primary', hsl: { h: 240, s: 40, l: 10 } },
|
||||
{ name: 'Purple', prefix: 'Super extra light', type: 'secondary', hsl: { h: 270, s: 40, l: 90 } },
|
||||
{ name: 'Purple', prefix: 'Extra light', type: 'secondary', hsl: { h: 270, s: 60, l: 77 } },
|
||||
{ name: 'Purple', prefix: 'Light', type: 'secondary', hsl: { h: 270, s: 80, l: 63 } },
|
||||
{ name: 'Purple', prefix: false, type: 'secondary', hsl: { h: 270, s: 100, l: 50 } },
|
||||
{ name: 'Purple', prefix: 'Dark', type: 'secondary', hsl: { h: 270, s: 80, l: 37 } },
|
||||
{ name: 'Purple', prefix: 'Extra dark', type: 'secondary', hsl: { h: 270, s: 60, l: 23 } },
|
||||
{ name: 'Purple', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 270, s: 40, l: 10 } },
|
||||
{ name: 'Magenta', prefix: 'Super extra light', type: 'primary', hsl: { h: 300, s: 40, l: 90 } },
|
||||
{ name: 'Magenta', prefix: 'Extra light', type: 'primary', hsl: { h: 300, s: 60, l: 77 } },
|
||||
{ name: 'Magenta', prefix: 'Light', type: 'primary', hsl: { h: 300, s: 80, l: 63 } },
|
||||
{ name: 'Magenta', prefix: false, type: 'primary', hsl: { h: 300, s: 100, l: 50 } },
|
||||
{ name: 'Magenta', prefix: 'Dark', type: 'primary', hsl: { h: 300, s: 80, l: 37 } },
|
||||
{ name: 'Magenta', prefix: 'Extra dark', type: 'primary', hsl: { h: 300, s: 60, l: 23 } },
|
||||
{ name: 'Magenta', prefix: 'Super extra dark', type: 'primary', hsl: { h: 300, s: 40, l: 10 } },
|
||||
{ name: 'Fuchsia', prefix: 'Super extra light', type: 'secondary', hsl: { h: 330, s: 40, l: 90 } },
|
||||
{ name: 'Fuchsia', prefix: 'Extra light', type: 'secondary', hsl: { h: 330, s: 60, l: 77 } },
|
||||
{ name: 'Fuchsia', prefix: 'Light', type: 'secondary', hsl: { h: 330, s: 80, l: 63 } },
|
||||
{ name: 'Fuchsia', prefix: false, type: 'secondary', hsl: { h: 330, s: 100, l: 50 } },
|
||||
{ name: 'Fuchsia', prefix: 'Dark', type: 'secondary', hsl: { h: 330, s: 80, l: 37 } },
|
||||
{ name: 'Fuchsia', prefix: 'Extra dark', type: 'secondary', hsl: { h: 330, s: 60, l: 23 } },
|
||||
{ name: 'Fuchsia', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 330, s: 40, l: 10 } },
|
||||
];
|
||||
};
|
||||
|
||||
export { accentPreset };
|
||||
62
src/component/accentPresetButton/index.css
Normal file
62
src/component/accentPresetButton/index.css
Normal file
@ -0,0 +1,62 @@
|
||||
:root {
|
||||
--theme-accent-preset-preview-space: 5;
|
||||
}
|
||||
|
||||
.theme-accent-preset {
|
||||
display: grid;
|
||||
grid-gap: calc((var(--theme-accent-preset-preview-space) / 8) * 1em);
|
||||
grid-template-columns: repeat(7, auto);
|
||||
grid-auto-flow: row;
|
||||
justify-items: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.theme-accent-preset {
|
||||
grid-template-rows: repeat(7, auto);
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-accent-preset-button {
|
||||
padding: 0;
|
||||
width: calc((var(--theme-accent-preset-preview-space) / 4) * 1em);
|
||||
height: calc((var(--theme-accent-preset-preview-space) / 4) * 1em);
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-accent-preset-preview {
|
||||
background-color: hsl(var(--theme-accent-preset-color-hsl-h), calc(var(--theme-accent-preset-color-hsl-s) * 1%), calc(var(--theme-accent-preset-color-hsl-l) * 1%));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* @media (min-width: 550px) {
|
||||
:root {
|
||||
--theme-accent-preset-preview-space: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
--theme-accent-preset-preview-space: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
:root {
|
||||
--theme-accent-preset-preview-space: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
:root {
|
||||
--theme-accent-preset-preview-space: 5;
|
||||
}
|
||||
} */
|
||||
93
src/component/accentPresetButton/index.js
Normal file
93
src/component/accentPresetButton/index.js
Normal file
@ -0,0 +1,93 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { theme } from '../theme';
|
||||
import { toolbar } from '../toolbar';
|
||||
import { themeSetting } from '../menuContent/themeSetting';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { convertColor } from '../../utility/convertColor';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const AccentPresetButton = function({ presetData = false } = {}) {
|
||||
|
||||
this.name = () => {
|
||||
|
||||
let fullName = presetData.name;
|
||||
|
||||
if (presetData.prefix) {
|
||||
fullName = presetData.prefix + ' ' + presetData.name.toLowerCase();
|
||||
};
|
||||
|
||||
return fullName;
|
||||
|
||||
};
|
||||
|
||||
this.element = {
|
||||
button: new Button({
|
||||
text: this.name(),
|
||||
title: this.name(),
|
||||
srOnly: true,
|
||||
classList: ['theme-accent-preset-button', 'theme-accent-preset-type-' + presetData.type],
|
||||
func: () => {
|
||||
|
||||
state.get.current().theme.accent.rgb = convertColor.hsl.rgb(presetData.hsl);
|
||||
|
||||
state.get.current().theme.accent.hsl = presetData.hsl;
|
||||
|
||||
applyCSSVar([
|
||||
'theme.accent.rgb.r',
|
||||
'theme.accent.rgb.g',
|
||||
'theme.accent.rgb.b',
|
||||
'theme.accent.hsl.h',
|
||||
'theme.accent.hsl.s',
|
||||
'theme.accent.hsl.l'
|
||||
]);
|
||||
|
||||
toolbar.current.update.style();
|
||||
|
||||
toolbar.current.update.accent();
|
||||
|
||||
themeSetting.control.accent.color.update();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
}),
|
||||
preview: node('span|class:theme-accent-preset-preview')
|
||||
};
|
||||
|
||||
this.previewTile = () => {
|
||||
|
||||
this.element.preview.style.setProperty('--theme-accent-preset-color-hsl-h', presetData.hsl.h);
|
||||
|
||||
this.element.preview.style.setProperty('--theme-accent-preset-color-hsl-s', presetData.hsl.s);
|
||||
|
||||
this.element.preview.style.setProperty('--theme-accent-preset-color-hsl-l', presetData.hsl.l);
|
||||
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
this.previewTile();
|
||||
|
||||
this.element.button.button.appendChild(this.element.preview);
|
||||
|
||||
};
|
||||
|
||||
this.button = () => {
|
||||
|
||||
return this.element.button.button;
|
||||
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
};
|
||||
1
src/component/appName/index.js
Normal file
1
src/component/appName/index.js
Normal file
@ -0,0 +1 @@
|
||||
export const appName = 'nightTab';
|
||||
107
src/component/base/animation/index.css
Normal file
107
src/component/base/animation/index.css
Normal file
@ -0,0 +1,107 @@
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate3d(-1.2em, 0, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate3d(1.2em, 0, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(-1em, 0, 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate3d(1em, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(-0.8em, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(0.8em, 0, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(-0.3em, 0, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate3d(0.3em, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-0.1em, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jello {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
122
src/component/base/base/index.css
Normal file
122
src/component/base/base/index.css
Normal file
@ -0,0 +1,122 @@
|
||||
:root {
|
||||
--base-size: 16;
|
||||
--font-size: calc(var(--base-size) * 1px);
|
||||
}
|
||||
|
||||
/* @media (min-width: 900px) {
|
||||
:root {
|
||||
--base-size: 16;
|
||||
}
|
||||
} */
|
||||
|
||||
::selection {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: hsl(var(--theme-accent-rgb-text));
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: hsl(var(--theme-primary-010));
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.6;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
html.is-theme-style-dark,
|
||||
.is-theme-style-dark body,
|
||||
html.is-theme-style-light,
|
||||
.is-theme-style-light body {
|
||||
background-color: hsl(var(--theme-primary-010));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
||||
html.is-theme-style-system,
|
||||
.is-theme-style-system body {
|
||||
background-color: hsl(var(--theme-primary-010));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
html.is-theme-style-system,
|
||||
.is-theme-style-system body {
|
||||
background-color: hsl(var(--theme-primary-010));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
}
|
||||
|
||||
html.is-theme-background-type-theme,
|
||||
.is-theme-background-type-theme body {
|
||||
background-color: hsl(var(--theme-background-theme));
|
||||
}
|
||||
|
||||
html.is-theme-background-type-accent,
|
||||
.is-theme-background-type-accent body {
|
||||
background-color: rgb(var(--theme-background-accent));
|
||||
}
|
||||
|
||||
html.is-theme-background-type-color,
|
||||
.is-theme-background-type-color body {
|
||||
background-color: rgb(var(--theme-background-color));
|
||||
}
|
||||
|
||||
.is-layout-alignment-top-left body {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-top-center body {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-top-right body {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-layout-alignment-center-left body {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-center-center body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-center-right body {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottom-left body {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottom-center body {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottom-right body {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
146
src/component/base/font/index.css
Normal file
146
src/component/base/font/index.css
Normal file
@ -0,0 +1,146 @@
|
||||
/* open sans */
|
||||
/* normal */
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Light"),
|
||||
local("OpenSans-Light"),
|
||||
url("../../../font/open-sans/open-sans-300.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-300.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-300.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Regular"),
|
||||
local("OpenSans-Regular"),
|
||||
url("../../../font/open-sans/open-sans-400.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-400.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-400.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans SemiBold"),
|
||||
local("OpenSans-SemiBold"),
|
||||
url("../../../font/open-sans/open-sans-600.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-600.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-600.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Bold"),
|
||||
local("OpenSans-Bold"),
|
||||
url("../../../font/open-sans/open-sans-700.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-700.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-700.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans ExtraBold"),
|
||||
local("OpenSans-ExtraBold"),
|
||||
url("../../../font/open-sans/open-sans-800.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-800.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-800.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* italic */
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Light Italic"),
|
||||
local("OpenSans-LightItalic"),
|
||||
url("../../../font/open-sans/open-sans-italic-300.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-italic-300.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-italic-300.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Italic"),
|
||||
local("OpenSans-Italic"),
|
||||
url("../../../font/open-sans/open-sans-italic-400.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-italic-400.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-italic-400.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans SemiBold Italic"),
|
||||
local("OpenSans-SemiBoldItalic"),
|
||||
url("../../../font/open-sans/open-sans-italic-600.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-italic-600.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-italic-600.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Bold Italic"),
|
||||
local("OpenSans-BoldItalic"),
|
||||
url("../../../font/open-sans/open-sans-italic-700.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-italic-700.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-italic-700.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans ExtraBold Italic"),
|
||||
local("OpenSans-ExtraBoldItalic"),
|
||||
url("../../../font/open-sans/open-sans-italic-800.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-italic-800.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-italic-800.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* fjalla one */
|
||||
/* normal */
|
||||
@font-face {
|
||||
font-family: "Fjalla One";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Fjalla One"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.woff") format("woff"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.woff2") format("woff2"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.ttf") format("truetype");
|
||||
}
|
||||
11
src/component/base/index.js
Normal file
11
src/component/base/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import './base/index.css';
|
||||
import './font/index.css';
|
||||
import './animation/index.css';
|
||||
import './spacing/index.css';
|
||||
import './state/index.css';
|
||||
import './typography/index.css';
|
||||
import './version/index.css';
|
||||
import './zindex/index.css';
|
||||
import './utility/index.css';
|
||||
|
||||
export const base = {};
|
||||
0
src/css/spacing.css → src/component/base/spacing/index.css
Executable file → Normal file
0
src/css/spacing.css → src/component/base/spacing/index.css
Executable file → Normal file
32
src/css/state.css → src/component/base/state/index.css
Executable file → Normal file
32
src/css/state.css → src/component/base/state/index.css
Executable file → Normal file
@ -26,10 +26,6 @@
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.is-scrolll-disabled {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-small {
|
||||
transform: scale(0.5) !important;
|
||||
}
|
||||
@ -37,3 +33,31 @@
|
||||
.is-large {
|
||||
transform: scale(1.5) !important;
|
||||
}
|
||||
|
||||
.is-scroll-disabled {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-scroll-x-disabled {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.is-scroll-y-disabled {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.is-appear {
|
||||
animation: appear var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-shake {
|
||||
animation: shake var(--layout-transition-slow) 1;
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-jello {
|
||||
animation: jello var(--layout-transition-slow) 1;
|
||||
}
|
||||
36
src/css/typography.css → src/component/base/typography/index.css
Executable file → Normal file
36
src/css/typography.css → src/component/base/typography/index.css
Executable file → Normal file
@ -7,7 +7,7 @@ h6 {
|
||||
margin: 0 0 1em 0;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
color: rgb(var(--theme-color-18));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -55,7 +55,7 @@ h6 {
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(var(--theme-color-16));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -66,9 +66,9 @@ p:not(:last-child) {
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: var(--horizontal-rule-small);
|
||||
border-radius: var(--theme-radius);
|
||||
margin: calc(var(--form-wrap-space) * 2) 0;
|
||||
border-top: var(--layout-horizontal-rule-small);
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
margin: calc(var(--wrap-space) * 2) 0;
|
||||
clear: both;
|
||||
transition: border-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
@ -76,9 +76,9 @@ hr {
|
||||
b,
|
||||
caption,
|
||||
strong {
|
||||
color: rgb(var(--theme-style-text));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
i {
|
||||
@ -86,29 +86,29 @@ i {
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--theme-color-16));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration: underline;
|
||||
transition: text-decoration var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(var(--theme-color-18));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration-color: rgb(var(--theme-style-text));
|
||||
text-decoration-color: hsl(var(--theme-primary-text-010));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(var(--theme-style-text));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: rgb(var(--theme-style-text));
|
||||
text-decoration-color: rgb(var(--theme-style-text));
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration-color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
ol,
|
||||
@ -150,9 +150,9 @@ table {
|
||||
|
||||
table thead tr td,
|
||||
table thead tr th {
|
||||
background-color: rgb(var(--theme-color-03));
|
||||
background-color: hsl(var(--theme-primary-030));
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgb(var(--theme-color-04));
|
||||
border-bottom: 1px solid hsl(var(--theme-primary-040));
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
@ -164,7 +164,7 @@ table thead tr th {
|
||||
}
|
||||
|
||||
table tr:nth-child(odd) {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
background-color: hsl(var(--theme-primary-020));
|
||||
}
|
||||
|
||||
table tbody tr td,
|
||||
@ -177,7 +177,7 @@ table tbody tr th {
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(var(--theme-color-04));
|
||||
background-color: hsl(var(--theme-primary-040));
|
||||
padding: 0.2em 0.5em;
|
||||
border-radius: var(--theme-radius);
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
}
|
||||
34
src/css/utilities.css → src/component/base/utility/index.css
Executable file → Normal file
34
src/css/utilities.css → src/component/base/utility/index.css
Executable file → Normal file
@ -1,3 +1,11 @@
|
||||
:root {
|
||||
--utility-muted: var(--theme-primary-140);
|
||||
--utility-muted-hover: var(--theme-primary-140);
|
||||
--utility-muted-focus-active: var(--theme-primary-140);
|
||||
--utility-muted-checked: var(--theme-primary-140);
|
||||
--utility-muted-disabled: var(--theme-primary-030);
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
@ -20,31 +28,7 @@
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgb(var(--utilities-muted));
|
||||
}
|
||||
|
||||
.scroll-disabled {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-x-disabled {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.scroll-y-disabled {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.is-shake {
|
||||
animation: shake var(--layout-transition-slow) 1;
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-jello {
|
||||
animation: jello var(--layout-transition-slow) 1;
|
||||
color: hsl(var(--utility-muted));
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
40
src/component/base/version/index.css
Normal file
40
src/component/base/version/index.css
Normal file
@ -0,0 +1,40 @@
|
||||
:root {
|
||||
--version-icon-size: 22;
|
||||
--version-icon: calc((var(--version-icon-size) / 4) * 1em);
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 1rem;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: var(--wrap-space);
|
||||
align-items: center;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.version-app-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version-number:not(:last-child),
|
||||
.version-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version-number {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: hsl(var(--theme-accent-rgb-text));
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.version-icon {
|
||||
width: var(--version-icon);
|
||||
}
|
||||
|
||||
.version-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25em;
|
||||
}
|
||||
11
src/component/base/zindex/index.css
Normal file
11
src/component/base/zindex/index.css
Normal file
@ -0,0 +1,11 @@
|
||||
:root {
|
||||
--z-index-background: 1000;
|
||||
--z-index-layout: 2000;
|
||||
--z-index-toolbar: 3000;
|
||||
--z-index-edge: 4000;
|
||||
--z-index-dropdown: 5000;
|
||||
--z-index-shade: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--z-index-modal: 8000;
|
||||
--z-index-suggest: 9000;
|
||||
}
|
||||
1015
src/component/bookmark/index.css
Normal file
1015
src/component/bookmark/index.css
Normal file
File diff suppressed because it is too large
Load Diff
506
src/component/bookmark/index.js
Normal file
506
src/component/bookmark/index.js
Normal file
@ -0,0 +1,506 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { layout } from '../layout';
|
||||
import { group } from '../group';
|
||||
import { header } from '../header';
|
||||
import { bookmarkDefault } from '../bookmarkDefault';
|
||||
import { bookmarkPreset } from '../bookmarkPreset';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
|
||||
import { BookmarkTile } from '../bookmarkTile';
|
||||
import { GroupEmpty } from '../groupEmpty';
|
||||
import { BookmarkForm } from '../bookmarkForm';
|
||||
import { StagedBookmark } from '../stagedBookmark';
|
||||
import { StagedGroup } from '../stagedGroup';
|
||||
import { Modal } from '../modal';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
import { applyCSSVar } from '../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../utility/applyCSSState';
|
||||
import { set } from '../../utility/set';
|
||||
import { get } from '../../utility/get';
|
||||
import { sortArrayOfObject } from '../../utility/sortArrayOfObject';
|
||||
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const bookmark = {};
|
||||
|
||||
bookmark.element = {
|
||||
area: node('div|class:bookmark-area'),
|
||||
group: node('div|class:bookmark-group')
|
||||
};
|
||||
|
||||
bookmark.all = bookmarkPreset.get();
|
||||
|
||||
bookmark.area = {
|
||||
render: () => {
|
||||
|
||||
bookmark.element.area.appendChild(bookmark.element.group);
|
||||
|
||||
layout.element.bookmark.appendChild(bookmark.element.area);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.tile = {
|
||||
current: []
|
||||
};
|
||||
|
||||
bookmark.item = {
|
||||
mod: {
|
||||
add: (bookmarkData) => {
|
||||
|
||||
bookmark.all[bookmarkData.position.destination.group].items.splice(bookmarkData.position.destination.item, 0, bookmarkData.link);
|
||||
|
||||
},
|
||||
edit: (bookmarkData) => {
|
||||
|
||||
bookmark.all[bookmarkData.position.origin.group].items.splice(bookmarkData.position.origin.item, 1);
|
||||
|
||||
bookmark.all[bookmarkData.position.destination.group].items.splice(bookmarkData.position.destination.item, 0, bookmarkData.link);
|
||||
|
||||
},
|
||||
move: (bookmarkData) => {
|
||||
|
||||
bookmarkData.link = bookmark.all[bookmarkData.position.origin.group].items.splice(bookmarkData.position.origin.item, 1)[0];
|
||||
|
||||
bookmark.all[bookmarkData.position.destination.group].items.splice(bookmarkData.position.destination.item, 0, bookmarkData.link);
|
||||
|
||||
},
|
||||
remove: (bookmarkData) => {
|
||||
|
||||
bookmark.all[bookmarkData.position.origin.group].items.splice(bookmarkData.position.origin.item, 1);
|
||||
|
||||
},
|
||||
propagate: (bookmarkData) => {
|
||||
|
||||
if (bookmarkData.propagate.display || bookmarkData.propagate.layout || bookmarkData.propagate.theme) {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
if (bookmarkData.propagate.display) {
|
||||
item.display.visual.show = bookmarkData.link.display.visual.show;
|
||||
item.display.name.show = bookmarkData.link.display.name.show;
|
||||
};
|
||||
|
||||
if (bookmarkData.propagate.layout) {
|
||||
item.display.visual.size = bookmarkData.link.display.visual.size;
|
||||
item.display.name.size = bookmarkData.link.display.name.size;
|
||||
item.display.gutter = bookmarkData.link.display.gutter;
|
||||
item.display.rotate = bookmarkData.link.display.rotate;
|
||||
item.display.translate = bookmarkData.link.display.translate;
|
||||
item.display.alignment = bookmarkData.link.display.alignment;
|
||||
item.display.direction = bookmarkData.link.display.direction;
|
||||
item.display.order = bookmarkData.link.display.order;
|
||||
};
|
||||
|
||||
if (bookmarkData.propagate.theme) {
|
||||
item.accent = bookmarkData.link.accent;
|
||||
item.color = bookmarkData.link.color;
|
||||
item.border = bookmarkData.link.border;
|
||||
item.display.visual.shadow = bookmarkData.link.display.visual.shadow;
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
},
|
||||
applyVar: (path, value) => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
set({ object: item, path: path, value: value });
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
sort: {
|
||||
letter: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.name.text');
|
||||
});
|
||||
|
||||
},
|
||||
icon: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.visual.letter.text');
|
||||
});
|
||||
|
||||
},
|
||||
name: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items = sortArrayOfObject(item.items, 'display.visual.icon.name');
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
render: (groupIndex) => {
|
||||
|
||||
const addBookmarkToGroup = (bookmarkData, groupIndex, bookmarkIndex) => {
|
||||
|
||||
const currentBookmarkData = new StagedBookmark(bookmarkData);
|
||||
|
||||
currentBookmarkData.position.origin.group = groupIndex;
|
||||
|
||||
currentBookmarkData.position.origin.item = bookmarkIndex;
|
||||
|
||||
currentBookmarkData.position.destination.group = groupIndex;
|
||||
|
||||
currentBookmarkData.position.destination.item = bookmarkIndex;
|
||||
|
||||
const bookmarkTile = new BookmarkTile({ bookmarkData: currentBookmarkData });
|
||||
|
||||
bookmarkTile.tile().groupIndex = groupIndex;
|
||||
|
||||
bookmarkTile.tile().index = bookmarkIndex;
|
||||
|
||||
group.area.current[groupIndex].element.body.appendChild(bookmarkTile.tile());
|
||||
|
||||
bookmark.tile.current.push(bookmarkTile);
|
||||
|
||||
};
|
||||
|
||||
const addEmptyGroup = (groupIndex) => {
|
||||
|
||||
const emptyGroupItem = new GroupEmpty({ groupIndex: groupIndex });
|
||||
|
||||
group.area.current[groupIndex].element.body.appendChild(emptyGroupItem.empty());
|
||||
|
||||
};
|
||||
|
||||
if (state.get.current().search) {
|
||||
|
||||
// searching
|
||||
|
||||
if (header.element.search.resultCount().total > 0) {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
|
||||
const groupIndex = i;
|
||||
|
||||
if (header.element.search.resultCount().group[groupIndex].searchMatch > 0) {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
const bookmarkIndex = i;
|
||||
|
||||
if (item.searchMatch) {
|
||||
|
||||
addBookmarkToGroup(item, groupIndex, bookmarkIndex);
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
// not searching
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
|
||||
const groupIndex = i;
|
||||
|
||||
if (item.items.length > 0) {
|
||||
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
const bookmarkIndex = i;
|
||||
|
||||
addBookmarkToGroup(item, groupIndex, bookmarkIndex);
|
||||
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
addEmptyGroup(groupIndex);
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
},
|
||||
clear: () => {
|
||||
|
||||
bookmark.tile.current = [];
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.edit = {
|
||||
open: () => {
|
||||
|
||||
state.get.current().bookmark.edit = true;
|
||||
|
||||
bookmark.edit.render();
|
||||
|
||||
},
|
||||
close: () => {
|
||||
|
||||
state.get.current().bookmark.edit = false;
|
||||
|
||||
bookmark.edit.render();
|
||||
|
||||
},
|
||||
toggle: () => {
|
||||
|
||||
if (state.get.current().bookmark.edit) {
|
||||
bookmark.edit.close();
|
||||
} else {
|
||||
bookmark.edit.open();
|
||||
};
|
||||
|
||||
},
|
||||
render: () => {
|
||||
|
||||
applyCSSState('bookmark.edit');
|
||||
|
||||
if (bookmark.tile.current.length > 0) {
|
||||
|
||||
bookmark.tile.current.forEach((item, i) => {
|
||||
|
||||
if (state.get.current().bookmark.edit) {
|
||||
item.control.enable();
|
||||
} else {
|
||||
item.control.disable();
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.direction = {
|
||||
mod: {
|
||||
vertical: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
item.display.direction = 'vertical';
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
horizontal: () => {
|
||||
|
||||
bookmark.all.forEach((item, i) => {
|
||||
item.items.forEach((item, i) => {
|
||||
|
||||
item.display.direction = 'horizontal';
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.add = {
|
||||
mod: {
|
||||
open: () => { state.get.current().bookmark.add = true; },
|
||||
close: () => { state.get.current().bookmark.add = false; }
|
||||
},
|
||||
render: ({
|
||||
groupIndex = false
|
||||
} = {}) => {
|
||||
|
||||
const newBookmarkData = new StagedBookmark();
|
||||
|
||||
newBookmarkData.type.new = true;
|
||||
|
||||
newBookmarkData.position.destination.item = (bookmark.all.length > 0) ? bookmark.all[0].items.length : 0;
|
||||
|
||||
if (groupIndex || groupIndex === 0) {
|
||||
newBookmarkData.position.destination.group = groupIndex;
|
||||
|
||||
newBookmarkData.position.destination.item = bookmark.all[groupIndex].items.length;
|
||||
};
|
||||
|
||||
if (!bookmark.all.length > 0) {
|
||||
newBookmarkData.group.destination = 'new';
|
||||
};
|
||||
|
||||
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
|
||||
|
||||
const addModal = new Modal({
|
||||
heading: 'Add a new Bookmark',
|
||||
content: bookmarkForm.form(),
|
||||
successText: 'Add',
|
||||
width: 60,
|
||||
maxHeight: true,
|
||||
openAction: () => {
|
||||
|
||||
bookmark.add.mod.open();
|
||||
|
||||
data.save();
|
||||
|
||||
},
|
||||
closeAction: () => {
|
||||
|
||||
bookmark.add.mod.close();
|
||||
|
||||
data.save();
|
||||
|
||||
},
|
||||
successAction: () => {
|
||||
|
||||
switch (newBookmarkData.group.destination) {
|
||||
case 'new':
|
||||
|
||||
const newGroupData = new StagedGroup();
|
||||
|
||||
newGroupData.group.name.text = newBookmarkData.group.name;
|
||||
|
||||
newGroupData.newGroup();
|
||||
|
||||
group.item.mod.add(newGroupData);
|
||||
|
||||
newBookmarkData.position.destination.group = bookmark.all.length - 1;
|
||||
|
||||
layout.area.assemble();
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
newBookmarkData.link.timestamp = new Date().getTime();
|
||||
|
||||
bookmark.item.mod.add(newBookmarkData);
|
||||
|
||||
bookmark.item.mod.propagate(newBookmarkData);
|
||||
|
||||
bookmark.add.mod.close();
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
},
|
||||
dismissAction: () => {
|
||||
|
||||
bookmark.add.mod.close();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
addModal.open();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.sort = {
|
||||
sortable: [],
|
||||
bind: () => {
|
||||
|
||||
bookmark.sort.sortable = [];
|
||||
|
||||
group.area.current.forEach((item, i) => {
|
||||
|
||||
bookmark.sort.sortable.push(Sortable.create(item.element.body, {
|
||||
handle: '.bookmark-control-sort',
|
||||
group: 'bookmark-sort',
|
||||
ghostClass: 'bookmark-sort-placeholder',
|
||||
animation: 500,
|
||||
easing: 'cubic-bezier(0.8, 0.8, 0.4, 1.4)',
|
||||
filter: '.group-empty',
|
||||
onEnd: (event) => {
|
||||
|
||||
// console.log('============ debug sort ============');
|
||||
// console.log(event);
|
||||
// console.log('group:', 'origin', event.from.position.origin, 'destination', event.to.position.origin);
|
||||
// console.log('item:', 'origin', event.oldIndex, 'destination', event.newIndex);
|
||||
|
||||
const newBookmarkData = new StagedBookmark();
|
||||
|
||||
newBookmarkData.position.origin.group = event.from.position.origin;
|
||||
|
||||
newBookmarkData.position.origin.item = event.oldIndex;
|
||||
|
||||
newBookmarkData.position.destination.group = event.to.position.origin;
|
||||
|
||||
newBookmarkData.position.destination.item = event.newIndex;
|
||||
|
||||
newBookmarkData.type.existing = true;
|
||||
|
||||
bookmark.item.mod.move(newBookmarkData);
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
bookmark.count = () => {
|
||||
|
||||
let count = 0;
|
||||
|
||||
bookmark.all.forEach((item, i) => { count = count + item.items.length });
|
||||
|
||||
return count;
|
||||
|
||||
};
|
||||
|
||||
bookmark.restore = (dataToRestore) => {
|
||||
bookmark.all = dataToRestore.bookmark;
|
||||
console.log('bookmark restored');
|
||||
};
|
||||
|
||||
bookmark.init = () => {
|
||||
applyCSSVar([
|
||||
'bookmark.size'
|
||||
]);
|
||||
applyCSSClass([
|
||||
'bookmark.item.justify',
|
||||
'bookmark.orientation',
|
||||
'bookmark.style'
|
||||
]);
|
||||
applyCSSState([
|
||||
'bookmark.show',
|
||||
'bookmark.hoverScale.show',
|
||||
'bookmark.shadow.show',
|
||||
'bookmark.line.show',
|
||||
'bookmark.url.show'
|
||||
]);
|
||||
bookmark.area.render();
|
||||
bookmark.add.mod.close();
|
||||
bookmark.edit.render();
|
||||
};
|
||||
|
||||
export { bookmark };
|
||||
19
src/component/bookmarkDefault/index.js
Normal file
19
src/component/bookmarkDefault/index.js
Normal file
@ -0,0 +1,19 @@
|
||||
export const bookmarkDefault = {
|
||||
url: '',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: '', size: 7 },
|
||||
visual: { show: true, type: 'letter', size: 25, letter: { text: '' }, icon: { name: '', prefix: '', label: '' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: null
|
||||
};
|
||||
17
src/component/bookmarkEmpty/index.css
Normal file
17
src/component/bookmarkEmpty/index.css
Normal file
@ -0,0 +1,17 @@
|
||||
.bookmark-empty {
|
||||
background-color: hsla(var(--theme-primary-040), 0.2);
|
||||
padding: 2em 3em;
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.bookmark-empty-string:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
43
src/component/bookmarkEmpty/index.js
Normal file
43
src/component/bookmarkEmpty/index.js
Normal file
@ -0,0 +1,43 @@
|
||||
import { state } from '../state';
|
||||
import { bookmark } from '../bookmark';
|
||||
|
||||
import { Button } from '../button';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const BookmarkEmpty = function() {
|
||||
|
||||
this.element = {
|
||||
empty: node('div|class:bookmark-empty'),
|
||||
description: node('p:No Groups or Bookmarks|class:bookmark-empty-headline small muted')
|
||||
};
|
||||
|
||||
this.control = {};
|
||||
|
||||
this.control.button = {
|
||||
add: new Button({
|
||||
text: 'Add a Bookmark',
|
||||
size: 'small',
|
||||
func: () => {
|
||||
bookmark.add.render();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
this.element.empty.appendChild(this.element.description);
|
||||
|
||||
this.element.empty.appendChild(this.control.button.add.button);
|
||||
|
||||
};
|
||||
|
||||
this.empty = () => {
|
||||
return this.element.empty;
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
};
|
||||
66
src/component/bookmarkForm/index.css
Normal file
66
src/component/bookmarkForm/index.css
Normal file
@ -0,0 +1,66 @@
|
||||
:root {
|
||||
--bookmark-form-space: calc((var(--form-space) / 4) * 1em);
|
||||
}
|
||||
|
||||
.bookmark-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.bookmark-form {
|
||||
display: grid;
|
||||
grid-template-columns: 6fr 2fr;
|
||||
gap: var(--bookmark-form-space);
|
||||
align-items: stretch;
|
||||
min-height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-form-main {
|
||||
padding-bottom: var(--bookmark-form-space);
|
||||
}
|
||||
|
||||
.bookmark-form-aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.bookmark-form-aside {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-form-text-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bookmark-form-text-icon:empty:before {
|
||||
content: "";
|
||||
background-color: hsl(var(--theme-primary-040));
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.bookmark-form-text-icon .bookmark-form-icon {
|
||||
transform: scale(1) rotate(0deg);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.bookmark-form-text-icon:not(.disabled):hover .bookmark-form-icon {
|
||||
transform: scale(2) rotate(360deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bookmark-form-text-icon:not(.disabled):active .bookmark-form-icon {
|
||||
transform: scale(4) rotate(360deg);
|
||||
}
|
||||
|
||||
.bookmark-form-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
1254
src/component/bookmarkForm/index.js
Normal file
1254
src/component/bookmarkForm/index.js
Normal file
File diff suppressed because it is too large
Load Diff
23
src/component/bookmarkMinMax/index.js
Normal file
23
src/component/bookmarkMinMax/index.js
Normal file
@ -0,0 +1,23 @@
|
||||
export const bookmarkMinMax = {
|
||||
display: {
|
||||
rotate: { min: -180, max: 180 },
|
||||
translate: { x: { min: -300, max: 300 }, y: { min: -300, max: 300 } },
|
||||
gutter: { min: 0, max: 500 },
|
||||
visual: {
|
||||
size: { min: 5, max: 200 },
|
||||
shadow: { size: { min: 0, max: 100 } }
|
||||
},
|
||||
name: { size: { min: 5, max: 200 } }
|
||||
},
|
||||
accent: {
|
||||
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
|
||||
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } }
|
||||
},
|
||||
color: {
|
||||
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
|
||||
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
|
||||
opacity: { min: 0, max: 100 }
|
||||
},
|
||||
border: { min: 0, max: 20 },
|
||||
background: { opacity: { min: 0, max: 100 } }
|
||||
};
|
||||
159
src/component/bookmarkPreset/index.js
Normal file
159
src/component/bookmarkPreset/index.js
Normal file
@ -0,0 +1,159 @@
|
||||
const bookmarkPreset = {};
|
||||
|
||||
bookmarkPreset.get = () => {
|
||||
return [{
|
||||
name: { text: 'Cool stuff', show: true },
|
||||
openAll: { show: true },
|
||||
items: [{
|
||||
url: 'https://zombiefox.github.io/awesomeSheet/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'awesomeSheet', size: 7 },
|
||||
visual: { show: true, type: 'icon', size: 25, letter: { text: 'AS' }, icon: { name: 'dice-d20', prefix: 'fas', label: 'Dice D20' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626297988913
|
||||
}, {
|
||||
url: 'https://www.amazon.co.uk/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Amazon', size: 7 },
|
||||
visual: { show: true, type: 'letter', size: 25, letter: { text: 'AZ' }, icon: { name: 'amazon', prefix: 'fab', label: 'Amazon' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626297999213
|
||||
}, {
|
||||
url: 'https://mail.google.com/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Gmail', size: 7 },
|
||||
visual: { show: true, type: 'letter', size: 25, letter: { text: 'GM' }, icon: { name: 'envelope', prefix: 'fas', label: 'Envelope' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298011293
|
||||
}, {
|
||||
url: 'https://www.reddit.com/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Reddit', size: 7 },
|
||||
visual: { show: true, type: 'icon', size: 25, letter: { text: 'R' }, icon: { name: 'reddit-alien', prefix: 'fab', label: 'reddit Alien' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298017175
|
||||
}, {
|
||||
url: 'https://www.netflix.com/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Netflix', size: 7 },
|
||||
visual: { show: true, type: 'icon', size: 25, letter: { text: 'N' }, icon: { name: 'film', prefix: 'fas', label: 'Film' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298022303
|
||||
}, {
|
||||
url: 'https://drive.google.com/drive/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Drive', size: 7 },
|
||||
visual: { show: true, type: 'letter', size: 25, letter: { text: 'DR' }, icon: { name: 'google-drive', prefix: 'fab', label: 'Drive' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298028996
|
||||
}]
|
||||
}, {
|
||||
name: { text: 'Dev sites', show: true },
|
||||
openAll: { show: true },
|
||||
items: [{
|
||||
url: 'https://devdocs.io/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Devdocs', size: 7 },
|
||||
visual: { show: true, type: 'icon', size: 25, letter: { text: 'DEV' }, icon: { name: 'code', prefix: 'fas', label: 'Code' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298034209
|
||||
}, {
|
||||
url: 'https://github.com/',
|
||||
display: {
|
||||
alignment: 'center-center',
|
||||
direction: 'vertical',
|
||||
order: 'visual-name',
|
||||
rotate: 0,
|
||||
translate: { x: 0, y: 0 },
|
||||
gutter: 25,
|
||||
name: { show: true, text: 'Github', size: 7 },
|
||||
visual: { show: true, type: 'icon', size: 25, letter: { text: 'GIT' }, icon: { name: 'github', prefix: 'fab', label: 'GitHub' }, image: { url: '' }, shadow: { size: 0 } }
|
||||
},
|
||||
accent: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } },
|
||||
color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 100 },
|
||||
background: { show: false, type: 'image', opacity: 100, image: { url: '' }, video: { url: '' } },
|
||||
border: 0,
|
||||
shape: { wide: false, tall: false },
|
||||
timestamp: 1626298038470
|
||||
}]
|
||||
}];
|
||||
};
|
||||
|
||||
export { bookmarkPreset };
|
||||
194
src/component/bookmarkPreview/index.css
Normal file
194
src/component/bookmarkPreview/index.css
Normal file
@ -0,0 +1,194 @@
|
||||
.bookmark-preview-area {
|
||||
position: sticky;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 1em;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.bookmark-preview-grid {
|
||||
display: grid;
|
||||
grid-auto-rows: var(--group-cell-height);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--group-cell-width), 1fr));
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
.bookmark-preview-grid-wide {
|
||||
grid-template-columns: repeat(2, var(--group-cell-width));
|
||||
}
|
||||
|
||||
.bookmark-preview-grid-tall {
|
||||
grid-template-rows: repeat(2, var(--group-cell-height));
|
||||
}
|
||||
|
||||
.bookmark-preview-grid-tall,
|
||||
.bookmark-preview-grid-wide {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.bookmark.bookmark-preview.bookmark-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.bookmark.bookmark-preview.bookmark-tall {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.is-bookmark-edit .bookmark.bookmark-preview .bookmark-front {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-bookmark-line-show .bookmark.bookmark-preview .bookmark-front {
|
||||
height: calc(100% - var(--layout-line-width));
|
||||
}
|
||||
|
||||
.is-bookmark-url-show .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-url-show .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-url-show .bookmark.bookmark-preview:hover .bookmark-front {
|
||||
height: calc(100% - var(--bookmark-url-height));
|
||||
}
|
||||
|
||||
.bookmark.bookmark-preview .bookmark-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-bookmark-edit .bookmark.bookmark-preview .bookmark-display {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview:focus .bookmark-front {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-bottom.is-bookmark-edit .bookmark.bookmark-preview:hover .bookmark-front {
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
}
|
||||
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-shadow-show.is-bookmark-orientation-top.is-bookmark-edit .bookmark.bookmark-preview:hover .bookmark-front {
|
||||
box-shadow: var(--theme-shadow-top-large);
|
||||
}
|
||||
|
||||
.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:focus-within .bookmark-url,
|
||||
.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:focus .bookmark-url,
|
||||
.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:hover .bookmark-url {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:focus-within .bookmark-url,
|
||||
.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:focus .bookmark-url,
|
||||
.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:hover .bookmark-url {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-line-show .bookmark.bookmark-preview .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-line-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-line-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-line-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--layout-line-width) + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + var(--layout-line-width) + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-line-show .bookmark.bookmark-preview .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-line-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-line-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-line-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--layout-line-width) + var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--layout-line-width) + var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--bookmark-url-height) + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + var(--bookmark-url-height) + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--bookmark-url-height) + var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--bookmark-url-height) + var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--layout-line-width) + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + var(--layout-line-width) + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--bookmark-url-height) + calc(var(--bookmark-clip-padding) * 1em)), 0 calc(0% + var(--bookmark-url-height) + calc(var(--bookmark-clip-padding) * 1em)));
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--layout-line-width) + var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--layout-line-width) + var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:focus .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:focus-within .bookmark-back,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom.is-bookmark-url-show.is-bookmark-line-show .bookmark.bookmark-preview:hover .bookmark-back {
|
||||
clip-path: polygon(0 calc(100% - calc(var(--bookmark-url-height) + var(--bookmark-clip-padding) * 1em)), 100% calc(100% - calc(var(--bookmark-url-height) + var(--bookmark-clip-padding) * 1em)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview .bookmark-front,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-edit.is-bookmark-orientation-top .bookmark.bookmark-preview:focus .bookmark-front {
|
||||
border-top-left-radius: calc(var(--theme-radius) * 0.01em);
|
||||
border-top-right-radius: calc(var(--theme-radius) * 0.01em);
|
||||
}
|
||||
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview .bookmark-front,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview:hover .bookmark-front,
|
||||
.is-bookmark-edit.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus .bookmark-front {
|
||||
border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
|
||||
border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
|
||||
}
|
||||
|
||||
.is-bookmark-url-show.is-bookmark-orientation-top .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-url-show.is-bookmark-orientation-top .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-url-show.is-bookmark-orientation-top .bookmark.bookmark-preview:hover .bookmark-front {
|
||||
border-top-left-radius: calc((var(--theme-radius) * 0.25) * 0.01em);
|
||||
border-top-right-radius: calc((var(--theme-radius) * 0.25) * 0.01em);
|
||||
}
|
||||
|
||||
.is-bookmark-url-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus .bookmark-front,
|
||||
.is-bookmark-url-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:focus-within .bookmark-front,
|
||||
.is-bookmark-url-show.is-bookmark-orientation-bottom .bookmark.bookmark-preview:hover .bookmark-front {
|
||||
border-bottom-left-radius: calc((var(--theme-radius) * 0.25) * 0.01em);
|
||||
border-bottom-right-radius: calc((var(--theme-radius) * 0.25) * 0.01em);
|
||||
}
|
||||
87
src/component/bookmarkPreview/index.js
Normal file
87
src/component/bookmarkPreview/index.js
Normal file
@ -0,0 +1,87 @@
|
||||
import { BookmarkTile } from '../bookmarkTile';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const BookmarkPreview = function({
|
||||
bookmarkData = false
|
||||
} = {}) {
|
||||
|
||||
this.area = node('div|class:bookmark-preview-area');
|
||||
|
||||
this.grid = node('div|class:bookmark-preview-grid');
|
||||
|
||||
this.title = node('div|class:bookmark-preview-title small muted');
|
||||
|
||||
this.shape = () => {
|
||||
|
||||
if (bookmarkData.link.shape.tall) {
|
||||
this.grid.classList.add('bookmark-preview-grid-tall');
|
||||
} else {
|
||||
this.grid.classList.remove('bookmark-preview-grid-tall');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.shape.wide) {
|
||||
this.grid.classList.add('bookmark-preview-grid-wide');
|
||||
} else {
|
||||
this.grid.classList.remove('bookmark-preview-grid-wide');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
|
||||
this.title.textContent = 'Preview (50% scale)';
|
||||
} else {
|
||||
this.title.textContent = 'Preview';
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.bookmarkTile = new BookmarkTile({
|
||||
bookmarkData: bookmarkData,
|
||||
preview: true
|
||||
});
|
||||
|
||||
this.update = {};
|
||||
|
||||
this.update.style = (newBookmarkData) => {
|
||||
bookmarkData = newBookmarkData;
|
||||
|
||||
this.bookmarkTile.update();
|
||||
|
||||
this.shape();
|
||||
};
|
||||
|
||||
this.update.assemble = (newBookmarkData) => {
|
||||
bookmarkData = newBookmarkData;
|
||||
|
||||
this.area.removeChild(this.title);
|
||||
|
||||
this.grid.removeChild(this.bookmarkTile.tile());
|
||||
|
||||
this.bookmarkTile = new BookmarkTile({
|
||||
bookmarkData: bookmarkData,
|
||||
preview: true
|
||||
});
|
||||
|
||||
this.shape();
|
||||
|
||||
this.assemble();
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
this.area.appendChild(this.title);
|
||||
|
||||
this.grid.appendChild(this.bookmarkTile.tile());
|
||||
|
||||
this.area.appendChild(this.grid);
|
||||
|
||||
this.shape(bookmarkData);
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
this.preview = () => {
|
||||
return this.area;
|
||||
};
|
||||
|
||||
};
|
||||
529
src/component/bookmarkTile/index.js
Normal file
529
src/component/bookmarkTile/index.js
Normal file
@ -0,0 +1,529 @@
|
||||
import { state } from '../state';
|
||||
import { data } from '../data';
|
||||
import { bookmark } from '../bookmark';
|
||||
import { group } from '../group';
|
||||
import { groupAndBookmark } from '../groupAndBookmark';
|
||||
|
||||
import { Button } from '../button';
|
||||
import { Video } from '../video';
|
||||
import { Modal } from '../modal';
|
||||
import { StagedBookmark } from '../stagedBookmark';
|
||||
import { StagedGroup } from '../stagedGroup';
|
||||
import { BookmarkForm } from '../bookmarkForm';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
|
||||
const BookmarkTile = function({
|
||||
bookmarkData = {},
|
||||
preview = false
|
||||
} = {}) {
|
||||
|
||||
this.element = {
|
||||
bookmark: node('div|class:bookmark'),
|
||||
front: node('div|class:bookmark-front'),
|
||||
back: node('div|class:bookmark-back'),
|
||||
content: {
|
||||
link: node('a|class:bookmark-link,tabindex:1'),
|
||||
display: {
|
||||
wrap: node('div|class:bookmark-display-wrap'),
|
||||
display: node('div|class:bookmark-display'),
|
||||
visual: {
|
||||
visual: node('div|class:bookmark-display-visual'),
|
||||
letter: complexNode({ tag: 'div', text: bookmarkData.link.display.visual.letter.text, attr: [{ key: 'class', value: 'bookmark-display-visual-letter' }] }),
|
||||
icon: node('div|class:bookmark-display-visual-icon'),
|
||||
faIcon: node('div|class:' + bookmarkData.link.display.visual.icon.prefix + ' fa-' + bookmarkData.link.display.visual.icon.name),
|
||||
image: node('div|class:bookmark-display-visual-image')
|
||||
},
|
||||
name: {
|
||||
name: node('div|class:bookmark-display-name'),
|
||||
text: node('div:' + bookmarkData.link.display.name.text + '|class:bookmark-display-name-text')
|
||||
}
|
||||
},
|
||||
background: {
|
||||
wrap: node('div|class:bookmark-background-wrap'),
|
||||
image: node('div|class:bookmark-background-image'),
|
||||
video: node('div|class:bookmark-background-video')
|
||||
}
|
||||
},
|
||||
url: {
|
||||
url: node('div|class:bookmark-url'),
|
||||
text: node('span|class:bookmark-url-text')
|
||||
},
|
||||
control: node('div|class:bookmark-control')
|
||||
};
|
||||
|
||||
if (preview) { this.element.bookmark.classList.add('bookmark-preview'); };
|
||||
|
||||
this.control = {};
|
||||
|
||||
this.control.button = {
|
||||
left: new Button({
|
||||
text: 'Move this bookmark left',
|
||||
srOnly: true,
|
||||
iconName: 'arrowKeyboardLeft',
|
||||
style: ['link'],
|
||||
title: 'Move this bookmark left',
|
||||
classList: ['bookmark-control-button', 'bookmark-control-left'],
|
||||
func: () => {
|
||||
|
||||
bookmarkData.position.destination.item--;
|
||||
|
||||
if (bookmarkData.position.destination.item < 0) {
|
||||
bookmarkData.position.destination.item = 0;
|
||||
};
|
||||
|
||||
bookmark.item.mod.move(bookmarkData);
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
}),
|
||||
sort: new Button({
|
||||
text: 'Drag bookmark to reorder',
|
||||
srOnly: true,
|
||||
iconName: 'drag',
|
||||
style: ['link'],
|
||||
title: 'Drag bookmark to reorder',
|
||||
classList: ['bookmark-control-button', 'bookmark-control-sort']
|
||||
}),
|
||||
right: new Button({
|
||||
text: 'Move this bookmark right',
|
||||
srOnly: true,
|
||||
iconName: 'arrowKeyboardRight',
|
||||
style: ['link'],
|
||||
title: 'Move this bookmark right',
|
||||
classList: ['bookmark-control-button', 'bookmark-control-right'],
|
||||
func: () => {
|
||||
|
||||
bookmarkData.position.destination.item++;
|
||||
|
||||
if (bookmarkData.position.destination.item > bookmark.all[bookmarkData.position.destination.group].items.length - 1) {
|
||||
bookmarkData.position.destination.item = bookmark.all[bookmarkData.position.destination.group].items.length - 1;
|
||||
};
|
||||
|
||||
bookmark.item.mod.move(bookmarkData);
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
}),
|
||||
edit: new Button({
|
||||
text: 'Edit this bookmark',
|
||||
srOnly: true,
|
||||
iconName: 'edit',
|
||||
style: ['link'],
|
||||
title: 'Edit this bookmark',
|
||||
classList: ['bookmark-control-button', 'bookmark-control-edit'],
|
||||
func: () => {
|
||||
|
||||
let newBookmarkData = new StagedBookmark();
|
||||
|
||||
newBookmarkData.link = JSON.parse(JSON.stringify(bookmarkData.link));
|
||||
|
||||
newBookmarkData.position = JSON.parse(JSON.stringify(bookmarkData.position));
|
||||
|
||||
newBookmarkData.type.existing = true;
|
||||
|
||||
const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
|
||||
|
||||
const editModal = new Modal({
|
||||
heading: isValidString(newBookmarkData.link.display.name.text) ? 'Edit ' + newBookmarkData.link.display.name.text : 'Edit unnamed bookmark',
|
||||
content: bookmarkForm.form(),
|
||||
successText: 'Save',
|
||||
width: 60,
|
||||
maxHeight: true,
|
||||
successAction: () => {
|
||||
|
||||
switch (newBookmarkData.group.destination) {
|
||||
case 'new':
|
||||
|
||||
newBookmarkData.position.destination.group = bookmark.all.length;
|
||||
|
||||
const newGroupData = new StagedGroup();
|
||||
|
||||
newGroupData.newGroup({
|
||||
name: newBookmarkData.group.name
|
||||
});
|
||||
|
||||
group.item.mod.add(newGroupData);
|
||||
|
||||
break;
|
||||
};
|
||||
|
||||
bookmark.item.mod.edit(newBookmarkData);
|
||||
|
||||
bookmark.item.mod.propagate(newBookmarkData);
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
editModal.open();
|
||||
|
||||
}
|
||||
}),
|
||||
remove: new Button({
|
||||
text: 'Remove this bookmark',
|
||||
srOnly: true,
|
||||
iconName: 'cross',
|
||||
style: ['link'],
|
||||
title: 'Remove this bookmark',
|
||||
classList: ['bookmark-control-button', 'bookmark-control-remove'],
|
||||
func: () => {
|
||||
|
||||
const removeModal = new Modal({
|
||||
heading: isValidString(bookmarkData.link.display.name.text) ? 'Remove ' + bookmarkData.link.display.name.text : 'Remove unnamed bookmark',
|
||||
content: 'Are you sure you want to remove this Bookmark? This can not be undone.',
|
||||
successText: 'Remove',
|
||||
width: 'small',
|
||||
successAction: () => {
|
||||
|
||||
bookmark.item.mod.remove(bookmarkData);
|
||||
|
||||
groupAndBookmark.render();
|
||||
|
||||
data.save();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
removeModal.open();
|
||||
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
this.control.disable = () => {
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].disable();
|
||||
};
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
};
|
||||
|
||||
this.control.enable = () => {
|
||||
|
||||
for (var key in this.control.button) {
|
||||
this.control.button[key].enable();
|
||||
};
|
||||
|
||||
this.control.searchState();
|
||||
|
||||
};
|
||||
|
||||
this.control.searchState = () => {
|
||||
|
||||
if (state.get.current().search) {
|
||||
this.control.button.left.disable();
|
||||
this.control.button.right.disable();
|
||||
this.control.button.sort.disable();
|
||||
} else if (state.get.current().bookmark.edit && !state.get.current().search) {
|
||||
this.control.button.left.enable();
|
||||
this.control.button.right.enable();
|
||||
this.control.button.sort.enable();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.style = (newBookmarkData) => {
|
||||
|
||||
if (newBookmarkData) {
|
||||
bookmarkData = newBookmarkData;
|
||||
};
|
||||
|
||||
if (isValidString(bookmarkData.link.url) && !preview) {
|
||||
this.element.content.link.setAttribute('href', trimString(bookmarkData.link.url));
|
||||
} else {
|
||||
this.element.content.link.setAttribute('href', '#');
|
||||
};
|
||||
|
||||
if (state.get.current().bookmark.newTab && !preview) {
|
||||
this.element.content.link.setAttribute('target', '_blank');
|
||||
};
|
||||
|
||||
if (!preview) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-transition-delay', bookmarkData.position.origin.item);
|
||||
};
|
||||
|
||||
this.element.bookmark.style.setProperty('--theme-bookmark-item-opacity', bookmarkData.link.color.opacity);
|
||||
|
||||
if (bookmarkData.link.color.opacity < 100) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-clip-padding', 0);
|
||||
};
|
||||
|
||||
if (bookmarkData.link.color.opacity < 40) {
|
||||
|
||||
this.element.bookmark.classList.add('is-bookmark-opacity-low');
|
||||
|
||||
} else {
|
||||
|
||||
this.element.bookmark.classList.remove('is-bookmark-opacity-low');
|
||||
|
||||
};
|
||||
|
||||
if (preview) {
|
||||
const alignment = ['top-left', 'top-center', 'top-right', 'center-left', 'center-center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'];
|
||||
|
||||
alignment.forEach((item, i) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-alignment-' + item);
|
||||
});
|
||||
const order = ['visual-name', 'name-visual'];
|
||||
|
||||
order.forEach((item, i) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-order-' + item);
|
||||
});
|
||||
const direction = ['vertical', 'horizontal'];
|
||||
|
||||
direction.forEach((item, i) => {
|
||||
this.element.bookmark.classList.remove('is-bookmark-direction-' + item);
|
||||
});
|
||||
};
|
||||
|
||||
this.element.bookmark.classList.add('is-bookmark-alignment-' + bookmarkData.link.display.alignment);
|
||||
|
||||
this.element.bookmark.classList.add('is-bookmark-order-' + bookmarkData.link.display.order);
|
||||
|
||||
this.element.bookmark.classList.add('is-bookmark-direction-' + bookmarkData.link.display.direction);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-translate-x', bookmarkData.link.display.translate.x);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-translate-y', bookmarkData.link.display.translate.y);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-rotate', bookmarkData.link.display.rotate);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-gutter', bookmarkData.link.display.gutter);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-size', bookmarkData.link.display.visual.size);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-image-url', 'url(' + trimString(bookmarkData.link.display.visual.image.url) + ')');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-name-size', bookmarkData.link.display.name.size);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-border', bookmarkData.link.border);
|
||||
|
||||
if (bookmarkData.link.accent.by == 'custom') {
|
||||
this.element.bookmark.style.setProperty('--theme-accent-rgb-r', bookmarkData.link.accent.rgb.r);
|
||||
this.element.bookmark.style.setProperty('--theme-accent-rgb-g', bookmarkData.link.accent.rgb.g);
|
||||
this.element.bookmark.style.setProperty('--theme-accent-rgb-b', bookmarkData.link.accent.rgb.b);
|
||||
this.element.bookmark.style.setProperty('--theme-accent', 'var(--theme-accent-rgb-r), var(--theme-accent-rgb-g), var(--theme-accent-rgb-b)');
|
||||
|
||||
this.element.bookmark.style.setProperty('--theme-accent-rgb-text', '0, 0%, calc(((((var(--theme-accent-rgb-r) * var(--theme-t-r)) + (var(--theme-accent-rgb-g) * var(--theme-t-g)) + (var(--theme-accent-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-color', 'var(--theme-accent)');
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-color-focus-hover', 'var(--theme-accent)');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.display.visual.shadow.size > 0) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-shadow-size', bookmarkData.link.display.visual.shadow.size);
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-shadow-offset', '0.1');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-shadow-blur', '0.1');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-visual-shadow-opacity', '0.1');
|
||||
|
||||
this.element.bookmark.style.setProperty(
|
||||
'--bookmark-display-visual-shadow',
|
||||
'0 ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-offset) * 8)) * 0.01em) ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-blur) * 8)) * 0.01em)' +
|
||||
'rgba(0, 0, 0, calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-opacity) / 25) * 1))), ' +
|
||||
'0 ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-offset) * 16)) * 0.01em) ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-blur) * 16)) * 0.01em)' +
|
||||
'rgba(0, 0, 0, calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-opacity) / 25) * 2))), ' +
|
||||
'0 ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-offset) * 32)) * 0.01em) ' +
|
||||
'calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-blur) * 32)) * 0.01em)' +
|
||||
'rgba(0, 0, 0, calc(var(--bookmark-display-visual-shadow-size) * calc(calc(var(--bookmark-display-visual-shadow-opacity) / 25) * 3)))'
|
||||
);
|
||||
} else {
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow-size');
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow-offset');
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow-blur');
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow-opacity');
|
||||
this.element.bookmark.style.removeProperty('--bookmark-display-visual-shadow');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.color.by == 'custom') {
|
||||
this.element.bookmark.style.setProperty('--theme-color-r', bookmarkData.link.color.rgb.r);
|
||||
this.element.bookmark.style.setProperty('--theme-color-g', bookmarkData.link.color.rgb.g);
|
||||
this.element.bookmark.style.setProperty('--theme-color-b', bookmarkData.link.color.rgb.b);
|
||||
|
||||
this.element.bookmark.style.setProperty('--theme-color-h', bookmarkData.link.color.hsl.h);
|
||||
this.element.bookmark.style.setProperty('--theme-color-s', bookmarkData.link.color.hsl.s);
|
||||
this.element.bookmark.style.setProperty('--theme-color-l', bookmarkData.link.color.hsl.l);
|
||||
|
||||
this.element.bookmark.style.setProperty('--theme-color', bookmarkData.link.color.hsl.h + ', ' + bookmarkData.link.color.hsl.s + '%, ' + bookmarkData.link.color.hsl.l + '%');
|
||||
this.element.bookmark.style.setProperty('--theme-color-text', '0, 0%, calc(((((var(--theme-color-r) * var(--theme-t-r)) + (var(--theme-color-g) * var(--theme-t-g)) + (var(--theme-color-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%)');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-color', 'var(--theme-color)');
|
||||
this.element.bookmark.style.setProperty('--bookmark-color-focus-hover', 'var(--theme-color)');
|
||||
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-name-color', 'var(--theme-color-text)');
|
||||
this.element.bookmark.style.setProperty('--bookmark-display-name-color-focus-hover', 'var(--theme-color-text)');
|
||||
|
||||
this.element.bookmark.style.setProperty('--button-link-text', 'var(--theme-color-text)');
|
||||
this.element.bookmark.style.setProperty('--button-link-text-focus-hover', 'var(--theme-color-text)');
|
||||
this.element.bookmark.style.setProperty('--button-link-text-active', 'var(--theme-color-text)');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.background.show) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-background-opacity', bookmarkData.link.background.opacity);
|
||||
|
||||
switch (bookmarkData.link.background.type) {
|
||||
case 'image':
|
||||
if (isValidString(bookmarkData.link.background.image.url)) {
|
||||
this.element.bookmark.style.setProperty('--bookmark-background-image-url', 'url(' + trimString(bookmarkData.link.background.image.url) + ')');
|
||||
};
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
if (bookmarkData.link.shape.tall) {
|
||||
this.element.bookmark.classList.add('bookmark-tall');
|
||||
};
|
||||
|
||||
if (bookmarkData.link.shape.wide) {
|
||||
this.element.bookmark.classList.add('bookmark-wide');
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
if (bookmarkData.link.display.visual.show || bookmarkData.link.display.name.show) {
|
||||
if (bookmarkData.link.display.visual.show) {
|
||||
switch (bookmarkData.link.display.visual.type) {
|
||||
case 'letter':
|
||||
if (isValidString(bookmarkData.link.display.visual.letter.text)) {
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.letter);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
break;
|
||||
|
||||
case 'icon':
|
||||
if (isValidString(bookmarkData.link.display.visual.icon.name)) {
|
||||
this.element.content.display.visual.icon.appendChild(this.element.content.display.visual.faIcon);
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.icon);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
break;
|
||||
|
||||
case 'image':
|
||||
if (isValidString(bookmarkData.link.display.visual.image.url)) {
|
||||
this.element.content.display.visual.visual.appendChild(this.element.content.display.visual.image);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.visual.visual);
|
||||
};
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
if (bookmarkData.link.display.name.show && isValidString(bookmarkData.link.display.name.text)) {
|
||||
this.element.content.display.name.name.appendChild(this.element.content.display.name.text);
|
||||
this.element.content.display.display.appendChild(this.element.content.display.name.name);
|
||||
};
|
||||
|
||||
this.element.content.display.wrap.appendChild(this.element.content.display.display);
|
||||
|
||||
this.element.content.link.appendChild(this.element.content.display.wrap);
|
||||
};
|
||||
|
||||
if (bookmarkData.link.background.show) {
|
||||
|
||||
switch (bookmarkData.link.background.type) {
|
||||
|
||||
case 'image':
|
||||
|
||||
this.element.content.background.wrap.appendChild(this.element.content.background.image);
|
||||
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
|
||||
this.element.content.background.wrap.appendChild(this.element.content.background.video);
|
||||
|
||||
if (isValidString(bookmarkData.link.background.video.url)) {
|
||||
const backgroundVideoElement = new Video({
|
||||
url: bookmarkData.link.background.video.url
|
||||
});
|
||||
|
||||
this.element.content.background.video.appendChild(backgroundVideoElement.video);
|
||||
};
|
||||
|
||||
break;
|
||||
};
|
||||
|
||||
this.element.content.link.appendChild(this.element.content.background.wrap);
|
||||
|
||||
};
|
||||
|
||||
this.element.bookmark.appendChild(this.element.front);
|
||||
|
||||
this.element.bookmark.appendChild(this.element.back);
|
||||
|
||||
this.element.front.appendChild(this.element.content.link);
|
||||
|
||||
this.element.control.appendChild(this.control.button.left.button);
|
||||
|
||||
this.element.control.appendChild(this.control.button.sort.button);
|
||||
|
||||
this.element.control.appendChild(this.control.button.right.button);
|
||||
|
||||
this.element.control.appendChild(this.control.button.edit.button);
|
||||
|
||||
this.element.control.appendChild(this.control.button.remove.button);
|
||||
|
||||
this.element.back.appendChild(this.element.control);
|
||||
|
||||
if (isValidString(bookmarkData.link.url)) {
|
||||
|
||||
this.element.url.text.textContent = trimString(bookmarkData.link.url).replace(/^https?\:\/\//i, '').replace(/\/+$/, '');
|
||||
|
||||
this.element.url.text.title = trimString(bookmarkData.link.url);
|
||||
|
||||
this.element.url.url.appendChild(this.element.url.text);
|
||||
|
||||
this.element.back.appendChild(this.element.url.url);
|
||||
|
||||
};
|
||||
|
||||
if (state.get.current().bookmark.edit) {
|
||||
this.control.enable();
|
||||
} else {
|
||||
this.control.disable();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.tile = () => {
|
||||
|
||||
return this.element.bookmark;
|
||||
|
||||
};
|
||||
|
||||
this.update = (newBookmarkData) => {
|
||||
|
||||
this.style(newBookmarkData);
|
||||
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
this.style();
|
||||
|
||||
};
|
||||
|
||||
export { BookmarkTile };
|
||||
71
src/css/button.css → src/component/button/index.css
Executable file → Normal file
71
src/css/button.css → src/component/button/index.css
Executable file → Normal file
@ -1,12 +1,40 @@
|
||||
:root {
|
||||
--button-background: var(--theme-primary-020);
|
||||
--button-background-focus-hover: var(--theme-primary-030);
|
||||
--button-background-active: var(--theme-primary-040);
|
||||
--button-background-disabled: var(--theme-primary-010);
|
||||
}
|
||||
|
||||
:root {
|
||||
--button-border: var(--theme-primary-030);
|
||||
--button-border-focus-hover: var(--theme-primary-050);
|
||||
--button-border-active: var(--theme-accent);
|
||||
--button-border-disabled: var(--theme-primary-010);
|
||||
}
|
||||
|
||||
:root {
|
||||
--button-text: var(--theme-primary-text-020);
|
||||
--button-text-focus-hover: var(--theme-primary-text-030);
|
||||
--button-text-active: var(--theme-primary-text-030);
|
||||
--button-text-disabled: var(--theme-primary-030);
|
||||
}
|
||||
|
||||
:root {
|
||||
--button-link-text: var(--theme-primary-text-010);
|
||||
--button-link-text-focus-hover: var(--theme-primary-text-010);
|
||||
--button-link-text-active: var(--theme-primary-text-010);
|
||||
--button-link-text-disabled: var(--theme-primary-030);
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: rgb(var(--button-background));
|
||||
background-color: hsl(var(--button-background));
|
||||
padding: 0.25em 1.25em;
|
||||
margin: 0;
|
||||
color: rgb(var(--button-text));
|
||||
color: hsl(var(--button-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
@ -14,13 +42,14 @@ input[type="submit"] {
|
||||
min-height: 2.5em;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
gap: 0.5em;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -37,8 +66,8 @@ input[type="reset"]:focus,
|
||||
input[type="reset"]:hover,
|
||||
input[type="submit"]:focus,
|
||||
input[type="submit"]:hover {
|
||||
background-color: rgb(var(--button-background-focus-hover));
|
||||
color: rgb(var(--button-text-focus-hover));
|
||||
background-color: hsl(var(--button-background-focus-hover));
|
||||
color: hsl(var(--button-text-focus-hover));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -48,8 +77,8 @@ button:active,
|
||||
input[type="button"]:active,
|
||||
input[type="reset"]:active,
|
||||
input[type="submit"]:active {
|
||||
background-color: rgb(var(--button-background-active));
|
||||
color: rgb(var(--button-text-active));
|
||||
background-color: hsl(var(--button-background-active));
|
||||
color: hsl(var(--button-text-active));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
transition: none;
|
||||
@ -57,7 +86,8 @@ input[type="submit"]:active {
|
||||
|
||||
button.active,
|
||||
.button.active {
|
||||
color: rgb(var(--button-text-focus-active));
|
||||
background-color: hsl(var(--button-background-active));
|
||||
color: hsl(var(--button-text-active));
|
||||
}
|
||||
|
||||
button.disabled,
|
||||
@ -76,8 +106,8 @@ button:disabled:active,
|
||||
.button:disabled:hover,
|
||||
.button:disabled:focus,
|
||||
.button:disabled:active {
|
||||
background-color: rgb(var(--button-background-disabled));
|
||||
color: rgb(var(--button-text-disabled));
|
||||
background-color: hsl(var(--button-background-disabled));
|
||||
color: hsl(var(--button-text-disabled));
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -85,7 +115,7 @@ button:disabled:active,
|
||||
.button-line:after {
|
||||
content: "";
|
||||
background: transparent;
|
||||
border-radius: var(--theme-radius);
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -98,7 +128,7 @@ button:disabled:active,
|
||||
|
||||
.button-line:focus:after,
|
||||
.button-line:hover:after {
|
||||
background-color: rgb(var(--button-border-focus-hover));
|
||||
background-color: hsl(var(--button-border-focus-hover));
|
||||
}
|
||||
|
||||
.button-line:active:after,
|
||||
@ -115,7 +145,7 @@ button:disabled:active,
|
||||
.button-line:disabled:hover:after,
|
||||
.button-line:disabled:focus:after,
|
||||
.button-line:disabled:active:after {
|
||||
background-color: rgb(var(--button-border-disabled));
|
||||
background-color: hsl(var(--button-border-disabled));
|
||||
}
|
||||
|
||||
.button-ring {
|
||||
@ -147,10 +177,8 @@ button:disabled:active,
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button [class^="icon-"],
|
||||
button [class*=" icon-"],
|
||||
.button [class^="icon-"],
|
||||
.button [class*=" icon-"] {
|
||||
button .icon,
|
||||
.button .icon {
|
||||
line-height: 1;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@ -193,24 +221,24 @@ button [class*=" button-"]:last-child,
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: rgb(var(--button-link-text));
|
||||
color: hsl(var(--button-link-text));
|
||||
}
|
||||
|
||||
.button-link:hover,
|
||||
.button-link:focus {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-focus-hover));
|
||||
color: hsl(var(--button-link-text-focus-hover));
|
||||
}
|
||||
|
||||
.button-link.active,
|
||||
.button-link:active {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-active));
|
||||
color: hsl(var(--button-link-text-active));
|
||||
}
|
||||
|
||||
.button-link.disabled,
|
||||
.button-link:disabled {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -219,5 +247,4 @@ button [class*=" button-"]:last-child,
|
||||
.button-link:hover:disabled,
|
||||
.button-link:focus:disabled {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
153
src/component/button/index.js
Normal file
153
src/component/button/index.js
Normal file
@ -0,0 +1,153 @@
|
||||
import { icon } from '../icon';
|
||||
|
||||
import * as form from '../form';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Button = function({
|
||||
text = 'Button',
|
||||
srOnly = false,
|
||||
iconName = false,
|
||||
iconPosition = false,
|
||||
block = false,
|
||||
size = false,
|
||||
style = [],
|
||||
title = false,
|
||||
classList = [],
|
||||
func = false
|
||||
} = {}) {
|
||||
|
||||
this.button = node('button|class:button,tabindex:1,type:button');
|
||||
|
||||
if (text) {
|
||||
const buttonText = node('span:' + text + '|class:button-text');
|
||||
|
||||
if (srOnly) {
|
||||
buttonText.classList.add('sr-only');
|
||||
};
|
||||
|
||||
this.button.appendChild(buttonText);
|
||||
};
|
||||
|
||||
if (iconName) {
|
||||
|
||||
switch (iconPosition) {
|
||||
|
||||
case 'right':
|
||||
this.button.append(icon.render(iconName));
|
||||
break;
|
||||
|
||||
default:
|
||||
case 'left':
|
||||
this.button.prepend(icon.render(iconName));
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
if (block) {
|
||||
this.button.classList.add('button-block');
|
||||
};
|
||||
|
||||
switch (size) {
|
||||
case 'small':
|
||||
this.button.classList.add('button-small');
|
||||
break;
|
||||
|
||||
case 'large':
|
||||
this.button.classList.add('button-large');
|
||||
break;
|
||||
};
|
||||
|
||||
if (title) {
|
||||
this.button.setAttribute('title', title);
|
||||
};
|
||||
|
||||
if (classList.length > 0) {
|
||||
classList.forEach((item, i) => {
|
||||
this.button.classList.add(item);
|
||||
});
|
||||
};
|
||||
|
||||
if (func) {
|
||||
this.button.addEventListener('click', (event) => {
|
||||
func();
|
||||
});
|
||||
};
|
||||
|
||||
this.style = {};
|
||||
|
||||
this.style.add = (style) => {
|
||||
|
||||
if (style) {
|
||||
|
||||
if (style.length > 0) {
|
||||
style.forEach((item, i) => {
|
||||
switch (item) {
|
||||
case 'link':
|
||||
this.button.classList.add('button-link');
|
||||
break;
|
||||
|
||||
case 'line':
|
||||
this.button.classList.add('button-line');
|
||||
break;
|
||||
|
||||
case 'ring':
|
||||
this.button.classList.add('button-ring');
|
||||
break;
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.style.remove = () => {
|
||||
|
||||
this.button.classList.remove('button-link');
|
||||
|
||||
this.button.classList.remove('button-line');
|
||||
|
||||
this.button.classList.remove('button-ring');
|
||||
|
||||
};
|
||||
|
||||
this.style.update = (style) => {
|
||||
|
||||
this.style.remove();
|
||||
|
||||
this.style.add(style);
|
||||
|
||||
};
|
||||
|
||||
this.style.add(style);
|
||||
|
||||
this.disable = () => {
|
||||
this.button.disabled = true;
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.button.disabled = false;
|
||||
};
|
||||
|
||||
this.deactive = () => {
|
||||
this.button.classList.remove('active');
|
||||
};
|
||||
|
||||
this.active = () => {
|
||||
this.button.classList.add('active');
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
return form.wrap({
|
||||
children: [
|
||||
this.button
|
||||
]
|
||||
})
|
||||
};
|
||||
|
||||
};
|
||||
96
src/css/clock.css → src/component/clock/index.css
Executable file → Normal file
96
src/css/clock.css → src/component/clock/index.css
Executable file → Normal file
@ -5,14 +5,57 @@
|
||||
font-family: var(--theme-font-display-name);
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
color: rgb(var(--theme-style-text));
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.clock-hour,
|
||||
.clock-separator,
|
||||
.clock-minute,
|
||||
.clock-second,
|
||||
.clock-meridiem {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clock-separator {
|
||||
justify-content: center;
|
||||
color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.is-theme-background-type-accent .clock-separator {
|
||||
justify-content: center;
|
||||
color: hsl(var(--theme-accent-rgb-text));
|
||||
}
|
||||
|
||||
.clock-hour,
|
||||
.clock-minute,
|
||||
.clock-second,
|
||||
.clock-meridiem {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-theme-background-type-accent .clock-hour,
|
||||
.is-theme-background-type-accent .clock-minute,
|
||||
.is-theme-background-type-accent .clock-second,
|
||||
.is-theme-background-type-accent .clock-meridiem {
|
||||
color: hsl(var(--theme-accent-rgb-text));
|
||||
}
|
||||
|
||||
.is-theme-background-type-color .clock-hour,
|
||||
.is-theme-background-type-color .clock-minute,
|
||||
.is-theme-background-type-color .clock-second,
|
||||
.is-theme-background-type-color .clock-meridiem {
|
||||
color: hsl(var(--theme-background-color-rgb-text));
|
||||
}
|
||||
|
||||
.is-header-item-justify-left .clock {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
@ -27,54 +70,3 @@
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.clock-separator,
|
||||
.clock-hours,
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clock-separator {
|
||||
justify-content: center;
|
||||
color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.clock-hours,
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
justify-content: center;
|
||||
/* min-width: 1.25em; */
|
||||
}
|
||||
|
||||
.is-header-item-justify-left .clock-item:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.is-header-item-justify-center .clock-item:not(:first-child) {
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
.is-header-item-justify-center .clock-item:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
.is-header-item-justify-right .clock-item:not(:first-child) {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.clock-hours {
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.clock-minutes,
|
||||
.clock-seconds,
|
||||
.clock-meridiem {
|
||||
color: rgb(var(--theme-color-16));
|
||||
}
|
||||
251
src/component/clock/index.js
Normal file
251
src/component/clock/index.js
Normal file
@ -0,0 +1,251 @@
|
||||
import { state } from '../state';
|
||||
|
||||
import { node } from '../../utility/node';
|
||||
import { ordinalWord } from '../../utility/ordinalWord';
|
||||
import { wordNumber } from '../../utility/wordNumber';
|
||||
import { trimString } from '../../utility/trimString';
|
||||
import { isValidString } from '../../utility/isValidString';
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { clearChildNode } from '../../utility/clearChildNode';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Clock = function({} = {}) {
|
||||
|
||||
this.now;
|
||||
|
||||
this.bind = {};
|
||||
|
||||
this.bind.tick = () => {
|
||||
|
||||
window.setInterval(() => {
|
||||
this.update();
|
||||
}, 1000);
|
||||
|
||||
};
|
||||
|
||||
this.element = {
|
||||
clock: node('div|class:clock'),
|
||||
hour: node('span|class:clock-item clock-hour'),
|
||||
minute: node('span|class:clock-item clock-minute'),
|
||||
second: node('span|class:clock-item clock-second'),
|
||||
meridiem: node('span|class:clock-item clock-meridiem')
|
||||
};
|
||||
|
||||
this.string = {};
|
||||
|
||||
this.string.hour = () => {
|
||||
|
||||
let value;
|
||||
|
||||
switch (state.get.current().header.clock.hour.display) {
|
||||
|
||||
case 'word':
|
||||
|
||||
value = this.now.hours();
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
|
||||
value = value - 12;
|
||||
};
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
|
||||
value = 12;
|
||||
};
|
||||
|
||||
value = wordNumber(value);
|
||||
|
||||
if (state.get.current().header.clock.hour24.show && this.now.hours() > 0 && this.now.hours() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'number':
|
||||
|
||||
value = this.now.hours();
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() > 12) {
|
||||
value = value - 12;
|
||||
};
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && this.now.hours() == 0) {
|
||||
value = 12;
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.hour24.show && this.now.hours() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
return value;
|
||||
|
||||
};
|
||||
|
||||
this.string.minute = () => {
|
||||
|
||||
let value;
|
||||
|
||||
switch (state.get.current().header.clock.minute.display) {
|
||||
|
||||
case 'word':
|
||||
|
||||
value = wordNumber(this.now.minutes());
|
||||
|
||||
if (this.now.minutes() > 0 && this.now.minutes() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'number':
|
||||
|
||||
value = this.now.minutes();
|
||||
|
||||
if (this.now.minutes() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
return value;
|
||||
|
||||
};
|
||||
|
||||
this.string.second = () => {
|
||||
|
||||
let value;
|
||||
|
||||
switch (state.get.current().header.clock.second.display) {
|
||||
|
||||
case 'word':
|
||||
|
||||
value = wordNumber(this.now.seconds());
|
||||
|
||||
if (this.now.seconds() > 0 && this.now.seconds() < 10) {
|
||||
value = 'Zero ' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
case 'number':
|
||||
|
||||
value = this.now.seconds();
|
||||
|
||||
if (this.now.seconds() < 10) {
|
||||
value = '0' + value;
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
return value;
|
||||
|
||||
};
|
||||
|
||||
this.string.meridiem = () => {
|
||||
|
||||
return this.now.format('A');
|
||||
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
clearChildNode(this.element.clock);
|
||||
|
||||
if (state.get.current().header.clock.hour.show) {
|
||||
this.element.clock.appendChild(this.element.hour);
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.minute.show) {
|
||||
this.element.clock.appendChild(this.element.minute);
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.second.show) {
|
||||
this.element.clock.appendChild(this.element.second);
|
||||
};
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
|
||||
this.element.clock.appendChild(this.element.meridiem);
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.separator.show) {
|
||||
|
||||
let separatorCharacter;
|
||||
|
||||
if (isValidString(state.get.current().header.clock.separator.text)) {
|
||||
separatorCharacter = trimString(state.get.current().header.clock.separator.text);
|
||||
} else {
|
||||
separatorCharacter = ':';
|
||||
};
|
||||
|
||||
let parts = this.element.clock.querySelectorAll('span');
|
||||
|
||||
if (parts.length > 1) {
|
||||
|
||||
parts.forEach((item, i) => {
|
||||
|
||||
if (i > 0 && item != this.element.meridiem) {
|
||||
|
||||
let separator = complexNode({
|
||||
tag: 'span',
|
||||
text: separatorCharacter,
|
||||
attr: [{
|
||||
key: 'class',
|
||||
value: 'clock-item clock-separator'
|
||||
}]
|
||||
});
|
||||
|
||||
this.element.clock.insertBefore(separator, item);
|
||||
|
||||
};
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.update = () => {
|
||||
|
||||
this.assemble();
|
||||
|
||||
this.now = moment();
|
||||
|
||||
if (state.get.current().header.clock.hour.show) {
|
||||
this.element.hour.innerHTML = this.string.hour();
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.minute.show) {
|
||||
this.element.minute.innerHTML = this.string.minute();
|
||||
};
|
||||
|
||||
if (state.get.current().header.clock.second.show) {
|
||||
this.element.second.innerHTML = this.string.second();
|
||||
};
|
||||
|
||||
if (!state.get.current().header.clock.hour24.show && state.get.current().header.clock.meridiem.show) {
|
||||
this.element.meridiem.innerHTML = this.string.meridiem();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
this.update();
|
||||
|
||||
this.bind.tick();
|
||||
|
||||
this.clock = () => {
|
||||
return this.element.clock;
|
||||
};
|
||||
|
||||
};
|
||||
57
src/component/collapse/index.css
Normal file
57
src/component/collapse/index.css
Normal file
@ -0,0 +1,57 @@
|
||||
.collapse {
|
||||
margin-top: calc(var(--wrap-space) * -1);
|
||||
position: relative;
|
||||
display: grid;
|
||||
transition: margin var(--layout-transition-fast);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.collapse-area {
|
||||
margin-top: calc(var(--wrap-space) - 1em);
|
||||
margin-right: -1em;
|
||||
margin-bottom: -1em;
|
||||
margin-left: -1em;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: margin var(--layout-transition-fast);
|
||||
}
|
||||
|
||||
.collapse-area.is-collapsed {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.collapse-spacer {
|
||||
padding: 1em;
|
||||
transition: margin var(--layout-transition-fast);
|
||||
}
|
||||
|
||||
.collapse-spacer>* {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.collapse-area.is-collapsed .collapse-spacer {
|
||||
margin-bottom: -200vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.collapse-toggle .icon {
|
||||
transition: transform var(--layout-transition-fast);
|
||||
}
|
||||
|
||||
.collapse-toggle.is-collapsed .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.collapse-spacer hr:first-child {
|
||||
margin-top: var(--wrap-space);
|
||||
}
|
||||
|
||||
/* debug */
|
||||
/* .collapse {
|
||||
outline: 1px dotted blue;
|
||||
}
|
||||
|
||||
.collapse-area {
|
||||
outline: 1px solid red;
|
||||
} */
|
||||
138
src/component/collapse/index.js
Normal file
138
src/component/collapse/index.js
Normal file
@ -0,0 +1,138 @@
|
||||
import { form } from '../form';
|
||||
import { icon } from '../icon';
|
||||
|
||||
import { complexNode } from '../../utility/complexNode';
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Collapse = function({
|
||||
type = false,
|
||||
radioGroup = false,
|
||||
checkbox = false,
|
||||
target = false
|
||||
} = {}) {
|
||||
|
||||
target.forEach((item, i) => {
|
||||
item.state = {
|
||||
collapsed: true
|
||||
};
|
||||
|
||||
item.area = node('div|class:collapse-area');
|
||||
|
||||
item.spacer = node('div|class:collapse-spacer');
|
||||
});
|
||||
|
||||
this.target = () => {
|
||||
return target;
|
||||
};
|
||||
|
||||
this.element = {
|
||||
collapse: node('div|class:collapse')
|
||||
};
|
||||
|
||||
this.collapse = () => {
|
||||
target.forEach((item, i) => {
|
||||
item.spacer.appendChild(item.content);
|
||||
|
||||
item.area.appendChild(item.spacer);
|
||||
|
||||
this.element.collapse.appendChild(item.area);
|
||||
});
|
||||
|
||||
return this.element.collapse;
|
||||
};
|
||||
|
||||
this.toggle = () => {
|
||||
target.forEach((item, i) => {
|
||||
if (item.state.collapsed) {
|
||||
item.state.collapsed = false;
|
||||
} else {
|
||||
item.state.collapsed = true;
|
||||
};
|
||||
});
|
||||
|
||||
this.update();
|
||||
};
|
||||
|
||||
this.renderTarget = (state, area) => {
|
||||
if (state) {
|
||||
area.classList.add('is-collapsed');
|
||||
// area.classList.remove('is-pop');
|
||||
area.setAttribute('aria-hidden', true);
|
||||
} else {
|
||||
area.classList.remove('is-collapsed');
|
||||
// area.classList.add('is-pop');
|
||||
area.removeAttribute('aria-hidden');
|
||||
};
|
||||
};
|
||||
|
||||
this.renderToggle = (state, toggle) => {
|
||||
if (state) {
|
||||
toggle.classList.remove('active');
|
||||
toggle.classList.remove('is-collapsed');
|
||||
} else {
|
||||
toggle.classList.add('active');
|
||||
toggle.classList.add('is-collapsed');
|
||||
};
|
||||
};
|
||||
|
||||
this.update = () => {
|
||||
|
||||
switch (type) {
|
||||
|
||||
case 'radio':
|
||||
|
||||
const selectedRadioValue = radioGroup.value();
|
||||
|
||||
target.forEach((item, i) => {
|
||||
this.renderTarget(!(item.id === selectedRadioValue), item.area);
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'checkbox':
|
||||
|
||||
let state = true;
|
||||
|
||||
if (checkbox.length > 1) {
|
||||
|
||||
let allCheckboxState = [];
|
||||
|
||||
checkbox.forEach(item => allCheckboxState.push(item.checked()));
|
||||
|
||||
state = allCheckboxState.some(item => item === true);
|
||||
|
||||
} else {
|
||||
|
||||
state = checkbox.checked();
|
||||
|
||||
};
|
||||
|
||||
target.forEach((item, i) => {
|
||||
this.renderTarget(!state, item.area);
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'toggle':
|
||||
|
||||
target.forEach((item, i) => {
|
||||
|
||||
this.renderTarget(item.state.collapsed, item.area);
|
||||
|
||||
if (item.toggle) {
|
||||
this.renderToggle(item.state.collapsed, item.toggle);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.update();
|
||||
|
||||
};
|
||||
76
src/component/control/checkbox/index.js
Normal file
76
src/component/control/checkbox/index.js
Normal file
@ -0,0 +1,76 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_checkbox = function({
|
||||
object = {},
|
||||
id = 'name',
|
||||
path = false,
|
||||
labelText = 'name',
|
||||
description = false,
|
||||
action = false,
|
||||
inputButton = false,
|
||||
inputHide = false,
|
||||
inputButtonStyle = false
|
||||
} = {}) {
|
||||
|
||||
this.checkbox = form.input.checkbox({
|
||||
id: id,
|
||||
checked: get({ object: object, path: path }),
|
||||
func: () => {
|
||||
|
||||
set({ object: object, path: path, value: this.checkbox.checked });
|
||||
|
||||
if (action) { action(); };
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
this.label = form.label({
|
||||
forInput: id,
|
||||
text: labelText,
|
||||
description: description,
|
||||
icon: true
|
||||
});
|
||||
|
||||
this.update = () => {
|
||||
this.checkbox.checked = get({ object: object, path: path });
|
||||
};
|
||||
|
||||
this.checked = () => {
|
||||
|
||||
return get({ object: object, path: path });
|
||||
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
|
||||
return form.wrap({
|
||||
children: [
|
||||
this.checkbox,
|
||||
this.label
|
||||
]
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.checkbox.disabled = true;
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.checkbox.disabled = false;
|
||||
};
|
||||
|
||||
};
|
||||
193
src/component/control/color/index.js
Normal file
193
src/component/control/color/index.js
Normal file
@ -0,0 +1,193 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_color = function({
|
||||
object = {},
|
||||
path = false,
|
||||
id = 'name',
|
||||
labelText = 'Name',
|
||||
srOnly = false,
|
||||
value = '#000000',
|
||||
defaultValue = false,
|
||||
action = false,
|
||||
extraButtons = []
|
||||
} = {}) {
|
||||
|
||||
this.label = form.label({
|
||||
forInput: id,
|
||||
text: labelText,
|
||||
srOnly: srOnly
|
||||
});
|
||||
|
||||
this.color = form.input.color({
|
||||
id: id,
|
||||
value: convertColor.rgb.hex(get({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
})),
|
||||
classList: ['form-group-item-half'],
|
||||
func: () => {
|
||||
|
||||
if (path) {
|
||||
|
||||
set({ object: object, path: path + '.rgb', value: convertColor.hex.rgb(this.color.value) });
|
||||
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.hsl',
|
||||
value: convertColor.rgb.hsl(get({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
}))
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
if (action) { action(); };
|
||||
|
||||
this.text.value = convertColor.rgb.hex(get({ object: object, path: path + '.rgb' }));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
this.text = form.input.text({
|
||||
value: convertColor.rgb.hex(get({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
})),
|
||||
max: 7,
|
||||
classList: ['form-group-item-half'],
|
||||
placeholder: 'Hex code',
|
||||
func: () => {
|
||||
|
||||
if (path) {
|
||||
|
||||
set({ object: object, path: path + '.rgb', value: convertColor.hex.rgb(this.text.value) });
|
||||
|
||||
};
|
||||
|
||||
if (action) { action(); };
|
||||
|
||||
this.update({ delay: true });
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
this.reset = new Button({
|
||||
text: false,
|
||||
iconName: 'replay',
|
||||
style: ['line'],
|
||||
classList: ['form-group-item-small'],
|
||||
func: () => {
|
||||
|
||||
set({ object: object, path: path + '.rgb', value: JSON.parse(JSON.stringify(defaultValue)) });
|
||||
|
||||
this.update({ all: true });
|
||||
|
||||
if (action) { action(); };
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
this.update = ({
|
||||
delay = false,
|
||||
all = false
|
||||
} = {}) => {
|
||||
|
||||
let delayedUpdate = null;
|
||||
|
||||
const updateControl = () => {
|
||||
|
||||
this.color.value = convertColor.rgb.hex(get({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
}));
|
||||
|
||||
if (all) {
|
||||
this.text.value = convertColor.rgb.hex(get({
|
||||
object: object,
|
||||
path: path + '.rgb'
|
||||
}));
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
if (delay) {
|
||||
clearTimeout(delayedUpdate);
|
||||
delayedUpdate = setTimeout(updateControl, 2000);
|
||||
} else {
|
||||
updateControl();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
|
||||
const formGroup = form.group({
|
||||
block: true,
|
||||
children: [
|
||||
this.color,
|
||||
this.text
|
||||
]
|
||||
});
|
||||
|
||||
if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
|
||||
formGroup.appendChild(this.reset.button);
|
||||
};
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
formGroup.appendChild(item.button);
|
||||
});
|
||||
};
|
||||
|
||||
const wrap = form.wrap({
|
||||
children: [
|
||||
this.label,
|
||||
formGroup
|
||||
]
|
||||
});
|
||||
|
||||
return wrap;
|
||||
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.label.classList.add('disabled');
|
||||
this.color.disabled = true;
|
||||
this.text.disabled = true;
|
||||
this.reset.disable();
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
item.disable();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.label.classList.remove('disabled');
|
||||
this.color.disabled = false;
|
||||
this.text.disabled = false;
|
||||
this.reset.enable();
|
||||
|
||||
if (extraButtons.length > 0) {
|
||||
extraButtons.forEach((item, i) => {
|
||||
item.enable();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
320
src/component/control/colorMixer/index.js
Normal file
320
src/component/control/colorMixer/index.js
Normal file
@ -0,0 +1,320 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
import { Control_color } from '../color';
|
||||
import { Control_sliderSlim } from '../sliderSlim';
|
||||
|
||||
export const Control_colorMixer = function({
|
||||
object = {},
|
||||
path = false,
|
||||
defaultValue = false,
|
||||
minMaxObject = false,
|
||||
id = 'name',
|
||||
labelText = 'name',
|
||||
srOnly = false,
|
||||
action = false
|
||||
} = {}) {
|
||||
|
||||
this.moreControlsToggle = new Button({
|
||||
text: false,
|
||||
iconName: 'arrowKeyboardDown',
|
||||
style: ['line'],
|
||||
classList: ['collapse-toggle', 'form-group-item-small'],
|
||||
func: () => {
|
||||
this.moreControlsCollapse.toggle();
|
||||
this.moreControlsUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
this.color = new Control_color({
|
||||
object: object,
|
||||
path: path,
|
||||
id: id + '-rgb',
|
||||
labelText: labelText,
|
||||
srOnly: srOnly,
|
||||
value: get({ object: object, path: path + '.rgb' }),
|
||||
defaultValue: defaultValue,
|
||||
extraButtons: [this.moreControlsToggle],
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.hsl',
|
||||
value: convertColor.rgb.hsl(get({ object: object, path: path + '.rgb' }))
|
||||
});
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderH = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.hsl.h',
|
||||
id: id + '-hsl-h',
|
||||
labelText: 'Hue',
|
||||
value: get({ object: object, path: path + '.hsl.h' }),
|
||||
min: get({ object: minMaxObject, path: path + '.hsl.h.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.hsl.h.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.rgb',
|
||||
value: convertColor.hsl.rgb(get({ object: object, path: path + '.hsl' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderS = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.hsl.s',
|
||||
id: id + '-hsl-s',
|
||||
labelText: 'Saturation',
|
||||
value: get({ object: object, path: path + '.hsl.s' }),
|
||||
min: get({ object: minMaxObject, path: path + '.hsl.s.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.hsl.s.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.rgb',
|
||||
value: convertColor.hsl.rgb(get({ object: object, path: path + '.hsl' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderL = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.hsl.l',
|
||||
id: id + '-hsl-l',
|
||||
labelText: 'Lightness',
|
||||
value: get({ object: object, path: path + '.hsl.l' }),
|
||||
min: get({ object: minMaxObject, path: path + '.hsl.l.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.hsl.l.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.rgb',
|
||||
value: convertColor.hsl.rgb(get({ object: object, path: path + '.hsl' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderR = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.rgb.r',
|
||||
id: id + '-rgb-r',
|
||||
labelText: 'Red',
|
||||
value: get({ object: object, path: path + '.rgb.r' }),
|
||||
min: get({ object: minMaxObject, path: path + '.rgb.r.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.rgb.r.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.hsl',
|
||||
value: convertColor.rgb.hsl(get({ object: object, path: path + '.rgb' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderG = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.rgb.g',
|
||||
id: id + '-rgb-g',
|
||||
labelText: 'Green',
|
||||
value: get({ object: object, path: path + '.rgb.g' }),
|
||||
min: get({ object: minMaxObject, path: path + '.rgb.g.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.rgb.g.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.hsl',
|
||||
value: convertColor.rgb.hsl(get({ object: object, path: path + '.rgb' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.colorSliderB = new Control_sliderSlim({
|
||||
object: object,
|
||||
path: path + '.rgb.b',
|
||||
id: id + '-rgb-b',
|
||||
labelText: 'Blue',
|
||||
value: get({ object: object, path: path + '.rgb.b' }),
|
||||
min: get({ object: minMaxObject, path: path + '.rgb.b.min' }),
|
||||
max: get({ object: minMaxObject, path: path + '.rgb.b.max' }),
|
||||
action: () => {
|
||||
set({
|
||||
object: object,
|
||||
path: path + '.hsl',
|
||||
value: convertColor.rgb.hsl(get({ object: object, path: path + '.rgb' }))
|
||||
});
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.moreControls = node('div', [
|
||||
this.colorSliderH.wrap(),
|
||||
this.colorSliderS.wrap(),
|
||||
this.colorSliderL.wrap(),
|
||||
this.colorSliderR.wrap(),
|
||||
this.colorSliderG.wrap(),
|
||||
this.colorSliderB.wrap()
|
||||
]);
|
||||
|
||||
this.moreControlsCollapse = new Collapse({
|
||||
type: 'toggle',
|
||||
target: [{
|
||||
toggle: this.moreControlsToggle.button,
|
||||
content: this.moreControls
|
||||
}]
|
||||
});
|
||||
|
||||
this.wrap = () => {
|
||||
return form.wrap({
|
||||
children: [
|
||||
this.color.wrap(),
|
||||
form.wrap({
|
||||
children: [
|
||||
form.indent({
|
||||
children: [
|
||||
this.moreControlsCollapse.collapse()
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.color.disable();
|
||||
|
||||
if (!this.moreControlsCollapse.target()[0].state.collapsed) {
|
||||
this.colorSliderH.disable();
|
||||
this.colorSliderS.disable();
|
||||
this.colorSliderL.disable();
|
||||
this.colorSliderR.disable();
|
||||
this.colorSliderG.disable();
|
||||
this.colorSliderB.disable();
|
||||
} else {
|
||||
this.moreControlsUpdate();
|
||||
};
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.color.enable();
|
||||
|
||||
if (!this.moreControlsCollapse.target()[0].state.collapsed) {
|
||||
this.colorSliderH.enable();
|
||||
this.colorSliderS.enable();
|
||||
this.colorSliderL.enable();
|
||||
this.colorSliderR.enable();
|
||||
this.colorSliderG.enable();
|
||||
this.colorSliderB.enable();
|
||||
} else {
|
||||
this.moreControlsUpdate();
|
||||
};
|
||||
};
|
||||
|
||||
this.moreControlsUpdate = () => {
|
||||
|
||||
if (this.moreControlsCollapse.target()[0].state.collapsed) {
|
||||
this.colorSliderH.disable();
|
||||
this.colorSliderS.disable();
|
||||
this.colorSliderL.disable();
|
||||
this.colorSliderR.disable();
|
||||
this.colorSliderG.disable();
|
||||
this.colorSliderB.disable();
|
||||
} else {
|
||||
this.colorSliderH.enable();
|
||||
this.colorSliderS.enable();
|
||||
this.colorSliderL.enable();
|
||||
this.colorSliderR.enable();
|
||||
this.colorSliderG.enable();
|
||||
this.colorSliderB.enable();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.update = () => {
|
||||
this.color.update({ all: true });
|
||||
this.colorSliderR.update();
|
||||
this.colorSliderG.update();
|
||||
this.colorSliderB.update();
|
||||
this.colorSliderH.update();
|
||||
this.colorSliderS.update();
|
||||
this.colorSliderL.update();
|
||||
};
|
||||
|
||||
this.moreControlsUpdate();
|
||||
|
||||
};
|
||||
54
src/component/control/groupText/index.js
Normal file
54
src/component/control/groupText/index.js
Normal file
@ -0,0 +1,54 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
import { clearChildNode } from '../../../utility/clearChildNode';
|
||||
|
||||
export const Control_groupText = function({
|
||||
text = false,
|
||||
classList = []
|
||||
} = {}) {
|
||||
|
||||
this.groupText = form.groupText({
|
||||
text: text,
|
||||
classList: classList
|
||||
});
|
||||
|
||||
this.update = (content) => {
|
||||
|
||||
clearChildNode(this.groupText);
|
||||
|
||||
if (typeof content === 'string' && isValidString(content)) {
|
||||
this.groupText.textContent = content;
|
||||
} else if (content && content != '') {
|
||||
this.groupText.appendChild(content);
|
||||
};
|
||||
};
|
||||
|
||||
this.wrap = () => {
|
||||
return form.wrap({
|
||||
children: [
|
||||
this.groupText
|
||||
]
|
||||
})
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.groupText.classList.add('disabled');
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.groupText.classList.remove('disabled');
|
||||
};
|
||||
|
||||
};
|
||||
51
src/component/control/helperText/index.js
Normal file
51
src/component/control/helperText/index.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { bookmark } from '../../bookmark';
|
||||
|
||||
import * as form from '../../form';
|
||||
|
||||
import { Button } from '../../button';
|
||||
import { Collapse } from '../../collapse';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { get } from '../../../utility/get';
|
||||
import { set } from '../../../utility/set';
|
||||
import { convertColor } from '../../../utility/convertColor';
|
||||
import { isValidString } from '../../../utility/isValidString';
|
||||
|
||||
export const Control_helperText = function({
|
||||
text = []
|
||||
} = {}) {
|
||||
|
||||
this.para = [];
|
||||
|
||||
text.forEach((item, i) => {
|
||||
this.para.push(form.helper({
|
||||
tag: 'p',
|
||||
text: item
|
||||
}));
|
||||
});
|
||||
|
||||
this.wrap = () => {
|
||||
const formWrap = form.wrap();
|
||||
|
||||
this.para.forEach((item, i) => {
|
||||
formWrap.appendChild(item);
|
||||
});
|
||||
|
||||
return formWrap;
|
||||
};
|
||||
|
||||
this.disable = () => {
|
||||
this.para.forEach((item, i) => {
|
||||
item.classList.add('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
this.enable = () => {
|
||||
this.para.forEach((item, i) => {
|
||||
item.classList.remove('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
};
|
||||
28
src/component/control/index.js
Normal file
28
src/component/control/index.js
Normal file
@ -0,0 +1,28 @@
|
||||
import { Control_checkbox } from './checkbox';
|
||||
import { Control_color } from './color';
|
||||
import { Control_colorMixer } from './colorMixer';
|
||||
import { Control_groupText } from './groupText';
|
||||
import { Control_helperText } from './helperText';
|
||||
import { Control_inputButton } from './inputButton';
|
||||
import { Control_radio } from './radio';
|
||||
import { Control_radioGrid } from './radioGrid';
|
||||
import { Control_slider } from './slider';
|
||||
import { Control_sliderSlim } from './sliderSlim';
|
||||
import { Control_text } from './text';
|
||||
import { Control_select } from './select';
|
||||
|
||||
export {
|
||||
Control_checkbox,
|
||||
Control_color,
|
||||
Control_colorMixer,
|
||||
Control_groupText,
|
||||
Control_helperText,
|
||||
Control_inputButton,
|
||||
Control_radio,
|
||||
Control_radioGrid,
|
||||
Control_slider,
|
||||
Control_sliderSlim,
|
||||
Control_sliderDouble,
|
||||
Control_text
|
||||
Control_select
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user