Browse Source

new "favorite" form with bookmarklet

* disable facebook liking for now since it was getting complicated
* new page for creating a favorite, can pass in a URL parameter too
* bookmarklet code added to the "favorite" page
pull/5/head
Aaron Parecki 10 years ago
parent
commit
8be498a324
  1. 109
      controllers/controllers.php
  2. 2
      lib/helpers.php
  3. 2
      public/css/favorite.css
  4. 33
      views/favorite-js.php
  5. 50
      views/favorite-popup.php
  6. 4
      views/layout.php
  7. 22
      views/liked-js.php
  8. 4
      views/new-bookmark.php
  9. 74
      views/new-favorite.php
  10. 4
      views/new-post.php
  11. 2
      views/partials/bookmark-bookmarklet.php
  12. 10
      views/partials/favorite-bookmarklet.php
  13. 8
      views/settings.php

109
controllers/controllers.php

@ -104,6 +104,24 @@ $app->get('/bookmark', function() use($app) {
} }
}); });
$app->get('/favorite', function() use($app) {
if($user=require_login($app)) {
$params = $app->request()->params();
$url = '';
if(array_key_exists('url', $params))
$url = $params['url'];
$html = render('new-favorite', array(
'title' => 'New Favorite',
'url' => $url,
'token' => generate_login_token()
));
$app->response()->body($html);
}
});
$app->post('/prefs', function() use($app) { $app->post('/prefs', function() use($app) {
if($user=require_login($app)) { if($user=require_login($app)) {
$params = $app->request()->params(); $params = $app->request()->params();
@ -176,30 +194,84 @@ $app->get('/settings', function() use($app) {
} }
}); });
$app->get('/favorite-popup', function() use($app) {
if($user=require_login($app)) {
$params = $app->request()->params();
$html = $app->render('favorite-popup.php', array(
'url' => $params['url'],
'token' => $params['token']
));
$app->response()->body($html);
}
});
function create_favorite(&$user, $url) {
$micropub_request = array(
'like-of' => $url
);
$r = micropub_post_for_user($user, $micropub_request);
$facebook_id = false;
$instagram_id = false;
$tweet_id = false;
/*
// Facebook likes are posted via Javascript, so pass the FB ID to the javascript code
if(preg_match('/https?:\/\/(?:www\.)?facebook\.com\/(?:[^\/]+)\/posts\/(\d+)/', $url, $match)) {
$facebook_id = $match[1];
}
if(preg_match('/https?:\/\/(?:www\.)?facebook\.com\/photo\.php\?fbid=(\d+)/', $url, $match)) {
$facebook_id = $match[1];
}
*/
if(preg_match('/https?:\/\/(?:www\.)?instagram\.com\/p\/([^\/]+)/', $url, $match)) {
$instagram_id = $match[1];
if($user->instagram_access_token) {
$instagram = instagram_client();
$instagram->setAccessToken($user->instagram_access_token);
$ch = curl_init('https://api.instagram.com/v1/media/shortcode/' . $instagram_id . '?access_token=' . $user->instagram_access_token);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = json_decode(curl_exec($ch));
$result = $instagram->likeMedia($result->data->id);
} else {
// TODO: indicate that the instagram post couldn't be liked because no access token was available
}
}
if(preg_match('/https?:\/\/(?:www\.)?twitter\.com\/[^\/]+\/status(?:es)?\/(\d+)/', $url, $match)) {
$tweet_id = $match[1];
$twitter = new \TwitterOAuth\Api(Config::$twitterClientID, Config::$twitterClientSecret,
$user->twitter_access_token, $user->twitter_token_secret);
$result = $twitter->post('favorites/create', array(
'id' => $tweet_id
));
}
return $r;
}
$app->get('/favorite.js', function() use($app) { $app->get('/favorite.js', function() use($app) {
$app->response()->header("Content-type", "text/javascript"); $app->response()->header("Content-type", "text/javascript");
if($user=require_login($app, false)) { if($user=require_login($app, false)) {
$params = $app->request()->params(); $params = $app->request()->params();
if(array_key_exists('url', $params)) { if(array_key_exists('url', $params)) {
$micropub_request = array(
'like-of' => $params['url']
);
$r = micropub_post_for_user($user, $micropub_request);
}
if(preg_match('/https?:\/\/(?:www\.)?facebook\.com\/(?:[^\/]+)\/posts\/(\d+)/', $params['url'], $match)) {
$facebook_id = $match[1];
$r = create_favorite($user, $params['url']);
$app->response()->body($app->render('favorite-js.php', array(
'url' => $params['url'],
'like_url' => $r['location'],
'error' => $r['error'],
// 'facebook_id' => $facebook_id
)));
} else { } else {
$facebook_id = false;
$app->response()->body('alert("no url");');
} }
$app->response()->body($app->render('liked-js.php', array(
'url' => $params['url'],
'like_url' => $r['location'],
'error' => $r['error'],
'facebook_id' => $facebook_id
)));
} else { } else {
$app->response()->body('alert("invalid token");'); $app->response()->body('alert("invalid token");');
} }
@ -236,6 +308,7 @@ $app->post('/micropub/post', function() use($app) {
} }
}); });
/*
$app->post('/auth/facebook', function() use($app) { $app->post('/auth/facebook', function() use($app) {
if($user=require_login($app, false)) { if($user=require_login($app, false)) {
$params = $app->request()->params(); $params = $app->request()->params();
@ -252,11 +325,12 @@ $app->post('/auth/facebook', function() use($app) {
))); )));
} }
}); });
*/
$app->post('/auth/twitter', function() use($app) { $app->post('/auth/twitter', function() use($app) {
if($user=require_login($app, false)) { if($user=require_login($app, false)) {
$params = $app->request()->params(); $params = $app->request()->params();
// User just auth'd with facebook, store the access token
// User just auth'd with twitter, store the access token
$user->twitter_access_token = $params['twitter_token']; $user->twitter_access_token = $params['twitter_token'];
$user->twitter_token_secret = $params['twitter_secret']; $user->twitter_token_secret = $params['twitter_secret'];
$user->save(); $user->save();
@ -347,7 +421,8 @@ $app->get('/auth/instagram', function() use($app) {
if($igUser && $igUser->meta->code == 200) { if($igUser && $igUser->meta->code == 200) {
$app->response()->body(json_encode(array( $app->response()->body(json_encode(array(
'result' => 'ok', 'result' => 'ok',
'username' => $igUser->data->username
'username' => $igUser->data->username,
'url' => $instagram->getLoginUrl(array('basic','likes'))
))); )));
return; return;
} }

2
lib/helpers.php

@ -79,7 +79,7 @@ function micropub_post_for_user(&$user, $params) {
// Check the response and look for a "Location" header containing the URL // Check the response and look for a "Location" header containing the URL
if($r['response'] && preg_match('/Location: (.+)/', $r['response'], $match)) { if($r['response'] && preg_match('/Location: (.+)/', $r['response'], $match)) {
$r['location'] = $match[1];
$r['location'] = trim($match[1]);
$user->micropub_success = 1; $user->micropub_success = 1;
} else { } else {
$r['location'] = false; $r['location'] = false;

2
public/css/favorite.css

@ -1,6 +1,6 @@
#quill-star { #quill-star {
position: absolute;
position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;

33
views/favorite-js.php

@ -0,0 +1,33 @@
console.log("Favoriting URL: <?= $this->url ?>");
var css = document.createElement('link');
css.rel="stylesheet";
css.type="text/css";
css.href="<?= Config::$base_url ?>css/favorite.css";
document.body.appendChild(css);
function show_star() {
var star = document.createElement('img');
star.id="quill-star";
star.src="<?= Config::$base_url ?>images/<?= $this->like_url ? 'star' : 'red-x' ?>.svg";
star.onload=function() {
setTimeout(function(){
document.getElementById('quill-star').classList.add('hidden');
var el = document.getElementById('quill-star');
el.parentNode.removeChild(el);
if(typeof favorite_finished == "function") {
favorite_finished();
} else {
// For now, redirect the user to the URL of their favorite so they can see it posted.
// Might want to change this later.
window.location = "<?= $this->like_url ?>";
}
}, 1200);
}
document.body.appendChild(star);
}
show_star();

50
views/favorite-popup.php

@ -0,0 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<title>Favoriting</title>
</head>
<body>
<script>
function favorite_finished() {
self.close();
}
</script>
<script src="/favorite.js?url=<?= urlencode($this->url) ?>&amp;token=<?= $this->token ?>"></script>
<?php /*
<script>
window.quillFbInit = function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
console.log(accessToken);
FB.api("/<?= $this->facebook_id ?>/likes", "post", function(response){
console.log(response);
show_star();
});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
console.log("Logged in but not authorized");
} else {
// the user isn't logged in to Facebook.
console.log("User isn't logged in");
}
});
};
</script>
<?= partial('partials/fb-script') ?>
*/ ?>
</body>
</html>

4
views/layout.php

@ -33,7 +33,7 @@
<body role="document"> <body role="document">
<?php <?php
if(property_exists($this, 'include_facebook')) { if(property_exists($this, 'include_facebook')) {
echo partial('partials/fb-script');
# echo partial('partials/fb-script');
} }
?> ?>
@ -64,13 +64,13 @@ if(property_exists($this, 'include_facebook')) {
<? if(session('me')) { ?> <? if(session('me')) { ?>
<li><a href="/new">New Post</a></li> <li><a href="/new">New Post</a></li>
<li><a href="/bookmark">Bookmark</a></li> <li><a href="/bookmark">Bookmark</a></li>
<li><a href="/favorite">Favorite</a></li>
<? } ?> <? } ?>
<li><a href="/docs">Docs</a></li> <li><a href="/docs">Docs</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<? if(session('me')) { ?> <? if(session('me')) { ?>
<li><a href="/add-to-home?start">Add to Home Screen</a></li>
<li><a href="/settings"><?= preg_replace(array('/https?:\/\//','/\/$/'),'',session('me')) ?></a></li> <li><a href="/settings"><?= preg_replace(array('/https?:\/\//','/\/$/'),'',session('me')) ?></a></li>
<li><a href="/signout">Sign Out</a></li> <li><a href="/signout">Sign Out</a></li>
<? } else if(property_exists($this, 'authorizing')) { ?> <? } else if(property_exists($this, 'authorizing')) { ?>

22
views/liked-js.php

@ -1,22 +0,0 @@
<?= $this->facebook_id ? partial('partials/fb-script') : '' ?>
console.log("Favoriting URL: <?= $this->url ?>");
var star = document.createElement('img');
star.id="quill-star";
star.src="http://quill.dev/images/<?= $this->like_url ? 'star' : 'red-x' ?>.svg";
document.body.appendChild(star);
var css = document.createElement('link');
css.rel="stylesheet";
css.type="text/css";
css.href="http://quill.dev/css/favorite.css";
document.body.appendChild(css);
setTimeout(function(){
document.getElementById('quill-star').classList.add('hidden');
var el = document.getElementById('quill-star');
el.parentNode.removeChild(el);
}, 1200);

4
views/new-bookmark.php

@ -87,9 +87,9 @@ $(function(){
if(response.location != false) { if(response.location != false) {
// $("#test_success").removeClass('hidden');
$("#test_success").removeClass('hidden');
$("#test_error").addClass('hidden'); $("#test_error").addClass('hidden');
// $("#post_href").attr("href", response.location);
$("#post_href").attr("href", response.location);
// $("#note_bookmark").val(""); // $("#note_bookmark").val("");
// $("#note_content").val(""); // $("#note_content").val("");

74
views/new-favorite.php

@ -0,0 +1,74 @@
<div class="narrow">
<?= partial('partials/header') ?>
<div style="clear: both;">
<div class="alert alert-success hidden" id="test_success"><strong>Success! We found a Location header in the response!</strong><br>Your post should be on your website now!<br><a href="" id="post_href">View your post</a></div>
<div class="alert alert-danger hidden" id="test_error"><strong>Your endpoint did not return a Location header.</strong><br>See <a href="/creating-a-micropub-endpoint">Creating a Micropub Endpoint</a> for more information.</div>
</div>
<form role="form" style="margin-top: 20px;" id="note_form">
<div class="form-group">
<label for="note_url">URL to Favorite (<code>like-of</code>)</label>
<input type="text" id="note_url" value="<?= $this->url ?>" class="form-control">
</div>
<div style="float: right; margin-top: 6px;">
<button class="btn btn-success" id="btn_post">Post</button>
</div>
</form>
<div style="clear: both;"></div>
<hr>
<div style="text-align: right;">
Bookmarklet: <a href="javascript:<?= js_bookmarklet('partials/favorite-bookmarklet', $this) ?>" class="btn btn-default btn-xs">favorite</a>
</div>
</div>
<script>
$(function(){
// ctrl-s to save
$(window).on('keydown', function(e){
if(e.keyCode == 83 && e.ctrlKey){
$("#btn_post").click();
}
});
$("#btn_post").click(function(){
var syndications = [];
$("#syndication-container button.btn-info").each(function(i,btn){
syndications.push($(btn).data('syndication'));
});
$.post("/favorite", {
url: $("#note_url").val()
}, function(data){
var response = JSON.parse(data);
if(response.location != false) {
$("#test_success").removeClass('hidden');
$("#test_error").addClass('hidden');
$("#post_href").attr("href", response.location);
window.location = response.location;
} else {
$("#test_success").addClass('hidden');
$("#test_error").removeClass('hidden');
}
});
return false;
});
bind_syndication_buttons();
});
<?= partial('partials/syndication-js') ?>
</script>

4
views/new-post.php

@ -97,6 +97,10 @@
</table> </table>
</div> </div>
<hr>
<div style="text-align: right;">
<a href="/add-to-home?start">Add to Home Screen</a>
</div>
</div> </div>
<script> <script>

2
views/partials/bookmark-bookmarklet.php

@ -1,4 +1,4 @@
javascript:(function(){
(function(){
var t;try{t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));}catch(e){t="";}; var t;try{t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));}catch(e){t="";};
window.location="<?= Config::$base_url ?>bookmark?url="+encodeURIComponent(window.location.href)+"&content="+encodeURIComponent((t == '' ? '' : '"'+t+'"'))+"&name="+encodeURIComponent(document.title)+"&token=<?= $this->token ?>"; window.location="<?= Config::$base_url ?>bookmark?url="+encodeURIComponent(window.location.href)+"&content="+encodeURIComponent((t == '' ? '' : '"'+t+'"'))+"&name="+encodeURIComponent(document.title)+"&token=<?= $this->token ?>";
})(); })();

10
views/partials/favorite-bookmarklet.php

@ -0,0 +1,10 @@
var quill_popup=function(){
window.open(document.getElementById('quill-script').src.replace('favorite.js?','favorite-popup?'),'quill-like', 'status=no,directories=no,location=no,resizable=no,menubar=no,width=300,height=200,toolbar=no');
};
(function(){
var quill=document.createElement('script');
quill.src='<?= Config::$base_url ?>favorite.js?url='+encodeURIComponent(window.location)+'&token=<?= $this->token ?>';
quill.setAttribute('id','quill-script');
quill.setAttribute('onerror', 'quill_popup()');
document.body.appendChild(quill);
})();

8
views/settings.php

@ -4,8 +4,10 @@
<h2>Signed In As</h2> <h2>Signed In As</h2>
<code><?= session('me') ?></code> <code><?= session('me') ?></code>
<!--
<h3>Facebook</h3> <h3>Facebook</h3>
<input type="button" id="facebook-button" value="Checking" class="btn"> <input type="button" id="facebook-button" value="Checking" class="btn">
-->
<h3>Twitter</h3> <h3>Twitter</h3>
<input type="button" id="twitter-button" value="Checking" class="btn"> <input type="button" id="twitter-button" value="Checking" class="btn">
@ -15,6 +17,7 @@
</div> </div>
<script> <script>
/*
window.quillFbInit = function() { window.quillFbInit = function() {
FB.getLoginStatus(function(response) { FB.getLoginStatus(function(response) {
if (response.status === 'connected') { if (response.status === 'connected') {
@ -55,11 +58,14 @@ function save_facebook_token(token) {
$("#facebook-button").val("Connected").addClass("btn-success"); $("#facebook-button").val("Connected").addClass("btn-success");
}); });
} }
*/
$(function(){ $(function(){
/*
$("#facebook-button").click(function(){ $("#facebook-button").click(function(){
FB.login(window.quillHandleFbLogin, {scope:'publish_actions'});
FB.login(window.quillHandleFbLogin, {scope:'publish_actions,user_likes'});
}); });
*/
$.getJSON("/auth/twitter", function(data){ $.getJSON("/auth/twitter", function(data){
// Check if we're already authorized with twitter // Check if we're already authorized with twitter

Loading…
Cancel
Save