Ends the jQCloud plugin and integrates the lastest version of jQuery (1.8.2)
This commit is contained in:
Fred Pauchet
parent
6984b06ba5
commit
ea88751cac
|
|
@ -13,7 +13,7 @@ IMAGE_SIZE = '300x300'
|
|||
|
||||
register = template.Library()
|
||||
|
||||
thumbnails_dir = os.path.join(settings.MEDIA_ROOT, 'thumbnails')
|
||||
thumbnails_dir = os.path.join(settings.MEDIA_ROOT, 'pictures', 'thumbnails')
|
||||
|
||||
if not os.path.exists(thumbnails_dir):
|
||||
os.makedirs(thumbnails_dir)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
/* fonts */
|
||||
|
||||
div.jqcloud {
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
font-size: 10px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
div.jqcloud a {
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
color: Black;
|
||||
}
|
||||
|
||||
div.jqcloud span.w10 { font-size: 550%; }
|
||||
div.jqcloud span.w9 { font-size: 500%; }
|
||||
div.jqcloud span.w8 { font-size: 450%; }
|
||||
div.jqcloud span.w7 { font-size: 400%; }
|
||||
div.jqcloud span.w6 { font-size: 350%; }
|
||||
div.jqcloud span.w5 { font-size: 300%; }
|
||||
div.jqcloud span.w4 { font-size: 250%; }
|
||||
div.jqcloud span.w3 { font-size: 200%; }
|
||||
div.jqcloud span.w2 { font-size: 150%; }
|
||||
div.jqcloud span.w1 { font-size: 100%; }
|
||||
|
||||
/* colors */
|
||||
|
||||
div.jqcloud { color: #09f; }
|
||||
div.jqcloud a
|
||||
{
|
||||
color: inherit;
|
||||
-webkit-transition:color 250ms ease-out;
|
||||
-moz-transition:color 250ms ease-out;
|
||||
-o-transition:color 250ms ease-out;
|
||||
transition:color 250ms ease-out;
|
||||
}
|
||||
div.jqcloud a:hover { color: Black; }
|
||||
div.jqcloud span.w12 { color: #0cf; }
|
||||
div.jqcloud span.w11 { color: #0cf; }
|
||||
div.jqcloud span.w10 { color: #0cf; }
|
||||
div.jqcloud span.w9 { color: #0cf; }
|
||||
div.jqcloud span.w8 { color: #0cf; }
|
||||
div.jqcloud span.w7 { color: #39d; }
|
||||
div.jqcloud span.w6 { color: #90c5f0; }
|
||||
div.jqcloud span.w5 { color: #90a0dd; }
|
||||
div.jqcloud span.w4 { color: #90c5f0; }
|
||||
div.jqcloud span.w3 { color: #a0ddff; }
|
||||
div.jqcloud span.w2 { color: #99ccee; }
|
||||
div.jqcloud span.w1 { color: #aab5f0; }
|
||||
|
||||
/* layout */
|
||||
|
||||
div.jqcloud {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.jqcloud span { padding: 0; }
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
/*!
|
||||
* jQCloud Plugin for jQuery
|
||||
*
|
||||
* Version 1.0.2
|
||||
*
|
||||
* Copyright 2011, Luca Ongaro
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Date: Tue Oct 09 22:08:53 +0200 2012
|
||||
*/
|
||||
|
||||
(function( $ ) {
|
||||
"use strict";
|
||||
$.fn.jQCloud = function(word_array, options) {
|
||||
// Reference to the container element
|
||||
var $this = this;
|
||||
// Namespace word ids to avoid collisions between multiple clouds
|
||||
var cloud_namespace = $this.attr('id') || Math.floor((Math.random()*1000000)).toString(36);
|
||||
|
||||
// Default options value
|
||||
var default_options = {
|
||||
width: $this.width(),
|
||||
height: $this.height(),
|
||||
center: {
|
||||
x: ((options && options.width) ? options.width : $this.width()) / 2.0,
|
||||
y: ((options && options.height) ? options.height : $this.height()) / 2.0
|
||||
},
|
||||
delayedMode: word_array.length > 50,
|
||||
shape: false, // It defaults to elliptic shape
|
||||
encodeURI: true
|
||||
};
|
||||
|
||||
options = $.extend(default_options, options || {});
|
||||
|
||||
// Add the "jqcloud" class to the container for easy CSS styling, set container width/height
|
||||
$this.addClass("jqcloud").width(options.width).height(options.height);
|
||||
|
||||
// Container's CSS position cannot be 'static'
|
||||
if ($this.css("position") === "static") {
|
||||
$this.css("position", "relative");
|
||||
}
|
||||
|
||||
var drawWordCloud = function() {
|
||||
// Helper function to test if an element overlaps others
|
||||
var hitTest = function(elem, other_elems){
|
||||
// Pairwise overlap detection
|
||||
var overlapping = function(a, b){
|
||||
if (Math.abs(2.0*a.offsetLeft + a.offsetWidth - 2.0*b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) {
|
||||
if (Math.abs(2.0*a.offsetTop + a.offsetHeight - 2.0*b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
var i = 0;
|
||||
// Check elements for overlap one by one, stop and return false as soon as an overlap is found
|
||||
for(i = 0; i < other_elems.length; i++) {
|
||||
if (overlapping(elem, other_elems[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Make sure every weight is a number before sorting
|
||||
for (var i = 0; i < word_array.length; i++) {
|
||||
word_array[i].weight = parseFloat(word_array[i].weight, 10);
|
||||
}
|
||||
|
||||
// Sort word_array from the word with the highest weight to the one with the lowest
|
||||
word_array.sort(function(a, b) { if (a.weight < b.weight) {return 1;} else if (a.weight > b.weight) {return -1;} else {return 0;} });
|
||||
|
||||
var step = (options.shape === "rectangular") ? 18.0 : 2.0,
|
||||
already_placed_words = [],
|
||||
aspect_ratio = options.width / options.height;
|
||||
|
||||
// Function to draw a word, by moving it in spiral until it finds a suitable empty place. This will be iterated on each word.
|
||||
var drawOneWord = function(index, word) {
|
||||
// Define the ID attribute of the span that will wrap the word, and the associated jQuery selector string
|
||||
var word_id = cloud_namespace + "_word_" + index,
|
||||
word_selector = "#" + word_id,
|
||||
angle = 6.28 * Math.random(),
|
||||
radius = 0.0,
|
||||
|
||||
// Only used if option.shape == 'rectangular'
|
||||
steps_in_direction = 0.0,
|
||||
quarter_turns = 0.0,
|
||||
|
||||
weight = 5,
|
||||
custom_class = "",
|
||||
inner_html = "",
|
||||
word_span = "";
|
||||
|
||||
// Extend word html options with defaults
|
||||
word.html = $.extend(word.html, {id: word_id});
|
||||
|
||||
// If custom class was specified, put them into a variable and remove it from html attrs, to avoid overwriting classes set by jQCloud
|
||||
if (word.html && word.html["class"]) {
|
||||
custom_class = word.html["class"];
|
||||
delete word.html["class"];
|
||||
}
|
||||
|
||||
// Check is min(weight) > max(weight) otherwise use default
|
||||
if (word_array[0].weight > word_array[word_array.length - 1].weight) {
|
||||
// Linearly map the original weight to a discrete scale from 1 to 10
|
||||
weight = Math.round((word.weight - word_array[word_array.length - 1].weight) /
|
||||
(word_array[0].weight - word_array[word_array.length - 1].weight) * 9.0) + 1;
|
||||
}
|
||||
|
||||
var currentCssClass = 'w' + weight + " " + custom_class;
|
||||
|
||||
word_span = $('<span>').attr(word.html).addClass(currentCssClass);
|
||||
|
||||
// Append link if word.url attribute was set
|
||||
if (word.link) {
|
||||
// If link is a string, then use it as the link href
|
||||
if (typeof word.link === "string") {
|
||||
word.link = {href: word.link};
|
||||
}
|
||||
|
||||
// Extend link html options with defaults
|
||||
if ( options.encodeURI ) {
|
||||
word.link = $.extend(word.link, { href: encodeURI(word.link.href).replace(/'/g, "%27") });
|
||||
}
|
||||
|
||||
inner_html = $('<a>').attr(word.link).text(word.text);
|
||||
} else {
|
||||
inner_html = word.text;
|
||||
}
|
||||
word_span.append(inner_html);
|
||||
|
||||
// Bind handlers to words
|
||||
if (!!word.handlers) {
|
||||
for (var prop in word.handlers) {
|
||||
if (word.handlers.hasOwnProperty(prop) && typeof word.handlers[prop] === 'function') {
|
||||
$(word_span).bind(prop, word.handlers[prop]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this.append(word_span);
|
||||
|
||||
var width = word_span.width(),
|
||||
height = word_span.height(),
|
||||
left = options.center.x - width / 2.0,
|
||||
top = options.center.y - height / 2.0;
|
||||
|
||||
// Save a reference to the style property, for better performance
|
||||
var word_style = word_span[0].style;
|
||||
word_style.position = "absolute";
|
||||
word_style.left = left + "px";
|
||||
word_style.top = top + "px";
|
||||
|
||||
while(hitTest(document.getElementById(word_id), already_placed_words)) {
|
||||
// option shape is 'rectangular' so move the word in a rectangular spiral
|
||||
if (options.shape === "rectangular") {
|
||||
steps_in_direction++;
|
||||
if (steps_in_direction * step > (1 + Math.floor(quarter_turns / 2.0)) * step * ((quarter_turns % 4 % 2) === 0 ? 1 : aspect_ratio)) {
|
||||
steps_in_direction = 0.0;
|
||||
quarter_turns++;
|
||||
}
|
||||
switch(quarter_turns % 4) {
|
||||
case 1:
|
||||
left += step * aspect_ratio + Math.random() * 2.0;
|
||||
break;
|
||||
case 2:
|
||||
top -= step + Math.random() * 2.0;
|
||||
break;
|
||||
case 3:
|
||||
left -= step * aspect_ratio + Math.random() * 2.0;
|
||||
break;
|
||||
case 0:
|
||||
top += step + Math.random() * 2.0;
|
||||
break;
|
||||
}
|
||||
} else { // Default settings: elliptic spiral shape
|
||||
radius += step;
|
||||
angle += (index % 2 === 0 ? 1 : -1)*step;
|
||||
|
||||
left = options.center.x - (width / 2.0) + (radius*Math.cos(angle)) * aspect_ratio;
|
||||
top = options.center.y + radius*Math.sin(angle) - (height / 2.0);
|
||||
}
|
||||
word_style.left = left + "px";
|
||||
word_style.top = top + "px";
|
||||
}
|
||||
already_placed_words.push(document.getElementById(word_id));
|
||||
|
||||
// Invoke callback if existing
|
||||
if ($.isFunction(word.afterWordRender)) {
|
||||
word.afterWordRender.call(word_span);
|
||||
}
|
||||
};
|
||||
|
||||
var drawOneWordDelayed = function(index) {
|
||||
index = index || 0;
|
||||
if (!$this.is(':visible')) { // if not visible then do not attempt to draw
|
||||
setTimeout(function(){drawOneWordDelayed(index);},10);
|
||||
return;
|
||||
}
|
||||
if (index < word_array.length) {
|
||||
drawOneWord(index, word_array[index]);
|
||||
setTimeout(function(){drawOneWordDelayed(index + 1);}, 10);
|
||||
} else {
|
||||
if ($.isFunction(options.afterCloudRender)) {
|
||||
options.afterCloudRender.call($this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Iterate drawOneWord on every word. The way the iteration is done depends on the drawing mode (delayedMode is true or false)
|
||||
if (options.delayedMode){
|
||||
drawOneWordDelayed();
|
||||
}
|
||||
else {
|
||||
$.each(word_array, drawOneWord);
|
||||
if ($.isFunction(options.afterCloudRender)) {
|
||||
options.afterCloudRender.call($this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Delay execution so that the browser can render the page before the computatively intensive word cloud drawing
|
||||
setTimeout(function(){drawWordCloud();}, 10);
|
||||
return $this;
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.css" media="screen" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}css/custom.css" media="screen" />
|
||||
<script src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}js/jquery-1.8.2.min.js"></script>
|
||||
<title>{% block page_title %}Collec' de cart'{% endblock %}</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,50 +4,28 @@
|
|||
|
||||
{% block main_container %}
|
||||
|
||||
<script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jqcloud.css" />
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/jqcloud-1.0.2.js"></script>
|
||||
|
||||
$().ready(function() {
|
||||
var catContainer = $('#tagcloud');
|
||||
// get an array of all the <li>'s
|
||||
var categories = catContainer.find('ul li');
|
||||
var cloudMarkup = '';
|
||||
// set maxPercent/minPercent preferences
|
||||
var maxPercent = 250, minPercent = 100;
|
||||
// note that max is initialized to a number that I know is lower than the max count
|
||||
// and that min is set to a number larger than the known min count
|
||||
var max = 1, min = 999, count = 0;
|
||||
// loop through each li and calculate statistics
|
||||
|
||||
categories.each(function(i) {
|
||||
count = parseInt($(this).find('span').text());
|
||||
max = (count > max ? count : max);
|
||||
min = (min > count ? count : min);
|
||||
});
|
||||
|
||||
var total, link, size;
|
||||
var multiplier = (maxPercent-minPercent)/(max-min);
|
||||
// loop through each li and generate the markup for the new tag cloud
|
||||
categories.each(function(i) {
|
||||
count = parseInt($(this).find('span').text());
|
||||
link = $(this).find('a');
|
||||
size = minPercent + ((max-(max-(count-min)))*multiplier) + '%';
|
||||
cloudMarkup += '<a class="cloud_link" style="font-size:' + size + '" href="' + link.attr('href') + '">' + link.text() + '</a> ';
|
||||
});
|
||||
// replace the html content of the parent container with the new tag cloud
|
||||
catContainer.html(cloudMarkup);
|
||||
});
|
||||
|
||||
<script type="text/javascript">
|
||||
/*!
|
||||
* Create an array of word objects, each representing a word in the cloud
|
||||
*/
|
||||
var word_array = [
|
||||
{% for tag in tags_list %}
|
||||
{text: "{{ tag.label }}", weight: {{ tag.occurence }}, link: "{% url list-by-tag tag.id %}"},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
$(function() {
|
||||
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
|
||||
$("#tagCloud").jQCloud(word_array);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<h2>Nuage de tags</h2>
|
||||
|
||||
<div id="tagcloud" class="well">
|
||||
<ul style="list-style-type: none;">
|
||||
{% for tag in tags_list %}
|
||||
<li><a href="{% url list-by-tag tag.id %}">{{ tag.label }}</a><span>{{ tag.occurence }}</span></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="tagCloud" style="width: 550px; height: 350px;"></div>
|
||||
|
||||
<h2>Derniers ajouts</h2>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue