Skip to content

Commit d7c3025

Browse files
btoprobtopro
committed
1 parent d7633c0 commit d7c3025

11 files changed

Lines changed: 400 additions & 130 deletions

File tree

‎elements/clean-one/clean-one.js‎

Lines changed: 119 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,29 @@ import { UserScaffoldInstance } from "@haxtheweb/user-scaffold/user-scaffold.js"
3636
* @haxcms-theme-category Course
3737
* @haxcms-theme-internal false
3838
* @haxcms-theme-priority -2
39+
* @haxcms-theme-palettes 4, 5
3940
* @demo demo/index.html
4041
* @element clean-one
42+
*
43+
* Palettes supported by this theme:
44+
* 4 = Boring Blue Gray
45+
* 5 = Monotone (default)
4146
*/
4247
class CleanOne extends DDDSuper(
4348
LTIResizingMixin(
44-
PrintBranchMixin(
45-
PDFPageMixin(
46-
QRCodeMixin(
47-
HAXCMSThemeParts(
48-
HAXCMSMobileMenuMixin(
49-
HAXCMSRememberRoute(DDDSuper(HAXCMSLitElementTheme)),
49+
PrintBranchMixin(
50+
PDFPageMixin(
51+
QRCodeMixin(
52+
HAXCMSThemeParts(
53+
HAXCMSMobileMenuMixin(
54+
HAXCMSRememberRoute(DDDSuper(HAXCMSLitElementTheme)),
55+
),
5056
),
5157
),
5258
),
5359
),
5460
),
55-
)) {
61+
) {
5662
//styles function
5763
static get styles() {
5864
return [
@@ -70,16 +76,42 @@ class CleanOne extends DDDSuper(
7076
--ddd-palette-6: var(--ddd-palette-color-6, default);
7177
--ddd-palette-7: var(--ddd-palette-color-7, default);
7278
73-
--ddd-lightDark-background: light-dark(var(--ddd-palette-light), var(--ddd-palette-dark));
74-
--ddd-lightDark-text: light-dark(var(--ddd-palette-dark), var(--ddd-palette-light));
75-
--ddd-lightDark-1: light-dark(var(--ddd-palette-1), var(--ddd-palette-5));
76-
--ddd-lightDark-2: light-dark(var(--ddd-palette-2), var(--ddd-palette-6));
77-
--ddd-lightDark-3: light-dark(var(--ddd-palette-3), var(--ddd-palette-7));
78-
--ddd-lightDark-4: light-dark(var(--ddd-palette-4), var(--ddd-palette-4));
79-
--ddd-lightDark-5: light-dark(var(--ddd-palette-5), var(--ddd-palette-1));
80-
--ddd-lightDark-6: light-dark(var(--ddd-palette-6), var(--ddd-palette-2));
81-
--ddd-lightDark-7: light-dark(var(--ddd-palette-7), var(--ddd-palette-3));
82-
79+
--ddd-lightDark-background: light-dark(
80+
var(--ddd-palette-light),
81+
var(--ddd-palette-dark)
82+
);
83+
--ddd-lightDark-text: light-dark(
84+
var(--ddd-palette-dark),
85+
var(--ddd-palette-light)
86+
);
87+
--ddd-lightDark-1: light-dark(
88+
var(--ddd-palette-1),
89+
var(--ddd-palette-5)
90+
);
91+
--ddd-lightDark-2: light-dark(
92+
var(--ddd-palette-2),
93+
var(--ddd-palette-6)
94+
);
95+
--ddd-lightDark-3: light-dark(
96+
var(--ddd-palette-3),
97+
var(--ddd-palette-7)
98+
);
99+
--ddd-lightDark-4: light-dark(
100+
var(--ddd-palette-4),
101+
var(--ddd-palette-4)
102+
);
103+
--ddd-lightDark-5: light-dark(
104+
var(--ddd-palette-5),
105+
var(--ddd-palette-1)
106+
);
107+
--ddd-lightDark-6: light-dark(
108+
var(--ddd-palette-6),
109+
var(--ddd-palette-2)
110+
);
111+
--ddd-lightDark-7: light-dark(
112+
var(--ddd-palette-7),
113+
var(--ddd-palette-3)
114+
);
83115
84116
width: 100%;
85117
margin: 0;
@@ -150,10 +182,10 @@ class CleanOne extends DDDSuper(
150182
--site-git-corner-background: var(--ddd-lightDark-7);
151183
--site-git-corner-color: var(--ddd-lightDark-1);
152184
--simple-icon-fill-color: var(--ddd-lightDark-1);
153-
154185
}
155186
156-
button:focus, button:hover{
187+
button:focus,
188+
button:hover {
157189
--simple-icon-button-background-color: var(--ddd-palette-color-1);
158190
}
159191
.pdf-page-btn,
@@ -169,12 +201,14 @@ class CleanOne extends DDDSuper(
169201
--site-menu-button-icon-fill-color: var(--ddd-palette-1);
170202
--site-menu-button-link-decoration: none;
171203
--site-menu-button-button-hover-color: var(--ddd-lightDark-6);
172-
--site-menu-button-button-hover-background-color: var(--ddd-lightDark-2);
204+
--site-menu-button-button-hover-background-color: var(
205+
--ddd-lightDark-2
206+
);
173207
}
174208
scroll-button,
175209
site-breadcrumb {
176210
color: var(--ddd-lightDark-1);
177-
--site-breadcrumb-color:var(--ddd-lightDark-4);
211+
--site-breadcrumb-color: var(--ddd-lightDark-4);
178212
--site-breadcrumb-last-color: var(--ddd-lightDark-1);
179213
}
180214
@@ -201,7 +235,7 @@ class CleanOne extends DDDSuper(
201235
z-index: 1;
202236
overflow-y: hidden;
203237
width: 300px;
204-
background-color:var(--ddd-lightDark-7);
238+
background-color: var(--ddd-lightDark-7);
205239
color: var(--ddd-lightDark-1);
206240
border-right: var(--ddd-border-xs);
207241
transition: left 0.3s ease-in-out;
@@ -504,7 +538,7 @@ class CleanOne extends DDDSuper(
504538
align-content: center;
505539
flex-direction: column;
506540
font-size: 40px;
507-
color:var(--ddd-lightDark-1);
541+
color: var(--ddd-lightDark-1);
508542
text-align: center;
509543
}
510544
@media screen and (max-width: 600px) {
@@ -581,10 +615,8 @@ class CleanOne extends DDDSuper(
581615
padding: 6px;
582616
background: 0 0;
583617
transition: top 0.3s ease-in-out;
584-
border-bottom: 1px solid
585-
var(--ddd-lightDark-6);
586-
border-top: 1px solid
587-
var(--ddd-lightDark-6);
618+
border-bottom: 1px solid var(--ddd-lightDark-6);
619+
border-top: 1px solid var(--ddd-lightDark-6);
588620
margin-bottom: 10px;
589621
margin-top: -1px;
590622
}
@@ -599,16 +631,16 @@ class CleanOne extends DDDSuper(
599631
];
600632
}
601633

602-
updated(changedProperties) {
603-
super.updated(changedProperties);
604-
if (changedProperties.has("dataPalette")) {
605-
UserScaffoldInstance.writeMemory(
606-
"HAXCMSSitePalette",
607-
this.dataPalette,
608-
"long",
609-
);
610-
}
634+
updated(changedProperties) {
635+
super.updated(changedProperties);
636+
if (changedProperties.has("dataPalette")) {
637+
UserScaffoldInstance.writeMemory(
638+
"HAXCMSSitePalette",
639+
this.dataPalette,
640+
"long",
641+
);
611642
}
643+
}
612644

613645
// render function
614646
render() {
@@ -729,6 +761,10 @@ class CleanOne extends DDDSuper(
729761
}
730762
}
731763
// properties available to the custom element for data binding
764+
static get supportedPalettes() {
765+
return ["4", "5"];
766+
}
767+
732768
static get properties() {
733769
return {
734770
...super.properties,
@@ -751,8 +787,7 @@ class CleanOne extends DDDSuper(
751787
*/
752788
constructor() {
753789
super();
754-
const storedPalette = UserScaffoldInstance.readMemory("HAXCMSSitePalette");
755-
this.dataPalette = storedPalette === "" || storedPalette === null ? 5 : storedPalette;
790+
this.dataPalette = 5;
756791
this.searchTerm = "";
757792
this.HAXCMSThemeSettings.autoScroll = true;
758793
// prettier-ignore
@@ -784,8 +819,10 @@ class CleanOne extends DDDSuper(
784819
return [
785820
...super.HAXCMSGlobalStyleSheetContent(),
786821
css`
787-
:host, html, body{
788-
--ddd-palette-light: var(--ddd-theme-default-white);
822+
:host,
823+
html,
824+
body {
825+
--ddd-palette-light: var(--ddd-theme-default-white);
789826
--ddd-palette-dark: var(--ddd-theme-default-coalyGray);
790827
791828
--ddd-palette-1: var(--ddd-palette-color-1, default);
@@ -796,16 +833,43 @@ class CleanOne extends DDDSuper(
796833
--ddd-palette-6: var(--ddd-palette-color-6, default);
797834
--ddd-palette-7: var(--ddd-palette-color-7, default);
798835
799-
--ddd-lightDark-background: light-dark(var(--ddd-palette-light), var(--ddd-palette-dark));
800-
--ddd-lightDark-text: light-dark(var(--ddd-palette-dark), var(--ddd-palette-light));
801-
--ddd-lightDark-1: light-dark(var(--ddd-palette-1), var(--ddd-palette-5));
802-
--ddd-lightDark-2: light-dark(var(--ddd-palette-2), var(--ddd-palette-4));
803-
--ddd-lightDark-3: light-dark(var(--ddd-palette-3), var(--ddd-palette-3));
804-
--ddd-lightDark-4: light-dark(var(--ddd-palette-4), var(--ddd-palette-2));
805-
--ddd-lightDark-5: light-dark(var(--ddd-palette-5), var(--ddd-palette-1));
806-
--ddd-lightDark-6: light-dark(var(--ddd-palette-6), var(--ddd-palette-6));
807-
--ddd-lightDark-7: light-dark(var(--ddd-palette-7), var(--ddd-palette-7));
808-
}
836+
--ddd-lightDark-background: light-dark(
837+
var(--ddd-palette-light),
838+
var(--ddd-palette-dark)
839+
);
840+
--ddd-lightDark-text: light-dark(
841+
var(--ddd-palette-dark),
842+
var(--ddd-palette-light)
843+
);
844+
--ddd-lightDark-1: light-dark(
845+
var(--ddd-palette-1),
846+
var(--ddd-palette-5)
847+
);
848+
--ddd-lightDark-2: light-dark(
849+
var(--ddd-palette-2),
850+
var(--ddd-palette-4)
851+
);
852+
--ddd-lightDark-3: light-dark(
853+
var(--ddd-palette-3),
854+
var(--ddd-palette-3)
855+
);
856+
--ddd-lightDark-4: light-dark(
857+
var(--ddd-palette-4),
858+
var(--ddd-palette-2)
859+
);
860+
--ddd-lightDark-5: light-dark(
861+
var(--ddd-palette-5),
862+
var(--ddd-palette-1)
863+
);
864+
--ddd-lightDark-6: light-dark(
865+
var(--ddd-palette-6),
866+
var(--ddd-palette-6)
867+
);
868+
--ddd-lightDark-7: light-dark(
869+
var(--ddd-palette-7),
870+
var(--ddd-palette-7)
871+
);
872+
}
809873
body stop-note a,
810874
body stop-note a:any-link,
811875
body stop-note a:-webkit-any-link {
@@ -815,7 +879,6 @@ class CleanOne extends DDDSuper(
815879
];
816880
}
817881

818-
819882
/**
820883
* life cycle, element is afixed to the DOM
821884
*/
@@ -835,7 +898,10 @@ class CleanOne extends DDDSuper(
835898

836899
const params = new URLSearchParams(store.currentRouterLocation.search);
837900
// if we have a search param already, set it to the field on open
838-
if (store.getInternalRoute() === "displays/search" && params.get("search")) {
901+
if (
902+
store.getInternalRoute() === "displays/search" &&
903+
params.get("search")
904+
) {
839905
import(
840906
"@haxtheweb/haxcms-elements/lib/ui-components/site/site-search.js"
841907
).then(() => {
@@ -880,7 +946,7 @@ class CleanOne extends DDDSuper(
880946
requestAnimationFrame(() => this._syncViewportLayout());
881947
}
882948
}
883-
949+
884950
prevPage(e) {
885951
super.prevPage(e);
886952
}

‎elements/clean-one/custom-elements.json‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
}
2121
]
2222
},
23+
{
24+
"kind": "field",
25+
"name": "supportedPalettes",
26+
"static": true,
27+
"readonly": true
28+
},
2329
{
2430
"kind": "field",
2531
"name": "tag",
@@ -38,8 +44,7 @@
3844
{
3945
"name": "e"
4046
}
41-
],
42-
"description": "Previous page to hook into when prev is hit"
47+
]
4348
},
4449
{
4550
"kind": "method",
@@ -51,6 +56,17 @@
5156
],
5257
"description": "Next page to hook into when next is hit"
5358
},
59+
{
60+
"kind": "field",
61+
"name": "dataPalette",
62+
"privacy": "public",
63+
"type": {
64+
"text": "number"
65+
},
66+
"default": "5",
67+
"attribute": "data-palette",
68+
"reflects": true
69+
},
5470
{
5571
"kind": "field",
5672
"name": "searchTerm",
@@ -75,6 +91,14 @@
7591
}
7692
],
7793
"attributes": [
94+
{
95+
"name": "data-palette",
96+
"type": {
97+
"text": "number"
98+
},
99+
"default": "5",
100+
"fieldName": "dataPalette"
101+
},
78102
{
79103
"name": "searchTerm",
80104
"type": {
@@ -85,6 +109,10 @@
85109
}
86110
],
87111
"mixins": [
112+
{
113+
"name": "DDDSuper",
114+
"package": "@haxtheweb/d-d-d/d-d-d.js"
115+
},
88116
{
89117
"name": "LTIResizingMixin",
90118
"package": "@haxtheweb/haxcms-elements/lib/core/utils/LTIResizingMixin.js"

‎elements/clean-one/polymer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"entrypoint": "demo/index.html",
3-
3+
44
"sources": [],
55
"builds": [
66
{

‎elements/d-d-d/lib/hax-palette-picker.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,9 @@ class HaxPalettePicker extends DDD {
341341
_syncValueToOption() {
342342
const selectedOption =
343343
this._getMatchedOption(this.value) ||
344-
this._getMatchedOption(this.fallbackValue);
344+
(this.value === null || this.value === undefined || this.value === ""
345+
? null
346+
: this._getMatchedOption(this.fallbackValue));
345347
if (selectedOption) {
346348
this.selectedKey = selectedOption.key;
347349
if (this.value !== selectedOption.dataPalette) {

0 commit comments

Comments
 (0)