added the ability to change the lighting styles

ONLYOFFICE · Feb 1, 2018 · c1745f5 · c1745f5
2 parents 5700bc0 + c058e9f
commit c1745f5
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 171 deletions.
diff --git a/code/code.js b/code/code.js
@@ -12,6 +12,8 @@
 	var language = hljs.listLanguages(),	// array languages
 		isInitLang = false, 				//flag init lang select
 		language_select,					//select for languages
+		style_select,						//select for style
+		style_value,						//current value style
 		_htmlPast,							//for paste in document
 		curLang,							//current language
 		code_field,							//field for higlight code		
@@ -37,6 +39,7 @@
 		$(container).addClass('codefield');
 		$(code_field).addClass('content');
 		language_select = document.getElementById("language_id");
+		style_select = document.getElementById("style_id");
 		var background_color = document.getElementById("background_color");
 		var temp_code,
 			flag = false;	//flag change code (true = changed)
@@ -57,15 +60,25 @@
 		if (!isInitLang)
 		{
 			initLang();
+			$.get( "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/googlecode.min.css", function( data ) {
+				style_value = data;
+			});
 		}
 
 		curLang = language_select.options[language_select.selectedIndex].text;		//get current language
-		language_select.onchange = function(e) {
+		language_select.onchange = function() {
 			text = code_field.innerText;
 			curLang = language_select.options[language_select.selectedIndex].text;		// change current language
 			ChangeCode(curLang);
 			flag = true;
 		};
+
+		style_select.onchange = function(){
+			document.getElementById("style").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/" + style_select.options[style_select.selectedIndex].value;
+			$.get( "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/" + style_select.options[style_select.selectedIndex].value, function( data ) {
+				style_value = data;
+			});
+		}
 
 		function deleteSelected(start,end) {
 			text = code_field.innerText;
@@ -295,73 +308,12 @@
 			code = code.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;");
 		}
 		code = code.replace(/\n/g,"<br>");
-		_htmlPast = "<!DOCTYPE html>\
-			<html lang=\"en\"> \
+		_htmlPast = "<html lang=\"en\"> \
 				<head>\
 					<meta charset=\"UTF-8\"> \
-					<style>\
-					body {\
-						background-color: black;\
-					}\
-					.hljs {\
-						display: block;\
-						overflow-x: auto;\
-						padding: 0.5em;\
-						background: white;\
-						color: black;}\
-					.hljs-comment,\
-					.hljs-quote {\
-						color: #800;}\
-					.hljs-keyword,\
-					.hljs-selector-tag,\
-					.hljs-section,\
-					.hljs-title,\
-					.hljs-name {\
-						color: #008;}\
-					.hljs-variable,\
-					.hljs-template-variable {\
-						color: #660;}\
-					.hljs-string,\
-					.hljs-selector-attr,\
-					.hljs-selector-pseudo,\
-					.hljs-regexp {\
-						color: #080;}\
-					.hljs-literal,\
-					.hljs-symbol,\
-					.hljs-bullet,\
-					.hljs-meta,\
-					.hljs-number,\
-					.hljs-link {\
-						color: #066;}\
-					.hljs-title,\
-					.hljs-doctag,\
-					.hljs-type,\
-					.hljs-attr,\
-					.hljs-built_in,\
-					.hljs-builtin-name,\
-					.hljs-params {\
-						color: #606;}\
-					.hljs-attribute,\
-					.hljs-subst {\
-						color: #000;}\
-					.hljs-formula {\
-						background-color: #eee;\
-						font-style: italic;}\
-					.hljs-selector-id,\
-					.hljs-selector-class {\
-						color: #9B703F;}\
-					.hljs-addition {\
-						background-color: #baeeba;}\
-					.hljs-deletion {\
-						background-color: #ffc8bd;}\
-					.hljs-doctag,\
-					.hljs-strong {\
-						font-weight: bold;}\
-					.hljs-emphasis {\
-						font-style: italic;}\
-					</style>\
+					<style>" + style_value + "</style>\
 				</head> \
-				<body style = white-space: pre; background-color:'" + container.style.background + "'; font-family: Consolas\">" + code.trim(); + "</body>\
+				<body style = white-space: pre; background-color:" + container.style.background + "; font-family: Consolas\">" + code.trim(); + "</body>\
 			</html>"; 
 	};
 

