Merge pull request #13 from thenextweb/word-count

Literally count word height to ensure number of lines is enforced
thenextweb · Jan 17, 2017 · 0d4b414 · 0d4b414
2 parents 33bf7b2 + 2c61e35
commit 0d4b414
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "indexdotco-js",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "Javascript plugin for Index.co embeds",
   "main": "index.js",
   "scripts": {

diff --git a/src/attach.js b/src/attach.js
@@ -11,8 +11,7 @@ var elementCreated = new Event(config.prefix+'elementCreated',{bubbles:true});
 var popoverCreated = new Event(config.prefix+'popoverCreated',{bubbles:true});
 
 
-var attachCard = function($element) {
-
+var attachCard = function($element,settings) {
 	let parsedElement = parseElement($element);
 	let rq = requestCardData(parsedElement.entity);
 	let $card = window.jQuery('<div></div>').addClass(config.prefix+'cardStandalone')
@@ -26,9 +25,10 @@ var attachCard = function($element) {
 			let card = new Card({
 				data:data,
 				actionable:true,
-				dark: isDark
+				dark: isDark,
+				settings: settings
 			});
-			$card.append(card.domElement);
+			card.place($card);
 			$element[0].dispatchEvent(elementCreated);
 		} catch(error){
 			console.error(`[index] error building card for ${parsedElement.entity}`);
@@ -38,7 +38,7 @@ var attachCard = function($element) {
 }
 
 
-var attachList = function($element) {
+var attachList = function($element,settings) {
 
 	var parsedElement = parseElement($element);
 	var rq = requestListData(parsedElement.entity);
@@ -51,9 +51,10 @@ var attachList = function($element) {
 			for (const data of many_data) {
 				let card = new Card({
 					data:data,
-					actionable:true
+					actionable:true,
+					settings: settings
 				});
-				$card.append(card.domElement);
+				card.place($card);
 				let $a = base.clone();
 				$card.after($a);
 				$card = $a;
@@ -81,10 +82,11 @@ var attachHoverable = function($element,settings) {
 			rq.done(function(data){
 				try {
 					let card = new Card({
-						data: data
+						data: data,
+						settings: settings
 					});
 					let popover = new Popover({
-						html: card.domElement,
+						element: card,
 						top: $element.offset().top,
 						left: $element.offset().left + ($element.outerWidth() / 2),
 						origin: $element[0]
@@ -122,7 +124,7 @@ const attach = function(typeOrTypes,settings) {
 
 	if(typeof typeOrTypes === 'object') {
 		typeOrTypes.map(function(type){
-			attach(type);
+			attach(type,settings);
 		})
 	}
 	else {

diff --git a/src/config.js b/src/config.js
@@ -10,7 +10,8 @@ config.endpoint = 'https://index.co/api/';
 
 config.defaults = {
 	disableCss: false,
-	delay: false
+	delay: false,
+	maxLines: 6
 }
 
 export default config;
diff --git a/src/element/AbstractElement.js b/src/element/AbstractElement.js
@@ -2,14 +2,6 @@ import config from 'config';
 
 export default class AbstractElement {
 
-	get domElement(){
-		return this.$element;
-	}
-
-	get domElementRaw() {
-		return this.$element[0];
-	}
-
 	on(event,callback){
 		this.$element.on('internal-'+config.prefix+event,callback);
 	}
@@ -24,7 +16,7 @@ export default class AbstractElement {
 
 	place($location) {
 		if(!$location) $location = window.jQuery('body');
-		$location.append(this.domElement);
+		$location.append(this.$element);
 	}
 
 	constructor(params){

diff --git a/src/element/Card.js b/src/element/Card.js
@@ -6,6 +6,40 @@ import template from './../template/card.mustache';
 
 export default class Card extends AbstractElement {
 
+	place($location) {
+
+		super.place($location);
+		const self = this;
+		const $element = self.$element;
+		const data = self._data;
+		const settings = self._settings;
+
+		const taglineTextAsArray = data.profile.tagline.split(' ');
+		const $taglineTextDiv = $element.find('.'+config.cardPrefix+'tagline-text');
+
+		let lines = 0;
+		let lastHeight = 0;
+		let words;
+		for(words = 0;words < taglineTextAsArray.length; words++){
+			$taglineTextDiv.text(taglineTextAsArray.slice(0,words).join(' ')+'…');
+			if($taglineTextDiv[0].offsetHeight > lastHeight) {
+				lines++;
+				lastHeight = $taglineTextDiv[0].offsetHeight;
+			}
+			if(lines > settings.maxLines) {
+				words = words -1;
+				break;
+			}
+		}
+		var taglineTextAsArrayTrimmed = taglineTextAsArray.slice(0,words);
+		$taglineTextDiv.text(taglineTextAsArrayTrimmed.join(' '));
+		if(taglineTextAsArrayTrimmed.length < taglineTextAsArray.length) {
+			$taglineTextDiv.append('<span>…</span>');
+		}
+
+	}
+
+
 	makeElement(params) {
 
 		let data = params.data;
@@ -22,7 +56,10 @@ export default class Card extends AbstractElement {
 			}
 		);
 
-		return $element;
+		this._data = data;
+		this._settings = params.settings?params.settings:{};
+
+		return $($element);
 
 	}
 

diff --git a/src/element/Popover.js b/src/element/Popover.js
@@ -19,20 +19,20 @@ export default class Popover extends AbstractElement {
 	place(){
 
 		let self = this;
-		self.domElement.css({
+		self.$element.css({
 			visibility:'hidden'
 		});
 		super.place();
-		self.domElement.css({
-			top: this.position.top - self.domElement.outerHeight() - 5,
-			left: this.position.left - (self.domElement.outerWidth()/2),
+		self.$element.css({
+			top: this.position.top - self.$element.outerHeight() - 5,
+			left: this.position.left - (self.$element.outerWidth()/2),
 			visibility:'visible'
 		});
-		self.domElement.addClass(config.prefix+'popover--in');
-		self.domElement.one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd',function(){
-			self.domElement.removeClass(config.prefix+'popover--in');
+		self.$element.addClass(config.prefix+'popover--in');
+		self.$element.one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd',function(){
+			self.$element.removeClass(config.prefix+'popover--in');
 		})
-		self.domElementRaw.addEventListener('mouseleave',function(ev){
+		self.$element[0].addEventListener('mouseleave',function(ev){
 			self.remove();
 		});
 		self.origin.addEventListener('mouseleave',function(ev){
@@ -54,7 +54,12 @@ export default class Popover extends AbstractElement {
 		this.origin = params.origin;
 
 		$popover.attr('class',config.prefix+'popover');
-		$popover.html(params.html);
+		if(params.element) {
+			params.element.place($popover);
+		}
+		else {
+			$popover.html(params.html);
+		}
 		return $popover;
 
 	}

diff --git a/src/template/base.css b/src/template/base.css
@@ -167,11 +167,18 @@
 	font-weight: 300;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	flex: 1 1 0;
 }
 
-.idc-card-expando {
-	flex: 1 1 0;
-	display: block;
+.idc-card-tagline-text {
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	-ms-word-break: break-all;
+	word-break: break-word;
+	-ms-hyphens: auto;
+	-moz-hyphens: auto;
+	-webkit-hyphens: auto;
+	hyphens: auto;
 }
 
 .idc-card-facts {

diff --git a/src/template/card.mustache b/src/template/card.mustache
@@ -41,9 +41,8 @@
 			class="{{config.cardPrefix}}header-avatar"
 			src="{{data.profile.avatar}}"
 		>
-		<p>{{data.profile.tagline}}</p>
+		<p class="{{config.cardPrefix}}tagline-text"></p>
 	</div>
-	<div class="{{config.cardPrefix}}expando"></div>
 	<a
 		class="{{config.cardPrefix}}footer"
 		href= "{{data.profile.index_url}}"

diff --git a/test/index.html b/test/index.html
@@ -11,15 +11,15 @@ <h1 class="header-logo">Test Page</h1>
 		<div class="layout">
 			<div class="layout-col layout-col--body">
 				<a href='https://index.co/company/indexdotco' target='_blank' class='idc-hasCard'></a>
-				<a href='https://index.co/company/thenextweb' target='_blank' class='idc-hasCard idc-hasCard--dark'></a>
+				<a href='https://index.co/company/uber' target='_blank' class='idc-hasCard idc-hasCard--dark'></a>
 				<a href='https://index.co/company/overnightapp' target='_blank' class='idc-hasCard'></a>
 				<hr>
 				<a href='https://index.co/company/indexdotco' target='_blank' class='idc-hasIcon'></a>
-				<a href='https://index.co/company/thenextweb' target='_blank' class='idc-hasIcon'></a>
+				<a href='https://index.co/company/uber' target='_blank' class='idc-hasIcon'></a>
 				<a href='https://index.co/company/overnightapp' target='_blank' class='idc-hasIcon'></a>
 				<hr>
 				<a href='https://index.co/company/indexdotco' target='_blank' class='idc-hasHover'>😀</a>
-				<a href='https://index.co/company/thenextweb' target='_blank' class='idc-hasHover'>😬</a>
+				<a href='https://index.co/company/uber' target='_blank' class='idc-hasHover'>😬</a>
 				<a href='https://index.co/company/overnightapp' target='_blank' class='idc-hasHover'>😁</a>
 			</div>
 			<div class="layout-col layout-col--console">