login

assets/javascripts/jquery-ui.cambobox.js

+(function( $ ) {
+    $.widget( "ui.combobox", {
+        _create: function() {
+            var input,
+                that = this,
+                wasOpen = false,
+                select = this.element.hide(),
+                selected = select.children( ":selected" ),
+                value = selected.val() ? selected.text() : "",
+                wrapper = this.wrapper = $( "<span>" )
+                    .addClass( "ui-combobox" )
+                    .insertAfter( select );
+
+            function removeIfInvalid( element ) {
+                var value = $( element ).val(),
+                    matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
+                    valid = false;
+                select.children( "option" ).each(function() {
+                    if ( $( this ).text().match( matcher ) ) {
+                        this.selected = valid = true;
+                        return false;
+                    }
+                });
+
+                if ( !valid ) {
+                    // remove invalid value, as it didn't match anything
+                    $( element )
+                        .val( "" )
+                        .attr( "title", value + " didn't match any item" )
+                        .tooltip( "open" );
+                    select.val( "" );
+                    setTimeout(function() {
+                        input.tooltip( "close" ).attr( "title", "" );
+                    }, 2500 );
+                    input.data( "ui-autocomplete" ).term = "";
+                }
+            }
+
+            input = $( "<input>" )
+                .appendTo( wrapper )
+                .val( value )
+                .attr( "title", "" )
+                .addClass( "ui-state-default ui-combobox-input" )
+                .autocomplete({
+                    delay: 0,
+                    minLength: 0,
+                    source: function( request, response ) {
+                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+                        response( select.children( "option" ).map(function() {
+                            var text = $( this ).text();
+                            if ( this.value && ( !request.term || matcher.test(text) ) )
+                                return {
+                                    label: text.replace(
+                                        new RegExp(
+                                            "(?![^&;]+;)(?!<[^<>]*)(" +
+                                                $.ui.autocomplete.escapeRegex(request.term) +
+                                                ")(?![^<>]*>)(?![^&;]+;)", "gi"
+                                        ), "<strong>$1</strong>" ),
+                                    value: text,
+                                    option: this
+                                };
+                        }) );
+                    },
+                    select: function( event, ui ) {
+                        ui.item.option.selected = true;
+                        that._trigger( "selected", event, {
+                            item: ui.item.option
+                        });
+                    },
+                    change: function( event, ui ) {
+                        if ( !ui.item ) {
+                            removeIfInvalid( this );
+                        }
+                    }
+                })
+                .addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+            input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+                return $( "<li>" )
+                    .append( "<a>" + item.label + "</a>" )
+                    .appendTo( ul );
+            };
+
+            $( "<a>" )
+                .attr( "tabIndex", -1 )
+                .attr( "title", "Show All Items" )
+                .tooltip()
+                .appendTo( wrapper )
+                .button({
+                    icons: {
+                        primary: "ui-icon-triangle-1-s"
+                    },
+                    text: false
+                })
+                .removeClass( "ui-corner-all" )
+                .addClass( "ui-corner-right ui-combobox-toggle" )
+                .mousedown(function() {
+                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
+                })
+                .click(function() {
+                    input.focus();
+
+                    // close if already visible
+                    if ( wasOpen ) {
+                        return;
+                    }
+
+                    // pass empty string as value to search for, displaying all results
+                    input.autocomplete( "search", "" );
+                });
+
+            input.tooltip({
+                tooltipClass: "ui-state-highlight"
+            });
+        },
+
+        _destroy: function() {
+            this.wrapper.remove();
+            this.element.show();
+        }
+    });
+})( jQuery );
\ No newline at end of file

assets/javascripts/rooms.coffee

@@ -27,31 +27,44 @@ class Rooms extends Spine.Controller
       $('#join_private_room').data('room_id', room.id)
       $('#join_private_room_dialog').dialog('open')
     else
-      alert room
       mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp))
 
+login = (username, password)->
+  Candy.init('http://s70.hebexpo.com:5280/http-bind/',
+    core:
+      debug: false,
+      autojoin: ['mycard@conference.my-card.in'],
+    view:
+      resources: '/vendor/candy/res/',
+      language: 'cn'
+  )
+  Candy.Util.getPosTopAccordingToWindowBounds = (elem, pos)->
+    windowHeight = $(document).height()
+    elemHeight   = elem.outerHeight()
+    marginDiff = elemHeight - elem.outerHeight(true)
+    backgroundPositionAlignment = 'top';
+    pos -= relative = $('#candy').offset().top
+    if (pos + elemHeight >= windowHeight - relative)
+      pos -= elemHeight - marginDiff;
+      backgroundPositionAlignment = 'bottom';
+    return { px: pos, backgroundPositionAlignment: backgroundPositionAlignment };
+
+  CandyShop.InlineImages.init();
+  Candy.View.Template.Login.form = $('#login_form_template').html()
+
+  Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
+  Candy.Core.Event.Strophe.Login = ->
+    alert 1
+  Candy.Core.connect(username, password)
+
+  #window.onunload = window.onbeforeunload
+  window.onbeforeunload = null
+  $('#candy').show()
+
 $(document).ready ->
