Skip to content

Commit

Permalink
Share widget: Added the ability to customize the link CSS (fixes #4976)
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Mar 24, 2014
1 parent 691d711 commit 4262f27
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 162 deletions.
12 changes: 11 additions & 1 deletion site/pages/docs/ref/share/share-en.hbs
View file
Expand Up @@ -4,7 +4,7 @@
"language": "en", "language": "en",
"description": "Facilitates sharing Web content on social media platforms.", "description": "Facilitates sharing Web content on social media platforms.",
"altLangPrefix": "share", "altLangPrefix": "share",
"dateModified": "2014-03-17" "dateModified": "2014-03-24"
} }
--- ---
<span class="wb-prettify all-pre hide"></span> <span class="wb-prettify all-pre hide"></span>
Expand Down Expand Up @@ -94,6 +94,16 @@
</dl> </dl>
</td> </td>
</tr> </tr>
<tr>
<td><code>lnkClass</code></td>
<td>Classes to be applied to the class attribute of the generated link.</td>
<td>Add <code>"lnkClass": "class1 class2"</code> to the <code>data-wet-boew</code> attribute where <code>class1 class2</code> are the classes to be added separated by spaces.</td>
<td>
<ul>
<li>None (default)</li>
</ul>
</td>
</tr>
<tr> <tr>
<td><code>type</code></td> <td><code>type</code></td>
<td>Type of content to share.</td> <td>Type of content to share.</td>
Expand Down
12 changes: 11 additions & 1 deletion site/pages/docs/ref/share/share-fr.hbs
View file
Expand Up @@ -4,7 +4,7 @@
"language": "fr", "language": "fr",
"description": "Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux.", "description": "Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux.",
"altLangPrefix": "share", "altLangPrefix": "share",
"dateModified": "2014-03-17" "dateModified": "2014-03-24"
} }
--- ---
<span class="wb-prettify all-pre hide"></span> <span class="wb-prettify all-pre hide"></span>
Expand Down Expand Up @@ -96,6 +96,16 @@
</dl> </dl>
</td> </td>
</tr> </tr>
<tr>
<td><code>lnkClass</code></td>
<td>Classes to be applied to the class attribute of the generated link.</td>
<td>Add <code>"lnkClass": "class1 class2"</code> to the <code>data-wet-boew</code> attribute where <code>class1 class2</code> are the classes to be added separated by spaces.</td>
<td>
<ul>
<li>None (default)</li>
</ul>
</td>
</tr>
<tr> <tr>
<td><code>type</code></td> <td><code>type</code></td>
<td>Type of content to share.</td> <td>Type of content to share.</td>
Expand Down
95 changes: 17 additions & 78 deletions src/plugins/share/share-en.hbs
View file
Expand Up @@ -95,81 +95,20 @@
<hr /> <hr />


