Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gc-featured-link: adding bg color option #2214

Merged
merged 1 commit into from
Aug 29, 2023
Merged

gc-featured-link: adding bg color option #2214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions components/gc-featured-link/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,27 @@

.gc-featured-link {
background-color: $bg-gctheme;
color: #fff;
font-family: Lato, sans-serif;
opacity: .9;
padding-bottom: $space-md;
padding-top: $space-md;

&.provisional {
font-family: Lato, sans-serif;
opacity: .9;
padding-bottom: $space-md;
padding-top: $space-md;
p:first-of-type {
margin-bottom: $space-0;
}

p:first-of-type {
font-weight: $bold-weight;
margin-bottom: $space-0;
}
a {
color: #fff;
font-weight: $bold-weight;
}

html:not(.wb-disable) &[data-bg-color] {
background-color: transparent;
color: $text-color;

p, a {
color: #fff;
a {
color: $text-color;
}
}
}
110 changes: 99 additions & 11 deletions components/gc-featured-link/gc-featured-link-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2>Purpose</h2>
<h2>Working examples</h2>

<h3>Featured link (provisional v1.0)</h3>
<p>The logic semantic structure of headings have not been followed to accommodate each working examples.</p>
<p>The logic semantic structure of headings have not been followed to accommodate the following working example. You can go directly to the <a href="#codeSample1">source code</a>.</p>
</div>

<section class="provisional gc-featured-link">
Expand All @@ -50,19 +50,107 @@ <h2 class="wb-inv">Featured</h2>
</section>

<div class="container">
<h3>Code</h3>
<h4 id="codeSample1">Code</h4>
<pre><code>&lt;section class="provisional gc-featured-link"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-12"&gt;
&lt;h2 class="wb-inv"&gt;Featured&lt;/h2&gt;
&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Long description [optional]&lt;/p&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-12"&gt;
&lt;h2 class="wb-inv"&gt;Featured&lt;/h2&gt;
&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Promotion title]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Long description [optional]&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
&lt;/div&gt;
&lt;/section&gt;</code></pre>

<h3>Customized background color</h3>
<p>To customize the background color, add the attribute <code>data-bg-color</code>. The value should be the hexadecimal code of the desired color.</p>
<p>The plugin will automatically apply the correct color to the text: <code>#FFFFFF</code> for dark colors, <code>#333333</code> for light colors, <code>#000000</code> for colors in-between.</p>
<p>The logic semantic structure of headings have not been followed to accommodate each working examples. You can go directly to the <a href="#codeSample2">source code</a>.</p>
<p class="mrgn-tp-lg">Dark background example:</p>
Garneauma marked this conversation as resolved.
Show resolved Hide resolved
</div>

<section class="provisional gc-featured-link" data-bg-color="#005B61">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">Featured</h2>
<p><a class="stretched-link" href="#">[Promotion title]</a></p>
<p>Long description [Optional]</p>
</div>
</div>
</div>
</section>

<div class="container">
<p class="mrgn-tp-lg">Light color example:</p>
</div>

<section class="provisional gc-featured-link" data-bg-color="#99dade">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">Featured</h2>
<p><a class="stretched-link" href="#">[Promotion title]</a></p>
<p>Long description [Optional]</p>
</div>
</div>
</div>
</section>

<div class="container">
<p class="mrgn-tp-lg">Medium color example:</p>
</div>

<section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">Featured</h2>
<p><a class="stretched-link" href="#">[Promotion title]</a></p>
<p>Long description [Optional]</p>
</div>
</div>
</div>
</section>

<div class="container">
<h4 id="codeSample2">Code</h4>
<pre><code>&lt;section class="provisional gc-featured-link" data-bg-color="#005B61">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">Featured&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
&lt;p>Long description [Optional]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section>

&lt;section class="provisional gc-featured-link" data-bg-color="#99dade">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">Featured&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
&lt;p>Long description [Optional]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section>

&lt;section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">Featured&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Promotion title]&lt;/a>&lt;/p>
&lt;p>Long description [Optional]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section></code></pre>

<h3>Previous design patterns</h3>
<details>
Expand Down
116 changes: 102 additions & 14 deletions components/gc-featured-link/gc-featured-link-fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2>Objectif</h2>
<h2>Exemples pratiques</h2>

<h3>Lien en vedette (Provisiore v1.0)</h3>
<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à chaque exemples pratiques. </p>
<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à l'exemple pratique suivant. Vous pouvez aller directement au <a href="#codeSample1">code source</a>.</p>
</div>

<section class="provisional gc-featured-link">
Expand All @@ -50,19 +50,107 @@ <h2 class="wb-inv">En vedette</h2>
</section>

<div class="container">
<h3>Code</h3>
<pre><code>&lt;section class="provisional gc-featured-link"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-12"&gt;
&lt;h2 class="wb-inv"&gt;En vedette&lt;/h2&gt;
&lt;p&gt;&lt;a class="stretched-link" href="#"&gt;[Titre de la promotion]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Description longue [Facultatif]&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
<h4 id="codeSample1">Code</h4>
<pre><code>&lt;section class="provisional gc-featured-link">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">En vedette&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
&lt;p>Description longue [Facultatif]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section></code></pre>

<h3>Couleur d'arrière-plan personnalisée</h3>
<p>Pour personnaliser la couleur d'arrière-pla, ajoutez l'attribut <code>data-bg-color</code>. La valeur doit être le code hexadécimal de la couleur souhaitée.</p>
<p>Le plugiciel appliquera automatiquement la bonne couleur au texte&nbsp;: <code>#FFFFFF</code> pour les couleurs sombres, <code>#333333</code> pour les couleurs claires, <code>#000000</code> pour les couleurs intermédiaires.</p>
<p>La structure sémantique logique des en-têtes n'a pas été suivie afin de s'adapter à chaque exemples pratiques. Vous pouvez aller directement au <a href="#codeSample2">code source</a>.</p>
<p class="mrgn-tp-lg">Exemple avec couleur sombre&nbsp;:</p>
</div>

<section class="provisional gc-featured-link" data-bg-color="#005B61">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>

<div class="container">
<p class="mrgn-tp-lg">Exemple avec couleur claire&nbsp;:</p>
</div>

<section class="provisional gc-featured-link" data-bg-color="#99dade">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>

<div class="container">
<p class="mrgn-tp-lg">Exemple avec couleur intermédiaire&nbsp;:</p>
</div>

<section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="wb-inv">En vedette</h2>
<p><a class="stretched-link" href="#">[Titre de la promotion]</a></p>
<p>Description longue [Facultatif]</p>
</div>
</div>
</div>
</section>

<div class="container">
<h4 id="codeSample2">Code</h4>
<pre><code>&lt;section class="provisional gc-featured-link" data-bg-color="#005B61">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">En vedette&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
&lt;p>Description longue [Facultatif]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section>

&lt;section class="provisional gc-featured-link" data-bg-color="#99dade">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">En vedette&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
&lt;p>Description longue [Facultatif]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section>

&lt;section class="provisional gc-featured-link" data-bg-color="#8F8F8F">
&lt;div class="container">
&lt;div class="row">
&lt;div class="col-xs-12">
&lt;h2 class="wb-inv">En vedette&lt;/h2>
&lt;p>&lt;a class="stretched-link" href="#">[Titre de la promotion]&lt;/a>&lt;/p>
&lt;p>Description longue [Facultatif]&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/section></code></pre>

<h3>Modèles de conception précédents</h3>
<details>
Expand Down
88 changes: 88 additions & 0 deletions components/gc-featured-link/gc-featured-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* @title WET-BOEW Featured link
* @overview Stylize a featured link
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @garneauma
*/
( function( $, window, wb ) {
"use strict";

var $document = wb.doc,
componentName = "gc-featured-link",
selector = ".provisional." + componentName,
initEvent = "wb-init " + selector,
white = "#FFFFFF",
black = "#000000",
darkgrey = "#333333",
luminance1, luminance2,
contrastRatio,

/**
* @method init
* @param {jQuery Event} event Event that triggered the function call
*/
init = function( event ) {

// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
$elm;

if ( elm ) {
var bgColor = elm.dataset.bgColor,
textColor;

$elm = $( elm );

if ( bgColor ) {
if ( getContrastRatio( white, bgColor ) >= 4.5 ) {
textColor = white;
} else if ( getContrastRatio( darkgrey, bgColor ) >= 4.5 ) {
textColor = darkgrey;
} else {
textColor = black;
}

elm.style.backgroundColor = bgColor;
elm.style.color = textColor;
elm.querySelectorAll( "p, a" ).forEach( e => {
e.style.color = textColor;
} );
}

// Identify that initialization has completed
wb.ready( $elm, componentName );
}
},

getContrastRatio = function( color1, color2 ) {
function getLuminance( color ) {
var rgb = [ color.substr( 1, 2 ), color.substr( 3, 2 ), color.substr( 5, 2 ) ].map( hex => parseInt( hex, 16 ) / 255 );

for ( let i = 0; i < rgb.length; i++ ) {
if ( rgb[ i ] <= 0.03928 ) {
rgb[ i ] = rgb[ i ] / 12.92;
} else {
rgb[ i ] = Math.pow( ( rgb[ i ] + 0.055 ) / 1.055, 2.4 );
}
}

return 0.2126 * rgb[ 0 ] + 0.7152 * rgb[ 1 ] + 0.0722 * rgb[ 2 ];
}

luminance1 = getLuminance( color1 );
luminance2 = getLuminance( color2 );

contrastRatio = ( Math.max( luminance1, luminance2 ) + 0.05 ) / ( Math.min( luminance1, luminance2 ) + 0.05 );

return contrastRatio.toFixed( 2 );
};

// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );

// Add the timer poke to initialize the plugin
wb.add( selector );

} )( jQuery, window, wb );
Loading