1/************************************************************** 2 * 3 * Animated Box Web Component 4 * 5 *************************************************************/ 6 7/** 8 * Template structure and classes 9 */ 10const templateAnimatedBox = document.createElement('template'); 11templateAnimatedBox.innerHTML = /*html*/` 12 <style> 13 14 :host { 15 /**Main Container Element */ 16 --abContainerBackground: #fff; 17 --abContainerBackgroundRadius: 50px 50px 50px 50px; 18 --abContainerShadow: drop-shadow(2px 0px 8px rgba(0,0,0,0.10)); 19 --abContainerBorder: none; 20 --abContainerBorderColor: none; 21 --abContainerBorderHoverColor: none; 22 --abContainerTextPadding: 0px; 23 --abContainerPadding: 0px; 24 25 /**Before Element */ 26 --abContainerBeforeBackground: #0b0b13; 27 --abContainerBeforeLeft: -220px; 28 --abContainerBeforeHoverLeft: -40px; 29 --abContainerBeforeTop: -220px; 30 --abContainerBeforeHoverTop: -220px; 31 32 /**After Element */ 33 --abContainerAfterBackground: #ff9301; 34 --abContainerAfterLeft: -40px; 35 --abContainerAfterTop: -72px; 36 37 /**H5 Title format */ 38 --abH5FontColor: #232323; 39 --abH5TextAlign: left; 40 --abH5FontFamily: inherit; 41 --abH5FontSize: 1.25rem; 42 --abH5FontBold: bold; 43 --abH5FontItalic: none; 44 --abH5FontHoverColor: #fff; 45 --abH5Margins: 20px; 46 47 /**Paragraph format */ 48 --abPFontColor: #232323; 49 --abPTextAlign: left; 50 --abPFontFamily: inherit; 51 --abPFontSize: 1rem; 52 --abPFontBold: normal; 53 --abPFontItalic: none; 54 --abPFontHoverColor: #fff; 55 --abPMargins: 20px; 56 57 58 /**Image FIle */ 59 --abImageIcon: none; 60 --abImageAlign: left; 61 --abImageWidth: 80px; 62 --abImageHeight: 80px; 63 --abImageMargin: 20px; 64 65 /**Call to action */ 66 --abCTAFontFamily: inherit; 67 --abCTAFontColor: #232323; 68 --abCTAFontSize: inderit; 69 --abCTAFontBold: normal; 70 --abCTAFontItalic: none; 71 --abCTABackgroundColor: #ffe12e; 72 --abCTAMargins: 0px 0px 0px 0px; 73 --abCTAPadding: 5px 5px 5px 5px; 74 --abCTAAlign: left; 75 --abCTAShow: block; 76 --abCTABorderRadius: 0px;; 77 --abCTAFontHoverColor: #ffffff; 78 --abCTABackgroundHoverColor: #232323; 79 80 } 81 82 .icmAnimatedBoxContainer { 83 background: var(--abContainerBackground); 84 border-radius: var(--abContainerBackgroundRadius); 85 overflow: hidden; 86 padding: var(--abContainerPadding); 87 position: relative; 88 z-index: 1; 89 filter: var(--abContainerShadow); 90 border-width: var(--abContainerBorder); 91 border-style: solid; 92 border-color: var(--abContainerBorderColor); 93 -moz-transition: border-color .5s ease-in-out; 94 -ms-transition: border-color .5s ease-in-out; 95 -o-transition: border-color .5s ease-in-out; 96 transition: border-color .5s ease-in-out; 97 } 98 99 .icmAnimatedBoxContainer:before {
100 background: var(--abContainerBeforeBackground); 101 border-radius: 0; 102 left: var(--abContainerBeforeLeft); 103 top: var(--abContainerBeforeTop); 104 z-index: -1; 105 } 106 107 .icmAnimatedBoxContainer:after, 108 .icmAnimatedBoxContainer:before { 109 content: ""; 110 height: 200px; 111 position: absolute; 112 transition: .5s ease-in-out; 113 width: 200px 114 } 115 116 .icmAnimatedBoxContainer:after { 117 background: var(--abContainerAfterBackground); 118 border-radius: 50%; 119 left: var(--abContainerAfterLeft); 120 top: var(--abContainerAfterTop); 121 z-index: -2 122 } 123 124 .icmAnimatedBoxContainer .icmAnimatedBoxContentIcon { 125 color: #fff; 126 font-size: 40px; 127 line-height: 60px; 128 text-align: var(--abImageAlign); 129 margin: var(--abImageShift); 130 } 131 132 .icmAnimatedBoxContainer .icmAnimatedBoxContent { 133 padding: var(--abContainerTextPadding); 134 } 135 136 .icmAnimatedBoxContainer h5 { 137 /**TITOLO -> Font, colore e allineamento*/ 138 color: var(--abH5FontColor); 139 text-align: var(--abH5TextAlign); 140 font-family: var(--abH5FontFamily); 141 font-size: var(--abH5FontSize); 142 font-weight: var(--abH5FontBold); 143 font-style: var(--abH5FontItalic); 144 transition: .5s ease-in-out; 145 margin-block: 0px 0px; 146 margin: var(--abH5Margins); 147 } 148 149 .icmAnimatedBoxContainer p { 150 /**Testo contenuto -> Font, colore e allineamento*/ 151 color: var(--abPFontColor); 152 text-align: var(--abPTextAlign); 153 font-family: var(--abPFontFamily); 154 font-size: var(--abPFontSize); 155 font-weight: var(--abPFontBold); 156 font-style: var(--abPFontItalic); 157 158 margin: var(--abPMargins); 159 transition: .5s ease-in-out; 160 } 161 162 .icmAnimatedBoxContainer:hover{ 163 /**Main container Hover Effects */ 164 color: var(--abH5FontHoverColor); 165 border-width: var(--abContainerBorder); 166 border-color: var(--abContainerBorderHoverColor); 167 -moz-transition: border-color .5s ease-in-out; 168 -ms-transition: border-color .5s ease-in-out; 169 -o-transition: border-color .5s ease-in-out; 170 transition: border-color .5s ease-in-out; 171 } 172 173 .icmAnimatedBoxContainer:hover h5 { 174 /**Colore Hover titolo e icona */ 175 color: var(--abH5FontHoverColor); 176 } 177 178 .icmAnimatedBoxContainer:hover p { 179 /**Colore Hover testo */ 180 color: var(--abPFontHoverColor); 181 } 182 183 .icmAnimatedBoxContainer:hover:before { 184 border-radius: 50%; 185 left: var(--abContainerBeforeHoverLeft); 186 top: var(--abContainerBeforeHoverTop); 187 } 188 189 .icmAnimatedBoxContainer:hover:after { 190 border-radius: 0; 191 content: ""; 192 height: 120%; 193 left: -10%; 194 top: -10%; 195 transition: all .55s cubic-bezier(.39,.58,.57,1); 196 width: 120% 197 } 198 199 .icmAnimatedBoxContainer:hover .icmAnimatedBoxContentIcon, 200 .icmAnimatedBoxContainer:hover h5,.icmAnimatedBoxContainer:hover p { 201 -webkit-animation: slideTop .5s ease-in-out 0s 1 normal none running!important; 202 animation: slideTop .5s ease-in-out 0s 1 normal none running!important; 203 -webkit-transition: border-color .25s ease; 204 205 } 206 207 .icmAnimatedBoxContentIconImage::before { 208 background-image: var(--abImageIcon); 209 background-size: cover; 210 display: inline-block; 211 background-position: center; 212 width: var(--abImageWidth); 213 height: var(--abImageHeight); 214 content: ""; 215 max-width: 100%; 216 margin: var(--abImageMargin); 217 } 218 219 .icmAnimatedBoxLink{ 220 text-decoration: none; 221 } 222 223 .icmAnimatedBoxContentButtonContainer{ 224 text-align: var(--abCTAAlign); 225 display: var(--abCTAShow); 226 } 227 228 .icmAnimatedBoxContentButton, 229 .icmAnimatedBoxContentButtonContainer a, 230 .icmAnimatedBoxContentButtonContainer button 231 { 232 font-family: var(--abCTAFontFamily); 233 color: var(--abCTAFontColor); 234 font-size: var(--abCTAFontSize); 235 font-weight: var(--abCTAFontBold); 236 font-style: var(--abCTAFontItalic);
237 background-color: var(--abCTABackgroundColor); 238 margin: var(--abCTAMargins); 239 padding: var(--abCTAPadding); 240 border-radius: var(--abCTABorderRadius); 241 border: none; 242 display: inline-block; 243 text-decoration: none; 244 245 -moz-transition: all .25s ease-in-out; 246 -ms-transition: all .25s ease-in-out; 247 -o-transition: all .25s ease-in-out; 248 transition: all .25s ease-in-out; 249 } 250 251 .icmAnimatedBoxContentButton:hover, 252 .icmAnimatedBoxContentButtonContainer a:hover, 253 .icmAnimatedBoxContentButtonContainer button:hover 254 { 255 color: var(--abCTAFontHoverColor); 256 background-color: var(--abCTABackgroundHoverColor); 257 cursor: pointer; 258 259 -moz-transition: all .25s ease-in-out; 260 -ms-transition: all .25s ease-in-out; 261 -o-transition: all .25s ease-in-out; 262 transition: all .25s ease-in-out; 263 } 264 </style> 265 266 <div class="icmAnimatedBoxContainer"> 267 <div class="icmAnimatedBoxContentIcon"> 268 <i id="icmAnimatedBoxIconText" role="figure" class="icmAnimatedBoxContentIcon icmAnimatedBoxContentIconImage"></i> 269 </div> 270 <div class="icmAnimatedBoxContent"> 271 <h5 id="icmAnimatedBoxContentTitle"></h5> 272 <p id="icmAnimatedBoxContentText"></p> 273 <div id="icmAnimatedBoxContentButtonContainer" class="icmAnimatedBoxContentButtonContainer"></div> 274 </div> 275 </div> 276` 277 278 279/** 280 * WebComonent Main Class 281 */ 282class IcmAnimatedBox extends HTMLElement { 283 constructor(){ 284 super(); 285 this._shadowRoot = this.attachShadow({'mode': 'open'}); 286 this._shadowRoot.appendChild(templateAnimatedBox.content.cloneNode(true)); 287 } 288 289 connectedCallback(){ 290 /** 291 * Object initialization 292 */ 293 this._shadowRoot.getElementById("icmAnimatedBoxContentTitle").innerHTML=this.#decodeHTMLEntities(this.getAttribute('data-abTitleString')); 294 this._shadowRoot.getElementById("icmAnimatedBoxContentText").innerHTML=this.#decodeHTMLEntities(this.getAttribute('data-abTextString')); 295 296 this._shadowRoot.getElementById("icmAnimatedBoxIconText").setAttribute('aria-label', this.#decodeHTMLEntities(this.getAttribute('data-iconText'))); 297 this._shadowRoot.getElementById("icmAnimatedBoxIconText").setAttribute('role', this.#decodeHTMLEntities(this.getAttribute('data-iconRole'))); 298 299 try { 300 this._shadowRoot.getElementById("icmAnimatedBoxContentButtonContainer").innerHTML=this.#decodeHTMLEntities(decodeURIComponent(this.getAttribute('data-abLinkString'))); 301 } catch (e) { 302 this._shadowRoot.getElementById("icmAnimatedBoxContentButtonContainer").innerHTML=this.#decodeHTMLEntities(this.getAttribute('data-abLinkString')); 303 } 304 } 305 306 #decodeHTMLEntities(str){ 307 /** 308 * Class Private Method for string to HTML conversion 309 */ 310 if(str && typeof str === 'string') { 311 312 str = str.replace(/<br\s*\/?>/gi, '<br/>'); 313 str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, ''); 314 str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); 315 var textArea = document.createElement('textarea'); 316 textArea.innerHTML = str; 317 str = textArea.value; 318 str = str.replace(/\\'/g, "'"); 319 } 320 return str; 321 } 322 } 323 324 window.customElements.define('icm-animatedbox', IcmAnimatedBox); 325
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.