Read words in from unordered list

README.md

@@ -141,7 +141,7 @@ If you happen to use jQCloud in your projects, you can make me know (just contac
 
 ## Contribute
 
-Contributes are welcome! To setup your build environment, make sure you have Ruby installed, as well as the `rake` and `erb` gems. Then, to build jQCloud, run:
+Contributes are welcome! To setup your build environment, make sure you have Ruby installed, as well as the `rake`, `erb` and `uglifier` gems. Then, to build jQCloud, run:
 
 ```
 rake build
@@ -153,7 +153,6 @@ If you make changes to the JavaScript source, to the README, to examples or to t
 
 ## Changelog
 
-
 1.0.4 Add option to remove overflowing words (thanks to [drewB](https://github.com/drewB))
 
 1.0.3 Fix bug when providing a context to jQuery

jqcloud/jqcloud-1.0.4.js

@@ -6,7 +6,7 @@
  * Copyright 2011, Luca Ongaro
  * Licensed under the MIT license.
  *
- * Date: 2013-05-09 18:54:22 +0200
+ * Date: 2015-01-20 20:16:32 +0000
 */
 
 (function( $ ) {
@@ -63,6 +63,16 @@
         return false;
       };
 
+      // if word array has not been passed in, look for list within container
+      if (word_array.length === 0) {
+        if ($('ul', $this).length) {
+          $('ul li', $this).each(function () {
+            word_array.push({text: $(this).text(), weight: $(this).data('weight')});
+          });
+          $('ul', $this).hide();
+        }
+      }
+
       // 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);

src/README.md.erb

@@ -73,7 +73,7 @@ For each word object in your word array, you need to specify the following manda
 You can also specify the following options for each word:
 
   * **html** (object): an object specifying html attributes to be set on the word (e.g.: `{class: "customclass", title: "A title"}`). Any attribute can be set, except from "id", which is set by jQCloud.
-  * **link** (string or object): if specifyed, the word will be wrapped in a HTML link (`<a>` tag). If `link` is a string, it is expected to be the URL to which the link will point, and will be used as the link's `href` attribute. Alternatively, `link` can be an object specifying html attributes for the `<a>` tag, like `{href: "http://myurl.com", title: "A link"}`
+  * **link** (string or object): if specified, the word will be wrapped in a HTML link (`<a>` tag). If `link` is a string, it is expected to be the URL to which the link will point, and will be used as the link's `href` attribute. Alternatively, `link` can be an object specifying html attributes for the `<a>` tag, like `{href: "http://myurl.com", title: "A link"}`
   * **afterWordRender** (function): a function to be called after this word is rendered. Within the function, `this` refers to the jQuery object for the `<span>` containing the word.
   * **handlers** (object): an object specifying event handlers that will bind to the word (e.g.: `{click: function() { alert("it works!"); } }`)
 
@@ -103,7 +103,7 @@ All cloud-wide configurations are optional, and the full list of available optio
 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').
+* The CSS attribute 'position' of the container element must be explicitly declared and different from 'static' (if it is 'static', 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. 
 
 
@@ -141,7 +141,7 @@ If you happen to use jQCloud in your projects, you can make me know (just contac
 
 ## Contribute
 
-Contributes are welcome! To setup your build environment, make sure you have Ruby installed, as well as the `rake` and `erb` gems. Then, to build jQCloud, run:
+Contributes are welcome! To setup your build environment, make sure you have Ruby installed, as well as the `rake`, `erb` and `uglifier` gems. Then, to build jQCloud, run:
 
 ```
 rake build

src/jqcloud/jqcloud.js.erb

@@ -63,6 +63,16 @@
         return false;
       };
 
+      // if word array has not been passed in, look for list within container
+      if (word_array.length === 0) {
+        if ($('ul', $this).length) {
+          $('ul li', $this).each(function () {
+            word_array.push({text: $(this).text(), weight: $(this).data('weight')});
+          });
+          $('ul', $this).hide();
+        }
+      }
+
       // 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);

src/test/index.html.erb

@@ -1,25 +1,30 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">  
     <title>QUnit Test Suite</title>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
-    <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen">
-    <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
+    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css" media="screen">
+    <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
     <script type="text/javascript" src="../jqcloud/jqcloud-<%= version %>.js"></script>
     <link rel="stylesheet" href="../jqcloud/jqcloud.css" type="text/css" media="screen">
     <script type="text/javascript" src="core_tests.js"></script>
   </head>
   <body>
-    <h1 id="qunit-header">QUnit Test Suite</h1>
-    <h2 id="qunit-banner"></h2>
-    <div id="qunit-testrunner-toolbar"></div>
-    <h2 id="qunit-userAgent"></h2>
-    <ol id="qunit-tests"></ol>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>    
     <div id="container" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container2" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div class="container3" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div class="container4" style="display:none; width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container5" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container6" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
+    <div id="container7" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;">
+        <ul>
+        <li data-weight="1">Abc</li>
+        <li data-weight="1">Def</li>
+        <li data-weight="1">Ghi</li>
+        </ul>
+    </div>
   </body>
 </html>

test/core_tests.js

