13 changed files with 659 additions and 1760 deletions
@ -1,21 +0,0 @@
@@ -1,21 +0,0 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2017 Niklas |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -1,270 +0,0 @@
@@ -1,270 +0,0 @@
|
||||
# SVG 3D Tag Cloud jQuery plugin |
||||
(jquery-svg3dtagcloud-plugin) |
||||
|
||||
## Preview |
||||
|
||||
 |
||||
|
||||
## Description |
||||
|
||||
A very small and CSS-less jQuery plugin for drawing a 3D, interactive, SVG based and fully customizable sphere tag cloud from an array of html links. |
||||
|
||||
## Examples |
||||
|
||||
### JSFiddle |
||||
|
||||
* <https://jsfiddle.net/NiklasKnaack/wr9moazp/> |
||||
|
||||
### More Examples |
||||
|
||||
* <http://nkunited.de/jquery/plugins/svg3dtagcloudV2/example1.html> |
||||
* <http://nkunited.de/jquery/plugins/svg3dtagcloudV2/example2.html> |
||||
* <http://nkunited.de/jquery/plugins/svg3dtagcloudV2/example3.html> |
||||
* <http://nkunited.de/jquery/plugins/svg3dtagcloudV2/example4.html> |
||||
|
||||
## Installation |
||||
|
||||
Coming soon. |
||||
|
||||
## Example Usage |
||||
|
||||
### HTML |
||||
|
||||
```html |
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> |
||||
<script src='js/jquery.svg3dtagcloud.min.js'></script> |
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> |
||||
``` |
||||
|
||||
### Define entries (text tags): |
||||
```js |
||||
var entries = [ |
||||
|
||||
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' }, |
||||
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' }, |
||||
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top' }, |
||||
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' }, |
||||
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' }, |
||||
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top' }, |
||||
{ label: 'three.js', url: 'http://threejs.org/', target: '_top' }, |
||||
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' }, |
||||
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' }, |
||||
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' }, |
||||
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' }, |
||||
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top' }, |
||||
{ label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' }, |
||||
{ label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top' }, |
||||
{ label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top' }, |
||||
{ label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' }, |
||||
{ label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' }, |
||||
{ label: 'GitHub', url: 'https://github.com/', target: '_top' }, |
||||
{ label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' }, |
||||
{ label: 'Starling', url: 'http://gamua.com/starling/', target: '_top' }, |
||||
{ label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' }, |
||||
{ label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' }, |
||||
{ label: 'CreateJS', url: 'http://createjs.com/', target: '_top' }, |
||||
{ label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' }, |
||||
{ label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top' }, |
||||
{ label: 'jQuery', url: 'https://jquery.com/', target: '_top' }, |
||||
{ label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top' }, |
||||
{ label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
|
||||
]; |
||||
``` |
||||
|
||||
### Define entries (text tags with tooltips): |
||||
```js |
||||
var entries = [ |
||||
|
||||
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' }, |
||||
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' }, |
||||
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' }, |
||||
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' }, |
||||
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' }, |
||||
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' }, |
||||
{ label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' }, |
||||
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' }, |
||||
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' }, |
||||
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' }, |
||||
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top', tooltip: 'Minim veniam' }, |
||||
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top', tooltip: 'Quis nostrud' }, |
||||
{ label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' }, |
||||
{ label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top', tooltip: 'Veniam isictus' }, |
||||
{ label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top', tooltip: 'Autem insto' }, |
||||
{ label: 'Gulp', url: 'http://gulpjs.com/', target: '_top', tooltip: 'Officia dolor' }, |
||||
{ label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top', tooltip: 'Digi tal' }, |
||||
{ label: 'GitHub', url: 'https://github.com/', target: '_top', tooltip: 'Amet et quam' }, |
||||
{ label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top', tooltip: 'Meno equox' }, |
||||
{ label: 'Starling', url: 'http://gamua.com/starling/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ label: 'jsPerf', url: 'http://jsperf.com/', target: '_top', tooltip: 'Soluta nobis' }, |
||||
{ label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top', tooltip: 'Blandit praesent' }, |
||||
{ label: 'CreateJS', url: 'http://createjs.com/', target: '_top', tooltip: 'Dignissim qui' }, |
||||
{ label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top', tooltip: 'Et iusto odio' }, |
||||
{ label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top', tooltip: 'Facilisis at vero' }, |
||||
{ label: 'jQuery', url: 'https://jquery.com/', target: '_top', tooltip: 'Dolore eu' }, |
||||
{ label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top', tooltip: 'In vulputate' }, |
||||
{ label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'In vulputate' } |
||||
|
||||
]; |
||||
``` |
||||
|
||||
### Define entries (image tags): |
||||
```js |
||||
var entries = [ |
||||
|
||||
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Diary.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Document.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Envelope.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Eraser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/File_Browser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Games.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Headphones.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Heart.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Home.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/ID.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/iPod.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Key.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Location.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Location_Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Megaphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Message.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Microphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Mobile.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Money.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Padlock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Pencil.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Photo.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Polaroid.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Printer.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Record.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Save.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Scissors.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Spanner.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Toolbox.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' }, |
||||
{ image: './img/Umbrella.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top' } |
||||
|
||||
]; |
||||
``` |
||||
|
||||
### Define entries (image tags with tooltips): |
||||
```js |
||||
var entries = [ |
||||
|
||||
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Lorem ipsum' }, |
||||
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolor sit amet' }, |
||||
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Consetetur sadipscing' }, |
||||
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Sed diam' }, |
||||
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'At vero' }, |
||||
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Nonumy eirmod' }, |
||||
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Stet clita' }, |
||||
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Justo duo' }, |
||||
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Ut wisi enim' }, |
||||
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Minim veniam' }, |
||||
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Quis nostrud' }, |
||||
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Exerci tation' }, |
||||
{ image: './img/Diary.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ image: './img/Document.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Vel eum iriure' }, |
||||
{ image: './img/Envelope.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolor in hendrerit' }, |
||||
{ image: './img/Eraser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'In vulputate' }, |
||||
{ image: './img/File_Browser.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Velit esse' }, |
||||
{ image: './img/Games.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Molestie consequat' }, |
||||
{ image: './img/Headphones.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Vel illum' }, |
||||
{ image: './img/Heart.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dolore eu' }, |
||||
{ image: './img/Home.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Feugiat nulla' }, |
||||
{ image: './img/ID.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Facilisis at vero' }, |
||||
{ image: './img/iPod.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Eros et accumsa' }, |
||||
{ image: './img/Key.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Et iusto odio' }, |
||||
{ image: './img/Location.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Dignissim qui' }, |
||||
{ image: './img/Location_Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Blandit praesent' }, |
||||
{ image: './img/Map.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Nam liber' }, |
||||
{ image: './img/Megaphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Soluta nobis' }, |
||||
{ image: './img/Message.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Magna aliquam' }, |
||||
{ image: './img/Microphone.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ image: './img/Mobile.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Lori novis' }, |
||||
{ image: './img/Money.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Meno eqiam' }, |
||||
{ image: './img/Padlock.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Meno equox' }, |
||||
{ image: './img/Pencil.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Iri orem' }, |
||||
{ image: './img/Photo.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Orel pas' }, |
||||
{ image: './img/Polaroid.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Psi sit' }, |
||||
{ image: './img/Printer.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Amet et quam' }, |
||||
{ image: './img/Record.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Molare cons' }, |
||||
{ image: './img/Save.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Digi tal' }, |
||||
{ image: './img/Scissors.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Felenope liber' }, |
||||
{ image: './img/Spanner.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Officia dolor' }, |
||||
{ image: './img/Toolbox.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Autem insto' }, |
||||
{ image: './img/Umbrella.png', width: '50', height: '50', url: 'http://niklasknaack.de/', target: '_top', tooltip: 'Veniam isictus' } |
||||
|
||||
]; |
||||
|
||||
``` |
||||
|
||||
### Define settings: |
||||
```js |
||||
var settings = { |
||||
|
||||
entries: entries, |
||||
width: 480, |
||||
height: 480, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#111', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Oswald, Arial, sans-serif', |
||||
fontSize: '15', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold |
||||
fontStyle: 'normal',//italic |
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
fontToUpperCase: true, |
||||
tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||||
tooltipFontSize: '11', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold |
||||
tooltipFontStyle: 'normal',//italic |
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'left', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 10 |
||||
|
||||
}; |
||||
``` |
||||
|
||||
### jQuery: |
||||
|
||||
```js |
||||
$( '#holder' ).svg3DTagCloud( settings ); |
||||
``` |
||||
|
||||
### JS: |
||||
|
||||
```js |
||||
var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); |
||||
``` |
||||
|
||||
## License |
||||
|
||||
This plugin is available under [the MIT license](http://mths.be/mit). |
||||
|
||||
## Author |
||||
|
||||
_– [Niklas](http://niklasknaack.de/)_ |
||||
@ -1,125 +0,0 @@
@@ -1,125 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
|
||||
<meta charset='utf-8'> |
||||
<title>SVG3DTagCloud - Example 1</title> |
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> |
||||
<script src='js/jquery.svg3dtagcloud.min.js'></script> |
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> |
||||
|
||||
<style type='text/css'> |
||||
|
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
font-size: 100%; |
||||
vertical-align: baseline; |
||||
background: transparent; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
<script> |
||||
|
||||
$( document ).ready( function() { |
||||
|
||||
var entries = [ |
||||
|
||||
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' }, |
||||
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' }, |
||||
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top' }, |
||||
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' }, |
||||
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' }, |
||||
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top' }, |
||||
{ label: 'three.js', url: 'http://threejs.org/', target: '_top' }, |
||||
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' }, |
||||
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' }, |
||||
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' }, |
||||
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' }, |
||||
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top' }, |
||||
{ label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' }, |
||||
{ label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top' }, |
||||
{ label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top' }, |
||||
{ label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' }, |
||||
{ label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' }, |
||||
{ label: 'GitHub', url: 'https://github.com/', target: '_top' }, |
||||
{ label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' }, |
||||
{ label: 'Starling', url: 'http://gamua.com/starling/', target: '_top' }, |
||||
{ label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' }, |
||||
{ label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' }, |
||||
{ label: 'CreateJS', url: 'http://createjs.com/', target: '_top' }, |
||||
{ label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' }, |
||||
{ label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top' }, |
||||
{ label: 'jQuery', url: 'https://jquery.com/', target: '_top' }, |
||||
{ label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top' }, |
||||
{ label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
|
||||
]; |
||||
|
||||
var settings = { |
||||
|
||||
entries: entries, |
||||
width: 480, |
||||
height: 480, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#111', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Oswald, Arial, sans-serif', |
||||
fontSize: '15', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold |
||||
fontStyle: 'normal',//italic |
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
fontToUpperCase: true, |
||||
tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||||
tooltipFontSize: '11', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold |
||||
tooltipFontStyle: 'normal',//italic |
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'left', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 10 |
||||
|
||||
}; |
||||
|
||||
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); |
||||
$( '#holder' ).svg3DTagCloud( settings ); |
||||
|
||||
} ); |
||||
|
||||
</script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id='holder'></div> |
||||
|
||||
</body> |
||||
@ -1,140 +0,0 @@
@@ -1,140 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
|
||||
<meta charset='utf-8'> |
||||
<title>SVG3DTagCloud - Example 2</title> |
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> |
||||
<script src='js/jquery.svg3dtagcloud.min.js'></script> |
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> |
||||
|
||||
<style type='text/css'> |
||||
|
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
font-size: 100%; |
||||
vertical-align: baseline; |
||||
background: transparent; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
<script> |
||||
|
||||
$( document ).ready( function() { |
||||
|
||||
var entries = [ |
||||
|
||||
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Diary.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Document.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Envelope.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Eraser.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/File_Browser.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Games.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Headphones.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Heart.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Home.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/ID.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/iPod.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Key.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Location.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Location_Map.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Map.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Megaphone.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Message.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Microphone.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Mobile.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Money.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Padlock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Pencil.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Photo.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Polaroid.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Printer.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Record.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Save.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Scissors.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Spanner.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Toolbox.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }, |
||||
{ image: './img/Umbrella.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' } |
||||
|
||||
]; |
||||
|
||||
var settings = { |
||||
|
||||
entries: entries, |
||||
width: 480, |
||||
height: 480, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#111', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Oswald, Arial, sans-serif', |
||||
fontSize: '15', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold |
||||
fontStyle: 'normal',//italic |
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
fontToUpperCase: true, |
||||
tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||||
tooltipFontSize: '11', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold |
||||
tooltipFontStyle: 'normal',//italic |
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'left', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 10 |
||||
|
||||
}; |
||||
|
||||
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); |
||||
$( '#holder' ).svg3DTagCloud( settings ); |
||||
|
||||
} ); |
||||
|
||||
</script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id='holder'></div> |
||||
|
||||
</body> |
||||
@ -1,140 +0,0 @@
@@ -1,140 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
|
||||
<meta charset='utf-8'> |
||||
<title>SVG3DTagCloud - Example 3</title> |
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> |
||||
<script src='js/jquery.svg3dtagcloud.min.js'></script> |
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> |
||||
|
||||
<style type='text/css'> |
||||
|
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
font-size: 100%; |
||||
vertical-align: baseline; |
||||
background: transparent; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
<script> |
||||
|
||||
$( document ).ready( function() { |
||||
|
||||
var entries = [ |
||||
|
||||
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lorem ipsum' }, |
||||
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor sit amet' }, |
||||
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Consetetur sadipscing' }, |
||||
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Sed diam' }, |
||||
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'At vero' }, |
||||
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nonumy eirmod' }, |
||||
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Stet clita' }, |
||||
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Justo duo' }, |
||||
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Ut wisi enim' }, |
||||
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Minim veniam' }, |
||||
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Quis nostrud' }, |
||||
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Exerci tation' }, |
||||
{ image: './img/Diary.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ image: './img/Document.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Vel eum iriure' }, |
||||
{ image: './img/Envelope.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor in hendrerit' }, |
||||
{ image: './img/Eraser.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'In vulputate' }, |
||||
{ image: './img/File_Browser.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Velit esse' }, |
||||
{ image: './img/Games.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Molestie consequat' }, |
||||
{ image: './img/Headphones.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Vel illum' }, |
||||
{ image: './img/Heart.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolore eu' }, |
||||
{ image: './img/Home.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Feugiat nulla' }, |
||||
{ image: './img/ID.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Facilisis at vero' }, |
||||
{ image: './img/iPod.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Eros et accumsa' }, |
||||
{ image: './img/Key.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Et iusto odio' }, |
||||
{ image: './img/Location.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dignissim qui' }, |
||||
{ image: './img/Location_Map.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Blandit praesent' }, |
||||
{ image: './img/Map.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nam liber' }, |
||||
{ image: './img/Megaphone.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Soluta nobis' }, |
||||
{ image: './img/Message.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Magna aliquam' }, |
||||
{ image: './img/Microphone.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ image: './img/Mobile.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lori novis' }, |
||||
{ image: './img/Money.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Meno eqiam' }, |
||||
{ image: './img/Padlock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Meno equox' }, |
||||
{ image: './img/Pencil.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Iri orem' }, |
||||
{ image: './img/Photo.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Orel pas' }, |
||||
{ image: './img/Polaroid.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Psi sit' }, |
||||
{ image: './img/Printer.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Amet et quam' }, |
||||
{ image: './img/Record.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Molare cons' }, |
||||
{ image: './img/Save.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Digi tal' }, |
||||
{ image: './img/Scissors.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Felenope liber' }, |
||||
{ image: './img/Spanner.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Officia dolor' }, |
||||
{ image: './img/Toolbox.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Autem insto' }, |
||||
{ image: './img/Umbrella.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Veniam isictus' } |
||||
|
||||
]; |
||||
|
||||
var settings = { |
||||
|
||||
entries: entries, |
||||
width: 480, |
||||
height: 480, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#111', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Oswald, Arial, sans-serif', |
||||
fontSize: '15', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold |
||||
fontStyle: 'normal',//italic |
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
fontToUpperCase: true, |
||||
tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||||
tooltipFontSize: '11', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold |
||||
tooltipFontStyle: 'normal',//italic |
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'left', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 10 |
||||
|
||||
}; |
||||
|
||||
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); |
||||
$( '#holder' ).svg3DTagCloud( settings ); |
||||
|
||||
} ); |
||||
|
||||
</script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id='holder'></div> |
||||
|
||||
</body> |
||||
@ -1,125 +0,0 @@
@@ -1,125 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
|
||||
<meta charset='utf-8'> |
||||
<title>SVG3DTagCloud - Example 4</title> |
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> |
||||
<script src='js/jquery.svg3dtagcloud.min.js'></script> |
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> |
||||
|
||||
<style type='text/css'> |
||||
|
||||
html, body, div, span, applet, object, iframe, |
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||
a, abbr, acronym, address, big, cite, code, |
||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||
small, strike, strong, sub, sup, tt, var, |
||||
b, u, i, center, |
||||
dl, dt, dd, ol, ul, li, |
||||
fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
font-size: 100%; |
||||
vertical-align: baseline; |
||||
background: transparent; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
<script> |
||||
|
||||
$( document ).ready( function() { |
||||
|
||||
var entries = [ |
||||
|
||||
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' }, |
||||
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' }, |
||||
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' }, |
||||
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' }, |
||||
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' }, |
||||
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' }, |
||||
{ label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' }, |
||||
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' }, |
||||
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' }, |
||||
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' }, |
||||
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top', tooltip: 'Minim veniam' }, |
||||
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top', tooltip: 'Quis nostrud' }, |
||||
{ label: 'HTML Encoder', url: 'http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx', target: '_top' }, |
||||
{ label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top', tooltip: 'Veniam isictus' }, |
||||
{ label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top', tooltip: 'Autem insto' }, |
||||
{ label: 'Gulp', url: 'http://gulpjs.com/', target: '_top', tooltip: 'Officia dolor' }, |
||||
{ label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top', tooltip: 'Digi tal' }, |
||||
{ label: 'GitHub', url: 'https://github.com/', target: '_top', tooltip: 'Amet et quam' }, |
||||
{ label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top', tooltip: 'Meno equox' }, |
||||
{ label: 'Starling', url: 'http://gamua.com/starling/', target: '_top', tooltip: 'Duis autem' }, |
||||
{ label: 'jsPerf', url: 'http://jsperf.com/', target: '_top', tooltip: 'Soluta nobis' }, |
||||
{ label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top', tooltip: 'Blandit praesent' }, |
||||
{ label: 'CreateJS', url: 'http://createjs.com/', target: '_top', tooltip: 'Dignissim qui' }, |
||||
{ label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top', tooltip: 'Et iusto odio' }, |
||||
{ label: 'TweenLite', url: 'https://greensock.com/docs/#/HTML5/GSAP/TweenLite/', target: '_top', tooltip: 'Facilisis at vero' }, |
||||
{ label: 'jQuery', url: 'https://jquery.com/', target: '_top', tooltip: 'Dolore eu' }, |
||||
{ label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top', tooltip: 'In vulputate' }, |
||||
{ label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'In vulputate' } |
||||
|
||||
]; |
||||
|
||||
var settings = { |
||||
|
||||
entries: entries, |
||||
width: 480, |
||||
height: 480, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#111', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Oswald, Arial, sans-serif', |
||||
fontSize: '15', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold |
||||
fontStyle: 'normal',//italic |
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
fontToUpperCase: true, |
||||
tooltipFontFamily: 'Oswald, Arial, sans-serif', |
||||
tooltipFontSize: '11', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold |
||||
tooltipFontStyle: 'normal',//italic |
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'middle', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 20 |
||||
|
||||
}; |
||||
|
||||
//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings ); |
||||
$( '#holder' ).svg3DTagCloud( settings ); |
||||
|
||||
} ); |
||||
|
||||
</script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div id='holder'></div> |
||||
|
||||
</body> |
||||
@ -1,671 +0,0 @@
@@ -1,671 +0,0 @@
|
||||
/* |
||||
Copyright (c) 2017 Niklas Knaack |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in |
||||
all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||
THE SOFTWARE. |
||||
*/ |
||||
|
||||
( function() { |
||||
|
||||
function SVG3DTagCloud( element, params ) { |
||||
|
||||
var settings = { |
||||
|
||||
entries: [], |
||||
width: 480, |
||||
height: 480, |
||||
radius: '70%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: '#000', |
||||
opacityOver: 1.00, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 6, |
||||
fov: 800, |
||||
speed: 2, |
||||
fontFamily: 'Arial, sans-serif', |
||||
fontSize: '15', |
||||
hoverFontSize:'25', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold
|
||||
fontStyle: 'normal',//italic
|
||||
fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
|
||||
fontToUpperCase: false, |
||||
tooltipFontFamily: 'Arial, sans-serif', |
||||
tooltipFontSize: '15', |
||||
tooltipFontColor: '#fff', |
||||
tooltipFontWeight: 'normal',//bold
|
||||
tooltipFontStyle: 'normal',//italic
|
||||
tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
|
||||
tooltipFontToUpperCase: false, |
||||
tooltipTextAnchor: 'left', |
||||
tooltipDiffX: 0, |
||||
tooltipDiffY: 10 |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
if ( params !== undefined ) |
||||
for ( var prop in params ) |
||||
if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) ) |
||||
settings[ prop ] = params[ prop ]; |
||||
|
||||
//---
|
||||
|
||||
if ( !settings.entries.length ) |
||||
return false; |
||||
|
||||
//---
|
||||
|
||||
var entryHolder = []; |
||||
var tooltip; |
||||
|
||||
var radius; |
||||
var diameter; |
||||
|
||||
var mouseReact = true; |
||||
var mousePos = { x: 0, y: 0 }; |
||||
|
||||
var center2D; |
||||
var center3D = { x: 0, y: 0, z: 0 }; |
||||
|
||||
var speed = { x: 0, y: 0 }; |
||||
|
||||
var position = { sx: 0, cx: 0, sy: 0, cy: 0 }; |
||||
|
||||
var MATHPI180 = Math.PI / 180; |
||||
|
||||
var svg; |
||||
var svgNS = 'http://www.w3.org/2000/svg'; |
||||
|
||||
var bg; |
||||
|
||||
//---
|
||||
|
||||
function init() { |
||||
|
||||
svg = document.createElementNS( svgNS, 'svg' ); |
||||
svg.addEventListener( 'mousemove', mouseMoveHandler ); |
||||
|
||||
element.appendChild( svg ); |
||||
|
||||
if ( settings.bgDraw ) { |
||||
|
||||
bg = document.createElementNS( svgNS, 'rect' ); |
||||
bg.setAttribute( 'x', 0 ); |
||||
bg.setAttribute( 'y', 0 ); |
||||
bg.setAttribute( 'fill', settings.bgColor ); |
||||
|
||||
svg.appendChild( bg ); |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
addEntries(); |
||||
reInit(); |
||||
animloop(); |
||||
//---
|
||||
|
||||
window.addEventListener( 'resize', resizeHandler ); |
||||
|
||||
}; |
||||
|
||||
function reInit() { |
||||
|
||||
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; |
||||
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; |
||||
|
||||
var svgWidth = windowWidth; |
||||
var svgHeight = windowHeight; |
||||
|
||||
if ( settings.width.toString().indexOf( '%' ) > 0 || settings.height.toString().indexOf( '%' ) > 0 ) { |
||||
|
||||
svgWidth = Math.round( element.offsetWidth / 100 * parseInt( settings.width ) ); |
||||
svgHeight = Math.round( svgWidth / 100 * parseInt( settings.height ) ); |
||||
|
||||
} else { |
||||
|
||||
svgWidth = parseInt( settings.width ); |
||||
svgHeight = parseInt( settings.height ); |
||||
|
||||
} |
||||
|
||||
if ( windowWidth <= svgWidth ) |
||||
svgWidth = windowWidth; |
||||
|
||||
if ( windowHeight <= svgHeight ) |
||||
svgHeight = windowHeight; |
||||
|
||||
//---
|
||||
|
||||
center2D = { x: svgWidth / 2, y: svgHeight / 2 }; |
||||
|
||||
speed.x = settings.speed / center2D.x; |
||||
speed.y = settings.speed / center2D.y; |
||||
|
||||
if ( svgWidth >= svgHeight ) |
||||
diameter = svgHeight / 100 * parseInt( settings.radius ); |
||||
else |
||||
diameter = svgWidth / 100 * parseInt( settings.radius ); |
||||
|
||||
if ( diameter < 1 ) |
||||
diameter = 1; |
||||
|
||||
radius = diameter / 2; |
||||
|
||||
if ( radius < settings.radiusMin ) { |
||||
|
||||
radius = settings.radiusMin; |
||||
diameter = radius * 2; |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
svg.setAttribute( 'width', svgWidth ); |
||||
svg.setAttribute( 'height', svgHeight ); |
||||
|
||||
if ( settings.bgDraw ) { |
||||
|
||||
bg.setAttribute( 'width', svgWidth ); |
||||
bg.setAttribute( 'height', svgHeight ); |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
setEntryPositions( radius ); |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function setEntryPositions( radius ) { |
||||
|
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
|
||||
setEntryPosition( entryHolder[ i ], radius ); |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
function setEntryPosition( entry, radius ) { |
||||
|
||||
var dx = entry.vectorPosition.x - center3D.x; |
||||
var dy = entry.vectorPosition.y - center3D.y; |
||||
var dz = entry.vectorPosition.z - center3D.z; |
||||
|
||||
var length = Math.sqrt( dx * dx + dy * dy + dz * dz ); |
||||
|
||||
entry.vectorPosition.x /= length; |
||||
entry.vectorPosition.y /= length; |
||||
entry.vectorPosition.z /= length; |
||||
|
||||
entry.vectorPosition.x *= radius; |
||||
entry.vectorPosition.y *= radius; |
||||
entry.vectorPosition.z *= radius; |
||||
|
||||
}; |
||||
|
||||
function addEntry( index, entryObj, x, y, z ) { |
||||
|
||||
var entry = {}; |
||||
|
||||
if ( typeof entryObj.label != 'undefined' ) { |
||||
|
||||
entry.element = document.createElementNS( svgNS, 'text' ); |
||||
entry.element.setAttribute( 'x', 0 ); |
||||
entry.element.setAttribute( 'y', 0 ); |
||||
entry.element.setAttribute( 'fill', settings.fontColor ); |
||||
entry.element.setAttribute( 'font-family', settings.fontFamily ); |
||||
entry.element.setAttribute( 'font-size', settings.fontSize ); |
||||
entry.element.setAttribute( 'font-weight', settings.fontWeight ); |
||||
entry.element.setAttribute( 'font-style', settings.fontStyle ); |
||||
entry.element.setAttribute( 'font-stretch', settings.fontStretch ); |
||||
entry.element.setAttribute( 'text-anchor', 'middle' ); |
||||
entry.element.textContent = settings.fontToUpperCase ? entryObj.label.toUpperCase() : entryObj.label; |
||||
|
||||
} else if ( typeof entryObj.image != 'undefined' ) { |
||||
|
||||
entry.element = document.createElementNS( svgNS, 'image' ); |
||||
entry.element.setAttribute( 'x', 0 ); |
||||
entry.element.setAttribute( 'y', 0 ); |
||||
entry.element.setAttribute( 'width', entryObj.width ); |
||||
entry.element.setAttribute( 'height', entryObj.height ); |
||||
entry.element.setAttribute( 'id', 'image_' + index ); |
||||
entry.element.setAttributeNS( 'http://www.w3.org/1999/xlink','href', entryObj.image ); |
||||
|
||||
entry.diffX = entryObj.width / 2; |
||||
entry.diffY = entryObj.height / 2; |
||||
|
||||
} |
||||
|
||||
entry.link = document.createElementNS( svgNS, 'a' ); |
||||
entry.link.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', entryObj.url ); |
||||
entry.link.setAttribute( 'target', entryObj.target ); |
||||
entry.link.setAttribute( 'data-uid', entryObj.uid ); |
||||
entry.link.setAttribute( 'data-role', entryObj.role ); |
||||
entry.link.setAttribute( 'data-index', index ); |
||||
// entry.link.addEventListener( 'mouseover', mouseOverHandler, true );
|
||||
// entry.link.addEventListener( 'mouseout', mouseOutHandler, true );
|
||||
entry.link.appendChild( entry.element ); |
||||
|
||||
if ( typeof entryObj.tooltip != 'undefined' ) { |
||||
|
||||
entry.tooltip = true; |
||||
entry.tooltipLabel = settings.tooltipFontToUpperCase ? entryObj.tooltip.toUpperCase() : entryObj.tooltip;; |
||||
|
||||
} else { |
||||
|
||||
entry.tooltip = false; |
||||
|
||||
} |
||||
|
||||
entry.index = index; |
||||
entry.uid = entryObj.uid; |
||||
entry.mouseOver = false; |
||||
|
||||
entry.vectorPosition = { x:x, y:y, z:z }; |
||||
entry.vector2D = { x:0, y:0 }; |
||||
|
||||
svg.appendChild( entry.link ); |
||||
|
||||
return entry; |
||||
|
||||
}; |
||||
|
||||
function addEntries() { |
||||
|
||||
var tooltip = false; |
||||
|
||||
for ( var i = 1, l = settings.entries.length + 1; i < l; i++ ) { |
||||
|
||||
var phi = Math.acos( -1 + ( 2 * i ) / l ); |
||||
var theta = Math.sqrt( l * Math.PI ) * phi; |
||||
|
||||
var x = Math.cos( theta ) * Math.sin( phi ); |
||||
var y = Math.sin( theta ) * Math.sin( phi ); |
||||
var z = Math.cos( phi ); |
||||
|
||||
var entry = addEntry( i - 1, settings.entries[ i - 1 ], x, y, z ); |
||||
|
||||
entryHolder.push( entry ); |
||||
|
||||
if ( typeof settings.entries[ i - 1 ].tooltip != 'undefined' ) { |
||||
|
||||
tooltip = true; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
if ( tooltip ) { |
||||
|
||||
addTooltip(); |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
function addTooltip() { |
||||
|
||||
tooltip = document.createElementNS( svgNS, 'text' ); |
||||
tooltip.setAttribute( 'x', 0 ); |
||||
tooltip.setAttribute( 'y', 0 ); |
||||
tooltip.setAttribute( 'fill', settings.tooltipFontColor ); |
||||
tooltip.setAttribute( 'font-family', settings.tooltipFontFamily ); |
||||
tooltip.setAttribute( 'font-size', settings.tooltipFontSize ); |
||||
tooltip.setAttribute( 'font-weight', settings.tooltipFontWeight ); |
||||
tooltip.setAttribute( 'font-style', settings.tooltipFontStyle ); |
||||
tooltip.setAttribute( 'font-stretch', settings.tooltipFontStretch ); |
||||
tooltip.setAttribute( 'text-anchor', settings.tooltipTextAnchor ); |
||||
tooltip.textContent = ''; |
||||
|
||||
svg.appendChild( tooltip ); |
||||
|
||||
}; |
||||
|
||||
function getEntryByElement( element ) { |
||||
|
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
|
||||
var entry = entryHolder[ i ]; |
||||
|
||||
if ( entry.element.getAttribute( 'x' ) === element.getAttribute( 'x' ) && |
||||
entry.element.getAttribute( 'y' ) === element.getAttribute( 'y' ) ) { |
||||
|
||||
return entry; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
return; |
||||
|
||||
}; |
||||
|
||||
function highlightEntry( entry ) { |
||||
// debugger
|
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
|
||||
var e = entryHolder[ i ]; |
||||
|
||||
if ( e.index === entry.index ) { |
||||
|
||||
e.mouseOver = true; |
||||
|
||||
} else { |
||||
|
||||
e.mouseOver = false; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function showTooltip( entry ) { |
||||
|
||||
if ( entry.tooltip ) { |
||||
|
||||
tooltip.setAttribute( 'x', entry.vector2D.x - settings.tooltipDiffX ); |
||||
tooltip.setAttribute( 'y', entry.vector2D.y - settings.tooltipDiffY ); |
||||
|
||||
tooltip.textContent = settings.tooltipFontToUpperCase ? entry.tooltipLabel.toUpperCase() : entry.tooltipLabel; |
||||
|
||||
tooltip.setAttribute( 'opacity', 1.0 ); |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
function hideTooltip( entry ) { |
||||
|
||||
tooltip.setAttribute( 'opacity', 0.0 ); |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function render() { |
||||
|
||||
var fx = speed.x * mousePos.x - settings.speed; |
||||
var fy = settings.speed - speed.y * mousePos.y; |
||||
|
||||
var angleX = fx * MATHPI180; |
||||
var angleY = fy * MATHPI180; |
||||
|
||||
position.sx = Math.sin( angleX ); |
||||
position.cx = Math.cos( angleX ); |
||||
position.sy = Math.sin( angleY ); |
||||
position.cy = Math.cos( angleY ); |
||||
|
||||
//---
|
||||
|
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
|
||||
var entry = entryHolder[ i ]; |
||||
|
||||
//---
|
||||
|
||||
if ( mouseReact ) { |
||||
|
||||
var rx = entry.vectorPosition.x; |
||||
var rz = entry.vectorPosition.y * position.sy + entry.vectorPosition.z * position.cy; |
||||
|
||||
entry.vectorPosition.x = rx * position.cx + rz * position.sx; |
||||
entry.vectorPosition.y = entry.vectorPosition.y * position.cy + entry.vectorPosition.z * -position.sy; |
||||
entry.vectorPosition.z = rx * -position.sx + rz * position.cx; |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
var scale = settings.fov / ( settings.fov + entry.vectorPosition.z ); |
||||
|
||||
entry.vector2D.x = entry.vectorPosition.x * scale + center2D.x; |
||||
entry.vector2D.y = entry.vectorPosition.y * scale + center2D.y; |
||||
|
||||
//---
|
||||
|
||||
if ( entry.diffX && entry.diffY ) { |
||||
|
||||
entry.vector2D.x -= entry.diffX; |
||||
entry.vector2D.y -= entry.diffY; |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
entry.element.setAttribute( 'x', entry.vector2D.x ); |
||||
entry.element.setAttribute( 'y', entry.vector2D.y ); |
||||
|
||||
//---
|
||||
|
||||
var opacity,fontSize = settings.fontSize; |
||||
if ( mouseReact ) { |
||||
|
||||
opacity = ( radius - entry.vectorPosition.z ) / diameter; |
||||
|
||||
if ( opacity < settings.opacityOut ) { |
||||
|
||||
opacity = settings.opacityOut; |
||||
|
||||
} |
||||
fontSize = settings.fontSize; |
||||
|
||||
} else { |
||||
opacity = parseFloat( entry.element.getAttribute( 'opacity' ) ); |
||||
fontSize = parseFloat( entry.element.getAttribute( 'font-size' ) ); |
||||
if ( entry.mouseOver ) { |
||||
opacity += ( settings.opacityOver - opacity ) / settings.opacitySpeed; |
||||
fontSize = settings.hoverFontSize; |
||||
} else { |
||||
opacity += ( settings.opacityOut - opacity ) / settings.opacitySpeed; |
||||
fontSize = settings.fontSize; |
||||
|
||||
} |
||||
|
||||
} |
||||
entry.element.setAttribute( 'font-size', fontSize); |
||||
entry.element.setAttribute( 'opacity', opacity ); |
||||
|
||||
} |
||||
|
||||
//---
|
||||
|
||||
entryHolder = entryHolder.sort( function( a, b ) { |
||||
|
||||
return ( b.vectorPosition.z - a.vectorPosition.z ); |
||||
|
||||
} ); |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
window.requestAnimFrame = ( function() { |
||||
|
||||
return window.requestAnimationFrame || |
||||
window.webkitRequestAnimationFrame || |
||||
window.mozRequestAnimationFrame || |
||||
function( callback ) { |
||||
window.setTimeout( callback, 1000 / 60 ); |
||||
}; |
||||
|
||||
} )(); |
||||
|
||||
function animloop() { |
||||
|
||||
requestAnimFrame( animloop ); |
||||
|
||||
render(); |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function mouseOverHandler( event ) { |
||||
|
||||
mouseReact = false; |
||||
|
||||
//---
|
||||
|
||||
var entry = getEntryByElement( event.target ); |
||||
console.log(entry) |
||||
|
||||
highlightEntry( entry ); |
||||
|
||||
if ( entry.tooltip ) { |
||||
|
||||
showTooltip( entry ); |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
function mouseOutHandler( event ) { |
||||
|
||||
mouseReact = true; |
||||
|
||||
//---
|
||||
|
||||
var entry = getEntryByElement( event.target ); |
||||
|
||||
if ( entry.tooltip ) { |
||||
|
||||
hideTooltip( entry ); |
||||
|
||||
} |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function mouseMoveHandler( event ) { |
||||
|
||||
mousePos = getMousePos( svg, event ); |
||||
|
||||
}; |
||||
|
||||
function getMousePos( svg, event ) { |
||||
|
||||
var rect = svg.getBoundingClientRect(); |
||||
|
||||
return { |
||||
|
||||
x: event.clientX - rect.left, |
||||
y: event.clientY - rect.top |
||||
|
||||
}; |
||||
|
||||
}; |
||||
|
||||
//---
|
||||
|
||||
function resizeHandler( event ) { |
||||
reInit(); |
||||
}; |
||||
|
||||
//---
|
||||
|
||||
init(); |
||||
|
||||
function choseToOverState( entry ) { |
||||
// debugger
|
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
|
||||
var e = entryHolder[ i ]; |
||||
|
||||
if ( e.index === entry.index ) { |
||||
e.mouseOver = true; |
||||
} |
||||
} |
||||
}; |
||||
function resetToNotOver() { |
||||
for ( var i = 0, l = entryHolder.length; i < l; i++ ) { |
||||
var e = entryHolder[ i ]; |
||||
e.mouseOver = false; |
||||
} |
||||
mouseReact = true; |
||||
} |
||||
|
||||
this.speed = function (sp) { |
||||
console.log(settings); |
||||
settings.speed=sp; |
||||
} |
||||
this.chose = function (target) { |
||||
// var entry = getEntryByElement(target);
|
||||
mouseReact = false; |
||||
target.forEach(function(val){ |
||||
choseToOverState(val); |
||||
}) |
||||
} |
||||
this.reset = function () { |
||||
resetToNotOver(); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
window.SVG3DTagCloud = SVG3DTagCloud; |
||||
|
||||
} () ); |
||||
|
||||
if ( typeof jQuery !== 'undefined' ) { |
||||
|
||||
( function( $ ) { |
||||
|
||||
$.fn.svg3DTagCloud = function( params ) { |
||||
|
||||
var args = arguments; |
||||
|
||||
return this.each( function() { |
||||
|
||||
if ( !$.data( this, 'plugin_SVG3DTagCloud' ) ) { |
||||
|
||||
$.data( this, 'plugin_SVG3DTagCloud', new SVG3DTagCloud( this, params ) ); |
||||
|
||||
} else { |
||||
|
||||
var plugin = $.data( this, 'plugin_SVG3DTagCloud' ); |
||||
|
||||
if ( plugin[ params ] ) { |
||||
|
||||
plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) ); |
||||
|
||||
} else { |
||||
|
||||
$.error( 'Method ' + params + ' does not exist on jQuery.svg3DTagCloud' ); |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} ); |
||||
|
||||
}; |
||||
|
||||
} ( jQuery ) ); |
||||
|
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,479 @@
@@ -0,0 +1,479 @@
|
||||
|
||||
var _createClass = (function() { |
||||
function defineProperties(target, props) { |
||||
for (var i = 0; i < props.length; i++) { |
||||
var descriptor = props[i]; |
||||
descriptor.enumerable = descriptor.enumerable || false; |
||||
descriptor.configurable = true; |
||||
if ("value" in descriptor) descriptor.writable = true; |
||||
Object.defineProperty(target, descriptor.key, descriptor); |
||||
} |
||||
} |
||||
return function(Constructor, protoProps, staticProps) { |
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps); |
||||
if (staticProps) defineProperties(Constructor, staticProps); |
||||
return Constructor; |
||||
}; |
||||
})(); |
||||
|
||||
function _classCallCheck(instance, Constructor) { |
||||
if (!(instance instanceof Constructor)) { |
||||
throw new TypeError("Cannot call a class as a function"); |
||||
} |
||||
} |
||||
|
||||
$(document).ready(function() { |
||||
new Index(); |
||||
}); |
||||
|
||||
var BS = (function() { |
||||
function BS() { |
||||
_classCallCheck(this, BS); |
||||
} |
||||
|
||||
_createClass(BS, null, [ |
||||
{ |
||||
key: "fetch", |
||||
value: function fetch(url, data, type) { |
||||
return new Promise(function(resolve) { |
||||
$.ajax({ |
||||
type: type ? type : "GET", |
||||
data: data ? data : {}, |
||||
url: url, |
||||
success: function success(resp) { |
||||
resolve(resp); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "run", |
||||
value: function run() { |
||||
return this.fetch("/run"); |
||||
} |
||||
}, |
||||
{ |
||||
key: "stopAndResult", |
||||
value: function stopAndResult(award_id) { |
||||
return this.fetch("/draw_lottery", { award_id: award_id }); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getLucklessUsers", |
||||
value: function getLucklessUsers() { |
||||
return this.fetch("/luckless_users"); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getLuckyUsers", |
||||
value: function getLuckyUsers() { |
||||
return this.fetch("/lucky_users"); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getAwards", |
||||
value: function getAwards() { |
||||
return this.fetch("/awards"); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getAward", |
||||
value: function getAward(award_id) { |
||||
return this.fetch("/award", { |
||||
award_id: award_id |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getUsers", |
||||
value: function getUsers() { |
||||
return this.fetch("/users"); |
||||
} |
||||
} |
||||
]); |
||||
|
||||
return BS; |
||||
})(); |
||||
|
||||
var Tag = (function() { |
||||
function Tag(entries) { |
||||
_classCallCheck(this, Tag); |
||||
|
||||
this.id = "myCanvas"; |
||||
this.entries = entries; |
||||
this.createCanvas(); |
||||
} |
||||
|
||||
_createClass( |
||||
Tag, |
||||
[ |
||||
{ |
||||
key: "createHTML", |
||||
value: function createHTML() { |
||||
var html = ["<ul>"]; |
||||
$(this.entries).each(function(i, val) { |
||||
var color = val.award_id ? "yellow" : "white"; |
||||
html.push( |
||||
'<li><a href="javascript:void(0)" style="color: ' + |
||||
color + |
||||
';" data-uid="' + |
||||
val.uid + |
||||
'" data-role="' + |
||||
val.role + |
||||
'">' + |
||||
val.name + |
||||
"</a></li>" |
||||
); |
||||
// html.push(`<li><a href="#" style="color:${color};">' + item.name + '</a></li>`);
|
||||
}); |
||||
html.push("</ul>"); |
||||
return html.join(""); |
||||
} |
||||
}, |
||||
{ |
||||
key: "createCanvas", |
||||
value: function createCanvas() { |
||||
var canvas = document.createElement("canvas"); |
||||
canvas.id = this.id; |
||||
canvas.width = 1024; |
||||
canvas.height = 600; |
||||
document.getElementById("holder").appendChild(canvas); |
||||
this.canvas = canvas; |
||||
canvas.innerHTML = this.createHTML(); |
||||
TagCanvas.Start("myCanvas", "", { |
||||
textColour: null, |
||||
initial: Tag.speed(), |
||||
dragControl: 1, |
||||
textHeight: 14 |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "markYellow", |
||||
value: function markYellow(users) { |
||||
var color = "yellow"; |
||||
var _iteratorNormalCompletion = true; |
||||
var _didIteratorError = false; |
||||
var _iteratorError = undefined; |
||||
|
||||
try { |
||||
for ( |
||||
var _iterator = users[Symbol.iterator](), _step; |
||||
!(_iteratorNormalCompletion = (_step = _iterator.next()).done); |
||||
_iteratorNormalCompletion = true |
||||
) { |
||||
var user = _step.value; |
||||
|
||||
$(this.canvas) |
||||
.find("[data-uid=" + user.uid + "]") |
||||
.css("color", color); |
||||
} |
||||
} catch (err) { |
||||
_didIteratorError = true; |
||||
_iteratorError = err; |
||||
} finally { |
||||
try { |
||||
if (!_iteratorNormalCompletion && _iterator.return) { |
||||
_iterator.return(); |
||||
} |
||||
} finally { |
||||
if (_didIteratorError) { |
||||
throw _iteratorError; |
||||
} |
||||
} |
||||
} |
||||
|
||||
TagCanvas.Reload(this.id); |
||||
} |
||||
}, |
||||
{ |
||||
key: "fast", |
||||
value: function fast() { |
||||
TagCanvas.SetSpeed(this.id, [5, 1]); |
||||
} |
||||
}, |
||||
{ |
||||
key: "stop", |
||||
value: function stop() { |
||||
TagCanvas.SetSpeed(this.id, Tag.speed()); |
||||
TagCanvas.Reload(this.id); |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
key: "speed", |
||||
value: function speed() { |
||||
return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)]; |
||||
} |
||||
} |
||||
] |
||||
); |
||||
|
||||
return Tag; |
||||
})(); |
||||
|
||||
var Index = (function() { |
||||
function Index() { |
||||
var _this = this; |
||||
|
||||
_classCallCheck(this, Index); |
||||
|
||||
this.running = false; |
||||
this.currentAward = ""; |
||||
this.entries = []; |
||||
this.buildCloud().then(function() { |
||||
_this.canvas3DTagCloud = new Tag(_this.entries); |
||||
}); |
||||
this.bindEvent(); |
||||
this.initVisualSocket(); |
||||
} |
||||
|
||||
_createClass(Index, [ |
||||
{ |
||||
key: "buildCloud", |
||||
value: function buildCloud() { |
||||
var _this2 = this; |
||||
|
||||
return BS.getUsers().then(function(resp) { |
||||
console.log(resp); |
||||
_this2.entries = resp.data; |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "initVisualSocket", |
||||
value: function initVisualSocket() { |
||||
var _this3 = this; |
||||
|
||||
var tempAwardId = ""; |
||||
setInterval(function() { |
||||
tempAwardId = localStorage.getItem("current_award"); |
||||
if (_this3.currentAward !== tempAwardId) { |
||||
/*change*/ |
||||
// window.location.reload(1);
|
||||
_this3.currentAward = tempAwardId; |
||||
_this3.refreshCurrentAward(); |
||||
} |
||||
}, 1000); |
||||
} |
||||
}, |
||||
{ |
||||
key: "refreshCurrentAward", |
||||
value: function refreshCurrentAward() { |
||||
if (this.currentAward === "") return; |
||||
BS.getAward(this.currentAward).then(function(resp) { |
||||
console.log(resp); |
||||
if (resp.status === 200) { |
||||
var awardInfo = resp.data; |
||||
$("#currentAwardName").html(awardInfo.award_name); |
||||
$("#currentTimes").html(awardInfo.award_capacity); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "bindEvent", |
||||
value: function bindEvent() { |
||||
var _this4 = this; |
||||
|
||||
$("#start").click(function() { |
||||
if (_this4.running) { |
||||
alert("正在抽奖"); |
||||
return; |
||||
} |
||||
_this4.canvas3DTagCloud.fast(); |
||||
BS.run().then(function(resp) { |
||||
console.log(resp); |
||||
_this4.running = true; |
||||
}); |
||||
}); |
||||
$("#end").click(function() { |
||||
if (!_this4.running) { |
||||
return; |
||||
} |
||||
console.log("click"); |
||||
BS.stopAndResult(_this4.currentAward).then(function(resp) { |
||||
console.log(resp); |
||||
if (resp.status === 200) { |
||||
_this4.stopLottery(resp.data); |
||||
_this4.running = false; |
||||
} else { |
||||
_this4.running = false; |
||||
_this4.canvas3DTagCloud.stop(); |
||||
layer.alert(resp.msg); |
||||
} |
||||
}); |
||||
}); |
||||
$(document).on("click", function() { |
||||
$("#result").hide(); |
||||
$(".holder").removeClass("mask"); |
||||
}); |
||||
$("#luckyUsers").click(function() { |
||||
_this4.list(); |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "stopLottery", |
||||
value: function stopLottery(data) { |
||||
this.canvas3DTagCloud.stop(); |
||||
this.currentlist(data); |
||||
this.canvas3DTagCloud.markYellow(data); |
||||
} |
||||
|
||||
/** |
||||
* 当前轮结果 |
||||
* @param data |
||||
*/ |
||||
}, |
||||
{ |
||||
key: "currentlist", |
||||
value: function currentlist(data) { |
||||
// let offset = $(".holder").offset();
|
||||
var DOM = ""; |
||||
var _iteratorNormalCompletion2 = true; |
||||
var _didIteratorError2 = false; |
||||
var _iteratorError2 = undefined; |
||||
|
||||
try { |
||||
for ( |
||||
var _iterator2 = data[Symbol.iterator](), _step2; |
||||
!(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); |
||||
_iteratorNormalCompletion2 = true |
||||
) { |
||||
var user = _step2.value; |
||||
|
||||
DOM += |
||||
'<span class="' + |
||||
(user.role === 2 || user.role === 3 ? "sp animated flash" : "") + |
||||
'"><i>' + |
||||
user.name + |
||||
"<br>" + |
||||
user.uid + |
||||
"</i></span>"; |
||||
} |
||||
} catch (err) { |
||||
_didIteratorError2 = true; |
||||
_iteratorError2 = err; |
||||
} finally { |
||||
try { |
||||
if (!_iteratorNormalCompletion2 && _iterator2.return) { |
||||
_iterator2.return(); |
||||
} |
||||
} finally { |
||||
if (_didIteratorError2) { |
||||
throw _iteratorError2; |
||||
} |
||||
} |
||||
} |
||||
|
||||
DOM += ""; |
||||
$("#result") |
||||
.show() |
||||
.html(DOM); |
||||
setTimeout(function() { |
||||
$(".holder").addClass("mask"); |
||||
}, 10); |
||||
} |
||||
|
||||
/** |
||||
* 所有结果 |
||||
*/ |
||||
}, |
||||
{ |
||||
key: "list", |
||||
value: function list() { |
||||
var offset = $(".holder").offset(); |
||||
var awards = {}; |
||||
var load = layer.load(2); |
||||
BS.getAwards() |
||||
.then(function(resp) { |
||||
resp.data.map(function(val) { |
||||
console.log(val); |
||||
if (typeof awards[val.award_id] === "undefined") { |
||||
awards[val.award_id] = {}; |
||||
} |
||||
awards[val.award_id].name = val.award_name; |
||||
awards[val.award_id].data = []; |
||||
}); |
||||
}) |
||||
.then(function() { |
||||
return BS.getLuckyUsers().then(function(resp) { |
||||
resp.data.map(function(val) { |
||||
awards[val.award_id].data.push(val); |
||||
}); |
||||
}); |
||||
}) |
||||
.then(function() { |
||||
layer.close(load); |
||||
console.log(awards); |
||||
var content = ""; |
||||
var _iteratorNormalCompletion3 = true; |
||||
var _didIteratorError3 = false; |
||||
var _iteratorError3 = undefined; |
||||
|
||||
try { |
||||
for ( |
||||
var _iterator3 = Object.keys(awards)[Symbol.iterator](), _step3; |
||||
!(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()) |
||||
.done); |
||||
_iteratorNormalCompletion3 = true |
||||
) { |
||||
var key = _step3.value; |
||||
|
||||
var award = awards[key]; |
||||
var lisArray = award.data.map(function(data) { |
||||
return ( |
||||
'<li class="' + |
||||
(data.role == 2 || data.role == 3 ? "sp" : "") + |
||||
'">' + |
||||
data.name + |
||||
"<span>\u3010" + |
||||
data.uid + |
||||
"\u3011</span></li>" |
||||
); |
||||
}); |
||||
if (lisArray.length !== 0) { |
||||
content += |
||||
"\n <section>\n <h5>" + |
||||
award.name + |
||||
"</h5>\n <ul>\n " + |
||||
lisArray.join("") + |
||||
"\n </ul>\n </section>\n "; |
||||
} |
||||
} |
||||
} catch (err) { |
||||
_didIteratorError3 = true; |
||||
_iteratorError3 = err; |
||||
} finally { |
||||
try { |
||||
if (!_iteratorNormalCompletion3 && _iterator3.return) { |
||||
_iterator3.return(); |
||||
} |
||||
} finally { |
||||
if (_didIteratorError3) { |
||||
throw _iteratorError3; |
||||
} |
||||
} |
||||
} |
||||
|
||||
layer.open({ |
||||
type: 1, |
||||
area: ["1024px", "600px"], |
||||
skin: "layui-layer-lan", //样式类名
|
||||
offset: [offset.top, offset.left], |
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 3, |
||||
title: "所有中奖名单", |
||||
shadeClose: false, //开启遮罩关闭
|
||||
content: '\n<div class="luckerList">' + content + "\n</div>" |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
]); |
||||
|
||||
return Index; |
||||
})(); |
||||
@ -0,0 +1,178 @@
@@ -0,0 +1,178 @@
|
||||
"use strict"; |
||||
|
||||
var _createClass = (function() { |
||||
function defineProperties(target, props) { |
||||
for (var i = 0; i < props.length; i++) { |
||||
var descriptor = props[i]; |
||||
descriptor.enumerable = descriptor.enumerable || false; |
||||
descriptor.configurable = true; |
||||
if ("value" in descriptor) descriptor.writable = true; |
||||
Object.defineProperty(target, descriptor.key, descriptor); |
||||
} |
||||
} |
||||
return function(Constructor, protoProps, staticProps) { |
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps); |
||||
if (staticProps) defineProperties(Constructor, staticProps); |
||||
return Constructor; |
||||
}; |
||||
})(); |
||||
|
||||
function _classCallCheck(instance, Constructor) { |
||||
if (!(instance instanceof Constructor)) { |
||||
throw new TypeError("Cannot call a class as a function"); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Created by zuowenqi on 2018/2/2 0002 |
||||
*/ |
||||
var BS = (function() { |
||||
function BS() { |
||||
_classCallCheck(this, BS); |
||||
} |
||||
|
||||
_createClass(BS, null, [ |
||||
{ |
||||
key: "fetch", |
||||
value: function fetch(url, data, type) { |
||||
return new Promise(function(resolve) { |
||||
$.ajax({ |
||||
type: type ? type : "GET", |
||||
data: data ? data : {}, |
||||
url: url, |
||||
success: function success(resp) { |
||||
resolve(resp); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "addAwards", |
||||
value: function addAwards(award_name, award_capacity) { |
||||
award_capacity *= 1; |
||||
return this.fetch("/add_award", { |
||||
award_name: award_name, |
||||
award_capacity: award_capacity |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "removeAwards", |
||||
value: function removeAwards(award_id) { |
||||
return this.fetch("/remove_award", { |
||||
award_id: award_id |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getAwards", |
||||
value: function getAwards() { |
||||
return this.fetch("/awards"); |
||||
} |
||||
}, |
||||
{ |
||||
key: "setCurrent", |
||||
value: function setCurrent(id) { |
||||
return new Promise(function(resolve) { |
||||
var prev = localStorage.getItem("current_award") || ""; |
||||
localStorage.setItem("prev_award", prev); |
||||
localStorage.setItem("current_award", id); |
||||
resolve(localStorage.getItem("current_award")); |
||||
}); |
||||
} |
||||
}, |
||||
{ |
||||
key: "getCurrent", |
||||
value: function getCurrent() { |
||||
return localStorage.getItem("current_award"); |
||||
} |
||||
} |
||||
]); |
||||
|
||||
return BS; |
||||
})(); |
||||
|
||||
$(function() { |
||||
$("#add").click(function(e) { |
||||
layer.open({ |
||||
title: "增加", |
||||
content: |
||||
'\n<div>\u5956\u54C1\u540D<input type="text" id="addname"></div>\n<div>\u6570 \u91CF<input type="text" id="addnum"></div>\n', |
||||
yes: function yes(index) { |
||||
var name = $("#addname").val(); |
||||
var num = $("#addnum").val(); |
||||
BS.addAwards(name, num).then(function(resp) { |
||||
console.log(resp); |
||||
flushAwards(); |
||||
if (resp.status === 200) { |
||||
layer.close(index); |
||||
} else { |
||||
alert(resp.msg); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
$("#reset").click(function(e) { |
||||
layer.confirm("确定要重置吗", function(index) { |
||||
BS.fetch("/reset").then(function(resp) { |
||||
if (resp.status === 200) { |
||||
layer.close(index); |
||||
window.location.reload(1); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
$(document) |
||||
.on("click", ".js-set", function(e) { |
||||
var aid = $(e.target).data("aid"); |
||||
var $lis = $("#awardList").find("li"); |
||||
BS.setCurrent(aid).then(function() { |
||||
$lis.removeClass("cur"); |
||||
$(e.target) |
||||
.closest("li") |
||||
.addClass("cur"); |
||||
}); |
||||
}) |
||||
.on("click", ".js-remove", function(e) { |
||||
layer.confirm("确认要删除该项?", function() { |
||||
var aid = $(e.target).data("aid"); |
||||
var loadIndex = layer.load(2); |
||||
BS.removeAwards(aid).then(function(resp) { |
||||
if (resp.status === 200) { |
||||
flushAwards(); |
||||
layer.close(loadIndex); |
||||
} else { |
||||
layer.close(loadIndex); |
||||
layer.alert(resp.msg); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
flushAwards(); |
||||
}); |
||||
|
||||
function flushAwards() { |
||||
var currentAward = BS.getCurrent(); |
||||
BS.getAwards().then(function(resp) { |
||||
console.log(resp); |
||||
var ul = ""; |
||||
resp.data.forEach(function(val) { |
||||
var list = |
||||
' \n <li class="' + |
||||
(currentAward === val.award_id ? "cur" : "") + |
||||
'">\n <div class="fr">\n <a type="radio" class="button button-primary button-rounded button-small js-set" data-aid="' + |
||||
val.award_id + |
||||
'">\u8BBE\u7F6E\u6210\u5F53\u524D\u8F6E</a>\n <a type="radio" class="button button-caution button-circle js-remove" data-aid="' + |
||||
val.award_id + |
||||
'"><i class="fa fa-trash"></i></a>\n </div>\n <div class="content">\n \u5956\u9879\u540D\u79F0\uFF1A' + |
||||
val.award_name + |
||||
"\uFF0C\u6570\u91CF\uFF1A" + |
||||
val.award_capacity + |
||||
"\n </div>\n </li>"; |
||||
ul += list; |
||||
}); |
||||
$("#awardList").html(ul); |
||||
}); |
||||
} |
||||
@ -1,242 +0,0 @@
@@ -1,242 +0,0 @@
|
||||
var ALL_USERS = []; |
||||
var ALL_AWARDS = []; |
||||
var g_Interval = 50; |
||||
var g_Timer; // 抽奖程序定时器
|
||||
var g_winner = null; |
||||
var g_award = null; |
||||
var running = false; |
||||
|
||||
//跑马灯音效
|
||||
var runingmic = document.getElementById("runingmic"); |
||||
runingmic.volume = 0.5; |
||||
|
||||
//中奖音效
|
||||
var pausemic = document.getElementById("pausemic"); |
||||
pausemic.volume = 1.0; |
||||
|
||||
UpdateUserList(); // 更新抽奖名单
|
||||
UpdateAwardList(); // 更新奖品列表
|
||||
UpdateWinnerList(); // 更新中奖名单
|
||||
|
||||
|
||||
function beginRndNum(trigger) { |
||||
if (running) { |
||||
running = false; |
||||
runingmic.pause(); // 停止抽奖音乐
|
||||
pausemic.play(); // 播放庆祝音乐
|
||||
clearTimeout(g_Timer); // 停止抽奖滚动条
|
||||
$(trigger).val("开始"); |
||||
$('#ResultNum').css('color', 'red'); |
||||
|
||||
WinAward(g_winner.name, g_award.tag); // 提交中奖名单
|
||||
UpdateUserList(); // 更新抽奖名单
|
||||
UpdateAwardList(); // 更新奖品列表
|
||||
UpdateWinnerList(); // 更新中奖名单
|
||||
UpdateCurrentAward(g_award.tag); // 更新当前奖品
|
||||
|
||||
} |
||||
else { |
||||
if (g_award == null) { |
||||
layer.alert('老板,奖品都没选,这是要干啥了?', {icon: 5}); |
||||
return GameOver(); |
||||
} |
||||
else if (ALL_USERS.length == 0) { |
||||
layer.alert("所有人都中奖了,老板还要继续抽奖吗?", {icon: 5}); |
||||
return GameOver(); |
||||
} |
||||
else if (g_award.count <= 0) { |
||||
layer.alert("老板,奖品都没了,还要继续吗?", {icon: 5}); |
||||
return GameOver(); |
||||
} |
||||
pausemic.pause(); // 停止庆祝音乐
|
||||
runingmic.play(); // 开始抽奖音乐
|
||||
running = true; |
||||
$('#ResultNum').css('color', 'black'); |
||||
$(trigger).val("停止"); |
||||
beginTimer(); |
||||
} |
||||
} |
||||
|
||||
// 关键地方
|
||||
function UpdateName() { |
||||
var g_PersonCount = ALL_USERS.length; //参加抽奖人数
|
||||
var num = Math.floor(Math.random() * g_PersonCount); |
||||
g_winner = ALL_USERS[num]; |
||||
$('#ResultNum').html(g_winner.name); |
||||
} |
||||
|
||||
function beginTimer() { |
||||
g_Timer = setTimeout(beat, g_Interval); |
||||
} |
||||
|
||||
function beat() { |
||||
g_Timer = setTimeout(beat, g_Interval); |
||||
UpdateName(); |
||||
} |
||||
|
||||
// 关闭异步
|
||||
function UpdateUserList() { |
||||
$.ajax({ |
||||
url: "/users", |
||||
type: "GET", |
||||
async: false, |
||||
success: function (result) { |
||||
ALL_USERS = result.data; |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
} |
||||
}) |
||||
} |
||||
// 关闭异步
|
||||
function UpdateWinnerList() { |
||||
$.ajax({ |
||||
url: "/winner", |
||||
type: "GET", |
||||
async: false, |
||||
success: function (result) { |
||||
var winners = result.data; |
||||
var winner_list = $("#winner-list"); |
||||
winner_list.find('a').remove(); |
||||
for (var i = 0; i < winners.length; i++) { |
||||
var w = winners[i]; |
||||
var content = '<a name='+ w.name +' class="list-group-item">' + w.name + '<span class="badge">' + w.awards + '</span></a>'; |
||||
winner_list.append(content); |
||||
} |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
function UpdateAwardList() { |
||||
$.ajax({ |
||||
url: "/awards", |
||||
type: "GET", |
||||
async: false, |
||||
success: function (result) { |
||||
var awards_list = $("#awards-list"); |
||||
awards_list.find('a').remove(); |
||||
ALL_AWARDS = result.data; |
||||
for (var i = 0; i < ALL_AWARDS.length; i++) { |
||||
var w = ALL_AWARDS[i]; |
||||
var content = '<a name=' + w.tag + ' class="list-group-item">' + w.tag + '<span class="badge">' + w.count + '</span></a>'; |
||||
awards_list.append(content); |
||||
} |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
} |
||||
}) |
||||
} |
||||
|
||||
$("#awards-list").on("click", 'a', function () { |
||||
var name = $(this).attr("name"); |
||||
UpdateCurrentAward(name); |
||||
}); |
||||
|
||||
$("#winner-list").on("click", 'a', function () { |
||||
var name = $(this).attr("name"); |
||||
layer.confirm('撤销奖品???', { |
||||
icon: 0, |
||||
btn: ['确定', '取消'] //按钮
|
||||
}, function () { |
||||
layer.msg('悲催!!!!', {icon: 0}); |
||||
Revoke(name); //撤销奖项
|
||||
}, function () { |
||||
layer.msg('吓死宝宝了!!!!', {icon: 1}) |
||||
}); |
||||
}); |
||||
|
||||
|
||||
$(document).bind("keydown", function (ev) { |
||||
if (ev.keyCode == 13) { // 按回车
|
||||
$('#btn').click(); |
||||
} |
||||
else if (ev.keyCode == 49) { // 按1
|
||||
$('#myModal').modal('toggle'); |
||||
} |
||||
|
||||
else if (ev.keyCode == 48) { // 按0
|
||||
layer.confirm('确定要重置数据???',{ |
||||
icon: 1, |
||||
btn: ['确定', '取消'] //按钮
|
||||
}, function () { |
||||
Reset(); //数据重置
|
||||
}, function () { |
||||
}); |
||||
|
||||
} |
||||
}); |
||||
|
||||
|
||||
function UpdateCurrentAward(tag) { |
||||
var result = null; |
||||
for (var i = 0; i < ALL_AWARDS.length; i++) { |
||||
var w = ALL_AWARDS[i]; |
||||
if (w.tag == tag) { |
||||
result = w; |
||||
break |
||||
} |
||||
} |
||||
g_award = result; |
||||
|
||||
$("#award-tag").text(g_award.tag); |
||||
$("#award-count").text(g_award.count); |
||||
} |
||||
|
||||
|
||||
function WinAward(name, awards) { |
||||
$.ajax({ |
||||
url: "/win", |
||||
type: "POST", |
||||
data: {"name": name, "awards": awards}, |
||||
success: function (result) { |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// 恢复出厂数据
|
||||
function Revoke(name) { |
||||
$.ajax({ |
||||
url: "/revoke", |
||||
type: "POST", |
||||
data: {"name": name}, |
||||
success: function (result) { |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
window.location.reload();//刷新当前页面.
|
||||
} |
||||
}) |
||||
} |
||||
|
||||
// 恢复出厂数据
|
||||
function Reset() { |
||||
$.ajax({ |
||||
url: "/reset", |
||||
type: "GET", |
||||
success: function (result) { |
||||
}, |
||||
error: function (XMLHttpRequest, textStatus, errorThrown) { |
||||
}, |
||||
complete: function (XMLHttpRequest, textStatus) { |
||||
window.location.reload();//刷新当前页面.
|
||||
} |
||||
}) |
||||
} |
||||
|
||||
function GameOver() { |
||||
$('#ResultNum').css('color', 'black'); |
||||
$('#ResultNum').html("*****"); |
||||
} |
||||
Loading…
Reference in new issue