source: Dev/trunk/src/client/dojox/rpc/demos/demo_GoogleAjaxTranslate.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.9 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>Demo of Google SMD / Translate test</title>
6        <style type="text/css">
7                body, html {
8                        width:100%;
9                        margin:0; padding:0;
10                }
11                .logo {
12                        border:0; vertical-align:middle;
13                }
14                .summary {
15                        color:#666;
16                        font:8pt Arial,sans-serif;
17                }
18                #container {
19                        width:760px;
20                        margin:0 auto;
21                }
22                #loader {
23                        position:absolute;
24                        top:3px;
25                        left:3px;
26                        visibility:hidden;
27                        height:50px;
28                        width:50px;
29                        background:url("../../../dojox/image/resources/images/loading.gif") no-repeat center center;
30                }
31                .inputBox {
32                        width:300px;
33                }
34                .warn { color:magenta; }
35                .over { color:red !important; }
36        </style>
37
38        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
39        <script type="text/javascript">
40                dojo.require("dojox.rpc.Service");
41                dojo.require("dojo.io.script");
42
43                var google, showLoader, hideLoader = null;
44                function init(){
45
46                        var s = dojo.query("select.clone")[0];
47                        var n = dojo.clone(s);
48                        dojo.attr(s,"id","fromLang");
49                        dojo.attr(n,"id","toLang");
50                        dojo.place(n, "target", "after");
51                       
52                        google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc","SMDLibrary/google.smd"));
53                       
54                        showLoader = dojo.hitch(dojo,"style","loader","visibility","visible");
55                        hideLoader = dojo.hitch(dojo,"style","loader","visibility","hidden");
56
57                        dojo.connect(dojo.byId("test"),"onkeypress",function(e){
58                                var n = dojo.byId('test');
59                                var len = n.value.length + 1;
60                                if(len >= 400 && len < 500){
61                                        if(!dojo.hasClass("progress","warn")){ dojo.addClass("progress","warn"); }
62                                }else if(len >= 501){
63                                        n.value = n.value.substr(0, 500)
64                                        if(!dojo.hasClass("progress","over")){ dojo.addClass("progress","over"); }
65                                        return false;
66                                }else{
67                                        dojo.removeClass("progress","over");
68                                        dojo.removeClass("progress","warn");
69                                }
70                                dojo.byId("used").innerHTML = len + "";
71                               
72                        });
73
74                        var runner = function(e){
75                                var pair = dojo.byId("fromLang").value + "|" + dojo.byId("toLang").value;
76                                google.translate({ q: dojo.byId("test").value, langpair:pair })
77                                        .addBoth(function(response){
78                                                var r = response.responseData;
79                                                if(r && r.translatedText){
80                                                        dojo.byId("response").value = r.translatedText;
81                                                }
82                                                dojo.byId("flop").disabled = false;
83                                        });
84                        };
85
86                        dojo.connect(dojo.byId("doit"),"onclick", runner);
87
88                        dojo.connect(dojo.byId("flop"),"onclick", function(e){
89                                // take the value from the translated text, dump it in the incoming
90                                // and set the values opposite
91                                var input = dojo.byId("test");
92                                var resp = dojo.byId("response");
93                                var trans = resp.value;
94
95                                resp.value = "";
96                                input.value = trans;
97                               
98                                var cur = dojo.byId("fromLang").selectedIndex;
99                                dojo.query("#toLang option").map(function(n){ return (n.selected) ? n : false; })
100                                        .forEach(function(n,i){
101                                                if(n){
102                                                        dojo.byId("fromLang").selectedIndex = i;
103                                                        dojo.byId("toLang").selectedIndex = cur;
104                                                }
105                                });
106                                dojo.byId("flop").disabled = true;
107                                runner();
108                                       
109                        });
110
111                }
112                dojo.addOnLoad(init);
113
114        </script>
115</head>
116
117<body>
118                <div id="loader"></div>
119                <div id="container">
120                        <h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" /></a> Ajax API SMD / Translation Test</h2>
121
122                        <div id="progress">Used: <span id="used">?</span> of 500 max.</div>
123                        <textarea id="test" style="float:left; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
124                        <textarea id="response" style="float:right; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
125
126                        <br style="clear:both">
127
128                        <div style="padding-top:15px;">
129                        From:
130                        <select class="clone">
131                                <option  value="ar">Arabic</option><option  value="bg">Bulgarian</option>
132                                <option  value="zh-CN">Chinese (Simplified)</option><option  value="zh-TW">Chinese (Traditional)</option>
133                                <option  value="hr">Croatian</option><option  value="cs">Czech</option><option  value="da">Danish</option>
134                                <option  value="nl">Dutch</option><option SELECTED value="en">English</option><option  value="fi">Finnish</option>
135                                <option  value="fr">French</option><option  value="de">German</option><option  value="el">Greek</option>
136                                <option  value="hi">Hindi</option><option  value="it">Italian</option><option  value="ja">Japanese</option>
137                                <option  value="ko">Korean</option><option  value="no">Norwegian</option><option  value="pl">Polish</option>
138                                <option  value="pt">Portuguese</option><option  value="ro">Romanian</option><option  value="ru">Russian</option>
139                                <option  value="es">Spanish</option><option  value="sv">Swedish</option>
140                        </select>
141
142                        <span id="target">To: &nbsp;</span>
143                       
144                        <button id="doit">Translate</button>
145                        <button id="flop" disabled="disabled">Flip Back</button>
146       
147                        </div>
148                       
149               
150                       
151                </div>
152
153
154</body>
155</html>
Note: See TracBrowser for help on using the repository browser.