add social media button for diaspora, twitter, facebook and google+

11 years ago · 06d0a41915
7 changed files with 343 additions and 6 deletions
--- a/apps/files_sharing/css/3rdparty/gs-share/style.css
+++ b/apps/files_sharing/css/3rdparty/gs-share/style.css
@ -0,0 +1,49 @@
+.js-gs-share, .gs-share [aria-hidden="true"], .gs-share-form[aria-hidden="true"] {
+	display: none;
+}
+
+.js-gs-share-enabled .js-gs-share {
+    display: inline;
+	float: left;
+}
+
+.gs-share .js-gs-share[href] {
+    display: inline;
+}
+
+.gs-share [aria-hidden="false"], .gs-share-form[aria-hidden="false"] {
+	display: block;
+	margin-top: 40px;
+}
+
+.gs-share {
+    position: relative;
+}
+
+.gs-share-form {
+    background: #FFF;
+    border: 1px solid #000;
+    border-radius: 5px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+}
+
+.gs-share [for="gs-account"], .gs-share [type="text"] {
+    display: block;
+	margin-bottom: 8px;
+}
+
+.gs-share [type="submit"] {
+    display: block;
+    margin-top: 8px;
+}
+
+.gs-share--icon {
+	border: none;
+	cursor: pointer;
+	min-height: 32px;
+	padding: 0;
+	padding-left: 33px;
+	background: transparent url('../../../img/gs-share.png') no-repeat left center;
+}
--- a/apps/files_sharing/css/settings-personal.css
+++ b/apps/files_sharing/css/settings-personal.css
@ -0,0 +1,3 @@
+#fileSharingSettings img {
+	cursor: pointer;
+}
--- a/apps/files_sharing/img/gs-share.png
+++ b/apps/files_sharing/img/gs-share.png
--- a/apps/files_sharing/js/3rdparty/gs-share/gs-share.js
+++ b/apps/files_sharing/js/3rdparty/gs-share/gs-share.js
@ -0,0 +1,206 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// @license magnet:?xt=urn:btih:3877d6d54b3accd4bc32f8a48bf32ebc0901502a&dn=mpl-2.0.txt MPL 2.0
+document.addEventListener('DOMContentLoaded', function () {
+    'use strict';
+    /**
+     * 'Share' widget for GNU social
+     * http://code.chromic.org/project/view/2/
+     *
+     * We make a few assumptions about the target instance:
+     *   1) The API root is in the default location
+     *   2) Fancy URLs are enabled
+     *   3) CORS is allowed
+     *   4) The Bookmark plugin is enabled
+     *
+     * If 1), 3) or 4) are wrong, we fall back to a regular
+     * notice (instead of a bookmark notice)
+     *
+     * If 2) is wrong the user will be directed to a 404 :(
+     */
+
+    // TODO: input sanitation [1], [2]
+    // TODO: server-side fallback if JS is disabled
+
+    var createForm,
+        bindClicks,
+        frm,
+        shareAsNotice,
+        shareAsBookmark,
+        extractURLParams,
+        shareURL,
+        shareTitle,
+        closest,
+        i18n = window.i18n;
+
+    /**
+     * Internationalization
+     */
+    if (i18n === undefined) {
+        i18n = {
+            invalidId: 'The account id provided is invalid',
+            yourAcctId: 'Your account ID:',
+            idPlaceholder: 'user@example.org',
+            shareAsBookmark: 'Share as a bookmark'
+        };
+    }
+
+    shareAsNotice = function (title, url, domain) {
+        window.open('http://' + domain + '/notice/new?status_textarea=' + title + ' ' + url); // [1]
+    };
+
+    shareAsBookmark = function (title, url, domain) {
+        window.open('http://' + domain + '/main/bookmark/new?url=' + url + '&title=' + title); // [2]
+    };
+
+    /**
+     * Extract parameters from query string
+     *
+     * ex:
+     *   ?foo=bar&baz=test
+     * will return:
+     *   {foo: 'bar', baz: 'test'}
+     */
+    extractURLParams = function (queryStr) {
+        var parts = queryStr.substr(1).split('&'),
+            i, len, keyVal, params = {};
+
+        for (i = 0, len = parts.length; i < len; i += 1) {
+            keyVal = parts[i].split('=');
+            params[keyVal[0]] = keyVal[1];
+        }
+
+        return params;
+    };
+
+    // Create the form that we'll re-use throughout the page
+    createForm = function () {
+        var err = document.createElement('div');
+        err.setAttribute('class', 'gs-share-err');
+        err.setAttribute('tabindex', '-1');
+        err.setAttribute('aria-hidden', 'true');
+        err.textContent = i18n.invalidId;
+
+        frm = document.createElement('form');
+
+        frm.setAttribute('class', 'gs-share-form');
+        frm.setAttribute('tabindex', '-1');
+        frm.setAttribute('aria-hidden', 'true');
+
+        frm.innerHTML = '<label for="gs-account">' + i18n.yourAcctId + '</label>' +
+            '<input type="text" id="gs-account" placeholder="' + i18n.idPlaceholder + '" />' +
+            '<input type="checkbox" id="gs-bookmark" /> <label for="gs-bookmark">' + i18n.shareAsBookmark + '</label>' +
+            '<input type="submit" value="Share"/>';
+        frm.insertBefore(err, frm.firstChild);
+
+        // Submit handler
+        frm.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            var accountParts = document.getElementById('gs-account').value.split('@'),
+                username, domain, xhr, bookmarkURL;
+
+            if (accountParts.length === 2) {
+                err.setAttribute('aria-hidden', 'true');
+
+                username = accountParts[0];
+                domain = accountParts[1];
+                bookmarkURL = 'http://' + domain + '/api/bookmarks/' + username + '.json';
+
+                // Try bookmark
+                if (document.getElementById('gs-bookmark').checked) {
+                    xhr = new XMLHttpRequest();
+
+                    xhr.onreadystatechange = function () {
+                        if (xhr.readyState === 4) {
+                            if (xhr.status === 200) { // Success
+                                shareAsBookmark(shareTitle, shareURL, domain);
+                            } else { // Failure, fallback to regular notice
+                                shareAsNotice(shareTitle, shareURL, domain);
+                            }
+                        }
+                    };
+
+                    xhr.open('GET', bookmarkURL, true);
+                    xhr.send();
+                } else { // Regular notice
+                    shareAsNotice(shareTitle, shareURL, domain);
+                }
+            } else { // Invalid account id
+                err.setAttribute('aria-hidden', 'false');
+                err.focus();
+            }
+        });
+
+        // Keydown handler
+        frm.addEventListener('keydown', function (e) {
+            if (e.keyCode === 27) { // Escape key closes the dialog
+                frm.parentElement.getElementsByClassName('js-gs-share')[0].focus();
+                frm.setAttribute('aria-hidden', 'true');
+            }
+        });
+
+        document.body.appendChild(frm);
+    };
+
+    /**
+     * Something similar to jQuery.closest
+     *
+     * Given `elm`, return the closest parent with class `cls`
+     * or false if there is no matching ancestor.
+     */
+    closest = function (elm, cls) {
+        while (elm !== document) {
+            if (elm.classList.contains(cls)) {
+                return elm;
+            }
+
+            elm = elm.parentNode;
+        }
+
+        return false;
+    };
+
+    bindClicks = function () {
+        document.addEventListener('click', function (e) {
+            var target = e.target,
+                urlParams,
+                lnk = closest(target, 'js-gs-share');
+
+            // Don't do anything on right/middle click or if ctrl or shift was pressed while left-clicking
+            if (!e.button && !e.ctrlKey && !e.shiftKey && lnk) {
+                e.preventDefault();
+
+                // Check for submission information in href first
+                if (lnk.search !== undefined) {
+                    urlParams = extractURLParams(lnk.search);
+                    shareURL   = urlParams.url;
+                    shareTitle = urlParams.title;
+                } else { // If it's not there, try data-* attributes. If not, use current document url and title
+                    shareURL   = lnk.getAttribute('data-url') || window.location.href;
+                    shareTitle = lnk.getAttribute('data-title') || document.title;
+                }
+
+                // Move form after the clicked link
+                lnk.parentNode.appendChild(frm);
+
+                // Show form
+				frm.setAttribute('aria-hidden', 'false');
+
+                // Focus on form
+                frm.focus();
+            } else if (!frm.contains(target)) {
+                frm.setAttribute('aria-hidden', 'true');
+            }
+        });
+    };
+
+    // Flag that js is enabled
+    document.body.classList.add('js-gs-share-enabled');
+
+    createForm();
+    bindClicks();
+});
+// @license-end
--- a/apps/files_sharing/js/settings-personal.js
+++ b/apps/files_sharing/js/settings-personal.js
@ -0,0 +1,15 @@
+$(document).ready(function() {
+
+	$('#fileSharingSettings img').click(function() {
+		var url = $(this).data('url');
+		if (url) {
+			var width = 600;
+			var height = 400;
+			var left = (screen.width/2)-(width/2);
+			var top = (screen.height/2)-(height/2);
+
+			window.open(url, 'name', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
+		}
+	});
+
+});
--- a/apps/files_sharing/settings-personal.php
+++ b/apps/files_sharing/settings-personal.php
@ -22,11 +22,18 @@

 \OC_Util::checkLoggedIn();

+$l = \OC::$server->getL10N('files_sharing');
+
 $uid = \OC::$server->getUserSession()->getUser()->getUID();
 $server = \OC::$server->getURLGenerator()->getAbsoluteURL('/');
 $cloudID = $uid . '@' . rtrim(\OCA\Files_Sharing\Helper::removeProtocolFromUrl($server), '/');
+$url = 'https://owncloud.org/federation';

 $tmpl = new OCP\Template('files_sharing', 'settings-personal');
+$tmpl->assign('outgoingServer2serverShareEnabled', \OCA\Files_Sharing\Helper::isOutgoingServer2serverShareEnabled());
+$tmpl->assign('message_with_URL', $l->t('Share with me through my #ownCloud federation Id %s see %s', [$cloudID, $url]));
+$tmpl->assign('message_without_URL', $l->t('Share with me through my #ownCloud federation Id %s', [$cloudID]));
+$tmpl->assign('reference', $url);
 $tmpl->assign('cloudId', $cloudID);

 return $tmpl->fetchPage();
--- a/apps/files_sharing/templates/settings-personal.php
+++ b/apps/files_sharing/templates/settings-personal.php
@ -1,12 +1,69 @@
 <?php
 /** @var OC_L10N $l */
 /** @var array $_ */
+script('files_sharing', 'settings-personal');
+style('files_sharing', 'settings-personal');
+script('files_sharing', '3rdparty/gs-share/gs-share');
+style('files_sharing', '3rdparty/gs-share/style');
 ?>
-<div id="fileSharingSettings" class="section">
-	<h2><?php p($l->t('Federated Cloud'));?></h2>

-	<p>
-		<?php p($l->t('Your Federated Cloud ID: %s', [$_['cloudId']])); ?>
-	</p>
+<?php if ($_['outgoingServer2serverShareEnabled']): ?>
+	<div id="fileSharingSettings" class="section">
+		<h2><?php p($l->t('Federated Cloud')); ?></h2>

-</div>
+		<p>
+			<?php p($l->t('Your Federated Cloud ID: %s', [$_['cloudId']])); ?>
+		</p>
+
+		<p>
+
+		<h3><?php p($l->t('Share your Federated Cloud Id:')); ?></h3>
+
+		<p>
+
+		<div class='gs-share'>
+			<button data-url='<?php p($_['reference']); ?>'
+					data-title='<?php p(urlencode($_['message_without_URL'])); ?>'
+					class='js-gs-share gs-share--icon'>
+			</button>
+		</div>
+
+
+		<img src='TODO: Add Diaspora Button' style="border: 0px solid;"
+			 alt='Share on Diaspora'
+			 data-url='http://sharetodiaspora.github.io/?title=<?php p($_['message_without_URL']); ?>&url=<?php p($_['reference']); ?>'/>
+		<img src='TODO: Add Twitter Button' alt=' | Share on Twitter'
+			 data-url='https://twitter.com/intent/tweet?text=<?php p(urlencode($_['message_with_URL'])); ?>'/>
+		<img src='TODO: Add Facebook Button' alt=' | Share on Facebook'
+			 data-url='https://www.facebook.com/sharer/sharer.php?u=<?php p($_['reference']); ?>'/>
+		<img src='TODO: Add Google+ Button' alt=' | Share on Google+'
+			 data-url='https://plus.google.com/share?url=<?php p($_['reference']); ?>'/>
+
+		</p>
+
+		<br/>
+
+		<h3><?php p($l->t('Add your Federated Cloud Id to your homepage:')); ?></h3>
+
+		<p>
+
+			<a href="<?php p($_['reference']); ?>">
+				<img src='TODO: Add Example Banner/Button'
+					 alt='<?php p($_['message_with_URL']); ?>'/>
+			</a>
+
+			<br/>
+			<?php p($l->t('HTML Code:')); ?>
+			<br/>
+
+			<xmp>
+				<a href="<?php p($_['reference']); ?>">
+					<img src='TODO: Add Banner/Button'
+						 alt='<?php p($_['message_with_URL']); ?>'/>
+				</a>
+			</xmp>
+
+		</p>
+
+	</div>
+<?php endif; ?>