From: Jason Skomorowski Date: Thu, 29 May 2014 22:17:26 +0000 (-0400) Subject: Example adding bootstrap to the credo widget. X-Git-Tag: 1.0.0~561 X-Git-Url: http://jsfdemo.indexdata.com/cgi-bin?a=commitdiff_plain;h=becf2587f3e103ddcf0247e55bc9de7ec261f5a4;p=mkws-moved-to-github.git Example adding bootstrap to the credo widget. --- diff --git a/examples/htdocs/mkws-widget-credo-bs.js b/examples/htdocs/mkws-widget-credo-bs.js new file mode 100644 index 0000000..7c143c1 --- /dev/null +++ b/examples/htdocs/mkws-widget-credo-bs.js @@ -0,0 +1,118 @@ +// The Google Images database returns links like: +// http://images.google.com/url?q=http://eofdreams.com/fish.html&sa=U&ei=RAB-U9XNDo2Dqga1o4L4Bw&ved=0CC4Q9QEwAA&usg=AFQjCNFhRtn6GMevHbpITZ6kfx6rsHV2ow +// This Handlebars helper avoids a pointless redirect by transforming +// this to the URL of the underling page, in this case +// http://eofdreams.com/fish.html +// +Handlebars.registerHelper('mkws-googleurl', function(obj) { + if (!obj) { + return "obj undefined"; + } else if (!obj[0]) { + return "obj[0] undefined, JSON=" + $.toJSON(obj); + } else { + return mkws.getParameterByName('q', obj[0]); + } +}); + + +// ### This works inefficiently by having multiple teams all run the +// same search against different sets of targets. A much better +// approach would be run a single search, with all these panels +// members of the same team, but picking out only the results relevant +// to them. That will be more work. + +mkws.registerWidgetType('Credo', function() { + var that = this; + + this.team.registerTemplate('CredoImage', '\ +
\ + \ + {{#mkws-first md-thumburl}}\ + {{../md-title}}\ + {{/mkws-first}}\ +
\ + \ +

{{md-title}}

\ +
\ +'); + + var s = [] + // Main panel: encylopaedia and images on the left, topics on the right + s.push('
'); + + s.push('
'); + //s.push(section('encyclopaedia', 'Topic Page: ', + s.push(this.subwidget('Reference', { _team: 'ref', paragraphs: 1 })); + // The Images widget needs to be in our team so we can set its template + s.push('
'); + + s.push('
'); + s.push(section('mindmap', 'Create a Mind Map for ', + this.subwidget('Mindmap', { _team: 'main', facet: 'subject' }))); + s.push(section('topics', 'Related Topics', + this.subwidget('Facet', { _team: 'main', facet: 'subject' }))); + s.push('
'); + + s.push('
'); + + s.push('
'); + s.push(section('image col-md-12', 'Images', this.subwidget('GoogleImage', { maxrecs: 4, template: 'CredoImage' }))); + s.push('
'); + + + s.push('
'); + s.push(section('entries clearfix col-md-4 col-sm-6', 'Credo Entries', + this.subwidget('Records', { _team: 'main' }))); + s.push(section('articles clearfix col-md-4 col-sm-6', 'Articles', + this.subwidget('Records', { _team: 'articles', targetfilter: 'categories=articles' }))); + s.push(section('books clearfix col-md-4 col-sm-6', 'Books', + this.subwidget('Records', { _team: 'books', targetfilter: 'categories=books' }))); + s.push(section('news col-md-4 col-sm-6', 'News', + this.subwidget('Records', { _team: 'news', targetfilter: 'categories=news' }))); + s.push(section('resources col-md-4 col-sm-6', 'Suggested Resources', + "### Not yet implemented")); + s.push('
'); + this.node.html(s.join('')); + + // Fill in the titles from the query once widgets have all been prepared + var that = this; + this.team.queue("ready").subscribe(function() { + var query = toTitleCase(that.config.query); + that.log("got query '" + query + "' from team config"); + mkws.$('.x-mkws-title').html(query); + mkws.$('title').html("MKWS: " + query); + + mkws.$(".mkwsSummary img").addClass("media-object"); + console.log(mkws.$("body").html()); + + // Derived from http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript + function toTitleCase(str) { + return str.replace(/\w\S*/g, function(txt) { + return txt.charAt(0).toUpperCase() + txt.substr(1); + }); + } + }); + + + function section(xclass, title, content) { + var s = []; + s.push('
'); + s.push('

' + title + '

'); + s.push('
' + content + '
'); + s.push('
'); + return s.join(''); + } + + function sectionRow(xclass, title, content) { + var s = []; + s.push('
'); + s.push(section(xclass, title, content)); + s.push('
'); + return s.join(''); + } +}); + + +mkws.registerWidgetType('Mindmap', function() { + this.node.html("### We do not yet have a Mindmap widget"); +}); diff --git a/examples/htdocs/ref-bootstrap.html b/examples/htdocs/ref-bootstrap.html new file mode 100644 index 0000000..91430f0 --- /dev/null +++ b/examples/htdocs/ref-bootstrap.html @@ -0,0 +1,40 @@ + + + + + + + MKWS demo: Compound reference widget + + + + + + + + + + + +
+ +