@@ -19,7 +19,35 @@ function createComponent(html) {
1919 */
2020 function setContent ( cssSelector , content , shadow ) {
2121 const selector = shadow . querySelector ( cssSelector ) ;
22- selector . textContent = content ;
22+ // Check if content has been specified
23+ if ( content != "" ) {
24+ selector . textContent = content ;
25+ } else {
26+ const hideSelector = cssSelector + "-g" ;
27+ hideContent ( hideSelector , shadow ) ;
28+ }
29+ }
30+
31+ /**
32+ * Sets the image of an element based on a CSS selector.
33+ * @param {string } cssSelector - The CSS selector of the element to set the content for.
34+ * @param {string } image - The image to set for the element.
35+ * @param {string } name - The name of the element.
36+ * @param {string } selfpaced - A boolean indicating whether the element is a self-paced course.
37+ * @param {boolean } shadow - A boolean indicating whether to use the shadow DOM for the element.
38+ * @returns {void }
39+ */
40+ function setImage ( cssSelector , image , name , selfpaced , shadow ) {
41+ const selector = shadow . querySelector ( cssSelector ) ;
42+ // Set image
43+ selector . src = image ;
44+ // Set alt text
45+ selector . setAttribute ( 'alt' , `${ name } ) ;
46+ // Change styling for self-paced course card
47+ if ( selfpaced != 'true' ) {
48+ const courseCard = shadow . querySelector ( '.course-card' ) ;
49+ courseCard . style . alignItems = 'flex-start' ;
50+ }
2351 }
2452
2553 /**
@@ -53,9 +81,14 @@ function createComponent(html) {
5381 */
5482 function setLink ( cssSelector , url , name , linkText , shadow ) {
5583 const link = shadow . querySelector ( cssSelector ) ;
56- link . href = url ;
57- link . setAttribute ( 'aria-label' , `Learn more about ${ name } ) ;
58- link . textContent = linkText ;
84+ if ( url != "" ) {
85+ link . href = url ;
86+ link . setAttribute ( 'aria-label' , `Learn more about ${ name } ) ;
87+ link . textContent = linkText ;
88+ } else {
89+ const hideSelector = cssSelector + "-g" ;
90+ hideContent ( hideSelector , shadow ) ;
91+ }
5992 }
6093
6194 /**
@@ -75,9 +108,16 @@ function createComponent(html) {
75108 // Creates an instance of CourseCard
76109 constructor ( ) {
77110 super ( ) ;
78- this . selfpaced = 'true' ;
79- this . cost = 'None' ;
80- this . badge = 'Yes' ;
111+ this . selfpaced = "" ;
112+ this . level = "" ;
113+ this . cost = "" ;
114+ this . badge = "" ;
115+ this . time = "" ;
116+ this . start = "" ;
117+ this . end = "" ;
118+ this . hours = "" ;
119+ this . link = "" ;
120+ this . registerlink = "" ;
81121 }
82122
83123 /**
@@ -87,6 +127,21 @@ function createComponent(html) {
87127 static get observedAttributes ( ) {
88128 return [ 'name' , 'session' , 'desc' , 'imgsrc' , 'selfpaced' , 'level' , 'cost' , 'badge' , 'time' , 'start' , 'end' , 'hours' , 'link' , 'registerlink' ] ;
89129 }
130+ // Course Card Options
131+ // - id
132+ // - name
133+ // - session (for live courses only)
134+ // - desc: can be written with <p> tags or as plaintext
135+ // - imgsrc
136+ // - selfpaced: true or false
137+ // - level: Beginner, Intermediate, or Advanced
138+ // - badge: Yes or No
139+ // - time: x hours
140+ // - start (for live courses only)
141+ // - end (for live courses only)
142+ // - hours (for live courses only)
143+ // - registerlink (for live courses only)
144+ // - link
90145
91146 /**
92147 * Called when an attribute is defined or changed.
@@ -106,63 +161,47 @@ function createComponent(html) {
106161 shadow . innerHTML = html ;
107162
108163 // Set course img
109- const courseImg = shadow . querySelector ( '.course-img' ) ;
110- courseImg . src = this . imgsrc ;
111- courseImg . setAttribute ( 'alt' , `${ this . name } ) ;
112- if ( this . selfpaced != 'true' ) {
113- const courseCard = shadow . querySelector ( '.course-card' ) ;
114- courseCard . style . alignItems = 'flex-start' ;
115- }
116-
117- if ( this . name == 'IMS Database Recovery Control (DBRC)' ) {
118- console . log ( this . badge ) ;
119- }
120-
164+ setImage ( '.course-img' , this . imgsrc , this . name , this . selfpaced , shadow ) ;
121165 // Set course name
122166 setContent ( '.course-name' , this . name , shadow ) ;
123- // Set session for live course
124- setContent ( '.live-session' , this . session , shadow ) ;
125167 // Set course desc
126168 setDesc ( '.course-desc' , this . desc , shadow ) ;
169+ // Set session for live course
170+ setContent ( '.live-session' , this . session , shadow ) ;
127171 // Set course level
128172 setContent ( '.course-level' , this . level , shadow ) ;
129173 // Set course type
130- const courseType = this . selfpaced == 'true' ? 'Self-paced: ' : 'Instructor-led: ' ;
174+ let courseType ;
175+ switch ( this . selfpaced ) {
176+ case 'true' :
177+ courseType = 'Self-paced: ' ;
178+ break ;
179+ case 'false' :
180+ courseType = 'Instructor-led: ' ;
181+ break ;
182+ default :
183+ courseType = '' ;
184+ }
185+ // const courseType = this.selfpaced == 'true' ? 'Self-paced: ' : 'Instructor-led: ';
131186 setContent ( '.course-type' , courseType , shadow ) ;
132187 // Set course cost
133188 setContent ( '.course-cost' , this . cost , shadow ) ;
134189 // Set course badge
135- if ( this . badge != 'n/a' ) {
136- setContent ( '.course-badge' , this . badge , shadow ) ;
137- } else {
138- hideContent ( '.course-badge-g' , shadow ) ;
139- } ;
190+ setContent ( '.course-badge' , this . badge , shadow ) ;
140191 // Set course time
141192 setContent ( '.course-time' , this . time , shadow ) ;
193+ // Set course duration
194+ setContent ( '.course-start' , this . start , shadow ) ;
195+ setContent ( '.course-end' , this . end , shadow ) ;
196+ // Set course hours
197+ setContent ( '.course-hours' , this . hours , shadow ) ;
142198 // Set course link
143199 setLink ( '.course-link' , this . link , this . name , 'Learn more →' , shadow ) ;
144-
145- var linkText ;
146- // Change card content based on self-paced vs live course
147- if ( this . selfpaced == 'true' ) {
148- // Hide course duration
149- hideContent ( '.course-start-g' , shadow ) ;
150- hideContent ( '.course-end-g' , shadow ) ;
151- // Hide course hours
152- hideContent ( '.course-hours-g' , shadow ) ;
153- } else {
154- // Set course duration
155- setContent ( '.course-start' , this . start , shadow ) ;
156- setContent ( '.course-end' , this . end , shadow ) ;
157- // Set course hours
158- setContent ( '.course-hours' , this . hours , shadow ) ;
159- // Set register link
160- linkText = 'Register →'
161- setLink ( '.register-link' , this . registerlink , this . name , 'Register →' , shadow ) ;
162- }
200+ // Set register link
201+ setLink ( '.register-link' , this . registerlink , this . name , 'Register →' , shadow ) ;
163202 }
164203 }
165204
166205 // Define new CourseCard element
167206 customElements . define ( 'course-card' , CourseCard ) ;
168- }
207+ }
0 commit comments