aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dojox/fx/tests/example_easingChart2D.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/fx/tests/example_easingChart2D.html')
-rw-r--r--includes/js/dojox/fx/tests/example_easingChart2D.html147
1 files changed, 0 insertions, 147 deletions
diff --git a/includes/js/dojox/fx/tests/example_easingChart2D.html b/includes/js/dojox/fx/tests/example_easingChart2D.html
deleted file mode 100644
index fd0d171..0000000
--- a/includes/js/dojox/fx/tests/example_easingChart2D.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
- <title>visualising dojo._Animation.easing via dojox.charting</title>
-
- <link rel="stylesheet" type="text/css" media="screen"
- href="../../../dojo/resources/dojo.css">
-
- <link rel="stylesheet" type="text/css" media="screen"
- href="../../../dijit/themes/tundra/tundra.css">
-
- <style type="text/css">
- .box { padding:14px;
- border:1px solid #b7b7b7;
- -moz-border-radius:8pt;
- }
- </style>
-
- <script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true"
- src="../../../dojo/dojo.js"></script>
-
- <script type="text/javascript">
- // one simple theme, and the charting engine:
- dojo.require("dojox.charting.Chart2D");
- // and easing functions:
- dojo.require("dojox.fx.easing");
-
- var d=0;
- var masterData = {};
- var makeSeries = function(/* string */str, /* Function */ func){
- // make some data by running a 2sec animation with an easing function
- // and adding it to the chart
- var seriesData = [];
- if(str in masterData){
- seriesData=masterData[str];
- }
-
- if(!seriesData.length){
- var func = func || dojox.fx.easing[str];
- func = (dojo.isFunction(func) ? func : dojo._defaultEasing);
-
- for(var i=0; i<=120; i++){
- var pct = i/120;
- seriesData.push({ y: 30 * func(pct), x: (pct) * 30});
- }
- if(!str.match(/^dynSeries/)){
- masterData[str] = seriesData;
- }
- chart.addSeries(str,
- seriesData,
- { stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" }
- ).render();
- }else{
- chart.updateSeries(str, seriesData).render();
- }
- };
-
- var removeSeries = function(str){
- chart.updateSeries(str, []);
- if(!clearAll){ chart.render(); }
- };
-
- var toggleChart = function(widget, str){
- if(!chart) return;
- if(widget.checked){
- makeSeries(str);
- }else{
- removeSeries(str);
- }
- }
-
- var chart;
- var clearAll=false;
-
- dojo.addOnLoad(function(){
-
- // setup our chart
- chart = new dojox.charting.Chart2D("easingChart");
- chart.addAxis("x", {
- fixLower: "major",
- fixUpper: "major",
- majorTickStep: 10,
- minorTickStep: 1,
- minorLabels: false,
- htmlLabels: false
- });
- chart.addAxis("y", {
- vertical: true,
- fixLower: "major",
- fixUpper: "major",
- majorTickStep: 10,
- minorTickStep: 1,
- htmlLabels: false
- });
- chart.addPlot("default", {type: "Areas"});
- });
-
- var opt;
- dojo.addOnLoad(function(){
-
- var c = dojo.query(".clone")[0];
- opt = dojo.byId("select");
-
- for(var i in dojox.fx.easing){
- var n = opt.appendChild(dojo.clone(c));
- n.value = n.innerHTML = i
- // n.innerHTML = i;
- }
-
- dojo.connect(opt,"onchange",function(e){
- dojo.query("option",opt)
- // we only want "selected" nodes
- .filter(function(n){ return n.selected; })
- // yay, here they are:
- .forEach(function(n){
- console.log(n);
- });
- makeSeries(opt.value,dojox.fx.easing[opt.value]);
- });
-
- dojo.query(".box").connect("onclick",function(e){
- console.log(opt.value,dojox.fx.easing[opt.value]);
- });
-
- makeSeries("visible",dojo._defaultEasing);
-
- });
-
- </script>
-</head>
-<body class="tundra" style="padding:20px">
-
- <h1>dojox.fx.easing</h1>
-
- <p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p>
-
- <select id="select" multiple="true" size="7" name="easing">
- <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
- </select>
-
- <div class="box">
- <div id="easingChart" style="height:300px"></div>
- </div>
-
-</body>
-</html>