--- a/cms/app-client/app/components/playlist-component.js Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/app/components/playlist-component.js Mon Nov 14 15:02:15 2016 +0100
@@ -1,4 +1,6 @@
import Ember from 'ember';
+import ENV from '../config/environment';
+import SocialShareKit from 'socialsharekit';
export default Ember.Component.extend({
@@ -9,6 +11,8 @@
isLoading: false,
+ rootURL: ENV.rootURL,
+
model: [],
documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
return this.get('model');
@@ -79,8 +83,32 @@
} else {
this.get('player').displayMetadata(false);
}
+ },
+
+ shareLinkRender: (elemId) => {
+ //Ember.$("#"+elemId+" .playlist-share-button").click(function(e) { e.preventDefault(); return false;});
+ //console.log("RENDER");
+ SocialShareKit.init({selector: "#"+elemId+" .ssk"});
+ Ember.$("#"+elemId+" .playlist-share-button-close").click(function() {
+ // This is done like this because I was not able to register an action directly on the button like shgown on ember-tooltips documentaion (https://github.com/sir-dunxalot/ember-tooltips#popover-on-element)
+ Ember.$("#corpus-app").click();
+ });
+ return true;
+ },
+
+ shareLinkShow: (elemId) => {
+ let input = Ember.$("#"+elemId+" input");
+ input.get(0).setSelectionRange(0, input.val().length);
+ input.get(0).select(0, input.val().length);
+ return true;
+ },
+
+ shareLinkClose: function() {
+ console.log("CLOSE");
+ //console.log("CLOSE", popover);
+ // popover.hide();
+ // return false;
}
-
}
});
--- a/cms/app-client/app/controllers/application.js Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/app/controllers/application.js Mon Nov 14 15:02:15 2016 +0100
@@ -8,6 +8,7 @@
constants: Ember.inject.service(),
isLoading: false,
+ currentUrl: '',
page: 1,
limit: Ember.computed(function() {
@@ -76,6 +77,12 @@
}
}),
+ targetUrlChanged: Ember.observer('target.url', function() {
+ Ember.run.next(this, function() {
+ this.set('currentUrl', window.location.href);
+ });
+ }),
+
init: function() {
this._super(...arguments);
this.get('player');
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/url-encode.js Mon Nov 14 15:02:15 2016 +0100
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function urlEncode(params) {
+ return encodeURIComponent(params[0]);
+}
+
+export default Ember.Helper.helper(urlEncode);
--- a/cms/app-client/app/styles/components/playlist-component.scss Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/app/styles/components/playlist-component.scss Mon Nov 14 15:02:15 2016 +0100
@@ -240,7 +240,26 @@
margin-left: 1em;
}
-.playlist-component .playlist-share-button {
- visibility: hidden;
+.playlist-share-button-close {
+ cursor: pointer;
+ text-align: right;
+ margin-top: 10px;
+}
+
+.playlist-share-button-link {
+ width: 100%;
}
+.playlist-share-button-list {
+ margin-top: 5px;
+}
+
+.playlist-share-button-popover {
+ background-color: #2f3337;
+ color: $corpus-white;
+}
+
+.playlist-share-button-popover p {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
--- a/cms/app-client/app/templates/application.hbs Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/app/templates/application.hbs Mon Nov 14 15:02:15 2016 +0100
@@ -19,7 +19,7 @@
<div class="corpus-app-wrapper">
{{ filter-component }}
- {{ playlist-component model=model page=page limit=limit pageAction='setPageQueryparams' isLoading=isLoading }}
+ {{ playlist-component model=model page=page limit=limit pageAction='setPageQueryparams' isLoading=isLoading currentUrl=currentUrl }}
</div>
</div>
\ No newline at end of file
--- a/cms/app-client/app/templates/components/playlist-component.hbs Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/app/templates/components/playlist-component.hbs Mon Nov 14 15:02:15 2016 +0100
@@ -7,7 +7,7 @@
</div>
</div>
<ul>
- {{#each documents as |document| }}
+ {{#each documents as |document index| }}
<li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}" {{action 'select' document.id}}>
<div class="tools">
<div>
@@ -24,7 +24,31 @@
<button title="Notice" {{action 'displayNotice' document.id bubbles=false}} class="notice{{if (ifAnd (eq player.window 'notice') (eq player.item document.id)) ' active'}}">
Notice
</button>
- <i title="Partage notice" class="fa fa-share-alt playlist-share-button">Partage notice</i>
+ <i title="Partage notice" class="fa fa-share-alt playlist-share-button" id='playlist-share-button-{{index}}'>Partage notice</i>
+ {{#popover-on-element
+ id=(concat "popup-playlist-share-button-" index)
+ target=(concat "#playlist-share-button-" index)
+ event='click'
+ enableLazyRendering=true
+ onRender=(action 'shareLinkRender' (concat "popup-playlist-share-button-" index))
+ onShow=(action 'shareLinkShow' (concat "popup-playlist-share-button-" index))
+ class="playlist-share-button-popover"
+ as |popover| }}
+ <p>Partager un lien vers cette notice</p>
+ <div>
+ {{input id=(concat "popup-playlist-share-button-text-" index) value=(concat currentUrl "#/doc/" (url-encode document.id)) readonly='readonly' class='playlist-share-button-link'}}
+ </div>
+ <div class="ssk-group ssk-xs playlist-share-button-list" data-url="{{concat currentUrl "#/doc/" (url-encode document.id)}}" data-title="Corpus de la Parole : {{ document.title }}" data-text="Partager cette notice">
+ <a href="" class="ssk ssk-facebook"></a>
+ <a href="" class="ssk ssk-twitter"></a>
+ <a href="" class="ssk ssk-google-plus"></a>
+ <a href="" class="ssk ssk-pinterest"></a>
+ <a href="" class="ssk ssk-tumblr"></a>
+ <a href="" class="ssk ssk-linkedin"></a>
+ <a href="" class="ssk ssk-email"></a>
+ </div>
+ <div class='playlist-share-button-close'>fermer</div>
+ {{/popover-on-element}}
</div>
</div>
<div class="meta">
--- a/cms/app-client/ember-cli-build.js Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/ember-cli-build.js Mon Nov 14 15:02:15 2016 +0100
@@ -60,5 +60,20 @@
}
});
+ //social-share-kit
+ app.import('bower_components/social-share-kit/dist/js/social-share-kit.js');
+ app.import('bower_components/social-share-kit/dist/css/social-share-kit.css');
+ app.import('bower_components/social-share-kit/dist/fonts/social-share-kit.eot', { destDir: 'fonts'});
+ app.import('bower_components/social-share-kit/dist/fonts/social-share-kit.svg', { destDir: 'fonts'});
+ app.import('bower_components/social-share-kit/dist/fonts/social-share-kit.ttf', { destDir: 'fonts'});
+ app.import('bower_components/social-share-kit/dist/fonts/social-share-kit.woff', { destDir: 'fonts'});
+ app.import('vendor/shims/socialsharekit.js', {
+ exports: {
+ 'socialsharekit': [ 'default' ]
+ }
+ });
+
+
+
return app.toTree();
};
--- a/cms/app-client/package.json Sat Nov 12 17:21:25 2016 +0100
+++ b/cms/app-client/package.json Mon Nov 14 15:02:15 2016 +0100
@@ -56,6 +56,8 @@
"ember-load-initializers": "^0.5.1",
"ember-lodash": "0.0.10",
"ember-resolver": "^2.0.3",
+ "ember-tether": "0.3.1",
+ "ember-tooltips": "2.4.0",
"ember-truth-helpers": "1.2.0",
"ember-welcome-page": "^1.0.3",
"ember-wormhole": "0.4.0",
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/vendor/shims/socialsharekit.js Mon Nov 14 15:02:15 2016 +0100
@@ -0,0 +1,9 @@
+(function() {
+ function vendorModule() {
+ 'use strict';
+
+ return { 'default': self['SocialShareKit'] };
+ }
+
+ define('socialsharekit', [], vendorModule);
+})();