@cryptotaxi247 / netdata-1 / commits / 6971211b1

added shorten() plugin in index.html to allow shortening long information messages

Costa Tsaousis committed May 31, 2016 at 03:52 UTC 6971211b1db34f8a2e110130a2eaa5459b7b358a
1 file changed +135
web/index.html
+135
@@ -2258,6 +2258,141 @@ function finalizePage() {
2258 NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], after, before);
2259 }
2260
2261 + // ------------------------------------------------------------------------
2262 + // https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js
2263 + $.fn.shorten = function(settings) {
2264 + "use strict";
2265 +
2266 + var config = {
2267 + showChars: 750,
2268 + minHideChars: 10,
2269 + ellipsesText: "...",
2270 + moreText: "show more information",
2271 + lessText: "show less information",
2272 + onLess: function() { NETDATA.onscroll(); },
2273 + onMore: function() { NETDATA.onscroll(); },
2274 + errMsg: null,
2275 + force: false
2276 + };
2277 +
2278 + if (settings) {
2279 + $.extend(config, settings);
2280 + }
2281 +
2282 + if ($(this).data('jquery.shorten') && !config.force) {
2283 + return false;
2284 + }
2285 + $(this).data('jquery.shorten', true);
2286 +
2287 + $(document).off("click", '.morelink');
2288 +
2289 + $(document).on({
2290 + click: function() {
2291 +
2292 + var $this = $(this);
2293 + if ($this.hasClass('less')) {
2294 + $this.removeClass('less');
2295 + $this.html(config.moreText);
2296 + $this.parent().prev().animate({'height':'0'+'%'}, 50, function () { $this.parent().prev().prev().show(); }).hide('fast', function() {
2297 + config.onLess();
2298 + });
2299 +
2300 + } else {
2301 + $this.addClass('less');
2302 + $this.html(config.lessText);
2303 + $this.parent().prev().animate({'height':'100'+'%'}, 50, function () { $this.parent().prev().prev().hide(); }).show('fast', function() {
2304 + config.onMore();
2305 + });
2306 + }
2307 + return false;
2308 + }
2309 + }, '.morelink');
2310 +
2311 + return this.each(function() {
2312 + var $this = $(this);
2313 +
2314 + var content = $this.html();
2315 + var contentlen = $this.text().length;
2316 + if (contentlen > config.showChars + config.minHideChars) {
2317 + var c = content.substr(0, config.showChars);
2318 + if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
2319 + {
2320 + var inTag = false; // I'm in a tag?
2321 + var bag = ''; // Put the characters to be shown here
2322 + var countChars = 0; // Current bag size
2323 + var openTags = []; // Stack for opened tags, so I can close them later
2324 + var tagName = null;
2325 +
2326 + for (var i = 0, r = 0; r <= config.showChars; i++) {
2327 + if (content[i] == '<' && !inTag) {
2328 + inTag = true;
2329 +
2330 + // This could be "tag" or "/tag"
2331 + tagName = content.substring(i + 1, content.indexOf('>', i));
2332 +
2333 + // If its a closing tag
2334 + if (tagName[0] == '/') {
2335 +
2336 +
2337 + if (tagName != '/' + openTags[0]) {
2338 + config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
2339 + } else {
2340 + openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
2341 + }
2342 +
2343 + } else {
2344 + // There are some nasty tags that don't have a close tag like <br/>
2345 + if (tagName.toLowerCase() != 'br') {
2346 + openTags.unshift(tagName); // Add to start the name of the tag that opens
2347 + }
2348 + }
2349 + }
2350 + if (inTag && content[i] == '>') {
2351 + inTag = false;
2352 + }
2353 +
2354 + if (inTag) { bag += content.charAt(i); } // Add tag name chars to the result
2355 + else {
2356 + r++;
2357 + if (countChars <= config.showChars) {
2358 + bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
2359 + countChars++;
2360 + } else // Now I have the characters needed
2361 + {
2362 + if (openTags.length > 0) // I have unclosed tags
2363 + {
2364 + //console.log('They were open tags');
2365 + //console.log(openTags);
2366 + for (j = 0; j < openTags.length; j++) {
2367 + //console.log('Cierro tag ' + openTags[j]);
2368 + bag += '</' + openTags[j] + '>'; // Close all tags that were opened
2369 +
2370 + // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
2371 + }
2372 + break;
2373 + }
2374 + }
2375 + }
2376 + }
2377 + c = $('<div/>').html(bag + '<span class="ellip">' + config.ellipsesText + '</span>').html();
2378 + }else{
2379 + c+=config.ellipsesText;
2380 + }
2381 +
2382 + var html = '<div class="shortcontent">' + c +
2383 + '</div><div class="allcontent">' + content +
2384 + '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
2385 +
2386 + $this.html(html);
2387 + $this.find(".allcontent").hide(); // Hide all text
2388 + $('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
2389 + }
2390 + });
2391 +
2392 + };
2393 + $(".chart-message").shorten();
2394 + // ------------------------------------------------------------------------
2395 +
2396 // let it run (update the charts)
2397 NETDATA.unpause();
2398