Anonymous avatar Anonymous committed 60baf1c

updated htraf demo

Comments (0)

Files changed (6)

demo/htraf/Makefile

 .PHONY: serve build clean
 
-BUILD = \
-	static/htraf/js/jquery-1.4.3.min.js \
-	static/htraf/js/jquery.jqplot.min.js \
-	static/htraf/js/excanvas.min.js \
-	static/htraf/js/jqplot.pieRenderer.min.js \
-	static/htraf/css/jquery.jqplot.min.css
-
 include ../../Makefile.common
 
 serve: build
 	${PYTHON} serve.py ${PGSQL_REGRESS_DB} ${HTSQL_HOST} ${HTSQL_PORT}
 
-build: static/external
+build: static/htraf
 
 clean:
-	rm -rf static/external
+	rm -rf static/htraf
 
-static/external:
+static/htraf:
 	rm -rf build
-	mkdir build
-	wget -P build -q http://code.jquery.com/jquery-1.4.3.min.js
-	wget -P build -q --no-check-certificate \
-		http://bitbucket.org/cleonello/jqplot/downloads/jquery.jqplot.0.9.7r629.tar.gz
-	tar -xz -C build -f build/jquery.jqplot.0.9.7r629.tar.gz
-	mkdir static/external
-	mkdir static/external/jquery
-	cp build/jquery-1.4.3.min.js static/external/jquery
-	mkdir static/external/jqplot
-	cp -a build/dist/* static/external/jqplot
+	hg clone https://bitbucket.org/prometheus/htraf build
+	sed s/\\.\\./htraf/ build/htraf/examples20/index.html >static/index.html
+	cp -R build/htraf static
+	rm -rf static/htraf/examples10 static/htraf/index.html 
+	cp static/htraf/index20.html static/htraf/index.html
 	rm -rf build
-

demo/htraf/static/css/custom.css

-/* Reset CSS start */
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
-	margin:0;
-	padding:0;
-}
-table {
-	border-collapse:collapse;
-	border-spacing:0;
-}
-fieldset,img { 
-	border:0;
-}
-address,caption,cite,code,dfn,em,strong,th,var {
-	font-style:normal;
-	font-weight:normal;
-}
-ol,ul {
-	list-style:none;
-}
-caption,th {
-	text-align:left;
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size:100%;
-	font-weight:normal;
-}
-q:before,q:after {
-	content:'';
-}
-abbr,acronym {
-    border:0;
-}
-/* Reset CSS end */
-
-
-body {
-    position: relative;
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    font-size: 0.9em;
-    padding-left: 10px;
-}
-
-div.chart {
-    width: 500px;
-    height: 300px;
-    font-size: 1em;
-    margin-top: 10px;
-    padding-bottom: 0px;
-}
-
-h3 {
-    margin-top: 1em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #900;
-}
-
-p {
-    margin: 0.25em 0;
-    color: #555;
-}
-
-p em, p strong {
-    color: #336699;
-    font-weight: bold;
-}
-
-input {
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    color: #555;
-}
-
-table {
-    border-left: 2px solid #ddd;
-    border-right: 2px solid #ddd;
-    border-bottom: 2px solid #ddd;
-}
-
-table th, table td {
-    padding: 4px 6px;
-    font-size: 0.9em;
-    vertical-align: top;
-}
-
-table th {
-    background: #ddd;
-    font-weight: bold;
-    color: #555;
-}
-
-table td {
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-}
-
-table tr.row-hover {
-    background: #f6ddaf;
-}
-
-table tr.row-selected {
-    background: #ffa43f;
-}

demo/htraf/static/htraf/css/htraf.css

-tr.row-hover {
-    background: #DDDDDD;
-    cursor: pointer;
-}
-
-tr.row-selected {
-    background: #AAAAAA;
-}

demo/htraf/static/htraf/htraf.js

