Permalink
Browse files

Added new features

  • Loading branch information...
1 parent d8e87d0 commit 2bffeb6fb4be319bc438f065cfd4360c47286245 @fzero committed Dec 3, 2012
Showing with 158 additions and 63 deletions.
  1. +10 −4 README.md
  2. +31 −9 jqcloud/jqcloud-1.0.2.js
  3. +0 −11 jqcloud/jqcloud-1.0.2.min.js
  4. +77 −27 jqcloud/jqcloud.css
  5. +10 −4 src/README.md.erb
  6. +30 −8 src/jqcloud/jqcloud.js.erb
View
@@ -66,7 +66,7 @@ The container element must be visible and have non-zero dimensions when you call
### Word Options
For each word object in your word array, you need to specify the following mandatory attributes:
-
+
* **text** (string): the word(s) text
* **weight** (number): a number (integer or float) defining the relative importance of the word (such as the number of occurrencies, etc.). The range of values is arbitrary, and they will be linearly mapped to a discrete scale from 1 to 10.
@@ -95,16 +95,20 @@ All cloud-wide configurations are optional, and the full list of available optio
* **center** (object): The x and y coordinates of the center of the word cloud, relative to the container element (e.g.: {x: 300, y: 150}). Defaults to the center of the container element.
* **afterCloudRender** (function): A callback function to be called after the whole cloud is fully rendered.
* **delayedMode** (boolean): If true, words are rendered one after another with a tiny delay between each one. This prevents freezing of the browser when there are many words to be rendered. If false, the cloud will be rendered in one single shot. By default, delayedMode is true when there are more than 50 words.
-* **shape** (string): the shape of the cloud. By default it is elliptic, but it can be set to `"rectangular"` to draw a rectangular-shaped cloud.
-* **customClass** (string): custom CSS class to be added to all words.
+* **shape** (string): The shape of the cloud. By default it is elliptic, but it can be set to `"rectangular"` to draw a rectangular-shaped cloud.
+* **customClass** (string): Custom CSS class to be added to all words.
+* **toggleClass** (string): Option to have more than one CSS class for each word weight (i.e. alternates between `wa1` and `wb1` instead of using just `w1`).
+* **overlapFactor** (integer): How much the words can overlap each other (default: 0).
+* **testBoundaries** (boolean): If true, jQCloud will make sure the words don't go past the container's boundaries (useful for long words).
+
## Custom CSS guidelines
The word cloud produced by jQCloud is made of pure HTML, so you can style it using CSS. When you call `$("#example").jQCloud(...)`, the containing element is given a CSS class of "jqcloud", allowing for easy CSS targeting. The included CSS file `jqcloud.css` is intended as an example and as a base on which to develop your own custom style, defining dimensions and appearance of words in the cloud. When writing your custom CSS, just follow these guidelines:
* Always specify the dimensions of the container element (div.jqcloud in jqcloud.css).
* The CSS attribute 'position' of the container element must be explicitly declared and different from 'static' (if it is 'statis', jQCloud overwrites it to 'relative').
-* Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in `<span>` tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1.
+* Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in `<span>` tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1 (or wa/wb + number if using toggleClasses).
## v1.0 and backward compatibility
@@ -151,6 +155,8 @@ If you make changes to the JavaScript source, to the README, to examples or to t
## Changelog
+1.0.4 Added `toggleClass`, `overlapFactor` and `testBoundaries` ([fzero](https://github.com/fzero))
+
1.0.3 Brought back the `customClass` convenience option ([fzero](https://github.com/fzero))
1.0.2 Relative font sizes and easier to customize CSS (kudos to [daniel-toman](https://github.com/daniel-toman))
View
@@ -3,12 +3,11 @@
*
* Version 1.0.2
*
- * Copyright 2011, Luca Ongaro
+ * Copyright 2012, Luca Ongaro, Fabio Neves
* Licensed under the MIT license.
*
- * Date: 2012-10-23 16:53:11 -0400
+ * Date: Mon Dec 03 14:55:56 -0500 2012
*/
-
(function( $ ) {
"use strict";
$.fn.jQCloud = function(word_array, options) {
@@ -22,13 +21,16 @@
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
+ 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,
- customClass: ''
+ customClass: '',
+ toggleClasses: false,
+ overlapFactor: 0,
+ testBoundaries: false
};
options = $.extend(default_options, options || {});
@@ -46,11 +48,20 @@
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) {
+ // First test against canvas boundaries (depending on options)
+ if (options.testBoundaries) {
+ if (a.offsetLeft < 0 || a.offsetTop < 0 ||
+ a.offsetTop + a.offsetHeight > options.height ||
+ a.offsetLeft + a.offsetWidth > options.width) {
return true;
}
}
+ // Then test a/b overlap
+ var ov = 2.0 + Math.abs(options.overlapFactor / 10);
+ if ( (Math.abs(ov * a.offsetLeft + a.offsetWidth - ov * b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) &&
+ (Math.abs(ov * a.offsetTop + a.offsetHeight - ov * b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) ) {
+ return true;
+ }
return false;
};
var i = 0;
@@ -75,6 +86,9 @@
already_placed_words = [],
aspect_ratio = options.width / options.height;
+ // Toggles between 'wa' and 'wb' classes for color variation.
+ var color_toggle = 'a';
+
// 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
@@ -107,7 +121,15 @@
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;
}
- word_span = $('<span>').attr(word.html).addClass('w' + weight + " " + custom_class);
+
+ var class_prefix = 'w'
+
+ if (options.toggleClasses) {
+ class_prefix = 'w' + color_toggle;
+ color_toggle = (color_toggle === 'a') ? 'b' : 'a';
+ }
+
+ word_span = $('<span>').attr(word.html).addClass(class_prefix + weight + " " + custom_class);
// Append link if word.url attribute was set
if (word.link) {

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,43 +1,87 @@
/* fonts */
div.jqcloud {
- font-family: "Helvetica", "Arial", sans-serif;
- font-size: 10px;
line-height: normal;
}
+.jqcloud-mini {
+ font-size: 12px;
+}
+
+.jqcloud-maxi {
+ font-size: 20px;
+}
+
div.jqcloud a {
font-size: inherit;
text-decoration: none;
}
-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%; }
+div.jqcloud span.w10, span.wa10, span.wb10 { font-size: 200%; opacity: 0.9; }
+div.jqcloud span.w9, span.wa9, span.wb9 { font-size: 185%; opacity: 0.9; }
+div.jqcloud span.w8, span.wa8, span.wb8 { font-size: 170%; opacity: 0.9; }
+div.jqcloud span.w7, span.wa7, span.wb7 { font-size: 160%; opacity: 0.9; }
+div.jqcloud span.w6, span.wa6, span.wb6 { font-size: 150%; opacity: 0.9; }
+div.jqcloud span.w5, span.wa5, span.wb5 { font-size: 140%; opacity: 0.9; }
+div.jqcloud span.w4, span.wa4, span.wb4 { font-size: 130%; opacity: 0.9; }
+div.jqcloud span.w3, span.wa3, span.wb3 { font-size: 120%; opacity: 0.9; }
+div.jqcloud span.w2, span.wa2, span.wb2 { font-size: 110%; opacity: 0.9; }
+div.jqcloud span.w1, span.wa1, span.wb1 { font-size: 100%; opacity: 0.9; }
+
/* colors */
-div.jqcloud { color: #09f; }
-div.jqcloud a { color: inherit; }
-div.jqcloud a:hover { color: #0df; }
-div.jqcloud a:hover { 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; }
+div.jqcloud { color: rgb(21,167,180); }
+div.jqcloud a {
+ color: inherit;
+ -webkit-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ transition: all .2s ease-in-out;
+}
+div.jqcloud a:hover {
+ background-color: rgba(255, 255, 0, 0.3);
+}
+
+/* no toggle */
+div.jqcloud span.w10 { color: rgb(21,167,180); }
+div.jqcloud span.w9 { color: rgb(33,124,168); }
+div.jqcloud span.w8 { color: rgb(1,79,127); }
+div.jqcloud span.w7 { color: rgb(208,221,43); }
+div.jqcloud span.w6 { color: rgb(152,199,61); }
+div.jqcloud span.w5 { color: rgb(0,169,224); }
+div.jqcloud span.w4 { color: rgb(103,205,220); }
+div.jqcloud span.w3 { color: rgb(168,115,185); }
+div.jqcloud span.w2 { color: rgb(140,198,77); }
+div.jqcloud span.w1 { color: rgb(92,173,168); }
+
+/* toggling */
+div.jqcloud span.wa10 { color: rgb(21,167,180); }
+div.jqcloud span.wa9 { color: rgb(33,124,168); }
+div.jqcloud span.wa8 { color: rgb(1,79,127); }
+div.jqcloud span.wa7 { color: rgb(208,221,43); }
+div.jqcloud span.wa6 { color: rgb(152,199,61); }
+div.jqcloud span.wa5 { color: rgb(0,169,224); }
+div.jqcloud span.wa4 { color: rgb(103,205,220); }
+div.jqcloud span.wa3 { color: rgb(168,115,185); }
+div.jqcloud span.wa2 { color: rgb(140,198,77); }
+div.jqcloud span.wa1 { color: rgb(92,173,168); }
+
+div.jqcloud span.wb10 { color: rgb(92,173,168); }
+div.jqcloud span.wb9 { color: rgb(140,198,77); }
+div.jqcloud span.wb8 { color: rgb(168,115,185); }
+div.jqcloud span.wb7 { color: rgb(103,205,220); }
+div.jqcloud span.wb6 { color: rgb(0,169,224); }
+div.jqcloud span.wb5 { color: rgb(152,199,61); }
+div.jqcloud span.wb4 { color: rgb(208,221,43); }
+div.jqcloud span.wb3 { color: rgb(1,79,127); }
+div.jqcloud span.wb2 { color: rgb(33,124,168); }
+div.jqcloud span.wb1 { color: rgb(21,167,180); }
+
+/* clicked */
+div.jqcloud span.clicked {
+ background-color: rgba(255, 220, 0, 0.5);
+}
/* layout */
@@ -46,4 +90,10 @@ div.jqcloud {
position: relative;
}
-div.jqcloud span { padding: 0; }
+div.jqcloud span {
+ padding: 0;
+ overflow: hidden;
+ word-spacing: -0.1em;
+}
+
+
View
@@ -66,7 +66,7 @@ The container element must be visible and have non-zero dimensions when you call
### Word Options
For each word object in your word array, you need to specify the following mandatory attributes:
-
+
* **text** (string): the word(s) text
* **weight** (number): a number (integer or float) defining the relative importance of the word (such as the number of occurrencies, etc.). The range of values is arbitrary, and they will be linearly mapped to a discrete scale from 1 to 10.
@@ -95,16 +95,20 @@ All cloud-wide configurations are optional, and the full list of available optio
* **center** (object): The x and y coordinates of the center of the word cloud, relative to the container element (e.g.: {x: 300, y: 150}). Defaults to the center of the container element.
* **afterCloudRender** (function): A callback function to be called after the whole cloud is fully rendered.
* **delayedMode** (boolean): If true, words are rendered one after another with a tiny delay between each one. This prevents freezing of the browser when there are many words to be rendered. If false, the cloud will be rendered in one single shot. By default, delayedMode is true when there are more than 50 words.
-* **shape** (string): the shape of the cloud. By default it is elliptic, but it can be set to `"rectangular"` to draw a rectangular-shaped cloud.
-* **customClass** (string): custom CSS class to be added to all words.
+* **shape** (string): The shape of the cloud. By default it is elliptic, but it can be set to `"rectangular"` to draw a rectangular-shaped cloud.
+* **customClass** (string): Custom CSS class to be added to all words.
+* **toggleClass** (string): Option to have more than one CSS class for each word weight (i.e. alternates between `wa1` and `wb1` instead of using just `w1`).
+* **overlapFactor** (integer): How much the words can overlap each other (default: 0).
+* **testBoundaries** (boolean): If true, jQCloud will make sure the words don't go past the container's boundaries (useful for long words).
+
## Custom CSS guidelines
The word cloud produced by jQCloud is made of pure HTML, so you can style it using CSS. When you call `$("#example").jQCloud(...)`, the containing element is given a CSS class of "jqcloud", allowing for easy CSS targeting. The included CSS file `jqcloud.css` is intended as an example and as a base on which to develop your own custom style, defining dimensions and appearance of words in the cloud. When writing your custom CSS, just follow these guidelines:
* Always specify the dimensions of the container element (div.jqcloud in jqcloud.css).
* The CSS attribute 'position' of the container element must be explicitly declared and different from 'static' (if it is 'statis', jQCloud overwrites it to 'relative').
-* Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in `<span>` tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1.
+* Specifying the style of the words (color, font, dimension, etc.) is super easy: words are wrapped in `<span>` tags with ten levels of importance corresponding to the following classes (in descending order of importance): w10, w9, w8, w7, w6, w5, w4, w3, w2, w1 (or wa/wb + number if using toggleClasses).
## v1.0 and backward compatibility
@@ -151,6 +155,8 @@ If you make changes to the JavaScript source, to the README, to examples or to t
## Changelog
+1.0.4 Added `toggleClass`, `overlapFactor` and `testBoundaries` ([fzero](https://github.com/fzero))
+
1.0.3 Brought back the `customClass` convenience option ([fzero](https://github.com/fzero))
1.0.2 Relative font sizes and easier to customize CSS (kudos to [daniel-toman](https://github.com/daniel-toman))
Oops, something went wrong.

0 comments on commit 2bffeb6

Please sign in to comment.