camskene · October 11, 2020 19:46
diff --git a/controllers.application\.js b/controllers.application\.js
 import Controller from '@ember/controller';

 export default class ApplicationController extends Controller {
  appName = 'Ember Truncate Text';
 }
diff --git a/styles.app\.css b/styles.app\.css
 html {
  font-size: 16px;
 }

 body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1rem;
 }

 .clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }

 .clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }

 .clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }

 .clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }

 .clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }

 .clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
diff --git a/templates.application\.hbs b/templates.application\.hbs
 {{#let "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur." as |lorem|}}
  <div class="grid gap-6">
    <div>
      <h4>Not truncated</h4>
      <p><TruncateText @text="Hello World" /></p>
    </div>

    <div>
      <h4>Single line</h4>
      <p><TruncateText @text={{lorem}} /></p>
    </div>

    <div>
      <h4>Multiple lines (2)</h4>
      <p><TruncateText @text={{lorem}} @numLines="2" /></p>
    </div>

    <div>
      <h4>Multiple lines (3)</h4>
      <p><TruncateText @text={{lorem}} @numLines="3" /></p>
    </div>

    <div>
      <h4>Multiple lines (4)</h4>
      <p><TruncateText @text={{lorem}} @numLines="4" /></p>
    </div>

    <div>
      <h4>Multiple lines (5)</h4>
      <p><TruncateText @text={{lorem}} @numLines="5" /></p>
    </div>

    <div>
      <h4>Wiggle room</h4>
      <p><TruncateText @text={{lorem}} @numLines="3" @wiggleRoom="2" /></p>
    </div>
  </div>
 {{/let}}
diff --git a/truncate-text.component\.js b/truncate-text.component\.js
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';

 export default class TruncateTextComponent extends Component {
  @tracked hasTextOverflow;

  get numLines() {
    return parseInt(this.args.numLines ?? 1, 10);
  }

  get maxLines() {
    return this.numLines + this.wiggleRoom;
  }

  get wiggleRoom() {
    return parseInt(this.args.wiggleRoom ?? 0, 10);
  }

  @action
  onDidInsert(element) {
    this.resizeObserver(element);
  }

  @action
  willTextOverflow(element) {
    let { scrollHeight, clientHeight } = element;
    let hasTextOverflow = scrollHeight !== clientHeight;
    console.log(hasTextOverflow, scrollHeight, clientHeight);
    return hasTextOverflow;
  }

  @action
  resizeObserver(element) {
    let ro = new ResizeObserver((entries) => {
      for (let entry of entries) {
        this.hasTextOverflow = this.willTextOverflow(entry.target);
      }
    });
    
    ro.observe(element);
  }
 }
diff --git a/truncate-text.template\.hbs b/truncate-text.template\.hbs
 <span
  class="clamp-{{this.maxLines}}"
  {{did-insert this.onDidInsert}}
 >  
  {{@text}}
 </span>

 {{#if this.hasTextOverflow}}
  <p>Has text overflow</p>
 {{/if}}
diff --git a/twiddle\.json b/twiddle\.json
 {
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "@ember/render-modifiers": "1.0.2"
  }
 }
	import Controller from '@ember/controller';

	export default class ApplicationController extends Controller {
	appName = 'Ember Truncate Text';
	}
	html {
	font-size: 16px;
	}

	body {
	margin: 12px 16px;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 1rem;
	}

	.clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.clamp-4 {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.clamp-5 {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	.clamp-6 {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}
	{{#let "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur." as \|lorem\|}}
	<div class="grid gap-6">
	<div>
	<h4>Not truncated</h4>
	<p><TruncateText @text="Hello World" /></p>
	</div>

	<div>
	<h4>Single line</h4>
	<p><TruncateText @text={{lorem}} /></p>
	</div>

	<div>
	<h4>Multiple lines (2)</h4>
	<p><TruncateText @text={{lorem}} @numLines="2" /></p>
	</div>

	<div>
	<h4>Multiple lines (3)</h4>
	<p><TruncateText @text={{lorem}} @numLines="3" /></p>
	</div>

	<div>
	<h4>Multiple lines (4)</h4>
	<p><TruncateText @text={{lorem}} @numLines="4" /></p>
	</div>

	<div>
	<h4>Multiple lines (5)</h4>
	<p><TruncateText @text={{lorem}} @numLines="5" /></p>
	</div>

	<div>
	<h4>Wiggle room</h4>
	<p><TruncateText @text={{lorem}} @numLines="3" @wiggleRoom="2" /></p>
	</div>
	</div>
	{{/let}}
	import Component from '@glimmer/component';
	import { action } from '@ember/object';
	import { tracked } from '@glimmer/tracking';

	export default class TruncateTextComponent extends Component {
	@tracked hasTextOverflow;

	get numLines() {
	return parseInt(this.args.numLines ?? 1, 10);
	}

	get maxLines() {
	return this.numLines + this.wiggleRoom;
	}

	get wiggleRoom() {
	return parseInt(this.args.wiggleRoom ?? 0, 10);
	}

	@action
	onDidInsert(element) {
	this.resizeObserver(element);
	}

	@action
	willTextOverflow(element) {
	let { scrollHeight, clientHeight } = element;
	let hasTextOverflow = scrollHeight !== clientHeight;
	console.log(hasTextOverflow, scrollHeight, clientHeight);
	return hasTextOverflow;
	}

	@action
	resizeObserver(element) {
	let ro = new ResizeObserver((entries) => {
	for (let entry of entries) {
	this.hasTextOverflow = this.willTextOverflow(entry.target);
	}
	});

	ro.observe(element);
	}
	}
	<span
	class="clamp-{{this.maxLines}}"
	{{did-insert this.onDidInsert}}
	>
	{{@text}}
	</span>

	{{#if this.hasTextOverflow}}
	<p>Has text overflow</p>
	{{/if}}
	{
	"version": "0.17.1",
	"EmberENV": {
	"FEATURES": {},
	"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
	"_APPLICATION_TEMPLATE_WRAPPER": true,
	"_JQUERY_INTEGRATION": true
	},
	"options": {
	"use_pods": true,
	"enable-testing": false
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
	"ember": "3.18.1",
	"ember-template-compiler": "3.18.1",
	"ember-testing": "3.18.1"
	},
	"addons": {
	"@glimmer/component": "1.0.0",
	"@ember/render-modifiers": "1.0.2"
	}
	}