-  if true #for debug
-    Candy.init('/http-bind/',
-      core:
-        debug: false,
-        autojoin: ['mycard@conference.my-card.in'],
-      view:
-        resources: '/vendor/candy/res/',
-        language: 'cn'
-    )
-
-    CandyShop.InlineImages.init();
-
-    Candy.View.Template.Chat.infoMessage = ''
-    Candy.Core.connect('zh99998测试80@my-card.in', 'zh112998') if window.location.href.indexOf("candy") != -1
-    #window.onunload = window.onbeforeunload
-    window.onbeforeunload = null
-
-    $('#candy').show()
-  #$('#username').val '@my-card.in'
-  #$('#username').focus()
   #stroll.bind( '.online_list ul' );
+  if jid = Candy.Util.getCookie('jid')
+    login(jid, Candy.Util.getCookie('password'))
 
   $('#new_room_dialog').dialog
     autoOpen:false,
@@ -103,6 +116,23 @@ $(document).ready ->
     new_room.name.value = Math.floor Math.random() * 1000
     $('#new_room_dialog').dialog('open')
 
+  $('#login_domain').combobox()
+
+  $('#login_dialog').dialog
+    autoOpen:false,
+    resizable:false,
+    title:"用户登录"
+
+  $('#login_button').click ->
+    login()
+    #$('#login_dialog').dialog 'open'
+
+  #$('#login').submit ->
+  #  if @node.value and @domain.value and @password.value
+  #    login(@node.value, @password.value, @domain.value)
+  #  $('#login_dialog').dialog 'close'
+  #  false
+
   rooms = new Rooms(el: $('#rooms'))
 
   Server.one "refresh", ->

assets/javascripts/rooms.js

 // Generated by CoffeeScript 1.4.0
 (function() {
-  var Room, Rooms, Server,
+  var Room, Rooms, Server, login,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
@@ -69,7 +69,6 @@
         $('#join_private_room').data('room_id', room.id);
         return $('#join_private_room_dialog').dialog('open');
       } else {
-        alert(room);
         return mycard.join(room.server().ip, room.server().port, mycard.room_name(room.name, null, room.pvp, room.rule, room.mode, room.start_lp));
       }
     };
@@ -78,26 +77,48 @@
 
   })(Spine.Controller);
 
