Add TagCloud Channels data to Homepage
This commit is contained in:
parent
55c681c215
commit
6c070f81d4
|
@ -403,6 +403,8 @@ echo "##########################################################################
|
||||||
sed -i "s~_VUID_~$INDEX/$VUID~g" ~/.zen/bunkerbox/homepage/index.html
|
sed -i "s~_VUID_~$INDEX/$VUID~g" ~/.zen/bunkerbox/homepage/index.html
|
||||||
sed -i "s/_WHO_/$(date -u "+%Y-%m-%d#%H:%M:%S")@$IPFSNODEID/g " ~/.zen/bunkerbox/homepage/index.html
|
sed -i "s/_WHO_/$(date -u "+%Y-%m-%d#%H:%M:%S")@$IPFSNODEID/g " ~/.zen/bunkerbox/homepage/index.html
|
||||||
sed -i "s~_TITLE_~$TITLE~g" ~/.zen/bunkerbox/homepage/index.html
|
sed -i "s~_TITLE_~$TITLE~g" ~/.zen/bunkerbox/homepage/index.html
|
||||||
|
TAGS=$(${MY_PATH}/tools/get_tagcloud_data.sh $IPNS)
|
||||||
|
sed -i "s~_TAGCLOUD_~$TAGS~g" ~/.zen/bunkerbox/homepage/index.html
|
||||||
|
|
||||||
# Copy json's
|
# Copy json's
|
||||||
cp ~/.zen/bunkerbox/history.json ~/.zen/bunkerbox/homepage/history.json
|
cp ~/.zen/bunkerbox/history.json ~/.zen/bunkerbox/homepage/history.json
|
||||||
|
|
|
@ -61,6 +61,8 @@
|
||||||
|
|
||||||
<div id="videosList"><div class="wrapper"></div></div>
|
<div id="videosList"><div class="wrapper"></div></div>
|
||||||
|
|
||||||
|
<div id="channels"></div>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<div class="row justify-center">
|
<div class="row justify-center">
|
||||||
<h1 class="video-title">
|
<h1 class="video-title">
|
||||||
|
@ -158,6 +160,24 @@ function testLatency(cb) {
|
||||||
cb(avg);
|
cb(avg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
let options = {
|
||||||
|
container: {
|
||||||
|
width: 630,
|
||||||
|
backgroundColor: '#fafaf8',
|
||||||
|
//fontFamily: '"Times New Roman", Times, serif',
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}',
|
||||||
|
maxFontSize: 41, // max font size in pixels
|
||||||
|
minFontSize: 8, // min font size in pixels
|
||||||
|
textShadow: true // enable text shadow
|
||||||
|
},
|
||||||
|
_TAGCLOUD_
|
||||||
|
}
|
||||||
|
$('#channels').tagCloud(options);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,264 @@
|
||||||
|
/**
|
||||||
|
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||||
|
* @version 1.2.0
|
||||||
|
* @release 2021-04-07
|
||||||
|
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||||
|
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||||
|
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||||
|
* @license MIT, https://opensource.org/licenses/mit-license
|
||||||
|
*/
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let debug = false;
|
||||||
|
|
||||||
|
function debugLog(msg) {
|
||||||
|
if(debug) {
|
||||||
|
console.log('- tagCloud: ' + msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function entityEncode(val) {
|
||||||
|
val = val.toString()
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.tagCloud = function(options) {
|
||||||
|
let self = $(this);
|
||||||
|
let addLink = options && options.tag && options.tag.format ? false : true;
|
||||||
|
options = $.extend({}, $.fn.tagCloud.defaults, options);
|
||||||
|
if(options.debug != undefined) {
|
||||||
|
debug = options.debug;
|
||||||
|
}
|
||||||
|
debugLog('options: ' + JSON.stringify(options, null, ''));
|
||||||
|
let tagName = self.prop('tagName');
|
||||||
|
if(tagName === 'UL') {
|
||||||
|
if(!options.data) {
|
||||||
|
options.data = [];
|
||||||
|
}
|
||||||
|
self.find('li').each(function(idx, elem) {
|
||||||
|
let weight = $(elem).data('weight');
|
||||||
|
if(weight == undefined) {
|
||||||
|
weight = $(elem).find(':first-child').data('weight');
|
||||||
|
}
|
||||||
|
let href = $(elem).find('a').attr('href') || '';
|
||||||
|
let tag = $(elem).text() || '?';
|
||||||
|
debugLog(weight +', '+href+', '+tag+', '+$(elem).html());
|
||||||
|
if(options.data[idx]) {
|
||||||
|
if(weight != undefined) {
|
||||||
|
options.data[idx].weight = Number(weight);
|
||||||
|
}
|
||||||
|
if(href) {
|
||||||
|
options.data[idx].link = href;
|
||||||
|
}
|
||||||
|
options.data[idx].name = tag;
|
||||||
|
} else {
|
||||||
|
options.data.push({ name: tag, link: href, weight: Number(weight) })
|
||||||
|
}
|
||||||
|
});
|
||||||
|
self.hide();
|
||||||
|
if(self.next().hasClass('jqTcContainer')) {
|
||||||
|
self.next().remove();
|
||||||
|
}
|
||||||
|
self.after('<div></div>');
|
||||||
|
self = self.next();
|
||||||
|
}
|
||||||
|
let css = {};
|
||||||
|
Object.keys(options.container).forEach(function(key) {
|
||||||
|
css[key] = (options[key] != undefined) ? options[key] : options.container[key];
|
||||||
|
});
|
||||||
|
self.addClass('jqTcContainer').css(css);
|
||||||
|
let containerWidth = options.container.width;
|
||||||
|
let minWeight = 1000000000000;
|
||||||
|
let maxWeight = -1000000000000;
|
||||||
|
let minFontSize = options.tag.minFontSize || $.fn.tagCloud.defaults.tag.minFontSize;
|
||||||
|
let maxFontSize = options.tag.maxFontSize || $.fn.tagCloud.defaults.tag.maxFontSize;
|
||||||
|
let format = options.tag.format || $.fn.tagCloud.defaults.tag.format;
|
||||||
|
let sum = 0;
|
||||||
|
debugLog('minFontSize: '+minFontSize+', maxFontSize: '+maxFontSize);
|
||||||
|
options.data.forEach(function(item) {
|
||||||
|
if(item.weight < minWeight) {
|
||||||
|
minWeight = item.weight;
|
||||||
|
}
|
||||||
|
if(item.weight > maxWeight) {
|
||||||
|
maxWeight = item.weight;
|
||||||
|
}
|
||||||
|
sum += item.weight;
|
||||||
|
});
|
||||||
|
let a = (maxFontSize - minFontSize) / (maxWeight - minWeight);
|
||||||
|
let b = minFontSize - (minWeight * a);
|
||||||
|
debugLog('minWeight: '+minWeight+', maxWeight: '+maxWeight+', a: '+a+', b: '+b);
|
||||||
|
let tags = options.data.sort(function(a, b) {
|
||||||
|
if(a.weight > b.weight) {
|
||||||
|
return -1;
|
||||||
|
} else if(a.weight < b.weight) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}).map(function(item, idx) {
|
||||||
|
let html = format
|
||||||
|
.replace(/\{tag\.name\}/g, item.name)
|
||||||
|
.replace(/\{tag\.link\}/g, item.link)
|
||||||
|
.replace(/\{tag\.weight(?:\.(\d))?\}/g, function(m, c1) {
|
||||||
|
let num = item.weight;
|
||||||
|
if(c1) {
|
||||||
|
let factor = 10 ** parseInt(c1);
|
||||||
|
num = Math.round(num * factor) / factor;
|
||||||
|
}
|
||||||
|
return num.toString();
|
||||||
|
})
|
||||||
|
.replace(/\{tag\.percent(?:\.(\d))?\}/g, function(m, c1) {
|
||||||
|
let num = 100 * item.weight / sum;
|
||||||
|
let factor = 1;
|
||||||
|
if(c1) {
|
||||||
|
factor = 10 ** parseInt(c1);
|
||||||
|
}
|
||||||
|
num = Math.round(num * factor) / factor;
|
||||||
|
return num.toString() + '%';
|
||||||
|
});
|
||||||
|
if(addLink && item.link) {
|
||||||
|
html = '<a href="' + item.link + '" target="_blank">' + html + '</a>';
|
||||||
|
}
|
||||||
|
let size = parseInt((a * item.weight + b) * 10, 10) / 10;
|
||||||
|
let attrs = [
|
||||||
|
'class="jqTcTag"',
|
||||||
|
'data-name="' + entityEncode(item.name) + '"',
|
||||||
|
'data-link="' + entityEncode(item.link || '') + '"',
|
||||||
|
'data-weight="' + item.weight + '"',
|
||||||
|
'data-size="' + size + '"'
|
||||||
|
];
|
||||||
|
let style = 'style="font-size: ' + size + 'px;';
|
||||||
|
let bgColor = item.bgColor || item.backgroundColor || options.tag.backgroundColor ||
|
||||||
|
$.fn.tagCloud.defaults.backgroundColors[idx] || $.fn.tagCloud.defaults.defaultTagBackgroundColor;
|
||||||
|
if(bgColor) {
|
||||||
|
style += ' background-color: ' + bgColor + ';';
|
||||||
|
}
|
||||||
|
let color = item.color || options.tag.color || $.fn.tagCloud.defaults.defaultTagColor;
|
||||||
|
if(color != 'auto') {
|
||||||
|
style += ' color: ' + color + ';';
|
||||||
|
}
|
||||||
|
bgColor
|
||||||
|
.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3')
|
||||||
|
.replace(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i, function(m, c1, c2, c3) {
|
||||||
|
let brightness = Math.round((
|
||||||
|
(Number('0x' + c1) * 299) +
|
||||||
|
(Number('0x' + c2) * 587) +
|
||||||
|
(Number('0x' + c3) * 114)
|
||||||
|
) / 1000);
|
||||||
|
if(brightness > 125) {
|
||||||
|
if(color === 'auto') {
|
||||||
|
style += ' color: black;';
|
||||||
|
}
|
||||||
|
if(options.tag.textShadow) {
|
||||||
|
style += ' text-shadow: 0px 0px 2px #dddddd;';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(color === 'auto') {
|
||||||
|
style += ' color: white;';
|
||||||
|
}
|
||||||
|
if(options.tag.textShadow) {
|
||||||
|
style += ' text-shadow: 0px 0px 2px #222222;';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
style += '"';
|
||||||
|
attrs.push(style);
|
||||||
|
if(item.tooltip) {
|
||||||
|
attrs.push('title="' + entityEncode(item.tooltip) + '"');
|
||||||
|
}
|
||||||
|
html = '<span ' + attrs.join(' ') + '>' + html + '</span>';
|
||||||
|
self.html(html); // set temporarily to get width and height
|
||||||
|
let tagElem = self.find('span');
|
||||||
|
item.width = tagElem.outerWidth();
|
||||||
|
item.height = tagElem.outerHeight();
|
||||||
|
item.html = html;
|
||||||
|
item.ttLength = tagElem.length;
|
||||||
|
item.ttHtml = self.text();
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
debugLog('tags: ' + JSON.stringify(tags, null, ' '))
|
||||||
|
let rows = [];
|
||||||
|
let cells = [];
|
||||||
|
let width = 0;
|
||||||
|
let addRight = true;
|
||||||
|
let addBottom = true;
|
||||||
|
let padding = 2 * 5 + 5;
|
||||||
|
let containerPadding = padding;
|
||||||
|
let tagMargin = 2 * 10 + 5;
|
||||||
|
let verticalAlign = 'middle';
|
||||||
|
tags.forEach(function(item) {
|
||||||
|
if(width + item.width + tagMargin >= containerWidth - containerPadding) {
|
||||||
|
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||||
|
if(addBottom) {
|
||||||
|
rows.push(rowHtml);
|
||||||
|
verticalAlign = 'bottom';
|
||||||
|
} else {
|
||||||
|
rows.unshift(rowHtml);
|
||||||
|
verticalAlign = 'top';
|
||||||
|
}
|
||||||
|
addBottom = !addBottom;
|
||||||
|
containerPadding += 1.5 * padding;
|
||||||
|
cells = [];
|
||||||
|
width = 0;
|
||||||
|
}
|
||||||
|
if(addRight) {
|
||||||
|
cells.push(item.html);
|
||||||
|
} else {
|
||||||
|
cells.unshift(item.html);
|
||||||
|
}
|
||||||
|
addRight = !addRight;
|
||||||
|
width = width + item.width + tagMargin;
|
||||||
|
});
|
||||||
|
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||||
|
if(addBottom) {
|
||||||
|
rows.push(rowHtml);
|
||||||
|
} else {
|
||||||
|
rows.unshift(rowHtml);
|
||||||
|
}
|
||||||
|
let html = '<table class="jqTcTable">' + rows.join('') + '</table>';
|
||||||
|
let tagStyle = {};
|
||||||
|
Object.keys(options.tag).forEach(key => {
|
||||||
|
if(!/^(minFontSize|maxFontSize|format|color|textShadow|backgroundColor)$/.test(key)) {
|
||||||
|
tagStyle[key] = options.tag[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
self.html(html).find('.jqTcTag').css(tagStyle);
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.tagCloud.defaults = {
|
||||||
|
container: {
|
||||||
|
width: 500,
|
||||||
|
height: 'auto',
|
||||||
|
backgroundColor: '#f0f0f0',
|
||||||
|
color: '#666666',
|
||||||
|
padding: '10px 5px',
|
||||||
|
fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif'
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
minFontSize: 10, // min font size in pixels
|
||||||
|
maxFontSize: 40, // max font size in pixels
|
||||||
|
format: '{tag.name}', // also '{tag.link}', '{tag.weight}', '{tag.percent}'
|
||||||
|
color: 'auto', // auto text color, black for light background, white for dark background
|
||||||
|
textShadow: false // text shadow, enable for better visibility
|
||||||
|
},
|
||||||
|
backgroundColors: [
|
||||||
|
'#db843d', '#92a8cd', '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572',
|
||||||
|
'#ff9655', '#d6cb54', '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000',
|
||||||
|
'#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd',
|
||||||
|
'#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54',
|
||||||
|
'#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970',
|
||||||
|
'#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd', '#a47d7c', '#058dc7',
|
||||||
|
'#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92',
|
||||||
|
'#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5'
|
||||||
|
],
|
||||||
|
defaultTagColor: 'auto', // black or white, based on background color
|
||||||
|
defaultTagBackgroundColor: '#ff9655' // default background color
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
|
@ -0,0 +1,40 @@
|
||||||
|
/**
|
||||||
|
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||||
|
* @version 1.2.0
|
||||||
|
* @release 2021-04-07
|
||||||
|
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||||
|
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||||
|
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||||
|
* @license MIT, https://opensource.org/licenses/mit-license
|
||||||
|
*/
|
||||||
|
|
||||||
|
.jqTcContainer {
|
||||||
|
}
|
||||||
|
.jqTcContainer table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.jqTcContainer td {
|
||||||
|
padding: 0;
|
||||||
|
border: 0 none;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.jqTcTag {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 3px 7px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.jqTcTag:hover {
|
||||||
|
box-shadow: 0 0 5px 1px #aaa;
|
||||||
|
}
|
||||||
|
.jqTcTag a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.jqTcTag a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* EOF */
|
|
@ -0,0 +1,201 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<title>Demo of jQuery Tag Cloud</title>
|
||||||
|
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="js/tagcloud.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#demoCloud1').tagCloud({
|
||||||
|
tag: {
|
||||||
|
color: '#444444',
|
||||||
|
backgroundColor: '#f8f8cc'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let options = {
|
||||||
|
container: {
|
||||||
|
width: 630,
|
||||||
|
//fontFamily: '"Times New Roman", Times, serif',
|
||||||
|
backgroundColor: '#fafaf8'
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}', // default: '{tab.name}'
|
||||||
|
maxFontSize: 41, // max font size in pixels
|
||||||
|
minFontSize: 8, // min font size in pixels
|
||||||
|
textShadow: true // text shadow, enabled for better visibility
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: 'HTML', link: '#', weight: 60 },
|
||||||
|
{ name: 'HTML5', link: '#', weight: 90, tooltip: 'Sample "tooltip" message' },
|
||||||
|
{ name: 'CSS', link: '#', weight: 65 },
|
||||||
|
{ name: 'CSS3', link: '#', weight: 35 },
|
||||||
|
{ name: 'JavaScript', link: '#', weight: 85 },
|
||||||
|
{ name: 'jQuery', link: '#', weight: 100 },
|
||||||
|
{ name: 'React.js', link: '#', weight: 78 },
|
||||||
|
{ name: 'Angular', link: '#', weight: 62 },
|
||||||
|
{ name: 'Express', link: '#', weight: 82 },
|
||||||
|
{ name: 'Sharepoint', link: '#', weight: 10 },
|
||||||
|
{ name: 'ASP.NET', link: '#', weight: 15 },
|
||||||
|
{ name: 'Vue.js', link: '#', weight: 43 },
|
||||||
|
{ name: 'Spring', link: '#', weight: 36 },
|
||||||
|
{ name: 'Django', link: '#', weight: 32 },
|
||||||
|
{ name: 'Flask', link: '#', weight: 18 },
|
||||||
|
{ name: 'Ruby onRails', link: '#', weight: 14 },
|
||||||
|
{ name: 'MongoDB', link: '#', weight: 95 },
|
||||||
|
{ name: 'Elasticsearch', link: '#', weight: 40 },
|
||||||
|
{ name: 'MySql', link: '#', weight: 58 },
|
||||||
|
{ name: 'PostgreSQL', link: '#', weight: 50 },
|
||||||
|
{ name: 'Microsoft SQL Server', link: '#', weight: 48 },
|
||||||
|
{ name: 'SQLite', link: '#', weight: 45 },
|
||||||
|
{ name: 'Redis', link: '#', weight: 41 },
|
||||||
|
{ name: 'Oracle 9i', link: '#', weight: 39 },
|
||||||
|
{ name: 'Node.js', link: '#', weight: 70 },
|
||||||
|
{ name: '.NET', link: '#', weight: 38 },
|
||||||
|
{ name: 'WCF', link: '#', weight: 16 },
|
||||||
|
{ name: 'TensorFlow', link: '#', weight: 24 },
|
||||||
|
{ name: 'Ansible', link: '#', weight: 16 },
|
||||||
|
{ name: 'Flutter', link: '#', weight: 15 },
|
||||||
|
{ name: 'TypeScript', link: '#', weight: 37 },
|
||||||
|
{ name: 'Java', link: '#', weight: 42 },
|
||||||
|
{ name: 'Python', link: '#', weight: 58 },
|
||||||
|
{ name: 'C', link: '#', weight: 28 },
|
||||||
|
{ name: 'C++', link: '#', weight: 36 },
|
||||||
|
{ name: 'C#', link: '#', weight: 25 },
|
||||||
|
{ name: 'Go', link: '#', weight: 18 },
|
||||||
|
{ name: 'PHP', link: '#', weight: 12 },
|
||||||
|
{ name: 'VBA', link: '#', weight: 10 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
$('#demoCloud2').tagCloud(options);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="styles/tagcloud.css" />
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
padding: 3px 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
font-family: "helvetica";
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
h1 { font-size: 2em; color: #000000; margin: 3px 0 10px 0; }
|
||||||
|
h2 { font-size: 1.2em; color: #000000; margin: 3px 0 10px 0; }
|
||||||
|
hr { border: 0; border-bottom: 1px solid #aaa; }
|
||||||
|
textarea {
|
||||||
|
color: white;
|
||||||
|
background-color: #333;
|
||||||
|
padding: 3px 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<h1>Demo of jQuery Tag Cloud <tt>jquery.tagcloud</tt></h1>
|
||||||
|
<p>Tag cloud plugin for jQuery, showing bigger tags in the center.</p>
|
||||||
|
<hr />
|
||||||
|
<h2>Example 1: Use <tt>li</tt> HTML tags to define the tag cloud, and options for custom colors</h2>
|
||||||
|
<table><tr><th>
|
||||||
|
Tag Cloud
|
||||||
|
</th><th>
|
||||||
|
HTML
|
||||||
|
</th><th>
|
||||||
|
JavaScript
|
||||||
|
</th></tr>
|
||||||
|
<tr><td style="vertical-align: top;">
|
||||||
|
<ul id="demoCloud1">
|
||||||
|
<li data-weight="60"><a href="#">HTML</a></li>
|
||||||
|
<li><a data-weight="20" href="#">HTML5</a></li>
|
||||||
|
<li data-weight="65">CSS</li>
|
||||||
|
<li data-weight="35"><a href="#">CSS3</a></li>
|
||||||
|
<li data-weight="85"><a href="#">JavaScript</a></li>
|
||||||
|
<li data-weight="100"><a href="#">jQuery</a></li>
|
||||||
|
<li data-weight="78"><a href="#">React.js</a></li>
|
||||||
|
<li data-weight="62"><a href="#">Angular</a></li>
|
||||||
|
<li data-weight="82"><a href="#">Express</a></li>
|
||||||
|
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
||||||
|
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
||||||
|
<li data-weight="43"><a href="#">Vue.js</a></li>
|
||||||
|
<li data-weight="36"><a href="#">Spring</a></li>
|
||||||
|
<li data-weight="32"><a href="#">Django</a></li>
|
||||||
|
<li data-weight="18"><a href="#">Flask</a></li>
|
||||||
|
</ul>
|
||||||
|
</td><td style="vertical-align: top;">
|
||||||
|
<textarea style="width: 34em; height: 16.4em;" readonly="readonly">
|
||||||
|
<ul id="demoCloud1">
|
||||||
|
<li data-weight="60"><a href="#">HTML</a></li>
|
||||||
|
<li data-weight="20><a" href="#">HTML5</a></li>
|
||||||
|
<li data-weight="65">CSS</li> <!-- no link -->
|
||||||
|
<li data-weight="35"><a href="#">CSS3</a></li>
|
||||||
|
<li data-weight="85"><a href="#">JavaScript</a></li>
|
||||||
|
<li data-weight="100"><a href="#">jQuery</a></li>
|
||||||
|
<li data-weight="78"><a href="#">React.js</a></li>
|
||||||
|
<li data-weight="62"><a href="#">Angular</a></li>
|
||||||
|
<li data-weight="82"><a href="#">Express</a></li>
|
||||||
|
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
||||||
|
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
||||||
|
<!-- etc... -->
|
||||||
|
</ul></textarea>
|
||||||
|
</td><td style="vertical-align: top;">
|
||||||
|
<textarea style="width: 22em; height: 16.4em;" readonly="readonly">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#demoCloud1').tagCloud({
|
||||||
|
tag: {
|
||||||
|
color: '#444444',
|
||||||
|
backgroundColor: '#f8f8cc'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});</textarea>
|
||||||
|
</td></tr></table>
|
||||||
|
<hr />
|
||||||
|
<h2>Example 2: Use an empty <tt>div</tt> HTML tag, and options to define the tag cloud</h2>
|
||||||
|
<table><tr><th>
|
||||||
|
Tag Cloud
|
||||||
|
</th><th>
|
||||||
|
HTML
|
||||||
|
</th><th>
|
||||||
|
JavaScript
|
||||||
|
</th></tr>
|
||||||
|
<tr><td style="vertical-align: top;">
|
||||||
|
<div id="demoCloud2"></div>
|
||||||
|
</td><td style="vertical-align: top;">
|
||||||
|
<textarea style="width: 13em; height: 32em;" readonly="readonly">
|
||||||
|
<div id="demoCloud2">
|
||||||
|
</div></textarea>
|
||||||
|
</td><td style="vertical-align: top;">
|
||||||
|
<textarea style="width: 34em; height: 32em;" readonly="readonly">
|
||||||
|
$(document).ready(function() {
|
||||||
|
let options = {
|
||||||
|
container: {
|
||||||
|
width: 630,
|
||||||
|
backgroundColor: '#fafaf8',
|
||||||
|
//fontFamily: '"Times New Roman", Times, serif',
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}',
|
||||||
|
maxFontSize: 41, // max font size in pixels
|
||||||
|
minFontSize: 8, // min font size in pixels
|
||||||
|
textShadow: true // enable text shadow
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: 'HTML', link: '#', weight: 60 },
|
||||||
|
{ name: 'HTML5', link: '#', weight: 90,
|
||||||
|
tooltip: 'Sample "tooltip" message' },
|
||||||
|
{ name: 'CSS', link: '#', weight: 65 },
|
||||||
|
{ name: 'CSS3', link: '#', weight: 35 },
|
||||||
|
{ name: 'JavaScript', link: '#', weight: 85 },
|
||||||
|
{ name: 'jQuery', link: '#', weight: 100 },
|
||||||
|
// etc...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
$('#demoCloud2').tagCloud(options);
|
||||||
|
});</textarea>
|
||||||
|
</td></tr></table>
|
||||||
|
<hr />
|
||||||
|
<p>Repository: <a href="https://github.com/peterthoeny/jquery.tagcloud" target="_blank">
|
||||||
|
https://github.com/peterthoeny/jquery.tagcloud</a></p>
|
||||||
|
<p>Author: <a href="https://github.com/peterthoeny" target="_blank">
|
||||||
|
https://github.com/peterthoeny</a></p>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,13 @@
|
||||||
|
#!/bin/bash
|
||||||
|
[[ ! $1 ]] && echo "You must provide 'qo-op' IPNS key"&& exit 1
|
||||||
|
# echo create data set to include into tagcloud
|
||||||
|
DATA=""
|
||||||
|
|
||||||
|
for channel in $(ls ~/.zen/bunkerbox/channels); do
|
||||||
|
|
||||||
|
howmuch=$(jq '.Videos | length' ~/.zen/bunkerbox/history.${channel}.json)
|
||||||
|
DATA="$DATA { name: '"${channel}"', link: '"/ipns/$1/tw/${channel}"', weight: "${howmuch}", tooltip: '"${channel}"' },"
|
||||||
|
|
||||||
|
done
|
||||||
|
|
||||||
|
echo 'data: [ '$DATA' ]'
|
Loading…
Reference in New Issue