Hiding / Copying of Version of OGP Made Easier

css/global.css

@@ -18,11 +18,26 @@
 	padding: 0px;
 }
 
-span.version{
+span.versionInfo{
 	cursor: pointer;
 	text-decoration: underline;
 }
 
+.inline-block{
+	display: inline-block;
+}
+
+div.OGPVersionArea{
+	width: 100%;
+	position: relative;
+}
+
+span.copyVersionResult{
+	position: absolute;
+	left: 90%;
+	top: 0;
+}
+
 .hide{
-	display: none;
+	display: none !important;
 }

includes/view.php

@@ -179,10 +179,8 @@ class OGPView {
 
         if ( is_object($db) && array_key_exists( "OGPDatabase", class_parents($db) ) ) {
             $footer .= "<div class=\"footer center\">";
-            $footer .= get_lang_f('cur_theme', !empty($_SESSION['users_theme']) ? $_SESSION['users_theme'] : @$panel_settings['theme']);
-            $footer .= "<br />".get_lang('copyright')." &copy; <a href=\"http://www.opengamepanel.org\">Open Game Panel</a> " . date("Y") . " - ".get_lang('all_rights_reserved').".<br /><span class='version'>".get_lang('version')."</span> <span class='hide versionNumber'>".@$panel_settings['ogp_version']."</span> <span class='copyVersionResult'></span> - ".
-			
-			$db->getNbOfQueries()." ".get_lang('queries_executed')."</div>";
+            $footer .= get_lang_f('cur_theme', !empty($_SESSION['users_theme']) ? $_SESSION['users_theme'] : @$panel_settings['theme']) . " - " . $db->getNbOfQueries()." ".get_lang('queries_executed');
+            $footer .= "<br />".get_lang('copyright')." &copy; <a href=\"http://www.opengamepanel.org\">Open Game Panel</a> " . date("Y") . " - ".get_lang('all_rights_reserved')." - <span class='versionInfo'>".get_lang('show_version')."</span><br /><div class='inline-block OGPVersionArea'><span class='version hide'>" . get_lang('version') . ":</span>&nbsp; <span class='hide versionNumber'>".@$panel_settings['ogp_version']."</span> <span class='copyVersionResult'></span></div></div>";
         }
         else
         {

js/global.js

@@ -0,0 +1,75 @@
+$(document).ready(function(){
+    wireClicks();
+});
+
+function wireClicks(){
+	$("span.versionInfo").click(function(e){
+		handleVersionClick();
+	});
+}
+
+function handleVersionClick(){
+	if($("span.versionNumber").hasClass("hide")){
+		$("span.versionNumber").removeClass("hide");
+		$("span.version").removeClass("hide");
+			
+		// Copy the value of the version if their browser supports it
+		$(document.body).append("<input class='tempCopyValue hide' type='text' value='" + $("span.versionNumber").text() + "' />");
+		try {
+			$("input.tempCopyValue").removeClass("hide");
+			$("input.tempCopyValue").select();
+			var successful = document.execCommand('copy');
+			$("input.tempCopyValue").remove();
+			var msg = successful ? 'successful' : 'unsuccessful';
+			logToConsole('Copying text command was ' + msg);
+			if(successful){
+				$("span.copyVersionResult").text("Copied!").css("color", "#43ff0f").removeClass("hide");
+				$("span.copyVersionResult").css("left", $("span.versionNumber").offset().left + $("span.versionNumber").width() + 5 + "px");
+				$("span.copyVersionResult").fadeIn('fast', function(e){  hideVLength(); }).delay(500).fadeOut('slow', function(e){  showVLength(); }).delay(500).fadeIn('slow', function(e){  hideVLength(); }).delay(500).fadeOut('slow', function(e){  showVLength(); }).delay(500).fadeIn('fast', function(e){  hideVLength(); }).delay(2000).fadeIn('fast',function() {
+					resetVersionView(true);
+				});
+			}
+		}catch(err){
+			resetVersionView(true);
+		}
+	}else{
+		$("span.copyVersionResult").stop();
+		resetVersionView();
+	}
+}
+
+function logToConsole(msg){
+	window.console && console.log(msg);
+}
+
+function isUndefinedOrEmptyValue(input, canBeFalse){
+	if(typeof input === typeof undefined || input === null || input === ''){
+		return true;
+	}
+	
+	if(input === false && !isUndefinedOrEmptyValue(canBeFalse) && canBeFalse === true){
+		return false;
+	}else if(input === false){
+		return true;
+	}
+	
+	return false;
+}
+
+function resetVersionView(hideVersion){
+	$("input.tempCopyValue").remove();
+	$("span.copyVersionResult").text("");
+	if(isUndefinedOrEmptyValue(hideVersion)){
+		$("span.versionNumber").removeClass("hide").addClass("hide");
+		$("span.version").removeClass("hide").addClass("hide");
+	}
+	$("span.copyVersionResult").removeClass("hide").addClass("hide");
+}
+
+function hideVLength(){
+	$("span.versionNumberCopyLengthener").removeClass("hide").addClass("hide");
+}
+
+function showVLength(){
+	$("span.versionNumberCopyLengthener").removeClass("hide");
+}