- Allows to collapse / expand extracted item fields.

scrapinghub · Apr 4, 2014 · 2a235ca · 2a235ca
1 parent c1cf26a
commit 2a235ca
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/slyd/media/js/templates/collapsible-text.handlebars b/slyd/media/js/templates/collapsible-text.handlebars
@@ -0,0 +1,8 @@
+{{view.displayedText}}
+{{#if view.collapsible}}
+	{{#if view.collapsed}}
+		<span class="blue-label collapse-button"> [+] </span>
+	{{else}}
+		<span class="blue-label collapse-button"> [-] </span>
+	{{/if}}
+{{/if}}
diff --git a/slyd/media/js/templates/topbar-browse.handlebars b/slyd/media/js/templates/topbar-browse.handlebars
@@ -56,7 +56,11 @@
 									{{#each view.textFields}}
 										<div style="margin-bottom:5px">
 											<span class="small-label blue-label">{{this.name}}:</span>
-											<span style="color:white;word-wrap:break-word;">{{this.value}}</span>
+											{{#each this.value}}
+												<span style="color:white;word-wrap:break-word;">
+													{{view ASTool.CollapsibleText fullText=this}}
+												</span>
+											{{/each}}
 										</div>
 									{{/each}}
 									{{#each view.imageFields}}

diff --git a/slyd/media/js/views.js b/slyd/media/js/views.js
@@ -739,6 +739,30 @@ ASTool.ImageView = Em.View.extend({
 	attributeBindings: ['src', 'width'],
 });
 
+ASTool.CollapsibleText = Em.View.extend({
+	fullText: null,
+	tagName: 'span',
+	collapsed: true,
+	trimTo: 400,
+	templateName: 'collapsible-text',
+
+	collapsible: function() {
+		return this.get('fullText').length > this.get('trimTo');
+	}.property('fullText', 'trimTo'),
+
+	displayedText: function() {
+		if (!this.get('collapsed')) {
+			return this.get('fullText');
+		} else {
+			return trim(this.get('fullText'), this.get('trimTo'));
+		}
+	}.property('collapsed', 'fullText', 'trimTo'),
+
+	click: function() {
+		this.set('collapsed', !this.get('collapsed'));
+	},
+});
+
 
 var ToolboxViewMixin = ASTool.ToolboxViewMixin;
 

diff --git a/slyd/media/main.html b/slyd/media/main.html
@@ -55,6 +55,7 @@
 		compile('js/templates/annotation-widget.handlebars');
 		compile('js/templates/floating-annotation-widget.handlebars');
 		compile('js/templates/edit-item.handlebars');
+		compile('js/templates/collapsible-text.handlebars');
 		compile('js/templates/item.handlebars');
 		compile('js/templates/navigation.handlebars');
 		compile('js/templates/toolbox.handlebars');