From d6c2ee383cd9ba73e6055608986f21485c795556 Mon Sep 17 00:00:00 2001 From: Hannes Mannerheim Date: Sun, 25 Aug 2013 22:34:09 +0200 Subject: [PATCH] background color api and setting --- api-changes-1.1.1/CHANGES | 12 +- .../apiaccountupdatebackgroundcolor.php | 108 ++++++++++++++++++ api-changes-1.1.1/classes/User.php | 2 + api-changes-1.1.1/lib/apiaction.php | 3 +- api-changes-1.1.1/lib/router.php | 3 + css/1.css | 12 +- index.php | 4 +- js/ajax-functions-1.js | 56 ++++----- js/dom-functions-1.js | 40 ++----- js/lan-1.js | 11 +- js/misc-functions-1.js | 66 ++++++++++- js/qvitter-1.js | 89 +++++++++------ settings.php | 6 + 13 files changed, 309 insertions(+), 103 deletions(-) create mode 100644 api-changes-1.1.1/actions/apiaccountupdatebackgroundcolor.php diff --git a/api-changes-1.1.1/CHANGES b/api-changes-1.1.1/CHANGES index 60e39b3..d7c4ed8 100644 --- a/api-changes-1.1.1/CHANGES +++ b/api-changes-1.1.1/CHANGES @@ -10,7 +10,7 @@ * lib/apiaction.php - - add urls to larger avatars, groupcount and linkcolor field + - add urls to larger avatars, groupcount, linkcolor and backgroundcolor fields ~LINE 213 $avatar = $profile->getAvatar(AVATAR_STREAM_SIZE); @@ -24,7 +24,8 @@ Avatar::defaultImage(AVATAR_PROFILE_SIZE); $twitter_user['groups_count'] = $profile->getGroups(0, null)->N; - $twitter_user['linkcolor'] = $user->linkcolor; + $twitter_user['linkcolor'] = $user->linkcolor; + $twitter_user['backgroundcolor'] = $user->backgroundcolor; - add the uri-field @@ -91,6 +92,9 @@ $m->connect('api/account/update_link_color.json', array('action' => 'ApiAccountUpdateLinkColor')); + $m->connect('api/account/update_background_color.json', + array('action' => 'ApiAccountUpdateBackgroundColor')); + - also, tags need regexp to work with unicode charachters, e.g. farsi and arabic: @@ -182,8 +186,10 @@ * classes/User.php - - add field "linkcolor" to user table (do this is the db too!) + - add fields "linkcolor" and "background_image_url" to user table (do this is the db too!) ~ line 64 public $linkcolor; // varchar(6) + public $background_image_url; // varchar(255) ~ line 105 'linkcolor' => array('type' => 'varchar', 'length' => 6, 'description' => 'hex link color'), + 'background_image_url' => array('type' => 'varchar', 'length' => 255, 'description' => 'url to profile image'), diff --git a/api-changes-1.1.1/actions/apiaccountupdatebackgroundcolor.php b/api-changes-1.1.1/actions/apiaccountupdatebackgroundcolor.php new file mode 100644 index 0000000..af0c56a --- /dev/null +++ b/api-changes-1.1.1/actions/apiaccountupdatebackgroundcolor.php @@ -0,0 +1,108 @@ +. + * + * @category API + * @package StatusNet + * @author Hannes Mannerheim + * @license http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0 + * @link http://status.net/ + */ + +if (!defined('STATUSNET')) { + exit(1); +} + +require_once INSTALLDIR . '/lib/apiauth.php'; + + +class ApiAccountUpdateBackgroundColorAction extends ApiAuthAction +{ + var $backgroundcolor = null; + + /** + * Take arguments for running + * + * @param array $args $_REQUEST args + * + * @return boolean success flag + */ + function prepare($args) + { + parent::prepare($args); + + $this->user = $this->auth_user; + + $this->backgroundcolor = $this->trimmed('backgroundcolor'); + return true; + } + + /** + * Handle the request + * + * Try to save the user's colors in her design. Create a new design + * if the user doesn't already have one. + * + * @param array $args $_REQUEST data (unused) + * + * @return void + */ + function handle($args) + { + parent::handle($args); + + if ($_SERVER['REQUEST_METHOD'] != 'POST') { + $this->clientError( + _('This method requires a POST.'), + 400, $this->format + ); + return; + } + + $validhex = preg_match('/^[a-f0-9]{6}$/i',$this->backgroundcolor); + if($validhex === false || $validhex == 0) { + $this->clientError(_('Not a valid hex color.'),404,'json'); + return; + } + + // save the new color + $original = clone($this->user); + $this->user->backgroundcolor = $this->backgroundcolor; + if (!$this->user->update($original)) { + $this->clientError(_('Error updating user.'),404,'json'); + return; + } + + $profile = $this->user->getProfile(); + + if (empty($profile)) { + $this->clientError(_('User has no profile.'),'json'); + return; + } + + $twitter_user = $this->twitterUserArray($profile, true); + + $this->initDocument('json'); + $this->showJsonObjects($twitter_user); + $this->endDocument('json'); + } + + +} diff --git a/api-changes-1.1.1/classes/User.php b/api-changes-1.1.1/classes/User.php index b72a831..54dfcc3 100644 --- a/api-changes-1.1.1/classes/User.php +++ b/api-changes-1.1.1/classes/User.php @@ -63,6 +63,7 @@ class User extends Managed_DataObject public $inboxed; // tinyint(1) public $linkcolor; // varchar(6) public $background_image_url; // varchar(255) + public $backgroundcolor; // varchar(6) public $private_stream; // tinyint(1) default_0 public $created; // datetime() not_null public $modified; // timestamp() not_null default_CURRENT_TIMESTAMP @@ -104,6 +105,7 @@ class User extends Managed_DataObject 'inboxed' => array('type' => 'int', 'size' => 'tiny', 'default' => 0, 'description' => 'has an inbox been created for this user?'), 'linkcolor' => array('type' => 'varchar', 'length' => 6, 'description' => 'hex link color'), 'background_image_url' => array('type' => 'varchar', 'length' => 255, 'description' => 'url to profile image'), + 'backgroundcolor' => array('type' => 'varchar', 'length' => 6, 'description' => 'hex background color'), 'private_stream' => array('type' => 'int', 'size' => 'tiny', 'default' => 0, 'description' => 'whether to limit all notices to followers only'), 'created' => array('type' => 'datetime', 'not null' => true, 'description' => 'date this record was created'), diff --git a/api-changes-1.1.1/lib/apiaction.php b/api-changes-1.1.1/lib/apiaction.php index bf69edb..e0c83fb 100644 --- a/api-changes-1.1.1/lib/apiaction.php +++ b/api-changes-1.1.1/lib/apiaction.php @@ -221,7 +221,8 @@ class ApiAction extends Action Avatar::defaultImage(AVATAR_PROFILE_SIZE); $twitter_user['groups_count'] = $profile->getGroups(0, null)->N; - $twitter_user['linkcolor'] = $user->linkcolor; + $twitter_user['linkcolor'] = $user->linkcolor; + $twitter_user['backgroundcolor'] = $user->backgroundcolor; $twitter_user['url'] = ($profile->homepage) ? $profile->homepage : null; $twitter_user['protected'] = (!empty($user) && $user->private_stream) ? true : false; diff --git a/api-changes-1.1.1/lib/router.php b/api-changes-1.1.1/lib/router.php index 1c4cf46..f6eac54 100644 --- a/api-changes-1.1.1/lib/router.php +++ b/api-changes-1.1.1/lib/router.php @@ -488,6 +488,9 @@ class Router $m->connect('api/account/update_link_color.json', array('action' => 'ApiAccountUpdateLinkColor')); + $m->connect('api/account/update_background_color.json', + array('action' => 'ApiAccountUpdateBackgroundColor')); + // users $m->connect('api/users/show/:id.:format', diff --git a/css/1.css b/css/1.css index 586ea0f..234667a 100644 --- a/css/1.css +++ b/css/1.css @@ -33,7 +33,6 @@ · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · */ body { - background-color:#fff; background-size:100% auto; background-attachment:fixed; margin:0; @@ -321,7 +320,11 @@ button.icon.nav-search span { width: 125px; position: relative; display: block; - } + text-align:left; + } +body.rtl .dropdown-menu li:not(.dropdown-caret) { + text-align:right; + } .dropdown-menu li:not(.dropdown-caret) a { clear: both; color: #333333; @@ -752,7 +755,10 @@ button#submit-login:hover { } #settings-container { - padding:10px 10px 300px 10px; + padding:10px 10px 150px 10px; + } +#settings-container > div { + padding: 10px 0; } #settings-container label { diff --git a/index.php b/index.php index f3aa123..87e334c 100644 --- a/index.php +++ b/index.php @@ -46,6 +46,8 @@ window.fullUrlToThisQvitterApp = ''; window.siteRootDomain = ''; window.useHistoryPushState = ; + window.defaultLinkColor = ''; + window.defaultBackgroundColor = ''; - +
"> diff --git a/js/ajax-functions-1.js b/js/ajax-functions-1.js index ea4faf8..860c6f8 100644 --- a/js/ajax-functions-1.js +++ b/js/ajax-functions-1.js @@ -179,11 +179,40 @@ function postNewLinkColor(newLinkColor) { }, dataType:"json", error: function(data){ console.log(data); }, - success: function(data) { console.log(data);} + success: function(data) { + window.userLinkColor = newLinkColor; + } }); } + +/* · + · + · Post new background color + · + · @param newBackgroundColor: the new background color in hex without # + · + · · · · · · · · · · · · · */ + +function postNewBackgroundColor(newBackgroundColor) { + $.ajax({ url: 'API.php', + type: "POST", + data: { + postRequest: 'account/update_background_color.json', + backgroundcolor: newBackgroundColor, + username: window.loginUsername, + password: window.loginPassword + }, + dataType:"json", + error: function(data){ console.log(data); }, + success: function(data) { + window.userBackgroundColor = newBackgroundColor; + } + }); + } + + /* · · @@ -298,31 +327,6 @@ function postActionToAPI(action, actionOnSuccess) { success: function(data) { actionOnSuccess(data);} }); } - - -/* · - · - · Generic POST-action - · - · @param action: the api action, e.q. 'statuses/retweet/1.json' - · @param actionOnSuccess: callback function, false on error, data on success - · - · · · · · · · · · · · · · */ - -function postActionToAPI(action, actionOnSuccess) { - $.ajax({ url: window.fullUrlToThisQvitterApp + 'API.php', - type: "POST", - data: { - postRequest: action, - source: 'Qvitter', - username: window.loginUsername, - password: window.loginPassword - }, - dataType:"json", - error: function(data){ actionOnSuccess(false); console.log(data); }, - success: function(data) { actionOnSuccess(data);} - }); - } /* · diff --git a/js/dom-functions-1.js b/js/dom-functions-1.js index a0700d4..0d0f6e8 100644 --- a/js/dom-functions-1.js +++ b/js/dom-functions-1.js @@ -178,13 +178,8 @@ function profileCardFromFirstObject(data,screen_name) { var followButton = ''; } - // change link color if set - if(first.user.linkcolor.length == 6) { - changeLinkColor('#' + first.user.linkcolor); - } - else { - changeLinkColor('#0084B4'); - } + // change design + changeDesign(first.user); $('#feed').before('

