Permalink
Browse files

Adding first simple example to github which is a twitter example

  • Loading branch information...
0 parents commit e995eb5373a93f1b8c6ffcc0991321d6ca23fc3f Kwwika committed Aug 12, 2010
0 README
No changes.
@@ -0,0 +1,39 @@
+function MyConnectionListener() {
+ this.connectionStatusUpdated = function(sStatus) {
+ log("connectionStatusUpdated: " + sStatus);
+
+ var imgElement = document.getElementById('connection_status_image');
+ var msgElement = document.getElementById('connection_status_message');
+ var sMsg;
+
+ switch (sStatus) {
+ case kwwika.ConnectionStatus.CONNECTING:
+ sMsg = "Connecting...";
+ imgElement.setAttribute("src", "images/connecting.png");
+ break;
+ case kwwika.ConnectionStatus.RECONNECTED:
+ sMsg = "Reconnected.";
+ imgElement.setAttribute("src", "images/connecting.png");
+ break;
+ case kwwika.ConnectionStatus.CREDENTIALS_RETRIEVED:
+ sMsg = "Credentials retrieved.";
+ imgElement.setAttribute("src", "images/connecting.png");
+ break;
+ case kwwika.ConnectionStatus.CONNECTED:
+ sMsg = "Connected.";
+ imgElement.setAttribute("src", "images/connecting.png");
+ break;
+ case kwwika.ConnectionStatus.LOGGED_IN:
+ sMsg = "Logged in.";
+ imgElement.setAttribute("src", "images/loggedin.png");
+ break;
+ default:
+ sMsg = "Not connected.";
+ imgElement.setAttribute("src", "/yourapp/images/notconnected.png");
+ break;
+ }
+ msgElement.innerHTML = sMsg;
+ imgElement.setAttribute("alt", sMsg);
+ imgElement.setAttribute("title", sMsg);
+ }
+};
@@ -0,0 +1,40 @@
+function MySubscriptionListener() {
+ this.count = 0;
+ this.maxMessages = 25;
+
+ function prepareHTML(sScreenName, sUserAvatar, sMessageText, sId, sCreatedAt) {
+ return "<div class='message'>" +
+ " <div class='profile'>" +
+ " <a href='http://twitter.com/" + sScreenName + "' target='_blank'>" +
+ " <img alt='" + sScreenName + "' width='48' height='48' src='" + sUserAvatar + "' class='avatar' />" +
+ " <a>" +
+ " </div>" +
+ " <div class='messagebody'>" +
+ " <span class='screenName'>" + sScreenName + "</span>" +
+ " <span class='text'>" + sMessageText + "</span>" +
+ " <span class='time'>@<a href='http://twitter.com/"+sScreenName+"/statuses/"+sId+"'>"+sCreatedAt+"</a></span>" +
+ " </div>" +
+ " <div class='clear'></div>" +
+ "</div>";
+ }
+
+ this.topicUpdated = function(oSub, mUpdate) {
+ if (mUpdate.Text) {
+
+ var element = document.getElementById('latest_update');
+
+ element.innerHTML = prepareHTML(mUpdate["ScreenName"], mUpdate["UserProfileImageUrl"], mUpdate["Text"], mUpdate["Id"], mUpdate["CreatedAt"]) + element.innerHTML;
+
+ if (this.count >= this.maxMessages) {
+ element.removeChild(element.lastChild);
+ } else {
+ ++this.count;
+ }
+ }
+ };
+
+ this.topicError = function(oSub, sError) {
+ log("Error: " + sError);
+ };
+};
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Simple Twitter Subscriber</title>
+ <link href="styles.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript" src="http://api.kwwika.com/latest/"></script>
+
+ <script type="text/javascript" src="MyConnectionListener.js"></script>
+ <script src="MySubscriptionListener.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ function log(message) {
+ var logElement = document.getElementById('debuglog');
+ logElement.innerHTML = "<div class='log-message'>" + message + "</div>" + logElement.innerHTML;
+ }
+
+ var connection = kwwika.connect(new MyConnectionListener());
+
+ var subscriptionListener = new MySubscriptionListener();
+ var currentSubscription = null;
+ function subscribe()
+ {
+ var subscribeTo = document.getElementById("subscribeTo").value;
+ if(/\/[A-Z\/]+[A-Z]/.test(subscribeTo))
+ {
+ if(currentSubscription)
+ {
+ connection.unsubscribe(currentSubscription);
+ }
+ currentSubscription = connection.subscribe(subscribeTo, subscriptionListener);
+ }
+ }
+
+ function subscribeToTopic(e)
+ {
+ e = e || window.event;
+ var el = e.srcElement || e.target;
+ if(el.tagName.toLowerCase() == "li")
+ {
+ document.getElementById("subscribeTo").value = el.innerHTML;
+ subscribe();
+ }
+ }
+
+ function bind(type, el, func)
+ {
+ if(el.addEventListener)
+ {
+ el.addEventListener(type, func, false);
+ }
+ else if(el.attachEvent)
+ {
+ el.attachEvent("on" + type, func);
+ }
+ else alert("can't bind to \"" + type + "\" event");
+ }
+
+ bind("load", window, function()
+ {
+ bind("click", document.getElementById("topicList"), subscribeToTopic);
+ });
+ </script>
+</head>
+<body>
+ <h3>Available Topics</h3>
+ <p>Click to subscribe.</p>
+ <ul id="topicList">
+ <li>/KWWIKA/TWITTER/HASHTAGS/NOWPLAYING</li>
+ <li>/KWWIKA/TWITTER/HASHTAGS/TECH</li>
+ <li>/KWWIKA/TWITTER/HASHTAGS/TWITTERART</li>
+ <li>/KWWIKA/TWITTER/SEARCHES/KWWIKA</li>
+ <li>/AARONBASSETT/TWITTER/HASHTAGS/BARCAMP</li>
+ </ul>
+
+ <h3>Subscribed</h3>
+ <span>Subscribed to:</span>
+ <input type="text" id="subscribeTo" readonly="readonly" />
+ <!--input type="button" value="Subscribe" id="subscribeToBtn" onclick="subscribe();" disabled="disabled" /-->
+
+ <!-- Real-Time updates -->
+ <div id="latest_update" class="shadowed"></div>
+
+ <div id="debuglog"></div>
+
+ <!-- Connection indicator -->
+ <div id="connection_status" class="top right shadowed">
+ <div id="connection_status_message" class="statusMessage"></div>
+ <img id="connection_status_image" width="20" height="20" alt="Not connected" src="images/notconnected.png" />
+ </div>
+
+</body>
+</html>
@@ -0,0 +1,117 @@
+body {
+ font-family: Tahoma, Calibri, Verdana, Arial, sans-serif;
+}
+
+.shadowed {
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+
+ box-shadow: 10px 10px 5px #888;
+ -moz-box-shadow:10px 10px 5px #888;
+ -webkit-box-shadow: 10px 10px 5px #888;
+ padding: 5px 5px 5px 15px;
+ border: 1px solid #000;
+ margin-bottom: 10px;
+ margin-right: 10px;
+
+ background-color: white;
+}
+
+.statusMessage {
+ font-family: Tahoma;
+ font-size: 10px;
+ width: 100px;
+ float: left;
+ line-height: 20px;
+}
+
+.top {
+ position: fixed;
+ top: 0px;
+}
+
+.bottom {
+ position: fixed;
+ bottom: 0px;
+}
+
+.right {
+ position: fixed;
+ right: 0px;
+}
+
+.log-message {
+ font-family: courier, monospace;
+ padding-left: 20px;
+}
+
+.message {
+ border-top: 1px solid #b0b0ff;
+ background-color: #f0f0ff;
+}
+
+.avatar {
+ border: 0px;
+ width: 48px;
+ height: 48px;
+ vertical-align: text-top;
+}
+
+.messagebody {
+ padding-left: 55px;
+}
+
+.screenName {
+ font-style: italic;
+ padding-right: 10px;
+}
+
+.time {
+ font-style: italic;
+}
+
+.profile {
+ float: left;
+}
+
+.clear {
+ clear: both;
+ height: 10px;
+ background-color: white;
+}
+
+label {
+ display: inline-block;
+ width: 120px;
+ text-align: right;
+ margin-right: 10px;
+}
+
+#subscribeTo
+{
+ width: 400px;
+}
+
+#topicList
+{
+ overflow: auto;
+}
+
+#topicList li
+{
+ float: left;
+ clear: both;
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+#topicList li: hover
+{
+ color: #E7E7E7;
+}
+
+#latest_update
+{
+ margin-top: 20px;
+}

0 comments on commit e995eb5

Please sign in to comment.