Skip to content
Permalink
Browse files

Share widget: Added the ability to customize the link CSS (fixes #4976)

  • Loading branch information...
Paul Jackson Paul Jackson
Paul Jackson authored and Paul Jackson committed Mar 24, 2014
1 parent 691d711 commit 4262f277879e58e6ee3d21b37531d2d750bf9700
@@ -4,7 +4,7 @@
"language": "en",
"description": "Facilitates sharing Web content on social media platforms.",
"altLangPrefix": "share",
"dateModified": "2014-03-17"
"dateModified": "2014-03-24"
}
---
<span class="wb-prettify all-pre hide"></span>
@@ -94,6 +94,16 @@
</dl>
</td>
</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>
<td><code>type</code></td>
<td>Type of content to share.</td>
@@ -4,7 +4,7 @@
"language": "fr",
"description": "Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux.",
"altLangPrefix": "share",
"dateModified": "2014-03-17"
"dateModified": "2014-03-24"
}
---
<span class="wb-prettify all-pre hide"></span>
@@ -96,6 +96,16 @@
</dl>
</td>
</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>
<td><code>type</code></td>
<td>Type of content to share.</td>
@@ -95,81 +95,20 @@
<hr />

<section>
<h2>Options</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Option</th>
<th scope="col">Values</th>
<th scope="col">Default value</th>
<th scope="col">Example</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>link-only</code></td>
<td>Class name</td>
<td>n/a</td>
<td><code>class="wb-share link-only"</code></td>
<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>
<h2>Add custom CSS to the share link</h2>

<div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<div class="text-right">
<strong>Add a second link:</strong>
<div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
</div>

<details>
<summary>View code</summary>
<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
&lt;div class="text-right"&gt;
&lt;strong&gt;Add a second link:&lt;/strong&gt;
&lt;div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
</section>
@@ -92,84 +92,21 @@
</details>
</section>

<hr />

<section>
<h2>Options</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Option</th>
<th scope="col">Valeurs</th>
<th scope="col">Valeur par défaut</th>
<th scope="col">Exemple</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>link-only</code></td>
<td>Nom de classe</td>
<td>s/o</td>
<td><code>class="wb-share link-only"</code></td>
<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>
<h2>Ajouter du CSS personnalisé au lien de partage</h2>

<div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
<div class="text-right">
<strong>Ajouter un deuxième lien&#160;:</strong>
<div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'></div>
</div>

<details>
<summary>View code</summary>
<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
&lt;div class="text-right"&gt;
&lt;strong&gt;Ajouter un deuxième lien&#160;:&lt;/strong&gt;
&lt;div class="wb-share link-only text-right" data-wet-boew='{"pnlId": "pnl5", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
</section>
@@ -41,6 +41,7 @@ var pluginName = "wb-share",
title: document.title || $document.find( "h1:first" ).text(),

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

@@ -191,7 +192,7 @@ var pluginName = "wb-share",
if ( elm.className.indexOf( "link-only" ) === -1 ) {
panel = "<section id='" + id + "' class='shr-pg wb-overlay modal-content overlay-def wb-panel-r" +
"'><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 ( !filter || filter.length === 0 ) {
@@ -229,7 +230,7 @@ var pluginName = "wb-share",
panel += "</ul><div class='clearfix'></div><p class='col-sm-12'>" + i18nText.disclaimer + "</p></section>";
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>";

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

0 comments on commit 4262f27

Please sign in to comment.
You can’t perform that action at this time.