' + first.user.name + '

@' + first.user.screen_name + '

' + first.user.description + '

' + first.user.location + ' · ' + first.user.url.replace('http://','').replace('https://','') + '

' + followButton + '
'); } @@ -216,13 +211,8 @@ function profileCardFromFirstObject(data,screen_name) { var followButton = ''; } - // change link color - if(data.linkcolor.length == 6) { - changeLinkColor('#' + data.linkcolor); - } - else { - changeLinkColor('#0084B4'); - } + // change design + changeDesign(data); $('#feed').before('

' + data.name + '

@' + data.screen_name + '

' + data.description + '

' + data.location + ' · ' + data.url.replace('http://','').replace('https://','') + '

' + followButton + '
'); }}); @@ -412,15 +402,8 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) { // while waiting for this data user might have changed stream, so only proceed if current stream still is this one if(window.currentStream == stream) { - // change link color - if(typeof window.userLinkColor != 'undefined') { - if(window.userLinkColor.length == 6) { - changeLinkColor('#' + window.userLinkColor); - } - else { - changeLinkColor('#0084B4'); - } - } + // change design + changeDesign(window); // get screen name from stream, if not found, this is me if(stream.indexOf('screen_name=')>-1) { @@ -453,15 +436,8 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) { // while waiting for this data user might have changed stream, so only proceed if current stream still is this one if(window.currentStream == stream) { - // change link color - if(typeof window.userLinkColor != 'undefined') { - if(window.userLinkColor.length == 6) { - changeLinkColor('#' + window.userLinkColor); - } - else { - changeLinkColor('#0084B4'); - } - } + // change design + changeDesign(window); // show profile card if this is a user's queet stream if(stream.substring(0,27) == 'statuses/user_timeline.json') { diff --git a/js/lan-1.js b/js/lan-1.js index 10eb3d2..99c070f 100644 --- a/js/lan-1.js +++ b/js/lan-1.js @@ -125,7 +125,7 @@ window.l.es.adminCount = 'Administradores'; window.l.es.settings = 'Configuración'; window.l.es.saveChanges = 'Guardar cambios'; window.l.es.linkColor = 'Color del enlace'; - +window.l.es.backgroundColor = 'Color de fondo'; // french window.l.fr = new Object(); @@ -214,7 +214,8 @@ window.l.fr.memberCount = 'Membres'; window.l.fr.adminCount = 'Administrateurs'; window.l.fr.settings = 'Paramètres'; window.l.fr.saveChanges = 'Sauvegarder les modifications'; -window.l.fr.linkColor = ' Couleur des liens'; +window.l.fr.linkColor = 'Couleur des liens'; +window.l.fr.backgroundColor = 'Couleur de l\'arrière-plan'; // deutsch @@ -305,6 +306,7 @@ window.l.de.adminCount = 'Administratoren'; window.l.de.settings = 'Einstellungen'; window.l.de.saveChanges = 'Änderungen speichern'; window.l.de.linkColor = 'Linkfarbe'; +window.l.de.backgroundColor = 'Hintergrundfarbe'; @@ -396,6 +398,7 @@ window.l.en.adminCount = 'Admins'; window.l.en.settings = 'Settings'; window.l.en.saveChanges = 'Save changes'; window.l.en.linkColor = 'Link color'; +window.l.en.backgroundColor = 'Background color'; // svenska @@ -486,6 +489,7 @@ window.l.sv.adminCount = 'Administratörer'; window.l.sv.settings = 'Inställningar'; window.l.sv.saveChanges = 'Spara ändringarna'; window.l.sv.linkColor = 'Länkfärg'; +window.l.sv.backgroundColor = 'Bakgrundsfärg'; @@ -577,7 +581,7 @@ window.l.fa.adminCount = 'مدیران'; window.l.fa.settings = 'تنظیمات'; window.l.fa.saveChanges = 'ذخیره تغییرات'; window.l.fa.linkColor = 'رنگ پیوند'; - +window.l.fa.backgroundColor = 'رنگ پس‌زمینه'; // arabic @@ -668,6 +672,7 @@ window.l.ar.adminCount = 'الإداريين'; window.l.ar.settings = 'الإعدادات'; window.l.ar.saveChanges = 'حفظ التغييرات'; window.l.ar.linkColor = 'لون الرابط'; +window.l.ar.backgroundColor = 'لون الخلفيّة'; diff --git a/js/misc-functions-1.js b/js/misc-functions-1.js index 2511d8e..742d5b1 100644 --- a/js/misc-functions-1.js +++ b/js/misc-functions-1.js @@ -55,6 +55,68 @@ function localStorageIsEnabled() { } } + + +/* · + · + · Change profile design + · + · @param obj: user object that _might_ contain colors, or window object, that _might_ contain user settings + · + · · · · · · · · · */ + +function changeDesign(obj) { + + // user object that might contains other user's colors + if(typeof obj.linkcolor != 'undefined' && + typeof obj.backgroundcolor != 'undefined') { + if(obj.linkcolor == null) { + changeLinkColor(window.defaultLinkColor); + } + else if(obj.linkcolor.length == 6) { + changeLinkColor('#' + obj.linkcolor); + } + else { + changeLinkColor(window.defaultLinkColor); + } + if(obj.backgroundcolor == null) { + $('body').css('background-color',window.defaultBackgroundColor); + } + else if(obj.backgroundcolor.length == 6) { + $('body').css('background-color','#' + obj.backgroundcolor); + } + else { + $('body').css('background-color',window.defaultBackgroundColor); + } + } + + // window object that might contain my colors + else if(typeof obj.userLinkColor != 'undefined' && + typeof obj.userBackgroundColor != 'undefined') { + if(obj.userLinkColor == null) { + changeLinkColor(window.defaultLinkColor); + } + else if(obj.userLinkColor.length == 6) { + changeLinkColor('#' + obj.userLinkColor); + } + else { + changeLinkColor(window.defaultLinkColor); + } + if(obj.userBackgroundColor == null) { + $('body').css('background-color',window.defaultBackgroundColor); + } + else if(obj.userBackgroundColor.length == 6) { + $('body').css('background-color','#' + obj.userBackgroundColor); + } + else { + $('body').css('background-color',window.defaultBackgroundColor); + } + } + + // TODO BACKGROUND IMAGE! + $('body').css('background-image','none'); + } + /* · · @@ -272,7 +334,7 @@ function placeCaretAtEnd(el) { function updateHistoryLocalStorage() { if(localStorageIsEnabled()) { var i=0; - var localStorageName = window.username + '-history-container'; + var localStorageName = window.loginUsername + '-history-container'; var historyContainer = new Object(); $.each($('#history-container .stream-selection'), function(key,obj) { historyContainer[i] = new Object(); @@ -301,7 +363,7 @@ function updateHistoryLocalStorage() { function loadHistoryFromLocalStorage() { if(localStorageIsEnabled()) { - var localStorageName = window.username + '-history-container'; + var localStorageName = window.loginUsername + '-history-container'; if(typeof localStorage[localStorageName] != "undefined") { $('#history-container').css('display','block'); $('#history-container').html(''); diff --git a/js/qvitter-1.js b/js/qvitter-1.js index a2d8f44..34d5664 100644 --- a/js/qvitter-1.js +++ b/js/qvitter-1.js @@ -59,8 +59,7 @@ if(window.useHistoryPushState) { · · · · · · · · · · · · · */ $('#submit-login').removeAttr('disabled'); // might be remebered by browser... -$('').attr('src', window.fullUrlToThisQvitterApp + 'img/ekan4.jpg').load(function() { - $('body').css('background-image', 'url(' + window.fullUrlToThisQvitterApp + 'img/ekan4.jpg)'); +$(window).load(function() { $('#user-container').css('display','block'); $('#feed').css('display','block'); @@ -87,7 +86,6 @@ $('').attr('src', window.fullUrlToThisQvitterApp + 'img/ekan4.jpg').load(f $('#submit-login').trigger('click'); } else { - display_spinner(); window.currentStream = ''; // force reload stream setNewCurrentStream(getStreamFromUrl(),function(){ @@ -118,7 +116,21 @@ $('#submit-login').click(function () { // store credentials in global var window.loginUsername = user.screen_name; window.loginPassword = $('input#password').val(); - window.userLinkColor = user.linkcolor; + + // set colors if the api supports it + if(typeof user.linkcolor != 'undefined' && + typeof user.backgroundcolor != 'undefined') { + user.linkcolor = user.linkcolor || ''; // no null value + user.backgroundcolor = user.backgroundcolor || ''; // no null value + window.userLinkColor = user.linkcolor; + window.userBackgroundColor = user.backgroundcolor; + if(window.userLinkColor.length != 6) { + window.userLinkColor = window.defaultLinkColor; + } + if(window.userBackgroundColor.length != 6) { + window.userBackgroundColor = window.defaultBackgroundColor; + } + } // add user data to DOM, show search form, remeber user id, show the feed $('#user-avatar').attr('src', user.profile_image_url); @@ -224,13 +236,20 @@ $('#logout').click(function(){ · · · · · · · · · · · · · */ $('#settings').click(function(){ - popUpAction('popup-settings', window.sL.settings,'
','
'); + // buttons to add later: '
' + popUpAction('popup-settings', window.sL.settings,'
',false); $('#link-color-selection').minicolors({ change: function(hex) { changeLinkColor(hex); postNewLinkColor(hex.substring(1)); } }); + $('#background-color-selection').minicolors({ + change: function(hex) { + $('body').css('background-color',hex); + postNewBackgroundColor(hex.substring(1)); + } + }); }); @@ -244,34 +263,40 @@ $('#settings').click(function(){ function logoutWithoutReload(doShake) { - $('#submit-login').removeAttr('disabled'); - - // delete any locally stored credentials - if(localStorageIsEnabled()) { - delete localStorage.autologinUsername; - delete localStorage.autologinPassword; - } - - $('#user-header').animate({opacity:'0'},800); - $('#user-body').animate({opacity:'0'},800); - $('#user-footer').animate({opacity:'0'},800); - $('.menu-container').animate({opacity:'0'},800); - $('#settingslink').fadeOut('slow'); - $('#search').fadeOut('slow'); - $('input#username').focus(); - if(doShake) { - $('input#username').css('background-color','pink'); - $('input#password').css('background-color','pink'); - } - $('#login-content').animate({opacity:'1'},800, function(){ - if(doShake) { - $('#login-content').effect('shake',{distance:5,times:2},function(){ - $('input#username').animate({backgroundColor:'#fff'},1000); - $('input#password').animate({backgroundColor:'#fff'},1000); - }); + // preload default background + $('').attr('src', window.fullUrlToThisQvitterApp + 'img/ekan4.jpg').load(function() { + $('body').css('background-image', 'url(' + window.fullUrlToThisQvitterApp + 'img/ekan4.jpg)'); + + $('#submit-login').removeAttr('disabled'); + + // delete any locally stored credentials + if(localStorageIsEnabled()) { + delete localStorage.autologinUsername; + delete localStorage.autologinPassword; } - }); - $('#page-container').animate({opacity:'1'},200); + + $('#user-header').animate({opacity:'0'},200); + $('#user-body').animate({opacity:'0'},200); + $('#user-footer').animate({opacity:'0'},200); + $('.menu-container').animate({opacity:'0'},200); + $('#settingslink').fadeOut('slow'); + $('#search').fadeOut('slow'); + $('input#username').focus(); + if(doShake) { + $('input#username').css('background-color','pink'); + $('input#password').css('background-color','pink'); + } + $('#login-content').animate({opacity:'1'},200, function(){ + if(doShake) { + $('#login-content').effect('shake',{distance:5,times:2},function(){ + $('input#username').animate({backgroundColor:'#fff'},1000); + $('input#password').animate({backgroundColor:'#fff'},1000); + }); + } + }); + $('#page-container').animate({opacity:'1'},200); + + }); } diff --git a/settings.php b/settings.php index 1b403d7..afe98cf 100644 --- a/settings.php +++ b/settings.php @@ -44,6 +44,12 @@ $siterootdomain = 'quitter.se'; // no http:// or https:// and no ending slash // API ROOT $apiroot = 'http://quitter.se/api/'; +// DEFAULT BACKGROUND COLOR +$defaultbackgroundcolor = '#f4f4f4'; + +// DEFAULT LINK COLOR +$defaultlinkcolor = '#0084B4'; + // TIME BETWEEN POLLING $timebetweenpolling = 5000; // ms