--- a/client/css/renkan.css Tue Aug 21 12:46:11 2012 +0200
+++ b/client/css/renkan.css Tue Aug 21 16:27:26 2012 +0200
@@ -114,11 +114,11 @@
}
.Rk-Search-Input {
- width: 180px;
+ width: 150px;
}
.Rk-Search-Select {
- width: 100px;
+ width: 130px;
}
.Rk-Bin-Title {
@@ -130,7 +130,7 @@
overflow: auto;
}
-.Rk-Twitter-Tweet {
+.Rk-Twitter-Tweet, .Rk-Wikipedia-Result {
padding: 2px; background: #f8f8f8; border-bottom: 1px solid #cccccc; min-height: 55px;
}
@@ -142,7 +142,7 @@
margin: 2px 0 2px 50px;
}
-.Rk-Twitter-TwTitle {
+.Rk-Twitter-TwTitle, .Rk-Wikipedia-Title {
font-size: 13px; font-weight: bold;
}
@@ -150,6 +150,10 @@
font-size: 11px; font-style: italic;
}
-.Rk-Twitter-TwText {
+.Rk-Twitter-TwText, .Rk-Wikipedia-Snippet {
font-size: 12px;
-}
\ No newline at end of file
+}
+
+.Rk-Wikipedia-Result .searchmatch, .Rk-Twitter-TwText .searchmatch {
+ background: #ffff80;
+}
--- a/client/js/full-json.js Tue Aug 21 12:46:11 2012 +0200
+++ b/client/js/full-json.js Tue Aug 21 16:27:26 2012 +0200
@@ -7,48 +7,12 @@
}
var _load = function() {
Rkns.$.getJSON(_opts.url, function(_data) {
- _proj.get("users").add(_data.users);
- Rkns._(_data.nodes).each(function(_item) {
- _proj.addNode(_item);
- });
- Rkns._(_data.edges).each(function(_item) {
- _proj.addEdge(_item);
- });
+ console.log("Setting data");
+ _proj.set(_data);
});
}
var _save = function() {
- var _data = {
- users: _proj.get("users").map(function(_item) {
- return {
- id: _item.get("id"),
- title: _item.get("title"),
- uri: _item.get("uri"),
- description: _item.get("description"),
- color: _item.get("color")
- }
- }),
- nodes: _proj.get("nodes").map(function(_item) {
- return {
- id: _item.get("id"),
- title: _item.get("title"),
- uri: _item.get("uri"),
- description: _item.get("description"),
- position: _item.get("position"),
- created_by: _item.get("created_by").get("id")
- }
- }),
- edges: _proj.get("edges").map(function(_item) {
- return {
- id: _item.get("id"),
- title: _item.get("title"),
- uri: _item.get("uri"),
- description: _item.get("description"),
- from: _item.get("from").get("id"),
- to: _item.get("to").get("id"),
- created_by: _item.get("created_by").get("id")
- }
- })
- };
+ var _data = _proj.toJSON();
Rkns.$.ajax({
type: _opts.http_method,
url: _opts.url,
--- a/client/js/main.js Tue Aug 21 12:46:11 2012 +0200
+++ b/client/js/main.js Tue Aug 21 16:27:26 2012 +0200
@@ -84,24 +84,35 @@
if (!_opts.search.length) {
this.$.find(".Rk-Search-Form").detach();
} else {
- var _tmpl = Rkns._.template('<option value="<%= name %>"><%= name %></option>');
- this.$.find(".Rk-Search-Select").html(
- Rkns._(_opts.search).map(function(_name) {
- return _tmpl({name:_name});
+ var _tmpl = Rkns._.template('<option value="<%= key %>"><%= value.title %></option>'),
+ _select = this.$.find(".Rk-Search-Select"),
+ _input = this.$.find(".Rk-Search-Input")
+ _form = this.$.find(".Rk-Search-Form");
+ _select.html(
+ Rkns._(_opts.search).map(function(_value, _key) {
+ return _tmpl({
+ key: _key,
+ value: _value
+ });
}).join("")
- );
+ ).change(function() {
+ _form.submit();
+ });
+ _form.submit(function() {
+ if (_input.val()) {
+ var _search = _opts.search[_select.val()];
+ _this.tabs.push(
+ new _search.bin(
+ _this,
+ Rkns._({ search: _input.val() }).defaults(_search)
+ )
+ );
+ }
+ return false;
+
+ });
}
- this.$.find(".Rk-Search-Form").submit(function() {
- _this.tabs.push(
- new Rkns.Bins[_this.$.find(".Rk-Search-Select").val()](
- _this,
- {
- search: _this.$.find(".Rk-Search-Input").val()
- }
- )
- );
- return false;
- });
+
this.$.find(".Rk-Bins")
.click(function(_e) {
if (_e.target.className == "Rk-Bin-Title") {
--- a/client/js/models.js Tue Aug 21 12:46:11 2012 +0200
+++ b/client/js/models.js Tue Aug 21 16:27:26 2012 +0200
@@ -54,8 +54,16 @@
prepare: function(options) {
options.color = options.color || "#666666";
return options;
- }
-
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ color: this.get("color"),
+ }
+ },
});
// NODE
@@ -71,8 +79,17 @@
this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user);
options.description = options.description || "";
return options;
- }
-
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ position: this.get("position"),
+ created_by: this.get("created_by").get("id")
+ }
+ },
});
// EDGE
@@ -101,7 +118,18 @@
this.addReference(options, "from", project.get("nodes"), options.from);
this.addReference(options, "to", project.get("nodes"), options.to);
return options;
- }
+ },
+ toJSON: function() {
+ return {
+ id: this.get("id"),
+ title: this.get("title"),
+ uri: this.get("uri"),
+ description: this.get("description"),
+ from: this.get("from").get("id"),
+ to: this.get("to").get("id"),
+ created_by: this.get("created_by").get("id"),
+ }
+ },
});
// PROJECT
@@ -160,6 +188,18 @@
removeEdge: function(_model) {
this.get("edges").remove(_model);
},
+ validate: function(options) {
+ var _project = this;
+ _(options.users).each(function(_item) {
+ _item.project = _project;
+ });
+ _(options.nodes).each(function(_item) {
+ _item.project = _project;
+ });
+ _(options.edges).each(function(_item) {
+ _item.project = _project;
+ });
+ },
// Add event handler to remove edges when a node is removed
initialize: function() {
var _this = this;
--- a/client/js/twitter-bin.js Tue Aug 21 12:46:11 2012 +0200
+++ b/client/js/twitter-bin.js Tue Aug 21 16:27:26 2012 +0200
@@ -20,6 +20,10 @@
Rkns.$.getJSON(
"http://search.twitter.com/search.json?q=" + encodeURIComponent(this.search) + "&callback=?",
function(_data) {
+ var _rgxp = new RegExp('('+_this.search.replace(/(\W)/g,'\\$1')+')','gi');
+ function highlight(_text) {
+ return _text.replace(_rgxp, "<span class='searchmatch'>$1</span>");
+ }
var _html = Rkns._(_data.results).map(function(_result) {
var _entities = [],
_users = _result.text.match(/@[\w_]+/gm),
@@ -72,10 +76,10 @@
_entities = Rkns._(_entities).sortBy(function(a) { return a.start });
var _lastend = 0,
_text = Rkns._(_entities).map(function(_e) {
- var _txt = _result.text.substring(_lastend, _e.start) + _e.link + _e.text + '</a>';
+ var _txt = highlight(_result.text.substring(_lastend, _e.start)) + _e.link + highlight(_e.text) + '</a>';
_lastend = _e.end;
return _txt;
- }).join("") + _result.text.substring(_lastend);
+ }).join("") + highlight(_result.text.substring(_lastend));
return _this.tweetTemplate({
tweet: _result,
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/wikipedia-bin.js Tue Aug 21 16:27:26 2012 +0200
@@ -0,0 +1,30 @@
+Rkns.Bins.Wikipedia = Rkns.Utils.inherit(Rkns.Bins._Base);
+
+Rkns.Bins.Wikipedia.prototype.resultTemplate = Rkns._.template(
+ '<li class="Rk-Wikipedia-Result Rk-Bin-Item" data-uri="<%=wpurl%>" '
+ + 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>">'
+ + '<h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>'
+ + '<p class="Rk-Wikipedia-Snippet"><%=result.snippet%></p></li>'
+);
+
+Rkns.Bins.Wikipedia.prototype._init = function(_renkan, _opts) {
+ this.search = _opts.search;
+ this.lang = _opts.lang || "en";
+ this.title_$.html(_opts.title + ': "' + this.search + '"')
+ var _this = this;
+ Rkns.$.getJSON(
+ "http://" + _this.lang + ".wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodeURIComponent(this.search) + "&format=json&callback=?",
+ function(_data) {
+ var _rgxp = new RegExp('('+_this.search.replace(/(\W)/g,'\\$1')+')','gi'),
+ _html = Rkns._(_data.query.search).map(function(_result) {
+ return _this.resultTemplate({
+ result: _result,
+ wpurl: "http://" + this.lang + ".wikipedia.org/wiki/" + encodeURI(_result.title.replace(/ /g,"_")),
+ highlightedtitle: _result.title.replace(_rgxp, "<span class='searchmatch'>$1</span>"),
+ wpdesc: Rkns.$('<div>').html(_result.snippet).text()
+ });
+ }).join("");
+ _this.main_$.html(_html);
+ }
+ );
+}
\ No newline at end of file
--- a/client/render-test.html Tue Aug 21 12:46:11 2012 +0200
+++ b/client/render-test.html Tue Aug 21 16:27:26 2012 +0200
@@ -18,13 +18,33 @@
<script src="js/full-json.js"></script>
<script src="js/random-data.js"></script>
<script src="js/twitter-bin.js"></script>
+ <script src="js/wikipedia-bin.js"></script>
<script src="js/paper-renderer.js"></script>
<script type="text/javascript">
var _proj;
$(function() {
_renkan = new Rkns.Renkan({
url: "data/simple-persist.php",
- search: [ "Twitter" ],
+ search: [
+ {
+ title: "French Wikipedia",
+ bin: Rkns.Bins.Wikipedia,
+ lang: "fr"
+ },
+ {
+ title: "English Wikipedia",
+ bin: Rkns.Bins.Wikipedia,
+ lang: "en"
+ },
+ {
+ title: "Japanese Wikipedia",
+ bin: Rkns.Bins.Wikipedia,
+ lang: "jp"
+ }, {
+ title: "Twitter",
+ bin: Rkns.Bins.Twitter
+ },
+ ],
user_id: "u-anonymous"
});
Rkns.jsonIO(_renkan, {