Skip to content

Commit 394642d

Browse files
author
Keith Charlton
committed
d-d-d avoid conflicts
1 parent 003acee commit 394642d

File tree

4 files changed

+126
-98
lines changed

4 files changed

+126
-98
lines changed

‎elements/d-d-d/d-d-d.js

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export const DDDPulseEffectSuper = function (SuperClass) {
5252
static get properties() {
5353
return {
5454
...super.properties,
55-
dataPulse: { type: Boolean, reflect: true, attribute: "data-pulse"},
56-
}
55+
dataPulse: { type: Boolean, reflect: true, attribute: "data-pulse" },
56+
};
5757
}
5858

5959
/**
@@ -65,7 +65,7 @@ export const DDDPulseEffectSuper = function (SuperClass) {
6565
if (super.styles) {
6666
styles = super.styles;
6767
}
68-
return [styles];
68+
return [styles, DDDPulseEffect];
6969
}
7070

7171
removePulseEffect(e) {
@@ -76,20 +76,11 @@ export const DDDPulseEffectSuper = function (SuperClass) {
7676
// apply the effect or whatever
7777
if (status) {
7878
this.__abortController = new AbortController();
79-
this.addEventListener(
80-
'mouseenter',
81-
this.removePulseEffect,
82-
{
83-
signal: this.__abortController.signal
84-
}
85-
);
86-
87-
}
88-
else {
89-
this.removeEventListener(
90-
'mouseenter',
91-
this.removePulseEffect,
92-
);
79+
this.addEventListener("mouseenter", this.removePulseEffect, {
80+
signal: this.__abortController.signal,
81+
});
82+
} else {
83+
this.removeEventListener("mouseenter", this.removePulseEffect);
9384
this.__abortController.abort();
9485
}
9586
}
@@ -98,17 +89,16 @@ export const DDDPulseEffectSuper = function (SuperClass) {
9889
if (super.updated) {
9990
super.updated(changedProperties);
10091
}
101-
if (changedProperties.has('dataPulse')) {
92+
if (changedProperties.has("dataPulse")) {
10293
if (this.dataPulse) {
10394
this.togglePulseEffect(true);
104-
}
105-
else {
95+
} else {
10696
this.togglePulseEffect(false);
10797
}
10898
}
10999
}
110-
}
111-
}
100+
};
101+
};
112102

113103
// super class so we can mix styles into other things more easily
114104
export const DDDSuper = function (SuperClass) {

‎elements/d-d-d/lib/DDDStyles.js

Lines changed: 97 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ globalThis.addEventListener(
7979
});
8080
}
8181
// things allowed to have primary
82-
/* if (
82+
/* if (
8383
[
8484
"p",
8585
"blockquote",
@@ -96,7 +96,10 @@ globalThis.addEventListener(
9696
"h6",
9797
].includes(tag)
9898
) {*/
99-
if (props.designSystem === true || props.designSystem.primary === true) {
99+
if (
100+
props.designSystem === true ||
101+
props.designSystem.primary === true
102+
) {
100103
props.settings.configure.push({
101104
attribute: "data-primary",
102105
title: "Primary color",
@@ -201,7 +204,10 @@ globalThis.addEventListener(
201204
});
202205
}
203206
// design treatments are rather open ended
204-
if (props.designSystem === true || props.designSystem.designTreatment === true) {
207+
if (
208+
props.designSystem === true ||
209+
props.designSystem.designTreatment === true
210+
) {
205211
if (["p", "blockquote"].includes(tag)) {
206212
props.settings.configure.push({
207213
attribute: "data-design-treatment",
@@ -1196,8 +1202,7 @@ export const DDDDataAttributes = [
11961202
blockquote[data-border],
11971203
ol[data-border],
11981204
ul[data-border],
1199-
div[data-border]
1200-
[data-border] {
1205+
div[data-border] [data-border] {
12011206
border-color: var(--ddd-theme-primary);
12021207
}
12031208
[data-border="xs"] {
@@ -1326,8 +1331,7 @@ export const DDDReset = css`
13261331
blockquote[data-accent],
13271332
ol[data-accent],
13281333
ul[data-accent],
1329-
div[data-accent]
1330-
{
1334+
div[data-accent] {
13311335
border: var(--ddd-border-sm);
13321336
border-color: var(--ddd-theme-primary);
13331337
border-width: var(--ddd-theme-border-size);
@@ -3921,66 +3925,110 @@ export const DDDPulseEffect = css`
39213925
/* Define primary colors in RGB for use in rgba() */
39223926
:root {
39233927
--ddd-primary-0-rgb: 150, 190, 230, 0.7; /* Pugh Blue */
3924-
--ddd-primary-1-rgb: 30, 64, 124; /* Beaver Blue */
3925-
--ddd-primary-2-rgb: 0, 30, 68; /* Nittany Navy */
3926-
--ddd-primary-3-rgb: 0, 3, 33; /* Potential Midnight */
3927-
--ddd-primary-4-rgb: 38, 38, 38; /* Coaly Gray */
3928+
--ddd-primary-1-rgb: 30, 64, 124; /* Beaver Blue */
3929+
--ddd-primary-2-rgb: 0, 30, 68; /* Nittany Navy */
3930+
--ddd-primary-3-rgb: 0, 3, 33; /* Potential Midnight */
3931+
--ddd-primary-4-rgb: 38, 38, 38; /* Coaly Gray */
39283932
--ddd-primary-5-rgb: 162, 170, 173; /* Limestone Gray */
3929-
--ddd-primary-6-rgb: 49, 77, 100; /* Slate Gray */
3930-
--ddd-primary-7-rgb: 62, 163, 158; /* Creek Teal */
3931-
--ddd-primary-8-rgb: 0, 156, 222; /* Sky Blue */
3933+
--ddd-primary-6-rgb: 49, 77, 100; /* Slate Gray */
3934+
--ddd-primary-7-rgb: 62, 163, 158; /* Creek Teal */
3935+
--ddd-primary-8-rgb: 0, 156, 222; /* Sky Blue */
39323936
--ddd-primary-9-rgb: 184, 137, 101; /* Shrine Tan */
39333937
--ddd-primary-10-rgb: 191, 130, 38; /* Roar Golden */
3934-
--ddd-primary-11-rgb: 188, 32, 75, 0.7; /* Original 87 Pink */
3938+
--ddd-primary-11-rgb: 188, 32, 75, 0.7; /* Original 87 Pink */
39353939
--ddd-primary-12-rgb: 242, 102, 94; /* Discovery Coral */
3936-
--ddd-primary-13-rgb: 73, 29, 112; /* Wonder Purple */
3940+
--ddd-primary-13-rgb: 73, 29, 112; /* Wonder Purple */
39373941
--ddd-primary-14-rgb: 172, 141, 206; /* Atherton Violet */
3938-
--ddd-primary-15-rgb: 233, 131, 0; /* Invent Orange */
3939-
--ddd-primary-16-rgb: 255, 209, 0; /* Keystone Yellow */
3940-
--ddd-primary-17-rgb: 0, 135, 85; /* Opportunity Green */
3941-
--ddd-primary-18-rgb: 153, 204, 0; /* Future Lime */
3942-
--ddd-primary-19-rgb: 74, 119, 41; /* Forest Green */
3943-
--ddd-primary-20-rgb: 106, 48, 40; /* Landgrant Brown */
3944-
--ddd-primary-21-rgb: 235, 255, 0; /* Global Neon */
3942+
--ddd-primary-15-rgb: 233, 131, 0; /* Invent Orange */
3943+
--ddd-primary-16-rgb: 255, 209, 0; /* Keystone Yellow */
3944+
--ddd-primary-17-rgb: 0, 135, 85; /* Opportunity Green */
3945+
--ddd-primary-18-rgb: 153, 204, 0; /* Future Lime */
3946+
--ddd-primary-19-rgb: 74, 119, 41; /* Forest Green */
3947+
--ddd-primary-20-rgb: 106, 48, 40; /* Landgrant Brown */
3948+
--ddd-primary-21-rgb: 235, 255, 0; /* Global Neon */
39453949
}
39463950
39473951
/* Apply primary color as pulse effect using CSS variable */
3948-
[data-primary="0"] { --pulse-color: var(--ddd-primary-0-rgb); }
3949-
[data-primary="1"] { --pulse-color: var(--ddd-primary-1-rgb); }
3950-
[data-primary="2"] { --pulse-color: var(--ddd-primary-2-rgb); }
3951-
[data-primary="3"] { --pulse-color: var(--ddd-primary-3-rgb); }
3952-
[data-primary="4"] { --pulse-color: var(--ddd-primary-4-rgb); }
3953-
[data-primary="5"] { --pulse-color: var(--ddd-primary-5-rgb); }
3954-
[data-primary="6"] { --pulse-color: var(--ddd-primary-6-rgb); }
3955-
[data-primary="7"] { --pulse-color: var(--ddd-primary-7-rgb); }
3956-
[data-primary="8"] { --pulse-color: var(--ddd-primary-8-rgb); }
3957-
[data-primary="9"] { --pulse-color: var(--ddd-primary-9-rgb); }
3958-
[data-primary="10"] { --pulse-color: var(--ddd-primary-10-rgb); }
3959-
[data-primary="11"] { --pulse-color: var(--ddd-primary-11-rgb); }
3960-
[data-primary="12"] { --pulse-color: var(--ddd-primary-12-rgb); }
3961-
[data-primary="13"] { --pulse-color: var(--ddd-primary-13-rgb); }
3962-
[data-primary="14"] { --pulse-color: var(--ddd-primary-14-rgb); }
3963-
[data-primary="15"] { --pulse-color: var(--ddd-primary-15-rgb); }
3964-
[data-primary="16"] { --pulse-color: var(--ddd-primary-16-rgb); }
3965-
[data-primary="17"] { --pulse-color: var(--ddd-primary-17-rgb); }
3966-
[data-primary="18"] { --pulse-color: var(--ddd-primary-18-rgb); }
3967-
[data-primary="19"] { --pulse-color: var(--ddd-primary-19-rgb); }
3968-
[data-primary="20"] { --pulse-color: var(--ddd-primary-20-rgb); }
3969-
[data-primary="21"] { --pulse-color: var(--ddd-primary-21-rgb); }
3952+
[data-primary="0"] {
3953+
--pulse-color: var(--ddd-primary-0-rgb);
3954+
}
3955+
[data-primary="1"] {
3956+
--pulse-color: var(--ddd-primary-1-rgb);
3957+
}
3958+
[data-primary="2"] {
3959+
--pulse-color: var(--ddd-primary-2-rgb);
3960+
}
3961+
[data-primary="3"] {
3962+
--pulse-color: var(--ddd-primary-3-rgb);
3963+
}
3964+
[data-primary="4"] {
3965+
--pulse-color: var(--ddd-primary-4-rgb);
3966+
}
3967+
[data-primary="5"] {
3968+
--pulse-color: var(--ddd-primary-5-rgb);
3969+
}
3970+
[data-primary="6"] {
3971+
--pulse-color: var(--ddd-primary-6-rgb);
3972+
}
3973+
[data-primary="7"] {
3974+
--pulse-color: var(--ddd-primary-7-rgb);
3975+
}
3976+
[data-primary="8"] {
3977+
--pulse-color: var(--ddd-primary-8-rgb);
3978+
}
3979+
[data-primary="9"] {
3980+
--pulse-color: var(--ddd-primary-9-rgb);
3981+
}
3982+
[data-primary="10"] {
3983+
--pulse-color: var(--ddd-primary-10-rgb);
3984+
}
3985+
[data-primary="11"] {
3986+
--pulse-color: var(--ddd-primary-11-rgb);
3987+
}
3988+
[data-primary="12"] {
3989+
--pulse-color: var(--ddd-primary-12-rgb);
3990+
}
3991+
[data-primary="13"] {
3992+
--pulse-color: var(--ddd-primary-13-rgb);
3993+
}
3994+
[data-primary="14"] {
3995+
--pulse-color: var(--ddd-primary-14-rgb);
3996+
}
3997+
[data-primary="15"] {
3998+
--pulse-color: var(--ddd-primary-15-rgb);
3999+
}
4000+
[data-primary="16"] {
4001+
--pulse-color: var(--ddd-primary-16-rgb);
4002+
}
4003+
[data-primary="17"] {
4004+
--pulse-color: var(--ddd-primary-17-rgb);
4005+
}
4006+
[data-primary="18"] {
4007+
--pulse-color: var(--ddd-primary-18-rgb);
4008+
}
4009+
[data-primary="19"] {
4010+
--pulse-color: var(--ddd-primary-19-rgb);
4011+
}
4012+
[data-primary="20"] {
4013+
--pulse-color: var(--ddd-primary-20-rgb);
4014+
}
4015+
[data-primary="21"] {
4016+
--pulse-color: var(--ddd-primary-21-rgb);
4017+
}
39704018
39714019
[data-pulse] {
39724020
animation: pulse 1.5s infinite;
39734021
}
39744022
39754023
@keyframes pulse {
39764024
0% {
3977-
box-shadow: 0 0 0 0 rgba(var(--pulse-color));
4025+
box-shadow: 0 0 0 0 rgba(var(--pulse-color));
39784026
}
39794027
70% {
3980-
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); /* Use a transparent color derived from the original color */
4028+
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); /* Use a transparent color derived from the original color */
39814029
}
39824030
100% {
3983-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* Same here */
4031+
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* Same here */
39844032
}
39854033
}
39864034
`;
@@ -4003,4 +4051,4 @@ export const DDDAllStyles = [
40034051
DDDFontWeight,
40044052
DDDFontSizing,
40054053
DDDPulseEffect,
4006-
];
4054+
];

‎elements/d-d-d/lib/d-d-d-sample.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -220,12 +220,12 @@ export class DDDSample extends DDDSuper(LitElement) {
220220

221221
render() {
222222
return html`
223-
<div class="wrapper">
224-
<span class="sample"></span
225-
><span class="label"
226-
>${ApplicationAttributeData[this.type][this.option]}<slot></slot
227-
></span>
228-
</div>
223+
<div class="wrapper">
224+
<span class="sample"></span
225+
><span class="label"
226+
>${ApplicationAttributeData[this.type][this.option]}<slot></slot
227+
></span>
228+
</div>
229229
`;
230230
}
231231

‎elements/d-d-d/src/d-d-d.js

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export const DDDPulseEffectSuper = function (SuperClass) {
5252
static get properties() {
5353
return {
5454
...super.properties,
55-
dataPulse: { type: Boolean, reflect: true, attribute: "data-pulse"},
56-
}
55+
dataPulse: { type: Boolean, reflect: true, attribute: "data-pulse" },
56+
};
5757
}
5858

5959
/**
@@ -76,20 +76,11 @@ export const DDDPulseEffectSuper = function (SuperClass) {
7676
// apply the effect or whatever
7777
if (status) {
7878
this.__abortController = new AbortController();
79-
this.addEventListener(
80-
'mouseenter',
81-
this.removePulseEffect,
82-
{
83-
signal: this.__abortController.signal
84-
}
85-
);
86-
87-
}
88-
else {
89-
this.removeEventListener(
90-
'mouseenter',
91-
this.removePulseEffect,
92-
);
79+
this.addEventListener("mouseenter", this.removePulseEffect, {
80+
signal: this.__abortController.signal,
81+
});
82+
} else {
83+
this.removeEventListener("mouseenter", this.removePulseEffect);
9384
this.__abortController.abort();
9485
}
9586
}
@@ -98,17 +89,16 @@ export const DDDPulseEffectSuper = function (SuperClass) {
9889
if (super.updated) {
9990
super.updated(changedProperties);
10091
}
101-
if (changedProperties.has('dataPulse')) {
92+
if (changedProperties.has("dataPulse")) {
10293
if (this.dataPulse) {
10394
this.togglePulseEffect(true);
104-
}
105-
else {
95+
} else {
10696
this.togglePulseEffect(false);
10797
}
10898
}
10999
}
110-
}
111-
}
100+
};
101+
};
112102

113103
// super class so we can mix styles into other things more easily
114104
export const DDDSuper = function (SuperClass) {

0 commit comments

Comments
 (0)