☰

Native implementation of a jsFiddle.net in-pane log console

To be used among external libraries when testing other jsFiddle.net scripts

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greatest.deepsurf.us/scripts/375910/656390/Native%20implementation%20of%20a%20jsFiddlenet%20in-pane%20log%20console.js 

  1. // ==UserScript==
  2. // @name          Native implementation of a jsFiddle.net in-pane log console
  3. // @version       0.1.0
  4. // @description   To be used among external libraries when testing other jsFiddle.net scripts
  5. // @namespace     https://greatest.deepsurf.us/en/users/15562
  6. // @author        Jonathan Brochu (https://greatest.deepsurf.us/en/users/15562)
  7. // @license       GPLv3 or later (http://www.gnu.org/licenses/gpl-3.0.en.html)
  8. // @include       https://jsfiddle.net/*
  9. // @grant         GM_addStyle
  10. // ==/UserScript==
  11.  
  12. /***
  13.  * History:
  14.  *
  15.  * 0.1.0  First implementation, based on own's previous work. (2018-12-24)
  16.  *
  17.  */
  18.  
  19. // Helpers, implemented on Element/Document/DocumentFragment.prototype
  20. (function (arrTargets, arrSpecs) {
  21. 	var __fn__ = 'function',
  22. 		__und__ = 'undefined';
  23. 	arrTargets.forEach(function (target) {
  24. 		arrSpecs.forEach(function (spec) {
  25. 			if (typeof spec.prop  === __und__) {
  26. 				return;
  27. 			}
  28. 			if (typeof spec.impl === __und__) {
  29. 				return;
  30. 			}
  31. 			var propName = spec.prop,
  32. 				propImpl = spec.impl;
  33. 				accessors = spec.accessors.split('|'),
  34. 				getArgCount = spec.getArgCount || spec.setArgCount-1 || 0,
  35. 				readOnly = (typeof spec.readOnly !== __und__ ? spec.readOnly : false);
  36. 			if (target.hasOwnProperty(propName)) {
  37. 				return;
  38. 			}
  39. 			if (typeof propImpl !== __fn__) {
  40. 				return;
  41. 			}
  42. 			var desc = {
  43. 				configurable: true,
  44. 				enumerable: true,
  45. 				writable: !readOnly
  46. 			};
  47. 			['get', 'set', 'value'].forEach(function(item) {
  48. 				if (accessors.indexOf(item) == -1) return;
  49. 				switch(item) {
  50. 					case 'get': desc[item] = function() {
  51. 						return (typeof propImpl === __fn__ ? propImpl.apply(this, arguments) : propImpl);
  52. 					}; break;
  53. 					case 'set': desc[item] = function() {
  54. 						return (typeof propImpl === __fn__ ? propImpl.apply(this, arguments) : propImpl);
  55. 					}; break;
  56. 					default: desc[item] = propImpl;
  57. 				}
  58. 			});
  59. 			if (typeof desc.get !== __und__) {
  60. 				delete desc.value;
  61. 				delete desc.writable;
  62. 			}
  63. 			if (typeof desc.set !== __und__) {
  64. 				delete desc.writable;
  65. 			}
  66. 			Object.defineProperty(target, propName, desc);
  67. 		});
  68. 	});
  69. })(
  70. 	[Element.prototype, Document.prototype, DocumentFragment.prototype],
  71. 	[
  72. 		{
  73. 			/*
  74. 			 * Source: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
  75. 			 * Original Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
  76. 			 */
  77. 			prop: 'append',
  78. 			accessors: 'value',
  79. 			impl: function append() {
  80. 					console.$nativeImpl.log('.append() { console.log(this); } => ' + this);
  81. 					var argArr = Array.prototype.slice.call(arguments),
  82. 						docFrag = document.createDocumentFragment();
  83. 					argArr.forEach(function (argItem) {
  84. 						var isNode = argItem instanceof Node;
  85. 						docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
  86. 					});
  87. 					this.appendChild(docFrag);
  88. 					return this;
  89. 				}
  90. 		},
  91. 		{
  92. 			prop: 'empty',
  93. 			accessors: 'value',
  94. 			impl: function empty() {
  95. 					while (this.childNodes.length) this.removeChild(this.firstChild);
  96. 					return this;
  97. 				}
  98. 		},
  99. 		{
  100. 			prop: 'html',
  101. 			accessors: 'value',
  102. 			impl: function html() {
  103. 					if (arguments.length) {
  104. 						switch(typeof arguments[0]) {
  105. 							case 'string':
  106. 								this.innerHTML = arguments[0];
  107. 								break;
  108. 							default:
  109. 								this.empty();
  110. 								this.append(arguments[0]);
  111. 						}
  112. 						return this;
  113. 					} else {
  114. 						return this.innerHTML;
  115. 					}
  116. 				}
  117. 		}
  118. 	]
  119. );
  120.  
  121. // doc.gEBI() & createElementFromHTML() Wrapper
  122. $ = function() {
  123. 	if (!arguments.length) return;
  124. 	if (typeof arguments[0] === 'string') {
  125. 		var arg = arguments[0];
  126. 		if (/\s/.test(arg)) {
  127. 			/*
  128. 			 * function createElementFromHTML()
  129. 			 * Source: https://stackoverflow.com/a/494348/3865919
  130. 			 * Author: Crescent Fresh <https://stackoverflow.com/users/45433/crescent-fresh>
  131. 			 */
  132. 			try {
  133. 				var tmpDiv = document.createElement('div');
  134. 				tmpDiv.innerHTML = arg.trim();
  135. 				return tmpDiv.firstChild;
  136. 			} catch(e) {
  137. 				return null;
  138. 			}
  139. 		} else {
  140. 			return document.getElementById(arg);
  141. 		}
  142. 	} else if (arguments[0] instanceof Element) {
  143. 		return arguments[0];
  144. 	} else return null;
  145. };
  146. $.addCSS = function(css, media) {
  147. 	/*
  148. 	 * Rewrite of own's addStyle() using code from...
  149. 	 * Source: https://stackoverflow.com/a/524721
  150. 	 * Author: Christoph <https://stackoverflow.com/users/48015/christoph>
  151. 	 */
  152. 	if (typeof(GM_addStyle) !== 'undefined' && !media) {
  153. 		GM_addStyle(css);
  154. 	} else {
  155. 		if (!media) { media = 'all'; }
  156. 		var head = document.head || document.getElementsByTagName('head')[0],
  157. 			styleNode = document.createElement('style');
  158. 		styleNode.type = 'text/css';
  159. 		if (media) styleNode.media = media;
  160. 		if (styleNode.styleSheet){
  161. 			// This is required for IE8 and below.
  162. 			styleNode.styleSheet.cssText = css;
  163. 		} else {
  164. 			styleNode.appendChild(document.createTextNode(css));
  165. 		}
  166. 		head.appendChild(styleNode);
  167. 	}
  168. };
  169.  
  170. // console.{} implementation
  171. (function(_) {
  172. 	// make sure we don't override native implementation more than once
  173. 	if (_.console.clear.toString() !== 'function clear() { [native code] }') { return; }
  174. 	var __fn__ = 'function',
  175. 		consoleId = 'console-log',
  176. 		consoleLine = '<p id="%" class="*-line"></p>',
  177. 		_console = _.console || {},
  178. 		methods = ['log', 'info', 'warn', 'error', 'trace'];
  179. 	_.console = {
  180. 		$init: function() {
  181. 			if ($(consoleId)) { return; }
  182. 			var container = '<div id="console-log" class="scrollbar"></div>',
  183. 				css = 
  184. 					'body {\n' +
  185. 					'	/*background: #1F252D;\n*/' +
  186. 					'}\n' +
  187. 					'#console-log {\n' +
  188. 					'	font-family: "SF Mono", Monaco, "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;\n' +
  189. 					'	font-size: 12px;\n' +
  190. 					'	font-variant-ligatures: contextual;\n' +
  191. 					'	color: rgb(207, 208, 210);\n' +
  192. 					'	background: #313B47;\n' +
  193. 					'	border: 3px solid #1B2027;\n' +
  194. 					'	border-radius: 5px;\n' +
  195. 					'	padding: 10px; \n' +
  196. 					'	margin: 5px;\n' +
  197. 					'	width: 93%;\n' +
  198. 					'	min-height: 50px;\n' +
  199. 					'	max-height: 150px;\n' +
  200. 					'	position: absolute;\n' +
  201. 					'	bottom: 5px;\n' +
  202. 					'	overflow: scroll;\n' +
  203. 					'}\n' +
  204. 					'.log-line,\n' +
  205. 					'.info-line,\n' +
  206. 					'.warn-line,\n' +
  207. 					'.error-line,\n' +
  208. 					'.trace-line {\n' +
  209. 					'	font-family: monospace;\n' +
  210. 					'	margin: 2px;\n' +
  211. 					'	white-space: nowrap;\n' +
  212. 					'}\n' +
  213. 					'.log-line {\n' +
  214. 					'	color: rgb(207, 208, 210);\n' +
  215. 					'}\n' +
  216. 					'.info-line {\n' +
  217. 					'	color: #6ce890;\n' +
  218. 					'}\n' +
  219. 					'.warn-line {\n' +
  220. 					'	color: #f8b068;\n' +
  221. 					'}\n' +
  222. 					'.error-line {\n' +
  223. 					'	color: #ff4f68;\n' +
  224. 					'	font-weight: bold;\n' +
  225. 					'}\n' +
  226. 					'.trace-line {\n' +
  227. 					'	color: #b896ed;\n' +
  228. 					'}\n' +
  229. 					'#console-log.scrollbar::-webkit-scrollbar-track {\n' +
  230. 					'	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);\n' +
  231. 					'	border-radius: 5px;\n' +
  232. 					'	background-color: #313B47;\n' +
  233. 					'}\n' +
  234. 					'#console-log.scrollbar::-webkit-scrollbar {\n' +
  235. 					'	width: 10px;\n' +
  236. 					'	height: 10px;\n' +
  237. 					'	background-color: #313B47;\n' +
  238. 					'}\n' +
  239. 					'#console-log.scrollbar::-webkit-scrollbar-thumb {\n' +
  240. 					'	border-radius: 5px;\n' +
  241. 					'	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);\n' +
  242. 					'	background-color: #262E38;\n' +
  243. 					'}\n' +
  244. 					'#console-log.scrollbar::-webkit-scrollbar-corner {\n' +
  245. 					'	background: #262E38;\n' +
  246. 					'}\n',
  247. 				body = document.body || document.getElementsByTagName('body')[0];
  248. 			$.addCSS(css);
  249. 			body.append($(container));
  250. 		},
  251. 		$typedLog: function(logMethod, text) {
  252. 			if (methods.indexOf(logMethod) == -1) { return; }
  253. 			if (!this.$enabled) { return; }
  254. 			this.$init();
  255. 			var consoleEl = $(consoleId),
  256. 				lineHTML = consoleLine
  257. 					.replace(/\*.{0}/, logMethod)
  258. 					.replace(/\%/, 'console-line-'+this.$lineCounter),
  259. 				newLineEl = $(lineHTML);
  260. 			newLineEl.html(text);
  261. 			consoleEl.append(newLineEl);
  262. 			consoleEl.scrollTop = consoleEl.scrollHeight;
  263. 			this.$lineCounter++;
  264. 		},
  265. 		$enabled: true,
  266. 		$echoNative: false,
  267. 		$lineCounter: 0,
  268. 		$nativeImpl: _console,
  269. 		clear: function() {
  270. 			this.$init();
  271. 			$(consoleId).empty();
  272. 		}
  273. 	};
  274. 	for (var prop in _.console) {
  275. 		if (!Object.prototype.hasOwnProperty.call(_.console, prop)) continue;
  276. 		if (typeof _.console[prop] !== __fn__) continue;
  277. 		_.console[prop] = _.console[prop].bind(_.console);
  278. 	}
  279. 	methods.forEach(function(method) {
  280. 		_.console[method] = function() { this.$typedLog(method,  Array.prototype.slice.call(arguments).join(' ')); }.bind(_.console);
  281. 	});
  282. 	var doEcho = function(method, args) {
  283. 			if (!this.$echoNative && this.$enabled) { return; }
  284. 			if (typeof _console.clear !== __fn__ ) { return; }
  285. 			if (typeof _console[method] !== __fn__ ) { return; }
  286. 			_console[method].apply(this, args);
  287. 		}.bind(_.console);
  288. 	// wrap methods to include echo calls
  289. 	(function(target) {
  290. 		for (var prop in target) {
  291. 			if (!Object.prototype.hasOwnProperty.call(target, prop)) continue;
  292. 			if (typeof target[prop] !== __fn__) continue;
  293. 			if (target[prop].$extended) continue;
  294. 			if (prop.charAt(0) === '$') continue;
  295. 			target[prop] = (function(){
  296. 				var _prop = prop,
  297. 					_fn = target[prop];
  298. 				return function() {
  299. 					doEcho(_prop, Array.prototype.slice.call(arguments));
  300. 					_fn.apply(_fn, arguments);
  301. 				};
  302. 			})();
  303. 			target[prop].$extended = true;
  304. 		}
  305. 	})(_.console);
  306. })(window);
  307.  
  308. /*
  309.  * Examples:
  310.  *
  311. console.$echoNative = true;
  312. console.clear();
  313. console.log("Hello console");
  314. console.info("Need some info?");
  315. console.warn("I might not have what you need though");
  316. console.error("ERROR: Data not found!!");
  317. console.trace("This is somevery long line of unnecessary text his is somevery long line of unnecessary text his is somevery long line of unnecessary text");
  318.  */