@@ -33,14 +33,14 @@ $(function(){
   $("#container5").jQCloud(encoded_words, {
     encodeURI: false,
     afterCloudRender: function(){
-      test('Links render without encoding', function(){
+      QUnit.test('Links render without encoding', function(){
         equal($("#container5 span a").attr('href'), '/posts?tag=John%27s+Bday', 'If encodeURI is turned off');
       });
     }
   });
   $("#container6").jQCloud(encoded_words, {
     afterCloudRender: function(){
-      test('Links render with encoding', function(){
+      QUnit.test('Links render with encoding', function(){
         equal($("#container6 span a").attr('href'), '/posts?tag=John%2527s+Bday', 'If encodeURI is turned on');
       });
     }
@@ -51,7 +51,7 @@ $(document).ready(function() {
 
   $("#container").jQCloud(some_words, {afterCloudRender: function() {
 
-    test('Basic plugin functionality', function() {
+    QUnit.test('Basic plugin functionality', function() {
       var text = $("#container").text();
       ok(text.search(/Zero/) >= 0, "'Zero' is in the cloud");
       ok(text.search(/Minus three/) >= 0, "'Minus three' is in the cloud");
@@ -74,34 +74,34 @@ $(document).ready(function() {
 
     });
 
-    test('links into word cloud', function() {
+    QUnit.test('links into word cloud', function() {
       ok($("#container span:contains('Minus three') a[href=#]").length == 1, "If 'link' option is specified and is a string, an html anchor pointing to that URL is created.");
       ok($("#container span:contains('Two') a[href=#]").length == 1, "If 'link' option is specified and is an object, an html anchor pointing to link.href is created.");
       equal($("#container span:contains('Two') a").attr("test"), "testing", "If 'link' option is specified and is an object, custom attributes should be set.");
     });
 
-    test('Event handlers for words', function() {
+    QUnit.test('Event handlers for words', function() {
       $("#container span:contains('Two')").trigger("click");
       equal($("#container span:contains('Two')").data("testHandler"), "Handler works!", "Event handlers should be triggered.");
     });
 
-    test('afterWordRender callback', function() {
+    QUnit.test('afterWordRender callback', function() {
       equal($("#container span:contains('Two')").data("testCallback"), "Callback works!", "afterWordRender callback should be called, and 'this' should be the word element.");
     });
 
-    test('Custom classes', function() {
+    QUnit.test('Custom classes', function() {
       ok($("#container span:contains('Two')").hasClass("mycustomclass"), "Custom classes should be set via html.class attribute");
     });
 
-    test('Custom attributes', function() {
+    QUnit.test('Custom attributes', function() {
       equal($("#container span:contains('Zero')").attr("test"), "just testing", "Custom attributes should be set via the html option");
     });
 
   }});
 
   $("#container2").jQCloud(some_other_words, {width: 400, height: 200, delayed_mode: true, afterCloudRender: function() {
 
-    test('Multiple word clouds rendering, also with delayed_mode: true', function() {
+    QUnit.test('Multiple word clouds rendering, also with delayed_mode: true', function() {
       var text = $("#container2").text();
       ok(text.search(/Abc/) >= 0, "'Abc' is in the second cloud");
       ok(text.search(/Def/) >= 0, "'Def' is in the second cloud");
@@ -113,7 +113,7 @@ $(document).ready(function() {
 
   $(".container3").jQCloud(some_words_with_same_weight, {afterCloudRender: function() {
 
-    test('Words with equal weight', function() {
+    QUnit.test('Words with equal weight', function() {
       ok($(".container3 span.w5").length == 3, "There should be three words with equal weight.");
     });
 
@@ -122,15 +122,23 @@ $(document).ready(function() {
   $(".container4").jQCloud(some_words, {
     delayedMode: true,
     afterCloudRender: function(){
-      test('Words render when delayedMode true and container is visible', function() {
+      QUnit.test('Words render when delayedMode true and container is visible', function() {
         ok($(".container4").is(':visible'), "Container is visible");
         ok($(".container4 span").size(), "Words render");
       });
     }
   });
 
+  $("#container7").jQCloud([], {
+    afterCloudRender: function () {
+      QUnit.test('Words read from list', function () {
+        ok($("#container7 span.w5").length == 3, "There should be three words with equal weight.");
+      });
+    }
+  });
+
   setTimeout(function(){
-    test('Words do not render when delayedMode true and container is not visible',function(){
+    QUnit.test('Words do not render when delayedMode true and container is not visible',function(){
       ok(!$(".container4").is(':visible'), "Container is not visible");
       ok($(".container4 span").size()===0, "There should be no spans in the container");
       // now set container4 to visible so that the corresponding visibility test executes

test/index.html

@@ -1,25 +1,30 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">  
     <title>QUnit Test Suite</title>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
-    <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen">
-    <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
+    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css" media="screen">
+    <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
     <script type="text/javascript" src="../jqcloud/jqcloud-1.0.4.js"></script>
     <link rel="stylesheet" href="../jqcloud/jqcloud.css" type="text/css" media="screen">
     <script type="text/javascript" src="core_tests.js"></script>
   </head>
   <body>
-    <h1 id="qunit-header">QUnit Test Suite</h1>
-    <h2 id="qunit-banner"></h2>
-    <div id="qunit-testrunner-toolbar"></div>
-    <h2 id="qunit-userAgent"></h2>
-    <ol id="qunit-tests"></ol>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>    
     <div id="container" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container2" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div class="container3" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div class="container4" style="display:none; width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container5" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
     <div id="container6" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;"></div>
+    <div id="container7" style="width: 400px; height: 300px; border: 1px solid #ccc; margin: 20px;">
+        <ul>
+        <li data-weight="1">Abc</li>
+        <li data-weight="1">Def</li>
+        <li data-weight="1">Ghi</li>
+        </ul>
+    </div>
   </body>
 </html>