From 69da58503a24c177b8c0f13360466384e27ba6e2 Mon Sep 17 00:00:00 2001 From: Tyler Renelle Date: Tue, 11 Nov 2014 15:03:19 -0700 Subject: [PATCH] feat(sharing): move avatar-sharing to herobox, use addthis instead of custom solution. refactor from pages/* to export/* --- public/css/avatar.styl | 12 +++++++- public/js/controllers/footerCtrl.js | 5 ++-- src/controllers/dataexport.js | 45 +++++++++++++++++++++++++++++ src/routes/dataexport.js | 5 +++- src/routes/pages.js | 36 ----------------------- views/avatar-static.jade | 24 +-------------- views/index.jade | 3 ++ views/shared/header/avatar.jade | 2 ++ 8 files changed, 69 insertions(+), 63 deletions(-) diff --git a/public/css/avatar.styl b/public/css/avatar.styl index 10432e1c77..20f03c3a0f 100644 --- a/public/css/avatar.styl +++ b/public/css/avatar.styl @@ -73,7 +73,17 @@ future re: pets and whatnot, this is just temporary. &.isUser background: $color-herobox // Set a different background color for the current user &:hover, &:focus - background: lighten($color-herobox, 16.18%) + background: lighten($color-herobox, 16.18%) + + .addthis_pill_style + width: 50px !important + .addthis_native_toolbox + position: absolute + top:2px + right:2px + opacity:0 + &:hover .addthis_native_toolbox + opacity:1 //Need to find a way to indicate who is leader without using background-color as it won't work when a background image is applied //.herobox.isLeader.noBackgroundImage diff --git a/public/js/controllers/footerCtrl.js b/public/js/controllers/footerCtrl.js index f1e4f7f0b5..2a043f52f8 100644 --- a/public/js/controllers/footerCtrl.js +++ b/public/js/controllers/footerCtrl.js @@ -38,8 +38,9 @@ // Scripts only for desktop if (!window.env.IS_MOBILE) { - // Add This - $.getScript("//s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"); + // Add This - FIXME why isn't this working when here? instead it's now in + //$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5016f6cc44ad68a4"); + window.addthis_options = 'facebook,twitter,googleplus,tumblr'; // Google Charts $.getScript("//www.google.com/jsapi", function() { diff --git a/src/controllers/dataexport.js b/src/controllers/dataexport.js index 48a08b1d38..0ee176bbe2 100644 --- a/src/controllers/dataexport.js +++ b/src/controllers/dataexport.js @@ -8,6 +8,12 @@ var js2xmlparser = require("js2xmlparser"); var pd = require('pretty-data').pd; var User = require('../models/user').model; +// Avatar screenshot/static-page includes +var Pageres = require('pageres'); //https://github.com/sindresorhus/pageres +var AWS = require('aws-sdk'); +AWS.config.update({accessKeyId: nconf.get("S3").accessKeyId, secretAccessKey: nconf.get("S3").secretAccessKey}); +var s3Stream = require('s3-upload-stream')(new AWS.S3()); //https://github.com/nathanpeck/s3-upload-stream +var bucket = 'habitrpg-dev'; /* ------------------------------------------------------------------------ @@ -83,3 +89,42 @@ expressres.jsonstring = function(obj, headers, status) { body = pd.json(JSON.stringify(obj)); return this.send(body, headers, status); }; + +/* + ------------------------------------------------------------------------ + Static page and image screenshot of avatar + ------------------------------------------------------------------------ + */ + + +dataexport.avatarPage = function(req, res) { + User.findById(req.params.uuid).select('stats profile items achievements preferences backer contributor').exec(function(err, user){ + res.render('avatar-static', { + title: user.profile.name, + env: _.defaults({user:user},res.locals.habitrpg) + }); + }) +}; + +dataexport.avatarImage = function(req, res, next) { + var filename = 'avatar-'+req.params.uuid+'.png'; + new Pageres()//{delay:1} + .src(nconf.get('BASE_URL')+'/export/avatar-'+req.params.uuid+'.html', ['140x147'], {crop: true, filename: filename.replace('.png','')}) + .run(function (err, file) { + if (err) return next(err); + var upload = s3Stream.upload({ + Bucket: bucket, + Key: filename, + ACL: "public-read", + StorageClass: "REDUCED_REDUNDANCY", + ContentType: "binary/octet-stream" + }); + upload.on('error', function (err) { + next(err); + }); + upload.on('uploaded', function (details) { + res.redirect(details.Location); + }); + file[0].pipe(upload); + }); +}; diff --git a/src/routes/dataexport.js b/src/routes/dataexport.js index ad2e2797d0..ba27957124 100644 --- a/src/routes/dataexport.js +++ b/src/routes/dataexport.js @@ -3,11 +3,14 @@ var router = new express.Router(); var dataexport = require('../controllers/dataexport'); var auth = require('../controllers/auth'); var nconf = require('nconf'); -var i18n = require('../i18n') +var i18n = require('../i18n'); +var middleware = require('../middleware.js'); /* Data export */ router.get('/history.csv',auth.authWithSession,i18n.getUserLanguage,dataexport.history); //[todo] encode data output options in the data controller and use these to build routes router.get('/userdata.xml',auth.authWithSession,i18n.getUserLanguage,dataexport.leanuser,dataexport.userdata.xml); router.get('/userdata.json',auth.authWithSession,i18n.getUserLanguage,dataexport.leanuser,dataexport.userdata.json); +router.get('/avatar-:uuid.html', i18n.getUserLanguage, middleware.locals, dataexport.avatarPage); +router.get('/avatar-:uuid.png', i18n.getUserLanguage, middleware.locals, dataexport.avatarImage); module.exports = router; diff --git a/src/routes/pages.js b/src/routes/pages.js index 259b414237..113375c16e 100644 --- a/src/routes/pages.js +++ b/src/routes/pages.js @@ -28,42 +28,6 @@ _.each(pages, function(name){ }); }) -var mongoose = require('mongoose'); -router.get('/static/avatar-:uuid.html', i18n.getUserLanguage, middleware.locals, function(req, res) { - mongoose.model('User').findById(req.params.uuid).select('stats profile items achievements preferences backer contributor').exec(function(err, user){ - res.render('avatar-static', { - title: user.profile.name, - env: _.defaults({user:user},res.locals.habitrpg) - }); - }) -}); -var Pageres = require('pageres'); //https://github.com/sindresorhus/pageres -var AWS = require('aws-sdk'); -AWS.config.update({accessKeyId: nconf.get("S3").accessKeyId, secretAccessKey: nconf.get("S3").secretAccessKey}); -var s3Stream = require('s3-upload-stream')(new AWS.S3()); //https://github.com/nathanpeck/s3-upload-stream -var bucket = 'habitrpg-dev'; - -router.get('/static/avatar-:uuid.png', i18n.getUserLanguage, middleware.locals, function(req, res, next) { - var filename = 'avatar-'+req.params.uuid+'.png'; - new Pageres()//{delay:1} - .src(nconf.get('BASE_URL')+'/static/avatar-'+req.params.uuid+'.html', ['140x147'], {crop: true, filename: filename.replace('.png','')}) - .run(function (err, file) { - if (err) return next(err); - var upload = s3Stream.upload({ - Bucket: bucket, - Key: filename, - ACL: "public-read", - StorageClass: "REDUCED_REDUNDANCY", - ContentType: "binary/octet-stream" - }); - file[0].pipe(upload); - - upload.on('uploaded', function (details) { - res.redirect(details.Location); - }); - }); -}); - // --------- Redirects -------- router.get('/static/extensions', function(req, res) { diff --git a/views/avatar-static.jade b/views/avatar-static.jade index 717af92fd1..9223081dba 100644 --- a/views/avatar-static.jade +++ b/views/avatar-static.jade @@ -14,31 +14,11 @@ html(ng-app="habitrpg") != env.getManifestFiles("app") script(type='text/javascript'). - hello.init({ - facebook : window.env.FACEBOOK_KEY - }); - window.habitrpg - .controller('StaticAvatarCtrl', ['$scope', '$http', function($scope, $http){ + .controller('StaticAvatarCtrl', ['$scope', function($scope){ $scope.profile = window.env.user; - - $scope.postToWall = function(network, customMessage) { - hello(network).login({scope: 'publish'}).then(function (auth) { - $http.get('/static/avatar-'+$scope.profile._id+'.png').success(function(r){ - //TODO experiment with just the page as a link - hello(auth.network).api('/me/feed', 'post', { - picture: r.file, // also see link, picture, icon //https://developers.facebook.com/docs/graph-api/reference/v2.2/status#publishing - message: customMessage || "Check out my HabitRPG progress!" - }).then(function (r) { - debugger; - }); - }) - }); - } }]) - - //webfonts link(href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic', rel='stylesheet', type='text/css') @@ -46,5 +26,3 @@ html(ng-app="habitrpg") include ./shared/header/avatar div(ng-controller='StaticAvatarCtrl') +herobox({main:true}) - button.btn.btn-primary(ng-click='postToWall("facebook", customMessage)') Post to Facebook - textarea(placeholder="Check out my HabitRPG progress!",ng-model="customMessage") diff --git a/views/index.jade b/views/index.jade index 802e3873eb..bd9f42f9f5 100644 --- a/views/index.jade +++ b/views/index.jade @@ -10,6 +10,9 @@ html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":a meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(name='apple-mobile-web-app-capable', content='yes') + //FIXME for some reason this won't load when in footerCtrl.js#deferredScripts() + script(type="text/javascript", src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5016f6cc44ad68a4", async="async") + script(type='text/javascript'). window.env = !{JSON.stringify(env)}; diff --git a/views/shared/header/avatar.jade b/views/shared/header/avatar.jade index 415abe6ede..4bec44df16 100644 --- a/views/shared/header/avatar.jade +++ b/views/shared/header/avatar.jade @@ -7,6 +7,8 @@ mixin avatar(opts) .character-sprites + .addthis_native_toolbox(ng-if='profile._id==user._id', data-url="#{env.BASE_URL}/export/avatar-{{profile._id}}.html", data-title="Check out my HabitRPG progress!") + // Mount Body if !opts.minimal span(ng-if='profile.items.currentMount', class='Mount_Body_{{profile.items.currentMount}}')