-  $(document).ready(function() {
-    var new_room, rooms;
-    if (true) {
-      Candy.init('/http-bind/', {
-        core: {
-          debug: false,
-          autojoin: ['mycard@conference.my-card.in']
-        },
-        view: {
-          resources: '/vendor/candy/res/',
-          language: 'cn'
-        }
-      });
-      CandyShop.InlineImages.init();
-      Candy.View.Template.Chat.infoMessage = '';
-      if (window.location.href.indexOf("candy") !== -1) {
-        Candy.Core.connect('zh99998测试80@my-card.in', 'zh112998');
+  login = function(username, password) {
+    Candy.init('http://s70.hebexpo.com:5280/http-bind/', {
+      core: {
+        debug: false,
+        autojoin: ['mycard@conference.my-card.in']
+      },
+      view: {
+        resources: '/vendor/candy/res/',
+        language: 'cn'
+      }
+    });
+    Candy.Util.getPosTopAccordingToWindowBounds = function(elem, pos) {
+      var backgroundPositionAlignment, elemHeight, marginDiff, relative, windowHeight;
+      windowHeight = $(document).height();
+      elemHeight = elem.outerHeight();
+      marginDiff = elemHeight - elem.outerHeight(true);
+      backgroundPositionAlignment = 'top';
+      pos -= relative = $('#candy').offset().top;
+      if (pos + elemHeight >= windowHeight - relative) {
+        pos -= elemHeight - marginDiff;
+        backgroundPositionAlignment = 'bottom';
       }
-      window.onbeforeunload = null;
-      $('#candy').show();
+      return {
+        px: pos,
+        backgroundPositionAlignment: backgroundPositionAlignment
+      };
+    };
+    CandyShop.InlineImages.init();
+    Candy.View.Template.Login.form = $('#login_form_template').html();
+    Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
+    Candy.Core.Event.Strophe.Login = function() {
+      return alert(1);
+    };
+    Candy.Core.connect(username, password);
+    window.onbeforeunload = null;
+    return $('#candy').show();
+  };
+
+  $(document).ready(function() {
+    var jid, new_room, rooms;
+    if (jid = Candy.Util.getCookie('jid')) {
+      login(jid, Candy.Util.getCookie('password'));
     }
     $('#new_room_dialog').dialog({
       autoOpen: false,
@@ -161,6 +182,15 @@
       new_room.name.value = Math.floor(Math.random() * 1000);
       return $('#new_room_dialog').dialog('open');
     });
+    $('#login_domain').combobox();
+    $('#login_dialog').dialog({
+      autoOpen: false,
+      resizable: false,
+      title: "用户登录"
+    });
+    $('#login_button').click(function() {
+      return login();
+    });
     rooms = new Rooms({
       el: $('#rooms')
     });

assets/stylesheets/rooms.less

@@ -56,3 +56,25 @@ body{background:#fbfbfb;}
 	}
 }
 .online_title{height:20px;background:#f9f9f9;width:190px;font-size:14px;line-height:16px;padding:10px 10px;color:#147CC3;}
+
+/*zh*/
+#login_button{cursor: pointer}
+/*
+#login{
+  #login_node {width:80px}
+  .ui-combobox-input {width: 100px}
+  .ui-combobox-toggle {width: auto}
+} */
+#login-form{
+  #node{
+    width: 60px;
+  }
+  label[for=domain]{
+    width: auto;
+    clear: none;
+    padding-right: 0px;
+  }
+  #domain{
+    width: 74px;
+  }
+}
\ No newline at end of file

rooms/index.html

@@ -21,7 +21,7 @@
     <script type="text/javascript" src="/vendor/javascripts/less-1.3.1.min.js"></script>
     <script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>
 
-    <link rel="stylesheet" href="/vendor/stylesheets/smoothness/jquery-ui-1.9.1.custom.min.css"/>
+    <link rel="stylesheet" href="/vendor/stylesheets/smoothness/jquery-ui-1.10.0.custom.min.css"/>
 
     <link rel="canonical" href="http://my-card.in/rooms">
 
@@ -60,6 +60,23 @@
         </div>
     </script>
 
+    <script id="login_form_template" type="text/x-mustache-template">
+        <form method="post" id="login-form" class="login-form" onsubmit="{{#displayUsername}}username.value = node.value + '@' + domain.value;{{/displayUsername}}Candy.Util.setCookie('jid', username.value, 365);Candy.Util.setCookie('username', node.value, 365);Candy.Util.setCookie('password', password.value, 365)">
+            {{#displayUsername}}
+                <label for="node">{{_labelUsername}}</label>
+                <input type="text" id="node" name="node"/>
+                <label for="domain">@</label>
+                <select id="domain" name="domain" tabindex="-1">
+                    <option label="my-card.in" value="my-card.in" selected="selected" />
+                    <option label="gmail.com" value="gmail.com" />
+                </select>
+
+            {{/displayUsername}}
+            <input type="hidden" id="username" name="username" value="{{presetJid}}"/>
+            {{#displayPassword}}<label for="password">{{_labelPassword}}</label><input type="password" id="password" name="password" />{{/displayPassword}}
+            <input type="submit" class="button" value="{{_loginSubmit}}" />
+        </form>
+    </script>
 </head>
 <body>
 <!--[if lt IE 7]>
@@ -84,7 +101,7 @@
     <div class="log_reg">
         <a href="">注册</a>
         <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-        <a class="login" href="">登录</a>
+        <a id="login_button" class="login">登录</a>
     </div>
 </div>
 <div class="card_center">
@@ -158,22 +175,22 @@
 
 <div id="new_room_dialog" style="display: none">
     <form id="new_room">
-        <label>房间名</label>
-        <input type="text" id="name"/><br/>
-        <label>房间密码</label>
-        <input type="password" name="password" id="password" value=""/><br/>
-        <input type="checkbox" name="pvp" id="pvp" value="pvp"/><label for="pvp">竞技场</label>
+        <label for="new_room_name">房间名</label>
+        <input type="text" id="new_room_name"/><br/>
+        <label for="new_room_password">房间密码</label>
+        <input type="password" name="password" id="new_room_password" value=""/><br/>
+        <input type="checkbox" name="pvp" id="new_room_pvp" value="pvp"/><label for="new_room_pvp">竞技场</label>
 
         <hr/>
-        <label for="rule">卡片允许</label>
-        <select id="rule" name="rule">
+        <label for="new_room_rule">卡片允许</label>
+        <select id="new_room_rule" name="rule">
             <option value="0" selected="selected">ＯＣＧ</option>
             <option value="1">ＴＣＧ</option>
             <option value="2">ＯＣＧ＆ＴＣＧ</option>
             <option value="3">专有卡禁止</option>
         </select><br/>
-        <label for="mode">决斗模式</label>
-        <select id="mode" name="mode">
+        <label for="new_room_mode">决斗模式</label>
+        <select id="new_room_mode" name="mode">
             <option value="0">单局模式</option>
             <option value="1" selected="selected">比赛模式</option>
             <option value="2">ＴＡＧ</option>
@@ -181,24 +198,37 @@
         <hr/>
         <h3>额外选项</h3>
 
-        <label for="start_lp">初始LP</label>
-        <input type="number" name="start_lp" id="start_lp" min="0" max="99999" value="8000"/><br/>
+        <label for="new_room_start_lp">初始LP</label>
+        <input type="number" name="start_lp" id="new_room_start_lp" min="0" max="99999" value="8000"/><br/>
         <input type="submit" value="确定"/>
     </form>
 </div>
 <div id="join_private_room_dialog" style="display: none">
     <form id="join_private_room">
-        <label>房间密码</label>
+        <label for="joinroom_password">房间密码</label>
         <input name="password" type="password" id="joinroom_password" value=""/>
         <input type="submit" value="确定"/>
     </form>
 </div>
 
+<!--<div id="login_dialog" style="display: none;">
+    <form id="login">
+        <label for="login_node">用户</label><input name="node" type="text" id="login_node" tabindex="1" />@<select name="domain" id="login_domain" style="width:50px">
+            <option value="my-card.in">my-card.in</option>
+            <option value="gmail.com">gmail.com</option>
+        </select><br />
+        <label for="login_password">密码</label><input name="password" type="password" id="login_password" tabindex="2"/>
+        <input type="submit" value="确定" tabindex="3"/>
+    </form>
+</div>-->
 
 <script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
 <script src="/vendor/javascripts/jquery.tmpl.min.js"></script>
-<script src="/vendor/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
-<!--<script src="/vendor/javascripts/plugins.js"></script>-->
+<script src="/vendor/javascripts/jquery-ui-1.10.0.custom.min.js"></script>
+<script src="/vendor/javascripts/jquery.cookie.js"></script>
+<script src="/vendor/javascripts/jquery.select.js"></script>
+<script src="/assets/javascripts/jquery-ui.cambobox.js"></script>
+
 <script src="/vendor/javascripts/spine/spine.js"></script>
 <script src="/vendor/javascripts/spine/ajax.js"></script>
 <script src="/vendor/javascripts/spine/relation.js"></script>

vendor/javascripts/jquery.cookie.js

+/*!
+ * jQuery Cookie Plugin v1.3.0
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2013 Klaus Hartl
+ * Released under the MIT license
+ */
+(function ($, document, undefined) {
+
+	var pluses = /\+/g;
+
+	function raw(s) {
+		return s;
+	}
+
+	function decoded(s) {
+		return unRfc2068(decodeURIComponent(s.replace(pluses, ' ')));
+	}
+	
+	function unRfc2068(value) {
+		if (value.indexOf('"') === 0) {
+			// This is a quoted cookie as according to RFC2068, unescape
+			value = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+		}
+		return value;
+	}
+
+	var config = $.cookie = function (key, value, options) {
+
+		// write
+		if (value !== undefined) {
+			options = $.extend({}, config.defaults, options);
+
+			if (value === null) {
+				options.expires = -1;
+			}
+
+			if (typeof options.expires === 'number') {
+				var days = options.expires, t = options.expires = new Date();
+				t.setDate(t.getDate() + days);
+			}
+
+			value = config.json ? JSON.stringify(value) : String(value);
+
+			return (document.cookie = [
+				encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
+				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+				options.path    ? '; path=' + options.path : '',
+				options.domain  ? '; domain=' + options.domain : '',
+				options.secure  ? '; secure' : ''
+			].join(''));
+		}
+
+		// read
+		var decode = config.raw ? raw : decoded;
+		var cookies = document.cookie.split('; ');
+		var result = key ? null : {};
+		for (var i = 0, l = cookies.length; i < l; i++) {
+			var parts = cookies[i].split('=');
+			var name = decode(parts.shift());
+			var cookie = decode(parts.join('='));
+			
+			if (config.json) {
+				cookie = JSON.parse(cookie);
+			}
+			
+			if (key && key === name) {
+				result = cookie;
+				break;
+			}
+			
+			if (!key) {
+				result[name] = cookie;
+			}
+		}
+
+		return result;
+	};
+
+	config.defaults = {};
+
+	$.removeCookie = function (key, options) {
+		if ($.cookie(key) !== null) {
+			$.cookie(key, null, options);
+			return true;
+		}
+		return false;
+	};
+
+})(jQuery, document);

vendor/javascripts/jquery.select.js

+$.fn.selectRange = function(start, end) {
+    return this.each(function() {
+        if (this.setSelectionRange) {
+            this.focus();
+            this.setSelectionRange(start, end);
+        } else if (this.createTextRange) {
+            var range = this.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', end);
+            range.moveStart('character', start);
+            range.select();
+        }
+    });
+};
+