improve selector layout
[ikiwiki] / underlays / openid-selector / ikiwiki / openid / openid-jquery.js
1 /*
2 Simple OpenID Plugin
3 http://code.google.com/p/openid-selector/
4
5 This code is licenced under the New BSD License.
6 */
7
8 var providers_large = {
9     google: {
10         name: 'Google',
11         icon: 'http://google.com/favicon.ico',
12         url: 'https://www.google.com/accounts/o8/id'
13     },
14     yahoo: {
15         name: 'Yahoo',      
16         icon: 'http://yahoo.com/favicon.ico',
17         url: 'http://me.yahoo.com/'
18     },    
19     openid: {
20         name: 'OpenID',     
21         icon: 'wikiicons/openidlogin-bg.gif',
22         label: 'Enter your OpenID:',
23         url: null
24     },
25 };
26 var providers_small = {
27     livejournal: {
28         name: 'LiveJournal',
29         icon: 'http://livejournal.com/favicon.ico',
30         label: 'Enter your Livejournal username:',
31         url: 'http://{username}.livejournal.com/'
32     },
33     flickr: {
34         name: 'Flickr',        
35         icon: 'http://flickr.com/favicon.ico',
36         label: 'Enter your Flickr username:',
37         url: 'http://flickr.com/photos/{username}/'
38     },
39     wordpress: {
40         name: 'Wordpress',
41         icon: 'https://ddgw.s3.amazonaws.com/wordpress.org.ico',
42         label: 'Enter your Wordpress.com username:',
43         url: 'http://{username}.wordpress.com/'
44     },
45     myopenid: {
46         name: 'MyOpenID',
47         icon: 'http://myopenid.com/favicon.ico',
48         label: 'Enter your MyOpenID username:',
49         url: 'http://{username}.myopenid.com/'
50     },
51     claimid: {
52         name: 'ClaimID',
53         icon: 'http://claimid.com/favicon.ico',
54         label: 'Enter your ClaimID username:',
55         url: 'http://claimid.com/{username}'
56     },
57     aol: {
58         name: 'AOL',     
59         icon: 'http://aol.com/favicon.ico',
60         label: 'Enter your AOL username:',
61         url: 'http://openid.aol.com/{username}'
62     },
63     verisign: {
64         name: 'Verisign',
65         icon: 'http://verisign.com/favicon.ico',
66         label: 'Enter your Verisign username:',
67         url: 'http://{username}.pip.verisignlabs.com/'
68     },
69 };
70 var providers = $.extend({}, providers_large, providers_small);
71
72 var openid = {
73
74         demo: false,
75         ajaxHandler: null,
76         cookie_expires: 6*30,   // 6 months.
77         cookie_name: 'openid_provider',
78         cookie_path: '/',
79         
80         img_path: 'images/',
81         
82         input_id: null,
83         provider_url: null,
84         provider_id: null,
85         
86     init: function(input_id, localloginurl) {
87         
88         var openid_btns = $('#openid_btns');
89         
90         this.input_id = input_id;
91         
92         $('#openid_choice').show();
93         $('#openid_input_area').empty();
94         
95         // add box for each provider
96         for (id in providers_large) {
97                 openid_btns.append(this.getBoxHTML(providers_large[id], 'large'));
98         }
99
100         if (providers_small) {
101                 openid_btns.append('<br/>');
102                 
103                 for (id in providers_small) {
104                 
105                         openid_btns.append(this.getBoxHTML(providers_small[id], 'small'));
106                 }
107         }
108         if (localloginurl != "") {
109                 openid_btns.append(
110                         '<a href="' + localloginurl + '"' +
111                         ' style="background: #FFF" ' +
112                         'class="openid_small_btn">' +
113                         '<img alt="" width="16" height="16" src="favicon.ico" />' +
114                         ' Local Account' +
115                         '</a>'
116                 );
117         }
118         
119         $('#openid_form').submit(this.submit);
120         
121         var box_id = this.readCookie();
122         if (box_id) {
123                 this.signin(box_id, true);
124         }  
125     },
126     getBoxHTML: function(provider, box_size) {
127         var label="";
128         var title=""
129         if (box_size == 'large') {
130                 label=' ' + provider["name"];
131         }
132         else {
133                 title=' title="'+provider["name"]+'"';
134         }
135         var box_id = provider["name"].toLowerCase();
136         return '<a' + title +' href="javascript: openid.signin(\''+ box_id +'\');"' +
137                         ' style="background: #FFF" ' + 
138                         'class="' + box_id + ' openid_' + box_size + '_btn">' +
139                         '<img alt="" width="16" height="16" src="' + provider["icon"] + '" />' +
140                         label +
141                         '</a>';
142     
143     },
144     /* Provider image click */
145     signin: function(box_id, onload) {
146     
147         var provider = providers[box_id];
148                 if (! provider) {
149                         return;
150                 }
151                 
152                 this.highlight(box_id);
153                 this.setCookie(box_id);
154                 
155                 this.provider_id = box_id;
156                 this.provider_url = provider['url'];
157                 
158                 // prompt user for input?
159                 if (provider['label']) {
160                         this.useInputBox(provider);
161                 } else {
162                         $('#openid_input_area').empty();
163                         if (! onload) {
164                                 $('#openid_form').submit();
165                         }
166                 }
167     },
168     /* Sign-in button click */
169     submit: function() {
170         
171         var url = openid.provider_url; 
172         if (url) {
173                 url = url.replace('{username}', $('#openid_username').val());
174                 openid.setOpenIdUrl(url);
175         }
176         if(openid.ajaxHandler) {
177                 openid.ajaxHandler(openid.provider_id, document.getElementById(openid.input_id).value);
178                 return false;
179         }
180         if(openid.demo) {
181                 alert("In client demo mode. Normally would have submitted OpenID:\r\n" + document.getElementById(openid.input_id).value);
182                 return false;
183         }
184         return true;
185     },
186     setOpenIdUrl: function (url) {
187     
188         var hidden = $('#'+this.input_id);
189         if (hidden.length > 0) {
190                 hidden.value = url;
191         } else {
192                 $('#openid_form').append('<input style="display:none" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>');
193         }
194     },
195     highlight: function (box_id) {
196         
197         // remove previous highlight.
198         var highlight = $('#openid_highlight');
199         if (highlight) {
200                 highlight.replaceWith($('#openid_highlight a')[0]);
201         }
202         // add new highlight.
203         $('.'+box_id).wrap('<div id="openid_highlight"></div>');
204     },
205     setCookie: function (value) {
206     
207                 var date = new Date();
208                 date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
209                 var expires = "; expires="+date.toGMTString();
210                 
211                 document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path;
212     },
213     readCookie: function () {
214                 var nameEQ = this.cookie_name + "=";
215                 var ca = document.cookie.split(';');
216                 for(var i=0;i < ca.length;i++) {
217                         var c = ca[i];
218                         while (c.charAt(0)==' ') c = c.substring(1,c.length);
219                         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
220                 }
221                 return null;
222     },
223     useInputBox: function (provider) {
224         
225                 var input_area = $('#openid_input_area');
226                 
227                 var html = '';
228                 var id = 'openid_username';
229                 var value = '';
230                 var label = provider['label'];
231                 var style = '';
232                 
233                 if (label) {
234                         html = '<p>' + label + '</p>';
235                 }
236                 if (provider['name'] == 'OpenID') {
237                         id = this.input_id;
238                         value = '';
239                         style = 'background:#FFF url(wikiicons/openidlogin-bg.gif) no-repeat scroll 0 50%; padding-left:18px;';
240                 }
241                 html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + 
242                                         '<input id="openid_submit" type="submit" value="Login"/>';
243                 
244                 input_area.empty();
245                 input_area.append(html);
246
247                 $('#'+id).focus();
248     },
249     setDemoMode: function (demoMode) {
250         this.demo = demoMode;
251     },
252     setAjaxHandler: function (ajaxFunction) {
253         this.ajaxHandler = ajaxFunction;
254     }
255 };