<section> <section>
<h2>Options</h2> <h2>Add custom CSS to the share link</h2>
<table class="table table-striped">
<thead> <div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<tr> <div class="text-right">
<th scope="col">Option</th> <strong>Add a second link:</strong>
<th scope="col">Values</th> <div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<th scope="col">Default value</th> </div>
<th scope="col">Example</th>
<th scope="col">Description</th> <details>
</tr> <summary>View code</summary>
</thead> <pre class="wb-prettify"><code>&lt;div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
<tbody> &lt;div class="text-right"&gt;
<tr> &lt;strong&gt;Add a second link:&lt;/strong&gt;
<td><code>link-only</code></td> &lt;div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
<td>Class name</td> &lt;/div&gt;</code></pre>
<td>n/a</td> </details>
<td><code>class="wb-share link-only"</code></td> </section>
<td>Used to specify additional links for an existing panel.</td>
</tr>
<tr>
<td><code>pnlId</code></td>
<td>String</td>
<td>n/a</td>
<td><code>data-wet-boew='{"pnlId": "pnl1"}'</code></td>
<td>Unique identifier for the panel. Only required if providing a second link for the same panel (needs to be specified on all <code>wb-share</code> calls for that panel).</td>
</tr>
<tr>
<td><code>type</code></td>
<td>"<code>page</code>", "<code>video</code>"</td>
<td>"<code>page</code>"</td>
<td><code>data-wet-boew='{"type": "video"}'</code></td>
<td>Type of content to share.</td>
</tr>
<tr>
<td><code>custType</code></td>
<td>String</td>
<td>""</td>
<td><code>data-wet-boew='{"custType": "&#160;this comment"}'</code></td>
<td>Text to use after "Share" on the share button and the panel header (overrides the text associated to the type option).</td>
</tr>
<tr>
<td><code>title</code></td>
<td>String</td>
<td>Page title or the main <code>h1</code> text</td>
<td><code>data-wet-boew='{"title": "Page title"}'</code></td>
<td>Text to use instead of the page title or the main <code>h1</code> text. Recommended for the video type if the page title is not the title of the video.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>URL</td>
<td>URL of the current page (excluding the hash and query string)</td>
<td><code>data-wet-boew='{"url": "http://page.url"}'</code></td>
<td>URL to use instead of the URL of the current page.</td>
</tr>
<tr>
<td><code>desc</code></td>
<td>String</td>
<td>""</td>
<td><code>data-wet-boew='{"desc": "Description of the page."}'</code></td>
<td>Optional description of the item to share. <strong>Note:</strong> A separate description is not supported by all social media sites.</td>
</tr>
<tr>
<td><code>img</code></td>
<td>URL</td>
<td>""</td>
<td><code>data-wet-boew='{"img": "http://img.url"}'</code></td>
<td>Optional image for the item to share (mainly for Pinterest). <strong>Note:</strong> Very few social media sites support specifying a separate image through a URL request.</td>
</tr>
<tr>
<td><code>filter</code></td>
<td>Array</td>
<td>[]</td>
<td><code>data-wet-boew='{"filter": ["twitter", "facebook"]}'</code></td>
<td>Optional filter for the sites to display in the panel. Only the sites listed in the array will be displayed. If no sites are listed, then all sites will be displayed.</td>
</tr>
</tbody>
</table>
</section>
97 changes: 17 additions & 80 deletions src/plugins/share/share-fr.hbs
View file
Expand Up @@ -92,84 +92,21 @@
</details> </details>
</section> </section>


<hr />

<section> <section>
<h2>Options</h2> <h2>Ajouter du CSS personnalisé au lien de partage</h2>
<table class="table table-striped">
<thead> <div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<tr> <div class="text-right">
<th scope="col">Option</th> <strong>Ajouter un deuxième lien&#160;:</strong>
<th scope="col">Valeurs</th> <div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<th scope="col">Valeur par défaut</th> </div>
<th scope="col">Exemple</th>
<th scope="col">Description</th> <details>
</tr> <summary>View code</summary>
</thead> <pre class="wb-prettify"><code>&lt;div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
<tbody> &lt;div class="text-right"&gt;
<tr> &lt;strong&gt;Ajouter un deuxième lien&#160;:&lt;/strong&gt;
<td><code>link-only</code></td> &lt;div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
<td>Nom de classe</td> &lt;/div&gt;</code></pre>
<td>s/o</td> </details>
<td><code>class="wb-share link-only"</code></td> </section>
<td>Permet de spécifier des liens supplémentaires pour un panneau existant.</td>
</tr>
<tr>
<td><code>pnlId</code></td>
<td>Cha&icirc;ne</td>
<td>n/a</td>
<td><code>data-wet-boew='{"pnlId": "pnl1"}'</code></td>
<td>Identifiant unique pour le panneau. Seulement requis lors de l'ajout d'un deuxième lien pour le même panneau (doit être spécifié sur toutes les demandes <code>wb-share</code> pour le même panneau).</td>
</tr>
<tr>
<td><code>type</code></td>
<td>"<code>page</code>", "<code>video</code>"</td>
<td>"<code>page</code>"</td>
<td><code>data-wet-boew='{"type": "video"}'</code></td>
<td>Type de contenu à partager.</td>
</tr>
<tr>
<td><code>custType</code></td>
<td>Cha&icirc;ne</td>
<td>""</td>
<td><code>data-wet-boew='{"custType": "&#160;this comment"}'</code></td>
<td>Texte à utiliser après "Partager" sur le bouton de partage et l'en-tête du panneau (remplace le texte associé à l'option de type).</td>
</tr>
<tr>
<td><code>title</code></td>
<td>Cha&icirc;ne</td>
<td>Titre de la page ou le texte de l'élément <code>h1</code> principal</td>
<td><code>data-wet-boew='{"title": "Page title"}'</code></td>
<td>Texte à utiliser à la place du titre de la page ou le texte de l'élément <code>h1</code> principal. Recommandé pour le type <code>video</code> si le titre de la page n'est pas le titre de la vidéo.</td>
</tr>
<tr>
<td><code>url</code></td>
<td>URL</td>
<td>URL de la page en cours (à l'exclusion du &#171;&#160;hash&#160;&#187; et la chaîne d'interrogation)</td>
<td><code>data-wet-boew='{"url": "http://page.url"}'</code></td>
<td>URL à utiliser à la place de l'URL de la page en cours.</td>
</tr>
<tr>
<td><code>desc</code></td>
<td>Cha&icirc;ne</td>
<td>""</td>
<td><code>data-wet-boew='{"desc": "Description de la page."}'</code></td>
<td>Description facultative de l'élément à partager. <strong>Nota&#160;:</strong> Une description séparée n'est pas supporté par tous les sites de médias sociaux.</td>
</tr>
<tr>
<td><code>img</code></td>
<td>URL</td>
<td>""</td>
<td><code>data-wet-boew='{"img": "http://img.url"}'</code></td>
<td>Image facultative pour l'élément à partager (principalement pour Pinterest). <strong>Nota&#160;:</strong> Très peu de sites de médias sociaux prennent en charge la spécification d'une image séparée par une demande d'URL.</td>
</tr>
<tr>
<td><code>filter</code></td>
<td>Tableau</td>
<td>[]</td>
<td><code>data-wet-boew='{"filter": ["twitter", "facebook"]}'</code></td>
<td>Filtre facultatif pour les sites à afficher dans le panneau. Seuls les sites listés dans le tableau seront affichés. Si aucun des sites sont listés, tous les sites seront affichés.</td>
</tr>
</tbody>
</table>
</section>
5 changes: 3 additions & 2 deletions src/plugins/share/share.js
View file
Expand Up @@ -41,6 +41,7 @@ var pluginName = "wb-share",
title: document.title || $document.find( "h1:first" ).text(), title: document.title || $document.find( "h1:first" ).text(),