-if(!window.$) {
-    document.write('<script type="text/javascript" '
-        + ' src="/external/jquery/jquery-1.4.3.min.js"></script>\n');
-
-    // jsPlot
-    document.write('<!--[if IE]><script type="text/javascript" '
-        + ' src="/external/jqplot/excanvas.min.js"></script><![endif]-->\n');
-    document.write('<script type="text/javascript" '
-        + ' src="/external/jqplot/jquery.jqplot.min.js"></script>\n');
-    document.write('<script type="text/javascript" '
-        + ' src="/external/jqplot/plugins/jqplot.pieRenderer.min.js"></script>\n');
-    document.write('<link rel="stylesheet" type="text/css"'
-        + 'href="/external/jqplot/jquery.jqplot.min.css">');
-}
-
-if(!window.htraf) {
-    document.write('<script type="text/javascript" '
-        + 'src="/htraf/js/_htraf.js"></script>\n');
-    document.write('<link rel="stylesheet" type="text/css"'
-        + 'href="/htraf/css/htraf.css">');
-}

demo/htraf/static/htraf/js/_htraf.js

-(function($) {
-
-if(window.htraf)
-    return;
-
-if(!Array.prototype.map) {
-    Array.prototype.map = function(func) {
-        var ret = [];
-        for(var i = 0, l = this.length; i < l; i++)
-            ret.push(func(this[i]));
-        return ret;
-    }
-}
-
-htraf = {};
-
-htraf.Error = function(message) {
-    alert('[Error]:' + message);
-};
-
-htraf._autoId = 0;
-htraf.autoId = function() {
-    return 'htraf' + (++htraf._autoId);
-};
-
-htraf.quote = function(s) {
-    return "'" + escape(s.replace(/'/g, "''")) + "'";
-};
-
-htraf.convertNull = function(value) {
-    return value === null ? '':value;
-}
-
-htraf.iterVars = function(s, callback) {
-    var reStr = /^'[^']*'/, reNonStr = /^[^']+('|$)/, reVar = /\$\w+/g,
-        ret = '';
-    while(s) {
-        var match = s.match(reStr);
-        if(match) {
-            match = match[0];
-            ret += match;
-            s = s.substr(match.length, s.length);
-            continue;
-        }
-        var match = s.match(reNonStr);
-        if(match) {
-            match = match[0];
-            if(match[match.length - 1] == "'")
-                match = match.substr(0, match.length - 1);
-            var vars = match.match(reVar) || [];
-            ret += (callback(match, vars) || match);
-            s = s.substr(match.length, s.length);
-            continue;
-        }
-
-        // nothing matched, most likely wrong HTSQL
-        return ret + s;
-    }
-    return ret;
-};
-
-htraf.getVars = function(s) {
-    var varDict = {};
-    htraf.iterVars(s, function(fragment, vars) {
-        vars.map(function(v) {
-            varDict[v.substr(1, v.length)] = true;    
-        })
-    });
-    
-    var ret = [];
-    for(var v in varDict)
-        ret.push(v);
-    return ret;
-};
-
-htraf.subVars = function(s, vars) {
-    for(var key in vars) 
-        vars[key] = htraf.quote(vars[key]);
-    return htraf.iterVars(s, function(fragment) {
-        for(var key in vars) {
-            var re = eval('(/\\$' + key + '/g)')
-            fragment = fragment.replace(re, vars[key]);
-        }
-        return fragment;
-    });
-};
-
-htraf.gatherVars = function(node) {
-    var vars = {};
-    $(node).htraf('getLinked').each(function() {
-        var id = $(this).attr('id'),
-            value = $(this).htraf('getValue') || $(this).val();
-        if(!id || value === null)
-            return;
-        vars[id] = value;
-    });
-    return vars;
-};
-
-htraf.load = function(url, success) {
-    if(url[0] != '/')
-        url = '/' + url;
-    $.ajax({
-        type: 'GET',
-        url: htraf.prefix + url + '/:json',
-        cache: true,
-        dataType: 'json',
-        success: function(data) {
-            success(data);
-        }
-    });
-};
-
-htraf.init = function(prefix) {
-    if(prefix[prefix.length - 1] == '/')
-        prefix = prefix.substr(0, prefix.length - 1);
-    htraf.prefix = prefix || '';
-    htraf.widgets.render();
-    htraf.widgets.configureLinked();
-};
-
-htraf.widgets = {
-    list: [
-        {
-            selector: 'table[data-source]',
-            render: function(el) {
-                $(el).htraf({
-                    getValue: function() {
-                        return $(this).find('tr.row-selected td:eq(0)').text()
-                               || null;
-                    },
-                    
-                    render: function(data) {
-                        var tr = $('<tr/>').appendTo(this), self = this;
-                        data[0].map(function(text) {
-                            $('<th/>').text(text).appendTo(tr);
-                        });
-                        data.slice(1, data.length).map(function(row) {
-                            var tr = $('<tr/>')
-                                .mouseover(function() {
-                                    $(this).addClass('row-hover');
-                                }) 
-                                .mouseout(function() {
-                                    $(this).removeClass('row-hover');
-                                })
-                                .click(function() {
-                                    $('tr', self).removeClass('row-selected');
-                                    $(this).addClass('row-selected');
-                                    $(self).trigger('change');
-                                }).appendTo(self);
-                            row.map(function(text) {
-                                $('<td/>').text(htraf.convertNull(text))
-                                          .appendTo(tr);
-                            });
-                        });
-
-                        var hide = ($(this).attr('data-hide-first-column') 
-                                    || '').toLowerCase();
-                        if(hide == 'yes' || hide == 'true') {
-                            $('tr', this).find('td:eq(0),th:eq(0)').hide();
-                        }
-                    }
-                }) 
-            }
-        },
-
-        {
-            selector: 'select[data-source]',
-            render: function(el) {
-                $(el).htraf({
-                    render: function(data) {
-                        var titleIndex = data[0].length > 1 ? 1:0;
-                        for(var i = 1, l = data.length; i < l; i++) 
-                            this.options[i - 1] = 
-                            new Option(htraf.convertNull(data[i][titleIndex]),
-                                       htraf.convertNull(data[i][0]));
-                        $(this).trigger('change');
-                    } 
-                });
-            }
-        },
-
-        {
-            selector: 'div[data-source][data-display=chart]',
-            render: function(el) {
-                var chartType = $(el).attr('data-chart-type') || 'pie';
-                var title = $(el).attr('data-chart-title') || '';
-                var chart = {
-                    pie: {
-                        prepare: function(data) {
-                            return data.slice(1, data.length)
-                             .map(function(row) {
-
-                                if(row.length != 2)
-                                    throw new htraf.Error('Pie chart assumes '
-                                                          + 'exactly 2 '
-                                                          + 'columns dataset');
-                                return row;
-                            });
-                        },
-                        renderer: $.jqplot.PieRenderer
-                    }
-                }[chartType];
-                if(!chart)
-                    throw new htraf.Error('Unsupported chart type: ' 
-                                          + chartType); 
-                $(el).htraf({
-                    render: function(data) {
-                        var data = chart.prepare(data);
-                        if(!$(this).attr('id'))
-                            $(this).attr('id', htraf.autoId());
-                        $.jqplot($(this).attr('id'), [data], {
-                            title: title,
-                            seriesDefaults: {
-                                renderer: chart.renderer
-                            },
-                            legend: {
-                                show: true
-                            }
-                        });
-                    } 
-                }); 
-            }
-        },
-
-        {
-            selector: 'input[data-source],textarea[data-source]',
-            render: function(el) {
-                $(el).htraf({
-                    render: function(data) {
-                        var text = (data[1] || [''])[0] || '';
-                        $(this).val(htraf.convertNull(text));
-                    }
-                });
-            }
-        },
-
-        {
-            selector: '[data-source]',
-            render: function(el) {
-                $(el).htraf({
-                    render: function(data) {
-                        var text = (data[1] || [''])[0] || '';
-                        $(this).text(htraf.convertNull(text));
-                    },
-
-                    getValue: function() {
-                        return $(this).text() || null;
-                    }
-                });
-            
-            }
-        }
-    ],
-
-    registry: $(), 
-
-    render: function() {
-        this.list.map(function(widget) {
-            $(widget.selector).each(function() {
-                if($(this).data('htraf'))
-                    return;
-                widget.render(this);
-                var self = this;
-                $(this).htraf('getLinked').change(function() {
-                    var value = $(this).htraf('getValue') || $(this).val();
-                    if(typeof value == 'undefined' || value == null)
-                        $(self).htraf('clear');
-                    else {
-                        $(self).htraf('clear').htraf('load');
-                    }
-                });
-            });
-        });    
-    },
-
-    configureLinked: function() {
-        var linked = $();
-        htraf.widgets.registry.each(function() {
-            linked.add($(this).htraf('getLinked'));
-        });
-
-        // configure buttons, so that they produce 'change' event on click
-        linked.filter('button,input[type=button]').click(function() {
-            $(this).trigger('change');
-        });
-
-
-        // load all those which don't have dependencies
-        htraf.widgets.registry.add(linked).filter(function() {
-            return $(this).htraf('getLinked').size() == 0;        
-        }).htraf('load');
-    } 
-};
-
-$.fn.extend({
-    htraf: function(opts) {
-        var args = $.makeArray(arguments);
-        args = args.slice(1, args.length);
-
-        if(typeof opts == 'string' && opts.substr(0, 3) == 'get') {
-            var obj = this.size() && $(this[0]).data('htraf') || null;
-            return obj ? (obj[opts] && obj[opts].apply(this[0], args)):null;
-        }
-
-        return this.each(function() {
-            var obj = $(this).data('htraf') || null;
-            if(typeof opts == 'string') {
-                return obj ? (obj[opts] && obj[opts].apply(this, args)):null;
-            }
-            if(obj)
-                return null;
-            
-            htraf.widgets.registry = htraf.widgets.registry.add($(this));
-
-            opts = opts || {};
-            $(this).data('htraf', {
-                opts: opts.opts || {},
-                load: function() {
-                    var url = $(this).attr('data-source') || null;
-                    if(!url)
-                        return;
-                    
-                    url = htraf.subVars(url, htraf.gatherVars(this));
-
-                    var self = this;
-                    htraf.load(url, function(data) {
-                        $(self).htraf('render', data);    
-                    });
-                },
-
-                clear: opts.clear || function() {
-                    $(this).text('');
-                    $(this).children().remove();
-                    $(this).trigger('change');
-                }, 
-
-                render: opts.render || function(data) {
-                
-                },
-
-                getValue: opts.getValue || function() {
-                    return $(this).val();        
-                },
-
-                getLinked: function() {
-                    var ret = $(), selectorAttr = $(this).attr('data-linked');
-                        selectorVars = 
-                            htraf.getVars($(this).attr('data-source'))
-                            .map(function(v) {
-                                return '#' + v;   
-                            }).join(',');
-                    if(selectorAttr)
-                        ret = ret.add(selectorAttr);
-                    if(selectorVars)
-                        ret = ret.add(selectorVars);
-                    return ret;
-                }
-            });
-        });
-    } 
-});
-
-$(function() {
-    htraf.init(HTSQL_PREFIX);
-});
-
-})(jQuery);

demo/htraf/static/index.html

 <head>
     <title> HTRAF Demo </title>
     <script type="text/javascript">
-        var HTSQL_PREFIX = '/@';
+        var HTRAF = {
+            prefix: 'htraf',
+            htsqlPrefix: '/@'
+        } 
     </script>
-    <script type="text/javascript" src="htraf/htraf.js"></script>
-    <link rel="stylesheet" type="text/css" href="css/custom.css"/>
+    <script type="text/javascript" src="htraf/htraf2.js"></script>
+    <link rel="stylesheet" type="text/css" href="htraf/css/htraf-02.css"/>
 </head>
 <body>
     <h3>Select a School</h3>
-    <select id="school" data-source="/school{code, name}"></select>
-    <div class="chart"
-        data-source="/program{title, count(student)}
+    <select id="school" data-htsql="/school{code, name}"></select>
+    <div style="width: 500px; height: 350px;" 
+        data-htsql="/program{title, count(student)}
                     ?school=$school&count(student)>0" 
-        data-display="chart"
-        data-chart-title="Percent of Students by Program"></div>
+        data-type="pie"
+        data-widget="chart"
+        data-title="Percent of Students by Program"></div>
     <h3>Departments</h3>
     <p>Filter by name: <input id="department_name"/></p>
-    <table id="department" data-hide-first-column="yes" 
-        data-source="/department{code, name, school.name}
-                     ?school=$school&name~$department_name">
+    <table id="department" data-hide-column-0="yes" 
+        data-htsql="/department{code, name, school.name}
+                    ?school=$school&name~$department_name">
     </table>
     <p>
         The selected department: 
-        <em data-source="/department{name}?code=$department"></em> <br/>
+        <em data-htsql="/department{name}?code=$department"></em> <br/>
         The number of courses in the selected department: 
-        <strong data-source="/department{count(course)}?code=$department">
+        <strong data-htsql="/department{count(course)}?code=$department">
         </strong>
     </p>
     <h3>Courses</h3>
-    <table id="course" 
-        data-source="/course?department=$department">
+    <table id="course" data-htsql="/course?department=$department">
     </table>
 </body>
 </html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.