JQuery Caroussel & QRcode scanner templates
This commit is contained in:
parent
199b08bba9
commit
b67a506f0c
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>_CHANNEL_ : CAROUSSEL [BunkerBOX]</title>
|
||||||
|
<link rel="icon" type="image/png" href="styles/logo.png" />
|
||||||
|
<link rel="stylesheet" href="styles/video-js.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="styles/forest.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="styles/decoration.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="styles/video-wall.css" type="text/css" />
|
||||||
|
|
||||||
|
<script src="js/video.min.js"></script>
|
||||||
|
<script src="js/jquery.min.js"></script>
|
||||||
|
<script src="js/mustache.min.js"></script>
|
||||||
|
<script src="js/video-wall.js"></script>
|
||||||
|
<script src="js/videojs-contrib-hls.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h6>
|
||||||
|
<a href="_IPNSL_/tw/_CHANNEL_" target="_CHANNEL_"> "<span>BunkerBOX@_CHANNEL_</span>"</a> /<a href="_IPNSL_">qo-op</a>/
|
||||||
|
</h6>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<center>
|
||||||
|
<div class="row justify-center">
|
||||||
|
|
||||||
|
|
||||||
|
<video
|
||||||
|
id="vbunk"
|
||||||
|
class="video-js vjs-theme-forest"
|
||||||
|
controls
|
||||||
|
preload="auto"
|
||||||
|
width="auto" height="360"
|
||||||
|
poster="_VUID_.jpg"
|
||||||
|
>
|
||||||
|
<source src="_VUID_.mp4" type="video/mp4" />
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
Activer JavaScript SVP
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h1 class="video-title">
|
||||||
|
_TITLE_
|
||||||
|
</h1>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div id="videosChan"><div class="wrapper"></div></div>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<h6>
|
||||||
|
<a href="https://crowdbunker.com/v/_VUID_" target="bunker"> _\/_ </a> powered by <a href="https://astroport.com"><span>"</span>Astroport<span>"</span></a>
|
||||||
|
</h6>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$ ( '#vbunk' ).idowsvideowall ( {
|
||||||
|
_CAROUSSELJSON_
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$.getJSON('_IPNSL_/history._CHANNEL_.json', function (json) {
|
||||||
|
// _IPNSL_ is showing the latest, could be relative to show the actual chain.
|
||||||
|
$('#videosChan').pagination({
|
||||||
|
dataSource: json.Videos,
|
||||||
|
pageSize: 1,
|
||||||
|
callback: function(data, pagination) {
|
||||||
|
var wrapper = $('#videosChan .wrapper').empty();
|
||||||
|
$.each(data, function (i, f) {
|
||||||
|
$('#videosChan .wrapper').append('<ul><li><div class="snippet-block">' + f.link + '</div></li></ul>');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- Matomo Tag Manager -->
|
||||||
|
<script>
|
||||||
|
var _mtm = window._mtm = window._mtm || [];
|
||||||
|
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
|
||||||
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
|
g.async=true; g.src='https://piwik.p2p.legal/js/container_XDhfGZPj.js'; s.parentNode.insertBefore(g,s);
|
||||||
|
</script>
|
||||||
|
<!-- End Matomo Tag Manager -->
|
||||||
|
</html>
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</title>
|
||||||
|
|
||||||
|
<script src="js/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="js/instascan.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h1>JQuery HTML5 QR Code Scanner using Instascan JS Example - ItSolutionStuff.com</h1>
|
||||||
|
|
||||||
|
<h2>Receiver : echo -e 'HTTP/1.1 200 OK\r\n' | nc -l -p 1234 -q 1 | grep '^GET' | cut -d' ' -f2</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<video id="preview"></video>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
|
||||||
|
|
||||||
|
scanner.addListener('scan', function (content) {
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "http://127.0.0.1:1234",
|
||||||
|
data: "qrcode="+content,
|
||||||
|
type: 'GET'
|
||||||
|
});
|
||||||
|
|
||||||
|
alert(content);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
Instascan.Camera.getCameras().then(function (cameras) {
|
||||||
|
|
||||||
|
if (cameras.length > 0) {
|
||||||
|
|
||||||
|
scanner.start(cameras[0]);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
console.error('No cameras found.');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch(function (e) {
|
||||||
|
|
||||||
|
console.error(e);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,524 @@
|
||||||
|
/*
|
||||||
|
* Plugin class
|
||||||
|
*/
|
||||||
|
var jQCloud = function(element, word_array, options) {
|
||||||
|
this.$element = $(element);
|
||||||
|
|
||||||
|
this.word_array = word_array || [];
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
this.sizeGenerator = null;
|
||||||
|
this.colorGenerator = null;
|
||||||
|
|
||||||
|
// Data used internally
|
||||||
|
this.data = {
|
||||||
|
placed_words: [],
|
||||||
|
timeouts: {},
|
||||||
|
namespace: null,
|
||||||
|
step: null,
|
||||||
|
angle: null,
|
||||||
|
aspect_ratio: null,
|
||||||
|
max_weight: null,
|
||||||
|
min_weight: null,
|
||||||
|
sizes: [],
|
||||||
|
colors: []
|
||||||
|
};
|
||||||
|
|
||||||
|
this.initialize();
|
||||||
|
};
|
||||||
|
|
||||||
|
jQCloud.DEFAULTS = {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
center: { x: 0.5, y: 0.5 },
|
||||||
|
steps: 10,
|
||||||
|
delay: null,
|
||||||
|
shape: 'elliptic',
|
||||||
|
classPattern: 'w{n}',
|
||||||
|
encodeURI: true,
|
||||||
|
removeOverflowing: true,
|
||||||
|
afterCloudRender: null,
|
||||||
|
autoResize: false,
|
||||||
|
colors: null,
|
||||||
|
fontSize: null,
|
||||||
|
template: null
|
||||||
|
};
|
||||||
|
|
||||||
|
jQCloud.prototype = {
|
||||||
|
initialize: function() {
|
||||||
|
// Set/Get dimensions
|
||||||
|
if (this.options.width) {
|
||||||
|
this.$element.width(this.options.width);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.options.width = this.$element.width();
|
||||||
|
}
|
||||||
|
if (this.options.height) {
|
||||||
|
this.$element.height(this.options.height);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.options.height = this.$element.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options value
|
||||||
|
this.options = $.extend(true, {}, jQCloud.DEFAULTS, this.options);
|
||||||
|
|
||||||
|
// Ensure delay
|
||||||
|
if (this.options.delay === null) {
|
||||||
|
this.options.delay = this.word_array.length > 50 ? 10 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Backward compatibility
|
||||||
|
if (this.options.center.x > 1) {
|
||||||
|
this.options.center.x = this.options.center.x / this.options.width;
|
||||||
|
this.options.center.y = this.options.center.y / this.options.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create colorGenerator function from options
|
||||||
|
// Direct function
|
||||||
|
if (typeof this.options.colors == 'function') {
|
||||||
|
this.colorGenerator = this.options.colors;
|
||||||
|
}
|
||||||
|
// Array of sizes
|
||||||
|
else if ($.isArray(this.options.colors)) {
|
||||||
|
var cl = this.options.colors.length;
|
||||||
|
if (cl > 0) {
|
||||||
|
// Fill the sizes array to X items
|
||||||
|
if (cl < this.options.steps) {
|
||||||
|
for (var i = cl; i < this.options.steps; i++) {
|
||||||
|
this.options.colors[i] = this.options.colors[cl - 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.colorGenerator = function(weight) {
|
||||||
|
return this.options.colors[this.options.steps - weight];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create sizeGenerator function from options
|
||||||
|
// Direct function
|
||||||
|
if (typeof this.options.fontSize == 'function') {
|
||||||
|
this.sizeGenerator = this.options.fontSize;
|
||||||
|
}
|
||||||
|
// Object with 'from' and 'to'
|
||||||
|
else if ($.isPlainObject(this.options.fontSize)) {
|
||||||
|
this.sizeGenerator = function(width, height, weight) {
|
||||||
|
var max = width * this.options.fontSize.from,
|
||||||
|
min = width * this.options.fontSize.to;
|
||||||
|
return Math.round(min + (max - min) * 1.0 / (this.options.steps - 1) * (weight - 1)) + 'px';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// Array of sizes
|
||||||
|
else if ($.isArray(this.options.fontSize)) {
|
||||||
|
var sl = this.options.fontSize.length;
|
||||||
|
if (sl > 0) {
|
||||||
|
// Fill the sizes array to X items
|
||||||
|
if (sl < this.options.steps) {
|
||||||
|
for (var j = sl; j < this.options.steps; j++) {
|
||||||
|
this.options.fontSize[j] = this.options.fontSize[sl - 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sizeGenerator = function(width, height, weight) {
|
||||||
|
return this.options.fontSize[this.options.steps - weight];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.data.angle = Math.random() * 6.28;
|
||||||
|
this.data.step = (this.options.shape === 'rectangular') ? 18.0 : 2.0;
|
||||||
|
this.data.aspect_ratio = this.options.width / this.options.height;
|
||||||
|
this.clearTimeouts();
|
||||||
|
|
||||||
|
// Namespace word ids to avoid collisions between multiple clouds
|
||||||
|
this.data.namespace = (this.$element.attr('id') || Math.floor((Math.random() * 1000000)).toString(36)) + '_word_';
|
||||||
|
|
||||||
|
this.$element.addClass('jqcloud');
|
||||||
|
|
||||||
|
// Container's CSS position cannot be 'static'
|
||||||
|
if (this.$element.css('position') === 'static') {
|
||||||
|
this.$element.css('position', 'relative');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delay execution so that the browser can render the page before the computatively intensive word cloud drawing
|
||||||
|
this.createTimeout($.proxy(this.drawWordCloud, this), 10);
|
||||||
|
|
||||||
|
// Attach window resize event
|
||||||
|
if (this.options.autoResize) {
|
||||||
|
$(window).on('resize.' + this.data.namespace, throttle(this.resize, 50, this));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Helper function to keep track of timeouts so they can be destroyed
|
||||||
|
createTimeout: function(callback, time) {
|
||||||
|
var timeout = setTimeout($.proxy(function() {
|
||||||
|
delete this.data.timeouts[timeout];
|
||||||
|
callback();
|
||||||
|
}, this), time);
|
||||||
|
this.data.timeouts[timeout] = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Destroy all timeouts
|
||||||
|
clearTimeouts: function() {
|
||||||
|
$.each(this.data.timeouts, function(key) {
|
||||||
|
clearTimeout(key);
|
||||||
|
});
|
||||||
|
this.data.timeouts = {};
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pairwise overlap detection
|
||||||
|
overlapping: function(a, b) {
|
||||||
|
if (Math.abs(2.0 * a.left + a.width - 2.0 * b.left - b.width) < a.width + b.width) {
|
||||||
|
if (Math.abs(2.0 * a.top + a.height - 2.0 * b.top - b.height) < a.height + b.height) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Helper function to test if an element overlaps others
|
||||||
|
hitTest: function(elem) {
|
||||||
|
// Check elements for overlap one by one, stop and return false as soon as an overlap is found
|
||||||
|
for (var i = 0, l = this.data.placed_words.length; i < l; i++) {
|
||||||
|
if (this.overlapping(elem, this.data.placed_words[i])) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Initialize the drawing of the whole cloud
|
||||||
|
drawWordCloud: function() {
|
||||||
|
var i, l;
|
||||||
|
|
||||||
|
this.$element.children('[id^="' + this.data.namespace + '"]').remove();
|
||||||
|
|
||||||
|
if (this.word_array.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure every weight is a number before sorting
|
||||||
|
for (i = 0, l = this.word_array.length; i < l; i++) {
|
||||||
|
this.word_array[i].weight = parseFloat(this.word_array[i].weight, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort word_array from the word with the highest weight to the one with the lowest
|
||||||
|
this.word_array.sort(function(a, b) {
|
||||||
|
return b.weight - a.weight;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Kepp trace of bounds
|
||||||
|
this.data.max_weight = this.word_array[0].weight;
|
||||||
|
this.data.min_weight = this.word_array[this.word_array.length - 1].weight;
|
||||||
|
|
||||||
|
// Generate colors
|
||||||
|
this.data.colors = [];
|
||||||
|
if (this.colorGenerator) {
|
||||||
|
for (i = 0; i < this.options.steps; i++) {
|
||||||
|
this.data.colors.push(this.colorGenerator(i + 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate font sizes
|
||||||
|
this.data.sizes = [];
|
||||||
|
if (this.sizeGenerator) {
|
||||||
|
for (i = 0; i < this.options.steps; i++) {
|
||||||
|
this.data.sizes.push(this.sizeGenerator(this.options.width, this.options.height, i + 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iterate drawOneWord on every word, immediately or with delay
|
||||||
|
if (this.options.delay > 0) {
|
||||||
|
this.drawOneWordDelayed();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
for (i = 0, l = this.word_array.length; i < l; i++) {
|
||||||
|
this.drawOneWord(i, this.word_array[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof this.options.afterCloudRender === 'function') {
|
||||||
|
this.options.afterCloudRender.call(this.$element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Function to draw a word, by moving it in spiral until it finds a suitable empty place
|
||||||
|
drawOneWord: function(index, word) {
|
||||||
|
var word_id = this.data.namespace + index,
|
||||||
|
word_selector = '#' + word_id,
|
||||||
|
|
||||||
|
// option.shape == 'elliptic'
|
||||||
|
angle = this.data.angle,
|
||||||
|
radius = 0.0,
|
||||||
|
|
||||||
|
// option.shape == 'rectangular'
|
||||||
|
steps_in_direction = 0.0,
|
||||||
|
quarter_turns = 0.0,
|
||||||
|
|
||||||
|
weight = Math.floor(this.options.steps / 2),
|
||||||
|
word_span,
|
||||||
|
word_size,
|
||||||
|
word_style;
|
||||||
|
|
||||||
|
// Create word attr object
|
||||||
|
word.attr = $.extend({}, word.html, { id: word_id });
|
||||||
|
|
||||||
|
// Linearly map the original weight to a discrete scale from 1 to 10
|
||||||
|
// Only if weights are different
|
||||||
|
if (this.data.max_weight != this.data.min_weight) {
|
||||||
|
weight = Math.round((word.weight - this.data.min_weight) * 1.0 * (this.options.steps - 1) / (this.data.max_weight - this.data.min_weight)) + 1;
|
||||||
|
}
|
||||||
|
word_span = $('<span>').attr(word.attr);
|
||||||
|
|
||||||
|
word_span.addClass('jqcloud-word');
|
||||||
|
|
||||||
|
// Apply class
|
||||||
|
if (this.options.classPattern) {
|
||||||
|
word_span.addClass(this.options.classPattern.replace('{n}', weight));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply color
|
||||||
|
if (this.data.colors.length) {
|
||||||
|
word_span.css('color', this.data.colors[weight - 1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply color from word property
|
||||||
|
if (word.color) {
|
||||||
|
word_span.css('color', word.color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply size
|
||||||
|
if (this.data.sizes.length) {
|
||||||
|
word_span.css('font-size', this.data.sizes[weight - 1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Render using template function if provided.
|
||||||
|
if (this.options.template) {
|
||||||
|
word_span.html(this.options.template(word));
|
||||||
|
} else if (word.link) {
|
||||||
|
// Append link if word.link attribute was set
|
||||||
|
// If link is a string, then use it as the link href
|
||||||
|
if (typeof word.link === 'string') {
|
||||||
|
word.link = { href: word.link };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.encodeURI) {
|
||||||
|
word.link.href = encodeURI(word.link.href).replace(/'/g, '%27');
|
||||||
|
}
|
||||||
|
|
||||||
|
word_span.append($('<a>').attr(word.link).text(word.text));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
word_span.text(word.text);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind handlers to words
|
||||||
|
if (word.handlers) {
|
||||||
|
word_span.on(word.handlers);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$element.append(word_span);
|
||||||
|
|
||||||
|
word_size = {
|
||||||
|
width: word_span.outerWidth(),
|
||||||
|
height: word_span.outerHeight()
|
||||||
|
};
|
||||||
|
word_size.left = this.options.center.x * this.options.width - word_size.width / 2.0;
|
||||||
|
word_size.top = this.options.center.y * this.options.height - word_size.height / 2.0;
|
||||||
|
|
||||||
|
// Save a reference to the style property, for better performance
|
||||||
|
word_style = word_span[0].style;
|
||||||
|
word_style.position = 'absolute';
|
||||||
|
word_style.left = word_size.left + 'px';
|
||||||
|
word_style.top = word_size.top + 'px';
|
||||||
|
|
||||||
|
while (this.hitTest(word_size)) {
|
||||||
|
// option shape is 'rectangular' so move the word in a rectangular spiral
|
||||||
|
if (this.options.shape === 'rectangular') {
|
||||||
|
steps_in_direction++;
|
||||||
|
|
||||||
|
if (steps_in_direction * this.data.step > (1 + Math.floor(quarter_turns / 2.0)) * this.data.step * ((quarter_turns % 4 % 2) === 0 ? 1 : this.data.aspect_ratio)) {
|
||||||
|
steps_in_direction = 0.0;
|
||||||
|
quarter_turns++;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (quarter_turns % 4) {
|
||||||
|
case 1:
|
||||||
|
word_size.left += this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
word_size.top -= this.data.step + Math.random() * 2.0;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
word_size.left -= this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
|
||||||
|
break;
|
||||||
|
case 0:
|
||||||
|
word_size.top += this.data.step + Math.random() * 2.0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Default settings: elliptic spiral shape
|
||||||
|
else {
|
||||||
|
radius += this.data.step;
|
||||||
|
angle += (index % 2 === 0 ? 1 : -1) * this.data.step;
|
||||||
|
|
||||||
|
word_size.left = this.options.center.x * this.options.width - (word_size.width / 2.0) + (radius * Math.cos(angle)) * this.data.aspect_ratio;
|
||||||
|
word_size.top = this.options.center.y * this.options.height + radius * Math.sin(angle) - (word_size.height / 2.0);
|
||||||
|
}
|
||||||
|
word_style.left = word_size.left + 'px';
|
||||||
|
word_style.top = word_size.top + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't render word if part of it would be outside the container
|
||||||
|
if (this.options.removeOverflowing && (
|
||||||
|
word_size.left < 0 || word_size.top < 0 ||
|
||||||
|
(word_size.left + word_size.width) > this.options.width ||
|
||||||
|
(word_size.top + word_size.height) > this.options.height
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
word_span.remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save position for further usage
|
||||||
|
this.data.placed_words.push(word_size);
|
||||||
|
|
||||||
|
if (typeof word.afterWordRender === 'function') {
|
||||||
|
word.afterWordRender.call(word_span);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Draw one word then recall the function after a delay
|
||||||
|
drawOneWordDelayed: function(index) {
|
||||||
|
index = index || 0;
|
||||||
|
|
||||||
|
// if not visible then do not attempt to draw
|
||||||
|
if (!this.$element.is(':visible')) {
|
||||||
|
this.createTimeout($.proxy(function() {
|
||||||
|
this.drawOneWordDelayed(index);
|
||||||
|
}, this), 10);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < this.word_array.length) {
|
||||||
|
this.drawOneWord(index, this.word_array[index]);
|
||||||
|
|
||||||
|
this.createTimeout($.proxy(function() {
|
||||||
|
this.drawOneWordDelayed(index + 1);
|
||||||
|
}, this), this.options.delay);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (typeof this.options.afterCloudRender == 'function') {
|
||||||
|
this.options.afterCloudRender.call(this.$element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Destroy any data and objects added by the plugin
|
||||||
|
destroy: function() {
|
||||||
|
if (this.options.autoResize) {
|
||||||
|
$(window).off('resize.' + this.data.namespace);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.clearTimeouts();
|
||||||
|
this.$element.removeClass('jqcloud');
|
||||||
|
this.$element.removeData('jqcloud');
|
||||||
|
this.$element.children('[id^="' + this.data.namespace + '"]').remove();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update the list of words
|
||||||
|
update: function(word_array) {
|
||||||
|
this.word_array = word_array;
|
||||||
|
this.data.placed_words = [];
|
||||||
|
|
||||||
|
this.clearTimeouts();
|
||||||
|
this.drawWordCloud();
|
||||||
|
},
|
||||||
|
|
||||||
|
resize: function() {
|
||||||
|
var new_size = {
|
||||||
|
width: this.$element.width(),
|
||||||
|
height: this.$element.height()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (new_size.width != this.options.width || new_size.height != this.options.height) {
|
||||||
|
this.options.width = new_size.width;
|
||||||
|
this.options.height = new_size.height;
|
||||||
|
this.data.aspect_ratio = this.options.width / this.options.height;
|
||||||
|
|
||||||
|
this.update(this.word_array);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Apply throttling to a callback
|
||||||
|
* @param callback {function}
|
||||||
|
* @param delay {int} milliseconds
|
||||||
|
* @param context {object|null}
|
||||||
|
* @return {function}
|
||||||
|
*/
|
||||||
|
function throttle(callback, delay, context) {
|
||||||
|
var state = {
|
||||||
|
pid: null,
|
||||||
|
last: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
var elapsed = new Date().getTime() - state.last,
|
||||||
|
args = arguments,
|
||||||
|
that = this;
|
||||||
|
|
||||||
|
function exec() {
|
||||||
|
state.last = new Date().getTime();
|
||||||
|
return callback.apply(context || that, Array.prototype.slice.call(args));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (elapsed > delay) {
|
||||||
|
return exec();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearTimeout(state.pid);
|
||||||
|
state.pid = setTimeout(exec, delay - elapsed);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* jQuery plugin
|
||||||
|
*/
|
||||||
|
$.fn.jQCloud = function(word_array, option) {
|
||||||
|
var args = arguments;
|
||||||
|
|
||||||
|
return this.each(function() {
|
||||||
|
var $this = $(this),
|
||||||
|
data = $this.data('jqcloud');
|
||||||
|
|
||||||
|
if (!data && word_array === 'destroy') {
|
||||||
|
// Don't even try to initialize when called with 'destroy'
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!data) {
|
||||||
|
var options = typeof option === 'object' ? option : {};
|
||||||
|
$this.data('jqcloud', (data = new jQCloud(this, word_array, options)));
|
||||||
|
}
|
||||||
|
else if (typeof word_array === 'string') {
|
||||||
|
data[word_array].apply(data, Array.prototype.slice.call(args, 1));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.jQCloud.defaults = {
|
||||||
|
set: function(options) {
|
||||||
|
$.extend(true, jQCloud.DEFAULTS, options);
|
||||||
|
},
|
||||||
|
get: function(key) {
|
||||||
|
var options = jQCloud.DEFAULTS;
|
||||||
|
if (key) {
|
||||||
|
options = options[key];
|
||||||
|
}
|
||||||
|
return $.extend(true, {}, options);
|
||||||
|
}
|
||||||
|
};
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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);
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,45 @@
|
||||||
|
$jqcloud-font: 10px "Helvetica", "Arial", sans-serif;
|
||||||
|
|
||||||
|
$jqcloud-link-hover-color: #00ccff;
|
||||||
|
|
||||||
|
$jqcloud-words: (
|
||||||
|
w1: (100%, #aab5f0),
|
||||||
|
w2: (150%, #99ccee),
|
||||||
|
w3: (200%, #a0ddff),
|
||||||
|
w4: (250%, #90c5f0),
|
||||||
|
w5: (300%, #90a0dd),
|
||||||
|
w6: (350%, #90c5f0),
|
||||||
|
w7: (400%, #3399dd),
|
||||||
|
w8: (450%, #00ccff),
|
||||||
|
w9: (500%, #00ccff),
|
||||||
|
w10: (550%, #00ccff)
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
.jqcloud {
|
||||||
|
font: $jqcloud-font;
|
||||||
|
line-height: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jqcloud-word {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@each $word, $config in $jqcloud-words {
|
||||||
|
&.#{$word} {
|
||||||
|
color: nth($config, 2);
|
||||||
|
font-size: nth($config, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $jqcloud-link-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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,593 @@
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wall-container {
|
||||||
|
background: #1C2331 none repeat scroll 0 0;
|
||||||
|
color: #fff;
|
||||||
|
/* font-size: 50px; */
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides-container {
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-slide {
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
background-position: center center !important;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 4px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-thumb {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-playlist,
|
||||||
|
.mode-carousel {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#my-video,
|
||||||
|
#my-video-2,
|
||||||
|
#my-video-3 {
|
||||||
|
margin: 10px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper,
|
||||||
|
.play-wrapper-thumbnail,
|
||||||
|
.play-wrapper-playlist {
|
||||||
|
background-color: rgba(115, 133, 159, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper-playlist {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
left: 39%;
|
||||||
|
top: -100px;
|
||||||
|
transition: 0.5s;
|
||||||
|
right: 39%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-slide:hover .play-wrapper {
|
||||||
|
top: 43%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper-thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: -1000px;
|
||||||
|
transition: 0.5s;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumb:hover .play-wrapper-thumbnail {
|
||||||
|
left: 37%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper:hover,
|
||||||
|
.play-wrapper-thumbnail:hover,
|
||||||
|
.play-wrapper-plylist:hover {
|
||||||
|
background-color: #0000008f;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.play-control {
|
||||||
|
color: #fff;
|
||||||
|
/* vertical-align: middle;
|
||||||
|
top: 20%;
|
||||||
|
position: relative; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-bar {
|
||||||
|
background-color: #444b5a;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
/* height: 32px; */
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-bar i.fa {
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.fa-chevron-circle-left {
|
||||||
|
left: 0;
|
||||||
|
top: 43%;
|
||||||
|
border-top-right-radius: 5px !important;
|
||||||
|
border-bottom-right-radius: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.fa-chevron-circle-right {
|
||||||
|
right: 0px;
|
||||||
|
top: 43%;
|
||||||
|
border-top-left-radius: 5px !important;
|
||||||
|
border-bottom-left-radius: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.fa-chevron-circle-right,
|
||||||
|
a.fa-chevron-circle-left {
|
||||||
|
color: #049cdb;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
width: 47px;
|
||||||
|
background-color: rgba(255, 255, 255, .15);
|
||||||
|
font-size: 4em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.fa-chevron-circle-right:hover,
|
||||||
|
a.fa-chevron-circle-left:hover {
|
||||||
|
text-decoration: none !important;
|
||||||
|
color: #428bca !important;
|
||||||
|
background-color: #eee;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-title {
|
||||||
|
font-size: 2em;
|
||||||
|
display: inline-block;
|
||||||
|
background: #1b2230;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 0 5px;
|
||||||
|
line-height: 1.3em;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*thumbview*/
|
||||||
|
|
||||||
|
.video-thumb {
|
||||||
|
width: 33%;
|
||||||
|
height: 18%;
|
||||||
|
max-width: 33%;
|
||||||
|
max-height: 23%;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: .5;
|
||||||
|
transition: opacity .5s ease-out;
|
||||||
|
-moz-transition: opacity .5s ease-out;
|
||||||
|
-webkit-transition: opacity .5s ease-out;
|
||||||
|
-o-transition: opacity .5s ease-out;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumb:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background: rgb(47, 46, 46);
|
||||||
|
text-align: center;
|
||||||
|
bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 5px;
|
||||||
|
line-height: 1.3em;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-videos {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.img-video-select {
|
||||||
|
margin: 0!important;
|
||||||
|
display: inherit!important;
|
||||||
|
height: 100%;
|
||||||
|
width: 11%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-list-thumb>p {
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
text-indent: 5px !important;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-list-thumb>p>small {
|
||||||
|
font-size: 12px !important;
|
||||||
|
display: block !important;
|
||||||
|
text-indent: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-list-thumb {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-select-thumb>p {
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
text-indent: 5px !important;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container--bootstrap .select2-results>.select2-results__options {
|
||||||
|
max-height: 510px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*PLAYLIST SECTION*****/
|
||||||
|
|
||||||
|
.card:not([class*=card-outline-]) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toast-container>div,
|
||||||
|
.author-box,
|
||||||
|
.badge,
|
||||||
|
.btn,
|
||||||
|
.btn-primary.active:not([disabled]):not(.disabled),
|
||||||
|
.btn-primary:not([disabled]):not(.disabled):active,
|
||||||
|
.card-wrapper .back,
|
||||||
|
.card-wrapper .front,
|
||||||
|
.card.card-cascade.wider .card-body,
|
||||||
|
.card:not([class*=card-outline-]),
|
||||||
|
.chip,
|
||||||
|
.counter,
|
||||||
|
.dropdown-content,
|
||||||
|
.md-pills .nav-link.active,
|
||||||
|
.pagination .active .page-link,
|
||||||
|
.pricing-card .price .version,
|
||||||
|
.section-blog-fw .view,
|
||||||
|
.show>.btn-primary.dropdown-toggle,
|
||||||
|
.social-list,
|
||||||
|
.z-depth-1 {
|
||||||
|
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.card .playlist-body h3,
|
||||||
|
.card .playlist-body h4,
|
||||||
|
.card .card-text {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: .3em;
|
||||||
|
position: relative;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
min-width: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
background-color: #dedede;
|
||||||
|
background-clip: border-box;
|
||||||
|
border: 1px solid rgba(0, 0, 0, .125);
|
||||||
|
width: 48%;
|
||||||
|
max-height: 17%;
|
||||||
|
min-height: 102px;
|
||||||
|
float: left;
|
||||||
|
margin: 1% 1%;
|
||||||
|
transition: 1s;
|
||||||
|
-moz-transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
-o-transition: 1s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
max-height: 54%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover span.playlist-title {
|
||||||
|
text-shadow: 0px 1px 0px rgb(255, 255, 255);
|
||||||
|
color: #000000;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-card .playlist-header {
|
||||||
|
height: 31%;
|
||||||
|
border-radius: .3em .3em 0 0;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
min-height: 102px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-card .avatar {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 14%;
|
||||||
|
margin: -8% 2% 4%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 5px solid #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-reveal,
|
||||||
|
.card-wrapper .face,
|
||||||
|
.carousel-thumbnails .carousel-indicators .active,
|
||||||
|
.playlist-card .avatar,
|
||||||
|
.white {
|
||||||
|
background-color: #FFF!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-card .playlist-body {
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin: 6% 0 0 0;
|
||||||
|
position: relative;
|
||||||
|
-ms-flex: 1 1 auto;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1 1 auto;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn .fa {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-card .avatar img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img {
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-circle {
|
||||||
|
border-radius: 50%!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-header span.playlist-title {
|
||||||
|
font-weight: 500 !important;
|
||||||
|
font-size: 1.3em !important;
|
||||||
|
margin: -6% 16%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
text-shadow: 0px 1px 0px rgb(0, 0, 0);
|
||||||
|
color: #fff;
|
||||||
|
transition: 1s;
|
||||||
|
display: block;
|
||||||
|
width: 84%;
|
||||||
|
/* border: 1px solid red; */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-header .controls button {
|
||||||
|
font-size: 1.5em !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
background: #ca0000;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control .fa {
|
||||||
|
color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
font-size: 1em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-header .controls {
|
||||||
|
font-size: 1em !important;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-new,
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: 300 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .playlist-body p span {
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-size: 1.2em !important;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .playlist-body p .control {
|
||||||
|
margin: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .playlist-body .song-list {
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
line-height: 5em;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0);
|
||||||
|
margin: 0;
|
||||||
|
text-align: right;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .5s ease-out, padding 2s ease-out;
|
||||||
|
-moz-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||||
|
-webkit-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||||
|
-o-transition: opacity .5s ease-out, padding 2s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #428bca;
|
||||||
|
transition: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-list:hover .control {
|
||||||
|
left: 40%;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-list:hover span.songTitle {
|
||||||
|
width: 30%;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.songTitle {
|
||||||
|
width: 100%;
|
||||||
|
transition: 2s;
|
||||||
|
text-shadow: 0 1px 0 rgb(0, 0, 0);
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.control {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
transition: 1s;
|
||||||
|
left: -41%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-pill {
|
||||||
|
padding-right: .6em;
|
||||||
|
padding-left: .6em;
|
||||||
|
border-radius: 10rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .playlist-body .song-list:hover {
|
||||||
|
opacity: 1;
|
||||||
|
transition: 1s;
|
||||||
|
border: 1px solid rgb(0, 0, 0);
|
||||||
|
padding: 30px 0px 30px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-wrapper-playlist {
|
||||||
|
position: relative;
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 1% 38%;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.play-wrapper-playlist:hover {
|
||||||
|
transition: 1s;
|
||||||
|
background-color: #0000008f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-title {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
font-size: 1.5em !important;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aqua-gradient {
|
||||||
|
background: -webkit-linear-gradient(50deg, #2096ff, #05ffa3);
|
||||||
|
background: linear-gradient(40deg, #2096ff, #05ffa3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.purple-gradient {
|
||||||
|
background: -webkit-linear-gradient(50deg, #ff6ec4, #7873f5);
|
||||||
|
background: linear-gradient(40deg, #ff6ec4, #7873f5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.peach-gradient {
|
||||||
|
background: -webkit-linear-gradient(50deg, #FFD86F, #FC6262);
|
||||||
|
background: linear-gradient(40deg, #FFD86F, #FC6262)
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-gradient {
|
||||||
|
background: -webkit-linear-gradient(50deg, #45cafc, #303f9f);
|
||||||
|
background: linear-gradient(40deg, #45cafc, #303f9f)
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo.lighten-1 {
|
||||||
|
background-color: #5c6bc0!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indigo {
|
||||||
|
background-color: #3f51b5!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-count {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
text-shadow: 0px 1px 0px #000000;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1.7em !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--blue: #007bff;
|
||||||
|
--indigo: #6610f2;
|
||||||
|
--purple: #6f42c1;
|
||||||
|
--pink: #e83e8c;
|
||||||
|
--red: #dc3545;
|
||||||
|
--orange: #fd7e14;
|
||||||
|
--yellow: #ffc107;
|
||||||
|
--green: #28a745;
|
||||||
|
--teal: #20c997;
|
||||||
|
--cyan: #17a2b8;
|
||||||
|
--white: #fff;
|
||||||
|
--gray: #868e96;
|
||||||
|
--gray-dark: #343a40;
|
||||||
|
--primary: #007bff;
|
||||||
|
--secondary: #868e96;
|
||||||
|
--success: #28a745;
|
||||||
|
--info: #17a2b8;
|
||||||
|
--warning: #ffc107;
|
||||||
|
--danger: #dc3545;
|
||||||
|
--light: #f8f9fa;
|
||||||
|
--dark: #343a40;
|
||||||
|
--breakpoint-xs: 0;
|
||||||
|
--breakpoint-sm: 576px;
|
||||||
|
--breakpoint-md: 768px;
|
||||||
|
--breakpoint-lg: 992px;
|
||||||
|
--breakpoint-xl: 1200px;
|
||||||
|
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
--font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
}
|
Loading…
Reference in New Issue