From 1f65cda4736fc898ab503db6a6fb01257a32257f Mon Sep 17 00:00:00 2001 From: Avatar4eg Date: Fri, 16 Sep 2016 10:52:26 +0300 Subject: [PATCH] 1. Added linkedin. 2. Linking to a specific post. --- js/forum/dist/extension.js | 22 +++- js/forum/src/components/ShareModal.js | 24 +++- less/forum/extension.less | 4 + locale/en.yml | 3 + locale/es.yml | 3 + locale/ru.yml | 3 + ..._06_20_000000_add_settings_social_list.php | 2 +- ...2016_09_14_000000_add_linkedin_to_list.php | 18 +++ src/Listener/AddHeadData.php | 115 ++++++++++++------ 9 files changed, 142 insertions(+), 52 deletions(-) create mode 100644 migrations/2016_09_14_000000_add_linkedin_to_list.php diff --git a/js/forum/dist/extension.js b/js/forum/dist/extension.js index 1debf71..cd0c893 100644 --- a/js/forum/dist/extension.js +++ b/js/forum/dist/extension.js @@ -148,6 +148,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' var height = 500; var top = $(window).height() / 2 - height / 2; var left = $(window).width() / 2 - width / 2; + var window_params = 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'; return [m('div', { className: 'Modal-body ShareSocialModal' }, [m('div', { className: 'Form Form--centered' }, [m('div', { className: 'Form-group' }, m('ul', { className: 'ShareList' }, [this.socialButtons.map(function (key) { switch (key) { @@ -157,7 +158,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'facebook fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//facebook.com/sharer/sharer.php?u=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//facebook.com/sharer/sharer.php?u=' + share_url, app.title, window_params); } })); case 'vkontakte': @@ -166,7 +167,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'vk fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//vk.com/share.php?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//vk.com/share.php?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, window_params); } })); case 'twitter': @@ -175,7 +176,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'twitter fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//twitter.com/share?url=' + share_url + '&text=' + share_title, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//twitter.com/share?url=' + share_url + '&text=' + share_title, app.title, window_params); } })); case 'google_plus': @@ -184,7 +185,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'google-plus fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//plus.google.com/share?url=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//plus.google.com/share?url=' + share_url, app.title, window_params); } })); case 'odnoklassniki': @@ -193,7 +194,7 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'odnoklassniki fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//connect.ok.ru/offer?url=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//connect.ok.ru/offer?url=' + share_url, app.title, window_params); } })); case 'my_mail': @@ -202,7 +203,16 @@ System.register('avatar4eg/share-social/components/ShareModal', ['flarum/app', ' icon: 'at fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//connect.mail.ru/share?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//connect.mail.ru/share?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, window_params); + } + })); + case 'linkedin': + return m('li', { className: 'ShareItem' }, Button.component({ + className: 'Button Button--rounded Share--' + key, + icon: 'linkedin fa-lg fa-fw', + children: app.translator.trans(parent.addPrefix(key + '_button')), + onclick: function onclick() { + window.open('//linkedin.com/shareArticle?mini=true&url=' + share_url + '&title=' + share_title + '&summary=' + share_description, app.title, window_params); } })); default: diff --git a/js/forum/src/components/ShareModal.js b/js/forum/src/components/ShareModal.js index 9455f91..e3bd1e1 100644 --- a/js/forum/src/components/ShareModal.js +++ b/js/forum/src/components/ShareModal.js @@ -32,6 +32,7 @@ export default class ShareModal extends Modal { const height = 500; const top = $(window).height() / 2 - height / 2; const left = $(window).width() / 2 - width / 2; + const window_params = 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'; return [ m('div', {className: 'Modal-body ShareSocialModal'}, [ @@ -47,7 +48,7 @@ export default class ShareModal extends Modal { icon: 'facebook fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: () => { - window.open('//facebook.com/sharer/sharer.php?u=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//facebook.com/sharer/sharer.php?u=' + share_url, app.title, window_params); } }) ); @@ -58,7 +59,7 @@ export default class ShareModal extends Modal { icon: 'vk fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: function onclick() { - window.open('//vk.com/share.php?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//vk.com/share.php?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, window_params); } }) ); @@ -69,7 +70,7 @@ export default class ShareModal extends Modal { icon: 'twitter fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: () => { - window.open('//twitter.com/share?url=' + share_url + '&text=' + share_title, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//twitter.com/share?url=' + share_url + '&text=' + share_title, app.title, window_params); } }) ); @@ -80,7 +81,7 @@ export default class ShareModal extends Modal { icon: 'google-plus fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: () => { - window.open('//plus.google.com/share?url=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//plus.google.com/share?url=' + share_url, app.title, window_params); } }) ); @@ -91,7 +92,7 @@ export default class ShareModal extends Modal { icon: 'odnoklassniki fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: () => { - window.open('//connect.ok.ru/offer?url=' + share_url, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//connect.ok.ru/offer?url=' + share_url, app.title, window_params); } }) ); @@ -102,7 +103,18 @@ export default class ShareModal extends Modal { icon: 'at fa-lg fa-fw', children: app.translator.trans(parent.addPrefix(key + '_button')), onclick: () => { - window.open('//connect.mail.ru/share?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, 'width=' + width + ', height= ' + height + ', top=' + top + ', left=' + left + ', status=no, scrollbars=no, resizable=no'); + window.open('//connect.mail.ru/share?url=' + share_url + '&title=' + share_title + '&description=' + share_description, app.title, window_params); + } + }) + ); + case 'linkedin': + return m('li', {className: 'ShareItem'}, + Button.component({ + className: 'Button Button--rounded Share--' + key, + icon: 'linkedin fa-lg fa-fw', + children: app.translator.trans(parent.addPrefix(key + '_button')), + onclick: () => { + window.open('//linkedin.com/shareArticle?mini=true&url=' + share_url + '&title=' + share_title + '&summary=' + share_description, app.title, window_params); } }) ); diff --git a/less/forum/extension.less b/less/forum/extension.less index 1a446de..2190154 100644 --- a/less/forum/extension.less +++ b/less/forum/extension.less @@ -42,6 +42,10 @@ .Button--color(#fff, #168DE2); } + .Share--linkedin { + .Button--color(#fff, #0077B5); + } + .fa-lg { font-size: 1.33333333em; line-height: 0.75em; diff --git a/locale/en.yml b/locale/en.yml index 4142716..afec758 100644 --- a/locale/en.yml +++ b/locale/en.yml @@ -9,6 +9,7 @@ avatar4eg-share-social: google_plus_label: => avatar4eg-share-social.ref.google_plus odnoklassniki_label: => avatar4eg-share-social.ref.odnoklassniki my_mail_label: => avatar4eg-share-social.ref.my_mail + linkedin_label: => avatar4eg-share-social.ref.linkedin metatags_label: Metatags: open_graph_label: Open Graph twitter_card_label: Twitter Cards @@ -22,6 +23,7 @@ avatar4eg-share-social: google_plus_button: => avatar4eg-share-social.ref.google_plus odnoklassniki_button: => avatar4eg-share-social.ref.odnoklassniki my_mail_button: => avatar4eg-share-social.ref.my_mail + linkedin_button: => avatar4eg-share-social.ref.linkedin ref: facebook: Facebook @@ -30,4 +32,5 @@ avatar4eg-share-social: google_plus: Google+ odnoklassniki: Odnoklassniki my_mail: My World + linkedin: LinkedIn share: Share diff --git a/locale/es.yml b/locale/es.yml index 1ae4f80..9dad929 100644 --- a/locale/es.yml +++ b/locale/es.yml @@ -9,6 +9,7 @@ avatar4eg-share-social: google_plus_label: => avatar4eg-share-social.ref.google_plus odnoklassniki_label: => avatar4eg-share-social.ref.odnoklassniki my_mail_label: => avatar4eg-share-social.ref.my_mail + linkedin_label: => avatar4eg-share-social.ref.linkedin metatags_label: Metatags: open_graph_label: Open Graph twitter_card_label: Twitter Cards @@ -22,6 +23,7 @@ avatar4eg-share-social: google_plus_button: => avatar4eg-share-social.ref.google_plus odnoklassniki_button: => avatar4eg-share-social.ref.odnoklassniki my_mail_button: => avatar4eg-share-social.ref.my_mail + linkedin_button: => avatar4eg-share-social.ref.linkedin ref: facebook: Facebook @@ -30,4 +32,5 @@ avatar4eg-share-social: google_plus: Google+ odnoklassniki: Odnoklassniki my_mail: My World + linkedin: LinkedIn share: Compartir diff --git a/locale/ru.yml b/locale/ru.yml index b2aa630..0c44be8 100644 --- a/locale/ru.yml +++ b/locale/ru.yml @@ -9,6 +9,7 @@ avatar4eg-share-social: google_plus_label: => avatar4eg-share-social.ref.google_plus odnoklassniki_label: => avatar4eg-share-social.ref.odnoklassniki my_mail_label: => avatar4eg-share-social.ref.my_mail + linkedin_label: => avatar4eg-share-social.ref.linkedin metatags_label: Метатеги: open_graph_label: Open Graph twitter_card_label: Twitter Cards @@ -22,6 +23,7 @@ avatar4eg-share-social: google_plus_button: => avatar4eg-share-social.ref.google_plus odnoklassniki_button: => avatar4eg-share-social.ref.odnoklassniki my_mail_button: => avatar4eg-share-social.ref.my_mail + linkedin_button: => avatar4eg-share-social.ref.linkedin ref: facebook: Facebook @@ -30,4 +32,5 @@ avatar4eg-share-social: google_plus: Google+ odnoklassniki: Одноклассники my_mail: Мой Мир + linkedin: LinkedIn share: Поделиться diff --git a/migrations/2016_06_20_000000_add_settings_social_list.php b/migrations/2016_06_20_000000_add_settings_social_list.php index a24ac5d..5ded5df 100644 --- a/migrations/2016_06_20_000000_add_settings_social_list.php +++ b/migrations/2016_06_20_000000_add_settings_social_list.php @@ -12,6 +12,6 @@ }, 'down' => function (ConnectionInterface $db) { - $db->table('settings')->delete('avatar4eg.share-social.list'); + $db->table('settings')->where('key', 'avatar4eg.share-social.list')->delete(); } ]; \ No newline at end of file diff --git a/migrations/2016_09_14_000000_add_linkedin_to_list.php b/migrations/2016_09_14_000000_add_linkedin_to_list.php new file mode 100644 index 0000000..c62bab7 --- /dev/null +++ b/migrations/2016_09_14_000000_add_linkedin_to_list.php @@ -0,0 +1,18 @@ + function (ConnectionInterface $db) { + $db->table('settings')->where('key', 'avatar4eg.share-social.list')->update([ + 'value' => '["facebook","vkontakte","twitter","google_plus","odnoklassniki","my_mail","linkedin"]' + ]); + }, + + 'down' => function (ConnectionInterface $db) { + $db->table('settings')->where('key', 'avatar4eg.share-social.list')->update([ + 'value' => '["facebook","vkontakte","twitter","google_plus","odnoklassniki","my_mail"]' + ]); + } +]; \ No newline at end of file diff --git a/src/Listener/AddHeadData.php b/src/Listener/AddHeadData.php index 643fcfb..969de06 100644 --- a/src/Listener/AddHeadData.php +++ b/src/Listener/AddHeadData.php @@ -1,7 +1,9 @@ listen(ConfigureClientView::class, [$this, 'addMetaTags']); - $events->listen(PrepareApiData::class, [$this, 'addDiscussionMetaTags']); + $events->listen(ConfigureClientView::class, [$this, 'getClientView']); + $events->listen(PrepareApiData::class, [$this, 'addMetaTags']); } /** * @param ConfigureClientView $event */ - public function addMetaTags(ConfigureClientView $event) + public function getClientView(ConfigureClientView $event) { if ($event->isForum()) { $this->clientView = $event->view; @@ -65,25 +67,21 @@ public function addMetaTags(ConfigureClientView $event) $this->twitterCard = true; } - $dataTitle = $dataUrl = $dataDescription = ''; if ($this->openGraph || $this->twitterCard) { - $dataTitle = htmlspecialchars($this->settings->get('welcome_title'), ENT_QUOTES|ENT_HTML5|ENT_DISALLOWED|ENT_SUBSTITUTE, 'UTF-8'); - $dataUrl = $this->urlGenerator->toBase(); - $dataDescription = $this->plainText($this->settings->get('forum_description'), 150); - } - - if ($this->openGraph) { - $event->view->addHeadString('', 'og_type'); - $event->view->addHeadString('', 'og_title'); - $event->view->addHeadString('', 'og_url'); - $event->view->addHeadString('', 'og_description'); - $event->view->addHeadString('', 'og_site_name'); - } - if ($this->twitterCard) { - $event->view->addHeadString('', 'twitter_card'); - $event->view->addHeadString('', 'twitter_title'); - $event->view->addHeadString('', 'twitter_url'); - $event->view->addHeadString('', 'twitter_description'); + $data = []; + $data['url'] = $this->urlGenerator->toBase(); + $data['title'] = $this->plainText($this->settings->get('welcome_title'), 80); + $data['description'] = $this->plainText($this->settings->get('forum_description'), 150); + + $this->addOpenGraph([ + 'type' => 'website', + 'site_name' => $this->settings->get('forum_title') + ]); + $this->addOpenGraph($data); + $this->addTwitterCard([ + 'card' => 'summary' + ]); + $this->addTwitterCard($data); } } } @@ -91,28 +89,67 @@ public function addMetaTags(ConfigureClientView $event) /** * @param PrepareApiData $event */ - public function addDiscussionMetaTags(PrepareApiData $event) + public function addMetaTags(PrepareApiData $event) { - if ($this->clientView && $event->isController(ShowDiscussionController::class)) { - $dataTitle = $dataUrl = $dataDescription = ''; - if ($this->openGraph || $this->twitterCard) { - $dataTitle = htmlspecialchars($event->data->title, ENT_QUOTES|ENT_HTML5|ENT_DISALLOWED|ENT_SUBSTITUTE, 'UTF-8'); - $dataUrl = $this->urlGenerator->toRoute('discussion', ['id' => $event->data->id]); - } - if ($event->data->startPost) { - $dataDescription = $this->plainText($event->data->startPost->content, 150); + if ($this->clientView && ($this->openGraph || $this->twitterCard)) { + $data = []; + + switch (true) { + case $event->isController(ShowDiscussionController::class): + $data['url'] = $this->urlGenerator->toRoute('discussion', ['id' => $event->data->id . '-' . $event->data->slug]); + $data['title'] = $this->plainText($event->data->title, 80); + $post_id = $event->request->getQueryParams()['page']['near']; + if ($post_id === null) { + $data['description'] = $event->data->startPost ? $this->plainText($event->data->startPost->content, 150) : ''; + } else { + $post = array_key_exists((int)$post_id - 1, $event->data->posts) ? $event->data->posts[(int)$post_id - 1] : null; + $data['url'] .= '/' . $post_id; + if ($post) { + $data['description'] = $this->plainText($post->content, 150); + } else { + $data['description'] = $event->data->startPost ? $this->plainText($event->data->startPost->content, 150) : ''; + } + } + break; +// case $event->isController(ListDiscussionsController::class): +// $data['url'] = $this->urlGenerator->toRoute('user', ['username' => $event->data->username]); +// $data['title'] = $this->plainText($event->data->username, 80); +// $data['description'] = $event->data->bio ? $this->plainText($event->data->bio, 150) : ''; +// break; +// case $event->isController(ShowUserController::class): +// $data['url'] = $this->urlGenerator->toRoute('user', ['username' => $event->data->username]); +// $data['title'] = $this->plainText($event->data->username, 80); +// $data['description'] = $event->data->bio ? $this->plainText($event->data->bio, 150) : ''; +// break; + default: + break; } - //$this->clientView->addHeadString('', 'description'); - if ($this->openGraph) { - $this->clientView->addHeadString('', 'og_title'); - $this->clientView->addHeadString('', 'og_url'); - $this->clientView->addHeadString('', 'og_description'); + $this->addOpenGraph($data); + $this->addTwitterCard($data); + } + } + + /** + * @param array $data + */ + public function addOpenGraph(array $data = []) + { + if ($this->openGraph) { + foreach ($data as $key => $value) { + $this->clientView->addHeadString('', 'og_' . $key . ''); } - if ($this->twitterCard) { - $this->clientView->addHeadString('', 'twitter_title'); - $this->clientView->addHeadString('', 'twitter_url'); - $this->clientView->addHeadString('', 'twitter_description'); + } + } + + /** + * @param array $data + */ + public function addTwitterCard(array $data = []) + { + if ($this->twitterCard) { + foreach ($data as $key => $value) { + $this->clientView->addHeadString('', 'twitter_' . $key . ''); } } }