pnlId: "", pnlId: "",
lnkClass: "",
img: "", img: "",
desc: "", desc: "",


Expand Down Expand Up @@ -191,7 +192,7 @@ var pluginName = "wb-share",
if ( elm.className.indexOf( "link-only" ) === -1 ) { if ( elm.className.indexOf( "link-only" ) === -1 ) {
panel = "<section id='" + id + "' class='shr-pg wb-overlay modal-content overlay-def wb-panel-r" + panel = "<section id='" + id + "' class='shr-pg wb-overlay modal-content overlay-def wb-panel-r" +
"'><header class='modal-header'><" + heading + " class='modal-title'>" + "'><header class='modal-header'><" + heading + " class='modal-title'>" +
shareText + "</" + heading + "></header><ul class='colcount-xs-2'>"; shareText + "</" + heading + "></header><ul class='list-unstyled colcount-xs-2'>";


// If there is no filter array of site keys, then generate an array of site keys // If there is no filter array of site keys, then generate an array of site keys
if ( !filter || filter.length === 0 ) { if ( !filter || filter.length === 0 ) {
Expand Down Expand Up @@ -229,7 +230,7 @@ var pluginName = "wb-share",
panel += "</ul><div class='clearfix'></div><p class='col-sm-12'>" + i18nText.disclaimer + "</p></section>"; panel += "</ul><div class='clearfix'></div><p class='col-sm-12'>" + i18nText.disclaimer + "</p></section>";
panelCount += 1; panelCount += 1;
} }
link = "<a href='#" + id + "' aria-controls='" + id + "' class='shr-opn overlay-lnk'><span class='glyphicon glyphicon-share'></span> " + link = "<a href='#" + id + "' aria-controls='" + id + "' class='shr-opn overlay-lnk " + settings.lnkClass + "'><span class='glyphicon glyphicon-share'></span> " +
shareText + "</a>"; shareText + "</a>";


$share = $( ( panel ? panel : "" ) + link ); $share = $( ( panel ? panel : "" ) + link );
Expand Down

0 comments on commit 4262f27

Please sign in to comment.