From 9e45bcab4732806d291d2326e2f8a5d676caf0df Mon Sep 17 00:00:00 2001
From: Hannes Mannerheim <h@nnesmannerhe.im>
Date: Sat, 6 Jun 2015 16:20:26 +0200
Subject: [PATCH] better support for custom sprites

---
 QvitterPlugin.php    |  3 +++
 README.md            |  1 +
 actions/qvitter.php  | 50 ++++++++++++++++++++++++++++++++++++++------
 css/qvitter.css      |  4 +---
 js/misc-functions.js | 26 ++++++++++++-----------
 5 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/QvitterPlugin.php b/QvitterPlugin.php
index 66b0188..46f47c3 100644
--- a/QvitterPlugin.php
+++ b/QvitterPlugin.php
@@ -62,6 +62,9 @@ class QvitterPlugin extends Plugin {
 		// DEFAULT FAVICON
 		$settings['favicon'] = 'img/favicon.ico?v=5';
 
+		// DEFAULT SPRITE
+		$settings['sprite'] = Plugin::staticPath('Qvitter', '').'img/sprite.png?v=40';
+
 		// DEFAULT LINK COLOR
 		$settings['defaultlinkcolor'] = '#0084B4';
 
diff --git a/README.md b/README.md
index 277e702..9ec23a9 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ $config['site']['qvitter']['urlshortenerapiurl'] = 'http://qttr.at/yourls-api.ph
 $config['site']['qvitter']['urlshortenersignature'] = 'b6afeec983';	
 $config['site']['qvitter']['sitebackground'] = 'img/vagnsmossen.jpg';
 $config['site']['qvitter']['favicon'] = 'img/favicon.ico?v=4';
+$config['site']['qvitter']['sprite'] = Plugin::staticPath('Qvitter', '').'img/sprite.png?v=40';
 $config['site']['qvitter']['enablewelcometext'] = true;
 $config['site']['qvitter']['customwelcometext']['sv'] = '<h1>Välkommen till Quitter.se – en federerad<sup>1</sup> mikrobloggsallmänning!</h1><p>Etc etc...</p>';
 $config['site']['qvitter']['customwelcometext']['en'] = '<h1>Welcome to Quitter.se – a federated microblog common!</h1><p>Etc etc...</p>';
diff --git a/actions/qvitter.php b/actions/qvitter.php
index 7192f48..314796c 100644
--- a/actions/qvitter.php
+++ b/actions/qvitter.php
@@ -110,6 +110,9 @@ class QvitterAction extends ApiAction
 				<title><?php print $sitetitle; ?></title>
 				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">		
+				<style>
+
+				</style>
 				<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/qvitter.css?changed=<?php print date('YmdHis',filemtime(QVITTERDIR.'/css/qvitter.css')); ?>" />
 				<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/jquery.minicolors.css" />		
 				<link rel="shortcut icon" type="image/x-icon" href="<?php print $qvitterpath; ?><?php print QvitterPlugin::settings("favicon"); ?>">
@@ -287,7 +290,7 @@ class QvitterAction extends ApiAction
 					ul.stats a strong,
 					.queet-box-extras button,
 					#openid-login:hover:after {
-						color:<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>;/*COLOREND*/
+						color:/*COLORSTART*/<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>/*COLOREND*/;
 						}			
 					#unseen-notifications,
 					.stream-item.notification .not-seen,
@@ -305,15 +308,15 @@ class QvitterAction extends ApiAction
 					.crop-and-save-button,
 					.topbar .global-nav.show-logo:before,
 					.topbar .global-nav.pulse-logo:before {
-						background-color:<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>;/*BACKGROUNDCOLOREND*/
+						background-color:/*BACKGROUNDCOLORSTART*/<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>/*BACKGROUNDCOLOREND*/;
 						}	
 					.queet-box-syntax[contenteditable="true"]:focus {
-						border-color:#999999;/*BORDERCOLOREND*/						
+						border-color:/*BORDERCOLORSTART*/#999999/*BORDERCOLOREND*/;
 						}
 					#user-footer-inner,
 					.inline-reply-queetbox,
 					#popup-faq #faq-container p.indent {
-						background-color:rgb(205,230,239);/*LIGHTERBACKGROUNDCOLOREND*/
+						background-color:/*LIGHTERBACKGROUNDCOLORSTART*/rgb(205,230,239)/*LIGHTERBACKGROUNDCOLOREND*/;
 						}
 					#user-footer-inner,
 					.queet-box,
@@ -322,12 +325,47 @@ class QvitterAction extends ApiAction
 					span.inline-reply-caret,
 				    .stream-item.expanded .stream-item.first-visible-after-parent,
 					#popup-faq #faq-container p.indent {
-						border-color:rgb(155,206,224);/*LIGHTERBORDERCOLOREND*/
+						border-color:/*LIGHTERBORDERCOLORSTART*/rgb(155,206,224)/*LIGHTERBORDERCOLOREND*/;
 						}
 					span.inline-reply-caret .caret-inner {
-						border-bottom-color:rgb(205,230,239);/*LIGHTERBORDERBOTTOMCOLOREND*/
+						border-bottom-color:/*LIGHTERBORDERBOTTOMCOLORSTART*/rgb(205,230,239)/*LIGHTERBORDERBOTTOMCOLOREND*/;
 						}
 						
