add social media button for diaspora, twitter, facebook and google+
This commit is contained in:
Bjoern Schiessle
parent
1cccb227c3
commit
06d0a41915
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#fileSharingSettings img {
|
||||
cursor: pointer;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
|
|
@ -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
|
||||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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; ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue