PHP Classes

File: js/drasticCloud.js

Recommend this page to a friend!
  Classes of dd   DrasticTools   js/drasticCloud.js   Download  
File: js/drasticCloud.js
Role: Application script
Content type: text/plain
Description: javascript functions
Class: DrasticTools
Visualize MySQL data in Grid, Cloud and Map
Author: By
Last change: Minor changes in DrasticGrid and DrasticMap
Robust against PHP strict error mode
Date: 12 years ago
Size: 16,300 bytes
 

Contents

Class file image Download
/* DrasticTools version 0.6.18 * DrasticTools is released under the GPL license: * Copyright (C) 2007 email: info@drasticdata.nl * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License along * with this program; if not, write to the Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. * * ========================================================================================= * If you find this sofware useful, we appreciate your donation on http://www.drasticdata.nl * Suggestions for improvement can be sent to: info@drasticdata.nl * ========================================================================================= */ var dscloud = { "MSGREFRESHFAILED": "Failed to refresh cloud" }; /* * drasticCloud */ var drasticCloud = new Class ({ options: { path: location.pathname, // path of the php file to call pathimg: "img/", // path to images nroffonts: 24, // The number of different font sizes used in the cloud addparams: "", // optional parameter string to pass to PHP GET requests, use "&var1=value1&var2=value2" namecol: null, // name to show in the cloud sizecol: null, // column to use to resize the items in the cloud log: true, // use a logarithmic distribution (true) or linear (false) (default: true) colorcol: null, // column which should be used to color items sortcol: null, // name of column to sort on initially. Overrules the default of the data source sort: null, // sort ascending (a) or descending (d)? Overrules the default of the data source showmenu: true, // Show the menu? (default: true) showmenufull: false, // Show the menu opened (default: false) shownamecol: true, // Show the name selector? (default: true) shownamecolumns: null, // Array of columns that can actually be chosen by user showlog: true, // Show the log/linear selector? (default: true) showsizecol: true, // Show the column selector? (default: true) showsizecolumns: null, // Array of columns that can actually be chosen by user showcolorcol: true, // Show the color column selector? (default: true) showcolorcolumns: null, // Array of columns that can actually be chosen by user showsortcol: true, // Show the sortcolumn selector? (default: true) showsortcolumns: null, // Array of columns that can actually be chosen by user showsort: true, // Show the ascending / descendig sort selector? (default: true) onClick: function(id){this.DefaultOnClick(id);}, onMouseOver: function(id){this.DefaultOnMouseOver(id);} }, initialize: function(container, options){ var t = this; t.container = $(container) || alert('container '+container+' not found...'); t.fontsize = parseInt(t.container.getStyle('font-size').slice(0,-2)); t.setOptions(options); t.getMetaData(); // gifs: t.ddPowered = t.options.pathimg+'DDPowered.png'; t.ddPowered2 = t.options.pathimg+'DDPowered2.png'; t.gifloading= t.options.pathimg+'loading.gif'; // Containers for the menu of the tag cloud: if (t.options.showmenu) { t.divmenu = new Element('div', {'class': 'drasticcloudmenu'}).inject(t.container); t.divmenutitle = new Element('div', {'class': 'drasticcloudmenutitle'}).inject(t.divmenu).appendText('Cloud Menu'); t.divmenu.appendText('Show '); if (!t.options.namecol) t.options.namecol = t.cols[0]; if (t.options.shownamecol) { var sel = new Element('select').inject(t.divmenu); if (t.options.shownamecolumns) { for (var i = 0; i < t.options.shownamecolumns.length; i++) { var opt = new Element('option', {'value': t.options.shownamecolumns[i]}).inject(sel); opt.set('text', t.options.shownamecolumns[i]); if (t.options.sizecol == t.options.shownamecolumns[i]) opt.setProperty('selected', 'selected'); } } else { for (var i = 0; i < t.cols.length; i++) { if (t.cols[i] == t.idname) continue; var opt = new Element('option', {'value': t.cols[i]}).inject(sel); opt.set('text', t.cols[i]); if (t.options.namecol == t.cols[i]) opt.setProperty('selected', 'selected'); } } sel.addEvent('change', function(){t.setnamecol(this)}); } else { t.divmenu.appendText(t.options.namecol+' '); } if (!t.options.sizecol) t.options.sizecol = t.cols[0]; if (t.options.showsizecol) { t.divmenu.appendText(' sized by '); var sel = new Element('select').inject(t.divmenu); if (t.options.showsizecolumns) { for (var i = 0; i < t.options.showsizecolumns.length; i++) { var opt = new Element('option', {'value': t.options.showsizecolumns[i]}).inject(sel); opt.set('text', t.options.showsizecolumns[i]); if (t.options.sizecol == t.options.showsizecolumns[i]) opt.setProperty('selected', 'selected'); } } else { for (var i = 0; i < t.cols_numeric.length; i++) { if (t.cols_numeric[i] == t.idname) continue; var opt = new Element('option', {'value': t.cols_numeric[i]}).inject(sel); opt.set('text', t.cols_numeric[i]); if (t.options.sizecol == t.cols_numeric[i]) opt.setProperty('selected', 'selected'); } } sel.addEvent('change', function(){t.setsizecol(this)}); } if (t.options.showlog) { t.divmenu.appendText(' scaled '); var sel = new Element('select').inject(t.divmenu); var opt1 = new Element('option', {'value': 'log'}).inject(sel); opt1.set('text', 'log'); var opt2 = new Element('option', {'value': 'linear'}).inject(sel); opt2.set('text', 'linear'); if (!t.options.log) opt2.setProperty('selected', 'selected'); sel.addEvent('change', function(){t.setscale(this)}); } if (t.options.showcolorcol) { t.divmenu.appendText(' colored by '); var sel = new Element('select').inject(t.divmenu); if (t.options.showcolorcolumns) { for (var i = 0; i < t.options.showcolorcolumns.length; i++) { var opt = new Element('option', {'value': t.options.showcolorcolumns[i]}).inject(sel); opt.set('text', t.options.showcolorcolumns[i]); if (t.options.sizecol == t.options.showcolorcolumns[i]) opt.setProperty('selected', 'selected'); } } else { var opt = new Element('option', {'value': ' '}).inject(sel); opt.set('text', ' '); if (!t.options.colorcol) opt.setProperty('selected', 'selected'); for (var i=0; i< t.cols.length; i++) { if (t.cols_numeric.contains(t.cols[i]) || (t.flds.get(t.cols[i]).search("^enum") == 0)) { if (t.cols[i] == t.idname) continue; opt = new Element('option', {'value': t.cols[i]}).inject(sel); opt.set('text', t.cols[i]); if (t.options.colorcol == t.cols[i]) opt.setProperty('selected', 'selected'); } } } sel.addEvent('change', function(){t.setcolorcol(this)}); } if (t.options.showsortcol) { t.divmenu.appendText(' sorted on '); var sel = new Element('select').inject(t.divmenu); if (t.options.showsortcolumns) { for (var i = 0; i < t.options.showsortcolumns.length; i++) { var opt = new Element('option', {'value': t.options.showsortcolumns[i]}).inject(sel); opt.set('text', t.options.showsortcolumns[i]); if (t.options.sizecol == t.options.showsortcolumns[i]) opt.setProperty('selected', 'selected'); } } else { for (var i=0; i< t.cols.length; i++) { if (t.cols[i] == t.idname) continue; var opt = new Element('option', {'value': t.cols[i]}).inject(sel); opt.set('text', t.cols[i]); if (t.options.sortcol == t.cols[i]) opt.setProperty('selected', 'selected'); } } sel.addEvent('change', function(){t.setsortcol(this)}); } if (t.options.showsort) { t.divmenu.appendText(' sorted '); var sel = new Element('select').inject(t.divmenu); var opt1 = new Element('option', {'value':'a'}).inject(sel); opt1.set('text', 'ascending'); if (t.options.sort == 'a') opt1.setProperty('selected', 'selected'); var opt2 = new Element('option', {'value':'d'}).inject(sel); opt2.set('text', 'descending'); if (t.options.sort == 'd') opt2.setProperty('selected', 'selected'); sel.addEvent('change', function(){t.setsort(this)}); } t.divmenutoggle = new Element('div', {'class': 'drasticcloudmenutoggle1'}).inject(t.container); t.menuToggleSlide = new Fx.Slide(t.divmenu, {duration: 500}); t.divmenutoggle.addEvent('click', function(){ t.menuToggleSlide.toggle().chain(function(){ t.divmenutoggle.toggleClass('drasticcloudmenutoggle2'); }); }); if (!t.options.showmenufull) { t.divmenutoggle.addClass('drasticcloudmenutoggle2'); t.menuToggleSlide.hide(); } } //Container for the tag cloud: t.div = new Element('div', {'class': 'drasticcloud'}); t.div.inject(t.container); t.p = new Element('p', {'class': 'drasticcloud'}); t.p.inject(t.div); //Load indicator: t.loading = new Element('div', {'styles': {'position': 'relative', 'z-index': '100'}}).inject(t.container); var img = new Element('img', {'src': t.gifloading}).inject(t.loading); var c = img.getCoordinates(); t.loading.setStyles({'width': c.width, 'height': c.height}); t.refresh(t.options.addparams, false); }, setnamecol: function(obj) { var t = this; t.options.namecol = obj.value; t.refresh(t.options.addparams, false); }, setsizecol: function(obj) { var t = this; t.options.sizecol = obj.value; t.refresh(t.options.addparams, true); }, setscale: function(obj) { var t = this; t.options.log = (obj.value == "log")? true: false; t.refresh(t.options.addparams, true); }, setcolorcol: function(obj) { var t = this; t.options.colorcol = (obj.value == ' ')? null: obj.value; t.refresh(t.options.addparams, false); }, setsortcol: function(obj) { var t = this; t.options.sortcol = obj.value; t.refresh(t.options.addparams, false); }, setsort: function(obj) { var t = this; t.options.sort = obj.value; t.refresh(t.options.addparams, false); }, getMetaData: function() { var t = this; var myajax = new Request({ url: t.options.path+'?op=vm'+t.options.addparams, async: false, method: 'get', onFailure: function(){alert(dscloud["MSGREFRESHFAILED"]);}, onSuccess : function(responseText){ t.metadata = JSON.decode(responseText); t.num_rows = t.metadata[0]; t.num_fields = t.metadata[1]; t.idname = t.metadata[2]; t.idcolnr = t.metadata[3]; t.cols = t.metadata[4]; t.cols_numeric = t.metadata[5]; t.add_allowed = t.metadata[6]; t.delete_allowed = t.metadata[7]; t.editablecols = t.metadata[8]; t.defaultcols = t.metadata[9]; if (!t.options.sortcol) t.options.sortcol = t.metadata[10]; if (!t.options.sort) t.options.sort = t.metadata[11]; t.flds = new Hash(t.metadata[12]); } }).send(); }, showLoading: function() { var t = this; var c = t.container.getCoordinates(); t.loading.setStyles({ 'visibility': 'visible', 'top': -(c.height/2) - 16, 'left': (c.width/2) - 16 }); }, hideLoading: function() { var t = this; t.loading.setStyles({'visibility': 'hidden'}); }, // // Public functions which can be called from the browser: // refresh: function(addparams, animate_size) { var t = this; if ($defined(addparams)) t.options.addparams = addparams; var url = t.options.path+'?op=v&cols='+t.options.sizecol+','+t.options.namecol+(t.options.colorcol?','+t.options.colorcol:'')+ '&sortcol='+t.options.sortcol+'&sort='+t.options.sort+t.options.addparams; t.showLoading(); var myajax = new Request({ url: url, method: 'get', onFailure: function(){alert(dscloud["MSGREFRESHFAILED"]);}, onComplete: function(responseText){ t.data = JSON.decode(responseText); var values = t.data[1]; var min = Number.POSITIVE_INFINITY, max = Number.NEGATIVE_INFINITY; var mincolorcol = Number.POSITIVE_INFINITY, maxcolorcol = Number.NEGATIVE_INFINITY; for (var i=0; i < t.data[0].length; i++) { var value = parseFloat(values[i][0]); min = Math.min(min, value); max = Math.max(max, value); if (t.options.colorcol) { var valuecolorcol = parseFloat(values[i][2]); mincolorcol = Math.min(mincolorcol, valuecolorcol); maxcolorcol = Math.max(maxcolorcol, valuecolorcol); } } var realmin = min; if (t.options.log) { min = (realmin >=1)? Math.log(min): 0; max = (realmin >=1)? Math.log(max): Math.log(max+(1-realmin)); } var interval = (max-min) /t.options.nroffonts; // create the real cloud: if (!animate_size) t.p.empty(); for (var i=0; i < t.data[0].length; i++) { var id = t.data[0][i]; var name = values[i][1]; var value = parseFloat(values[i][0]); if (isNaN(value)) continue; var div, a; if (animate_size) { div = $(t.container.id + 'div' + id); a = $(t.container.id + 'a' + id); } else { div = new Element('div', {'id': t.container.id + 'div' + id, 'class': 'drasticcloud-div'}).inject(t.p); a = new Element('a', {'id': t.container.id + 'a' + id, 'class': 'drasticcloud-a'}).inject(div); a.set('text', name); a.setProperty('title', t.options.sizecol+": "+value); a.addEvent('mouseover', function(){ var id = this.id.slice(t.container.id.length + 1); this.addClass('drasticcloud-a-mouseover'); t.fireEvent("onMouseOver", id); }); a.addEvent('mouseout', function(){ this.removeClass('drasticcloud-a-mouseover') }); a.addEvent('click', function(){ var id = this.id.slice(t.container.id.length + 1); t.fireEvent("onClick", id); }); if (i<t.data[0].length-1) t.p.appendText(' | '); } if (!div) continue; if (t.options.log) value = (realmin >=1)? Math.log(value): Math.log(value+(1-realmin)); var fontdiff = (value - min) / interval; var fs = t.fontsize + fontdiff; if (animate_size) new Fx.Tween(a, {duration: 500}).start('font-size', fs); else a.setStyle('font-size', fs); var opacity = ((value-min)/(max-min)*0.3)+0.7; a.setStyle('opacity', opacity); a.setStyle('filter', opacity*100); // for IE if (t.options.colorcol) { var fldtype = t.flds.get(t.options.colorcol); if (fldtype.search("^enum") == 0) { var intv = Math.floor(100/t.flds.getKeys().length); var arr = fldtype.split("'"); for (var j=1; j<arr.length; j+=2) {if (values[i][2] == arr[j]) break;} div.setStyle('color', $HSB(j*intv,80,100)); } else if (fldtype.search("^tinyint") == 0) { a.addClass((values[i][2] == 0)?'drasticcloud-a-false':'drasticcloud-a-true'); } else { div.setStyle('color', $HSB(30,75+((values[i][2] - mincolorcol)/(maxcolorcol - mincolorcol)*150),100)); } } } //t.tips = new Tips($$('.drasticcloud-a'), {className: 'drasticcloud-tip'}); t.hideLoading(); } }).send(); }, DefaultOnClick: function(id) { var t = this; $(t.container).getElements('a.drasticcloud-a-selected').removeClass('drasticcloud-a-selected'); t.container.getElementById(t.container.id+'a'+id).addClass('drasticcloud-a-selected'); }, DefaultOnMouseOver: function(id) { var t = this; } }); drasticCloud.implement(new Options, new Events);