jquerypp/dom/route/route.html at docs · joolify/jquerypp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Jquery.Dom.Route</title>
        <style type='text/css'>
            body {font-family: verdana; font-size: 11px;}
            .blue {color: #56638c; font-size: 12px}
            .green {color: #007000;}
            #data_update {width: 49%; float:right;}
            #hash_update {width: 49%; float:left;}
            #data_update_target, #hash_update_target {
                height: 420px; overflow:scroll; border: 1px solid black;
            }
            .comments {height: 70px;}
        </style>
	</head>
	<body>
	    <h1>$.Route Demo</h1>
        <div><a href="/jquerypp/dom/route/qunit.html">View qunit test results</a></div>
        <br />
        <div id="hash_update">
            <div class="comments">
                <span class="blue">Use these links to modify the hash or change it directly in the address bar:</span>
                <br /><br />
                URLs with a registered path:
                <a href="#!pages/val1/val2/val3">#!pages/val1/val2/val3</a>
                <a href="#!pages/val1//">#!pages/val1//</a>
                <a href="#!pages///">#!pages///</a>
                <a href="#!/val1/val2">#!/val1/val2</a>
                <br />
                URLs without paths:
                <a href="#!pages//">#!pages//</a>
                <a href="#!pages//">#!///</a>
                <br />
                Empty hash:
                <a href="#!">#!</a>
            </div>
            <h2>Hash update events:</h2>
            <div id="hash_update_target"></div>
        </div>
        <div id="data_update">
            <div class="comments">
                <form id="data_form">
                    Value1: <input type="text" id="var1" name="var1" /><br />
                    Value2: <input type="text" id="var2" name="var2" /><br />
                    Value3: <input type="text" id="var3" name="var3" />
                    <input name="submit" id="submit" type="submit" value="Change the data" />
                </form>
            </div>
            <h2>Data update events:</h2>
            <div id="data_update_target"></div>
        </div>

		<script type='text/javascript' src='../../../steal/steal.js'></script>
		<script type='text/javascript'>
            steal('jquerypp/dom/route', 'jquerypp/lang/json', 'jquerypp/dom/form_params',
            function() {

                window.location.hash = "";
                $('#data_update_target').html();
                $('#hash_update_target').html();
                var hash_cnt = 0, data_cnt = 0;

                $.route.routes = {};
                $.route("");
                $.route("pages/:var1/:var2/:var3", {
                    'var1': 'default1',
                    'var2': 'default2',
                    'var3': 'default3'
                });
                $.route("/:var1/:var2", {
                    'var1': 'def1',
                    'var2': 'def2'
                });

                $(window).bind('hashchange', function() {
                    $('#hash_update_target').append( ++hash_cnt + ": Hash: <span class=\"green\">" + window.location.hash )
                                            .append( "</span> Route data: " + $.toJSON( $.route.data._data ) + "<br />" );
                });

                $.route.bind('change', function(ev, attr, how, newVal, oldVal){
                    $('#data_update_target').append( ++data_cnt + ": <span class=\"green\">" + showChange(attr, how, newVal, oldVal) )
                                            .append( "</span> Route data: " + $.toJSON( $.route.data._data ) + "<br />" );
                });

                showChange = function(attr, how, newVal, oldVal){
                    switch (how) {
                    case "set" :
                        $('#data_form > #' + attr).val(newVal);
                        return (how + " " + attr + ": " + oldVal + " => " + newVal);
                        break;
                    case "remove" :
                        $('#data_form > #' + attr).val('');
                        return (how + " " + attr);
                        break;
                    case "add" :
                        $('#data_form > #' + attr).val(newVal);
                        return (how + " " + attr + ": " + newVal);
                        break;
                    }
                }

                $('#data_form').bind('submit', function() {
                    data = $('#data_form').formParams();
                    for (var val in data) {
                        if (data[val] == "") {
                            delete data[val];
                        }
                    }
                    $.route.attrs(data, true);
                    return false;
                });
            })
		</script>
    </body>
</html>