diff --git a/code/highlight/googlecode.css b/code/highlight/googlecode.css
diff --git a/code/index.html b/code/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<title>Highligh code</title>
 		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-		<link rel="stylesheet" href="highlight/googlecode.css">
+		<link id = "style" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/googlecode.min.css">
 		<link rel="stylesheet" href="../plugins.css">
 		<link rel="stylesheet" href="plugin_style.css">
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
@@ -25,6 +25,21 @@
 			<button class = "button" id ="btn_highlight">Highlight</button>
 		</div>
 		<div class="TabColor">
+			<div class="styleselect">
+					<label class="label" style = "padding: 5px 0px 0px 2px">Style</label>	
+					<select id="style_id" class="combo">
+						<option value = "googlecode.min.css">Googlecode</option>
+						<option value = "github.min.css">GitHub</option>
+						<option value = "github-gist.min.css">GitHub Gist</option>
+						<option value = "androidstudio.min.css">Android Studio</option>
+						<option value = "vs.min.css">Visual Studio</option>
+						<option value = "vs2015.min.css">Visual Studio 2015</option>
+						<option value = "idea.min.css">Idea</option>
+						<option value = "xcode.min.css">XCode</option>
+						<option value = "far.min.css">Fartran</option>
+						<option value = "foundation.min.css">Foundation</option>
+					</select>
+			</div>
 			<div id="tabselect" class="tabselect">	
 				<label class="label">Replace Tab with spaces</label>
 				<select id="tab_replace_id" class="combo">

diff --git a/code/plugin_style.css b/code/plugin_style.css
@@ -67,6 +67,14 @@ select:focus > option:checked {
   padding-left: 10px;
 }
 .tabselect {
+  padding-left: 10px;
+  padding-top: 5px;
+  -khtml-user-select: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+.styleselect{
   padding-top: 5px;
 }
 .button {
@@ -83,12 +91,11 @@ select:focus > option:checked {
 }
 .colorselect {
   padding-left: 10px;
-  padding-top: 3px;
+  padding-top: 2px;
   -khtml-user-select: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
-
 }
 .divbutton {
   padding: 15px 0px 0px 10px;

diff --git a/synonim/plugin_style.css b/synonim/plugin_style.css
@@ -71,7 +71,7 @@ background: rgba(200, 200, 200, 0.5);
   cursor: pointer;
 }
 .global {
-  height: 100%;
+  height: 99%;
   display: flex;
   width: 96%;
   flex-flow: column;

diff --git a/synonim/synonim.js b/synonim/synonim.js
@@ -41,19 +41,6 @@
 				$('#global').empty(); // cleared global div
 				synonim();
 			}
-			if (!isInit)
-			{
-				var container = document.getElementById('scrollable-container-id');
-				Ps.initialize(container, {
-					theme : 'custom-theme'
-				});
-				window.onresize = function()
-				{
-					updateScroll();
-				};
-				updateScroll();
-				isInit = true;
-			}
 		};
 	});	
 
@@ -182,8 +169,10 @@
 		Ps.update(container);
 		if($('.ps__scrollbar-y').height() === 0){
 			$('.ps__scrollbar-y').css('border-width', '0px');
+			$('.ps__scrollbar-y').css('display', 'none');
 		}else{
 			$('.ps__scrollbar-y').css('border-width', '1px');
+			$('.ps__scrollbar-y').css('display', 'block');
 		}
 		$('.ps__scrollbar-x').css('border-width', '0px');
 	};