+					.modal-close .icon,
+					.chev-right,
+					.close-right,
+					button.icon.nav-search,
+					.member-button .join-text i,
+					.external-member-button .join-text i,
+					.external-follow-button .follow-text i,
+					.qvitter-follow-button .follow-text i,
+					#logo,
+					.upload-cover-photo,
+					.upload-avatar,
+					.upload-background-image,
+					button.shorten i,
+					.reload-stream,
+					.topbar .global-nav:before,
+					.stream-item.notification.repeat .dogear, 
+					.stream-item.notification.like .dogear,
+					.ostatus-link,
+					.close-edit-profile-window {
+						background-image: url("<?php print QvitterPlugin::settings("sprite"); ?>");	
+						background-size: 500px 1329px;						
+						}
+					@media (max-width: 910px) {	
+						#search-query,
+						.menu-container a,
+						.menu-container a.current,
+						.stream-selection.friends-timeline:after,
+						.stream-selection.notifications:after,
+						.stream-selection.my-timeline:after,	
+						.stream-selection.public-timeline:after {	
+							background-image: url("<?php print QvitterPlugin::settings("sprite"); ?>");	
+							background-size: 500px 1329px;
+							}												
+						}
+												
 				</style>
 				<?php
 				
diff --git a/css/qvitter.css b/css/qvitter.css
index b315efb..ce78690 100644
--- a/css/qvitter.css
+++ b/css/qvitter.css
@@ -3506,6 +3506,7 @@ button.shorten:after {
 	margin-left:-20px;
     top: 2px;
     z-index:10000;
+    background-color:#fff;
 	}
 #footer-spinner-container .loader,
 .queet-box-loading-cover .loader {
@@ -4466,7 +4467,6 @@ body.rtl #feed-header-inner h2  {
 		}
 
 	#search-query {
-		background-image: url("../img/sprite.png?v=40");
 		background-size: 500px 1329px;
 		background-position: -100px -804px;
 		border: 0 none;
@@ -4770,7 +4770,6 @@ body.rtl #feed-header-inner h2  {
 		padding:0 !important;
 		margin:0;
 		border-radius:0 0 0 0 !important;
-		background-image: url("../img/sprite.png?v=40");
 		background-size: 500px 1329px;
 		background-position: center -1003px;		
 		}
@@ -4804,7 +4803,6 @@ body.rtl #feed-header-inner h2  {
 		margin-left: -35px; 
 		width: 70px; 
 		height: 55px;
-		background-image: url("../img/sprite.png?v=40");
 		background-size: 500px 1329px;
 		background-color:#ccc;
 		}
diff --git a/js/misc-functions.js b/js/misc-functions.js
index 18710e9..4c94c6f 100644
--- a/js/misc-functions.js
+++ b/js/misc-functions.js
@@ -702,19 +702,21 @@ function changeLinkColor(newLinkColor) {
 		return false;
 		}
 	
+	var lighterColor08 = blendRGBColors(hex2rgb(validHexColor),'rgb(255,255,255)',0.8);
+	var lighterColor06 = blendRGBColors(hex2rgb(validHexColor),'rgb(255,255,255)',0.6)
+	
 	var headStyle = $('head').children('style');
-	var linkstyle = headStyle.text();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('color:')+6) + validHexColor + linkstyle.substring(linkstyle.indexOf(';/*COLOREND*/')));
-	var linkstyle = headStyle.html();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('background-color:')+17) + validHexColor + linkstyle.substring(linkstyle.indexOf(';/*BACKGROUNDCOLOREND*/')));		
-	var linkstyle = headStyle.html();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('border-color:')+13) + validHexColor + linkstyle.substring(linkstyle.indexOf(';/*BORDERCOLOREND*/')));		
-	var linkstyle = headStyle.html();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('background-color:rgb(')+17) + blendRGBColors(hex2rgb(validHexColor),'rgb(255,255,255)',0.8) + linkstyle.substring(linkstyle.indexOf(';/*LIGHTERBACKGROUNDCOLOREND*/')));		
-	var linkstyle = headStyle.html();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('border-color:rgb(')+13) + blendRGBColors(hex2rgb(validHexColor),'rgb(255,255,255)',0.6) + linkstyle.substring(linkstyle.indexOf(';/*LIGHTERBORDERCOLOREND*/')));		
-	var linkstyle = headStyle.html();
-	headStyle.text(linkstyle.substring(0,linkstyle.indexOf('border-bottom-color:rgb(')+20) + blendRGBColors(hex2rgb(validHexColor),'rgb(255,255,255)',0.8) + linkstyle.substring(linkstyle.indexOf(';/*LIGHTERBORDERBOTTOMCOLOREND*/')));		
+	var headStyleText = headStyle.text();
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*COLORSTART*/','/*COLOREND*/',validHexColor);
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*BACKGROUNDCOLORSTART*/','/*BACKGROUNDCOLOREND*/',validHexColor);
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*BORDERCOLORSTART*/','/*BORDERCOLOREND*/',validHexColor);
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*LIGHTERBACKGROUNDCOLORSTART*/','/*LIGHTERBACKGROUNDCOLOREND*/',lighterColor08);
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*LIGHTERBORDERCOLORSTART*/','/*LIGHTERBORDERCOLOREND*/',lighterColor06);
+	headStyleText = replaceFromStringEndToStringStart(headStyleText,'/*LIGHTERBORDERBOTTOMCOLORSTART*/','/*LIGHTERBORDERBOTTOMCOLOREND*/',lighterColor08);				
+	headStyle.text(headStyleText);
+	}
+function replaceFromStringEndToStringStart(string,fromStringEnd,toStringStart,withString) {
+	return string.substring(0,string.indexOf(fromStringEnd)+fromStringEnd.length) + withString + string.substring(string.indexOf(toStringStart));			
 	}
 function blendRGBColors(c0, c1, p) {
     var f=c0.split(","),t=c1.split(","),R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);