├── package.json ├── LICENSE ├── .gitignore ├── tagcloud └── tagcloud.js └── README.md /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-tagcloud", 3 | "version": "1.3.0", 4 | "description": "Simple Tag-Cloud Plugin for reveal.js (https://github.com/hakimel/reveal.js)", 5 | "homepage": "https://github.com/sebhildebrandt/reveal.js-tagcloud-plugin", 6 | "author": { 7 | "name": "Sebastian Hildebrandt", 8 | "web": "http://plus-innovations.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/sebhildebrandt/reveal.js-tagcloud-plugin.git" 13 | }, 14 | "dependencies": { 15 | "reveal.js": "~4.1.0" 16 | }, 17 | "license": "MIT" 18 | } 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2016 Sebastian Hildebrandt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # -------------------- 2 | # OSX Files 3 | # -------------------- 4 | .DS_Store 5 | .AppleDouble 6 | .LSOverride 7 | Icon 8 | ._* 9 | .Spotlight-V100 10 | .Trashes 11 | 12 | # -------------------- 13 | # Eclipse or Nodeclipse "Enide Studio" Files 14 | # -------------------- 15 | # recommended to add to Git SCM 16 | # or generate with `nodeclipse -p` command 17 | .project 18 | .settings/ 19 | .*.md.html 20 | 21 | 22 | # -------------------- 23 | # IntelliJ Files 24 | # -------------------- 25 | *.iml 26 | *.ipr 27 | *.iws 28 | .idea/ 29 | 30 | # -------------------- 31 | # Netbeans Files 32 | # -------------------- 33 | nbproject/private/ 34 | build/ 35 | nbbuild/ 36 | dist/ 37 | nbdist/ 38 | nbactions.xml 39 | nb-configuration.xml 40 | 41 | # -------------------- 42 | # Node Files 43 | # -------------------- 44 | .nodemonignore 45 | npm-debug.log 46 | node_modules/ 47 | 48 | # -------------------- 49 | # SASS Files 50 | # -------------------- 51 | .sass-cache/ 52 | 53 | # -------------------- 54 | # Bower Files 55 | # -------------------- 56 | .bower-*/ 57 | bower_components 58 | 59 | # -------------------- 60 | # App Files 61 | # -------------------- 62 | data/ 63 | test/coverage/ 64 | modules/public/ 65 | modules/views/ 66 | /public/build/ 67 | /packages/custom/ 68 | /packages/contrib/ 69 | 70 | # -------------------- 71 | # vim Files 72 | # -------------------- 73 | *.swp -------------------------------------------------------------------------------- /tagcloud/tagcloud.js: -------------------------------------------------------------------------------- 1 | window.RevealTagCloud = window.RevealTagCloud || { 2 | id: 'RevealTagCloud', 3 | init: function(deck) { 4 | initTagCloud(deck); 5 | } 6 | }; 7 | 8 | // tagcloud 9 | const initTagCloud = function (Reveal){ 10 | [].forEach.call( document.querySelectorAll('tagcloud'), function(cloud) { 11 | // Find all tagcloud items with a weight defined and add them to this array 12 | var weights = [].slice.call(cloud.querySelectorAll('[tagcloud-weight]')) 13 | .map(function(el){ return el.getAttribute('tagcloud-weight') }) 14 | .sort(function(a, b){ return b-a }); // Sort descending 15 | 16 | var upperBound = weights[0]; 17 | var lowerBound = weights[ weights.length - 1 ]; 18 | var denominator = upperBound - lowerBound; 19 | var slideNotes = cloud.querySelectorAll('.notes'); 20 | var isBlackWhite = cloud.hasAttribute('bw'); 21 | var isSameSize = cloud.hasAttribute('samesize'); 22 | 23 | 24 | /** 25 | * Parses the text, removing any notes and formats each node with a span if one 26 | * doesn't exist 27 | * 28 | * @param text {String} the text of the slide 29 | * @returns {String} the formatted slide content 30 | **/ 31 | function formatTags(text) { 32 | for(index = 0; index < slideNotes.length; ++index) { 33 | text = text.replace(slideNotes[index].textContent, ''); 34 | } 35 | 36 | // remove

and

tags 37 | text = text.replace(/

/g, ''); 38 | text = text.replace(/<\/p>/g, ''); 39 | 40 | //@see http://stackoverflow.com/questions/24512636/split-words-shuffle-jumble-letters 41 | var a = text.split(/\n/), 42 | n = a.length; 43 | 44 | if (cloud.hasAttribute('shuffle')) { 45 | //shuffle order 46 | for (var i = n - 1; i > 0; i--) { 47 | var j = Math.floor(Math.random() * (i + 1)); 48 | var tmp = a[i]; 49 | a[i] = a[j]; 50 | a[j] = tmp; 51 | } 52 | } //end if shuffle 53 | 54 | return a.filter(function(item) { 55 | return item.trim() !== ''; 56 | }) 57 | .map(function(item) { 58 | return ( item.indexOf('span') === -1 ) ? '' + item.trim() + ' ' : item.trim(); 59 | }) 60 | .join(""); 61 | 62 | } 63 | 64 | /** 65 | * Calculates the size of the element. 66 | * If one or more of the tags has a weight attribute, all sizes are based on weights. 67 | * If none of the elements have weights, the sizes are random. 68 | * 69 | * @param {DOM Element} the tag to calculate the size of. 70 | * @return {Number} the percentage to set the font size to 71 | **/ 72 | function calcSize(elem) { 73 | var prctnge; 74 | 75 | // All cloud items should have the same size 76 | if (isSameSize) { 77 | prctnge = 0.5 * 150 + 50; 78 | } 79 | 80 | // At least one of our cloud items is weighted, base sizes around weights 81 | else if (weights.length > 0) { 82 | var itemWeight = elem.getAttribute('tagcloud-weight') || 0; 83 | var numerator = itemWeight - lowerBound; 84 | prctnge = (numerator / denominator) * 150 + 50; 85 | } 86 | 87 | // None of the cloud items are weighted, base the size randomly 88 | else { 89 | prctnge = Math.random() * 150 + 50; 90 | } 91 | 92 | // The cloud items should be bigger 93 | if (cloud.hasAttribute('large')) { 94 | prctnge = prctnge * 1.2; 95 | } 96 | 97 | return prctnge; 98 | } 99 | 100 | /** 101 | * Applies a color to the tag. 102 | * If one or more tags have a weight attribute, colors are more intense 103 | * based on the weight. Otherwise colors, are chosen randomly. 104 | * 105 | * @param {DOM Element} the tag to color. 106 | **/ 107 | function tagColor(elem, isBlackWhite) { 108 | var color; 109 | 110 | if (isBlackWhite) { 111 | var col = Math.round(Math.random() * 155 + 100); 112 | color = 'rgb('+ col +',' + col + ',' + col + ')'; 113 | } else { 114 | color = 'hsl('+ Math.random()*360 +', 40%, 50%)'; 115 | } 116 | 117 | return color; 118 | } 119 | 120 | // Replace the inner html of the slide with the formatted tags 121 | cloud.innerHTML = formatTags(cloud.innerHTML); 122 | 123 | // Append the slideNotes to the slide again 124 | for(index = 0; index < slideNotes.length; ++index) { 125 | cloud.appendChild(slideNotes[index]); 126 | } 127 | 128 | // Size and colour the cloud tags 129 | [].forEach.call( cloud.querySelectorAll('span'), function(elem) { 130 | elem.style.fontSize = calcSize(elem) + '%'; 131 | elem.classList.add('clouditem'); 132 | if( elem.hasAttribute('tagcloud-link') ) { 133 | newelem = document.createElement('a'); 134 | newelem.innerHTML = elem.innerHTML; 135 | newelem.style.color = tagColor(elem, isBlackWhite); 136 | newelem.setAttribute('href', '/#/' + elem.getAttribute('tagcloud-link')); 137 | elem.innerHTML = ''; 138 | elem.appendChild(newelem); 139 | } 140 | else { 141 | elem.style.color = tagColor(elem, isBlackWhite); 142 | } 143 | }); 144 | }); 145 | }; 146 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tagcloud Plugin for reveal.js 2 | 3 | Simple Tag-Cloud Plugin for [reveal.js](https://github.com/hakimel/reveal.js) (framework for easily creating beautiful presentations using HTML) - [![MIT license][license-img]][license-url] 4 | 5 | Version 1.3.0 6 | 7 | ![Tag Cloud](https://www.plus-innovations.com/images/tagcloud.jpg) 8 | 9 | ## Installation 10 | 11 | Place the `tagcloud`-directory within the reveal.js `plugin` directory - that's it. Tested with version 3.1 of [reveal.js](https://github.com/hakimel/reveal.js) 12 | 13 | ## Usage 14 | 15 | With this plugin, you easily can create tagclouds within reveal.js - eather coloured or black&white. 16 | 17 | After copying the 'tagcloud' directory into the reveal.js 'plugin' directors, you also need to add this dependency to your Reveal.initialize script (which you will normaly find at the end of your HTML file). 18 | 19 | ```html 20 | 36 | 37 | ``` 38 | 39 | After that, in the slides-section of your HTML, just create a section for your next slide. Add a `tagcloud` element to your slide. Inside the `tagcloud` each item gets a seperate line. In your presentation place e.g. the following code: 40 | 41 | ```html 42 |

43 |

Title

44 | 45 | Twitter Bootstrap 46 | jQuery 47 | less 48 | GruntJS 49 | JSHint 50 | JSLint 51 | markdown 52 | sass 53 | jade 54 | coffeescript 55 | codekit 56 | livereload 57 | web-build 58 | jQuery UI 59 | mustache 60 | emmet.io 61 | bower 62 | browserstack 63 | npm 64 | RequireJS 65 | socket.io 66 | jQuery Mobile 67 | node.js 68 | Jasmine 69 | 70 |
71 | ``` 72 | 73 | For a black&white tag cloud you can do the same, by just adding a `bw` attribute: 74 | 75 | ![Tag Cloud](https://www.plus-innovations.com/images/tagcloud-bw.jpg) 76 | 77 | 78 | ```html 79 | 80 | Twitter Bootstrap 81 | jQuery 82 | less 83 | ... 84 | ... 85 | Jasmine 86 | 87 | ``` 88 | 89 | If you want your items to appear a little larger, add the `large` attribute: 90 | 91 | ```html 92 | 93 | Twitter Bootstrap 94 | jQuery 95 | less 96 | ... 97 | ... 98 | Jasmine 99 | 100 | ``` 101 | 102 | If you want to have full controll on the size of each tag, you can do the following: 103 | 104 | ```html 105 | 106 | Twitter Bootstrap 107 | jQuery 108 | less 109 | GruntJS 110 | GulpJS 111 | Markdown 112 | Jasmins 113 | Mocha 114 | Markdown 115 | 116 | ``` 117 | 118 | If you want to have all items with the same size, add the `samesize` attribute - thanks to [btemperli](https://github.com/btemperli): 119 | 120 | ```html 121 | 122 | Twitter Bootstrap 123 | jQuery 124 | less 125 | ... 126 | ... 127 | Jasmine 128 | 129 | ``` 130 | 131 | If you want to shuffle the tag elements, just add a `shuffle` attribute to the section - thanks to [cprior](https://github.com/cprior): 132 | 133 | ```html 134 | 135 | Twitter Bootstrap 136 | jQuery 137 | less 138 | ... 139 | ... 140 | Jasmine 141 | 142 | ``` 143 | 144 | And here is, how you can add a link for a tag to a specific slide of your presentation - thanks to [cprior](https://github.com/cprior): 145 | 146 | ```html 147 | 148 | Twitter Bootstrap 149 | jQuery 150 | ... 151 | ... 152 | 153 | ``` 154 | 155 | ## CSS 156 | 157 | I personally like a little bit more space between the items of the tag-cloud, so I added 158 | 159 | 160 | ```css 161 | /********************************************* 162 | * TAGCLOUD 163 | *********************************************/ 164 | span.clouditem { 165 | padding-left: 0.15em; 166 | padding-right: 0.15em; 167 | line-height: 90%; 168 | } 169 | ``` 170 | 171 | to my template CSS 172 | 173 | ## Comments 174 | 175 | If you have ideas or comments, please do not hesitate to contact me. 176 | 177 | 178 | Happy presentations! 179 | 180 | Sincerely, 181 | Sebastian Hildebrandt 182 | http://www.plus-innovations.com 183 | 184 | 185 | #### Credits 186 | 187 | Written by Sebastian Hildebrandt for [reveal.js](https://github.com/hakimel/reveal.js) 188 | 189 | Contributors: 190 | - Matt Fairbrass [matt-d-rat](https://github.com/matt-d-rat) 191 | - Christian Prior [cprior](https://github.com/cprior) 192 | - Richard Klemm [klemmster](https://github.com/klemmster) 193 | 194 | ## License [![MIT license][license-img]][license-url] 195 | 196 | >The [`MIT`][license-url] License (MIT) 197 | > 198 | >Copyright (c) 2014-2016 +innovations. 199 | > 200 | >Permission is hereby granted, free of charge, to any person obtaining a copy 201 | >of this software and associated documentation files (the "Software"), to deal 202 | >in the Software without restriction, including without limitation the rights 203 | >to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 204 | >copies of the Software, and to permit persons to whom the Software is 205 | >furnished to do so, subject to the following conditions: 206 | > 207 | >The above copyright notice and this permission notice shall be included in 208 | >all copies or substantial portions of the Software. 209 | > 210 | >THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 211 | >IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 212 | >FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 213 | >AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 214 | >LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 215 | >OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 216 | >THE SOFTWARE. 217 | > 218 | >Further details see "LICENSE" file. 219 | 220 | [license-img]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square 221 | [license-url]: https://github.com/sebhildebrandt/reveal.js-tagcloud-plugin/blob/master/LICENSE 222 | --------------------------------------------------------------------------------