Placard contenteditable div support

index.html

@@ -719,6 +719,34 @@ <h5>Header</h5>
 							</div>
 						</div>
 					</div>
+
+					<br/>
+
+					<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard4">
+						<div class="placard-popup"></div>
+						<div class="placard-header">
+							<h5>Header</h5>
+						</div>
+						<div class="form-control placard-field" contenteditable="true"></div>
+						<div class="placard-footer">
+							<a class="placard-cancel" href="#">Cancel</a>
+							<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
+						</div>
+					</div>
+
+					<div style="display: inline-block; padding: 10px;">
+						<div class="placard" data-initialize="placard" id="myPlacard5">
+							<div class="placard-popup"></div>
+							<div class="placard-header">
+								<h5>Header</h5>
+							</div>
+							<div class="form-control placard-field" contenteditable="true" data-textarea="true"></div>
+							<div class="placard-footer">
+								<a class="placard-cancel" href="#">Cancel</a>
+								<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
+							</div>
+						</div>
+					</div>
 				</div>
 				<div class="btn-panel">
 					<button type="button" class="btn btn-default" id="btnPlacardEnable">enable</button>

js/placard.js

@@ -52,10 +52,13 @@
 		this.clickStamp = '_';
 		this.previousValue = '';
 		if (this.options.revertOnCancel === -1) {
-			this.options.revertOnCancel = (this.$accept.length > 0) ? true : false;
+			this.options.revertOnCancel = (this.$accept.length > 0);
 		}
 
+		// Placard supports inputs, textareas, or contenteditable divs. These checks determine which is being used
+		this.isContentEditableDiv = this.$field.is('div');
 		this.isInput = this.$field.is('input');
+		this.divInTextareaMode = (this.isContentEditableDiv && this.$field.attr('data-textarea') === 'true');
 
 		this.$field.on('focus.fu.placard', $.proxy(this.show, this));
 		this.$field.on('keydown.fu.placard', $.proxy(this.keyComplete, this));
@@ -69,10 +72,7 @@
 	};
 
 	var _isShown = function _isShown(placard) {
-		if (placard.$element.hasClass('showing')) {
-			return true;
-		}
-		return false;
+		return placard.$element.hasClass('showing');
 	};
 
 	var _closeOtherPlacards = function _closeOtherPlacards() {
@@ -115,7 +115,7 @@
 		},
 
 		keyComplete: function keyComplete(e) {
-			if (this.isInput && e.keyCode === 13) {
+			if (((this.isContentEditableDiv && !this.divInTextareaMode) || this.isInput) && e.keyCode === 13) {
 				this.complete('accepted');
 				this.$field.blur();
 			} else if (e.keyCode === 27) {
@@ -128,7 +128,7 @@
 			this.$element.remove();
 			// remove any external bindings
 			$(document).off('click.fu.placard.externalClick.' + this.clickStamp);
-			// set input value attrbute
+			// set input value attribute
 			this.$element.find('input').each(function () {
 				$(this).attr('value', $(this).val());
 			});
@@ -141,14 +141,17 @@
 		disable: function disable() {
 			this.$element.addClass('disabled');
 			this.$field.attr('disabled', 'disabled');
+			if (this.isContentEditableDiv) {
+				this.$field.removeAttr('contenteditable');
+			}
 			this.hide();
 		},
 
 		applyEllipsis: function applyEllipsis() {
 			var field, i, str;
 			if (this.options.applyEllipsis) {
 				field = this.$field.get(0);
-				if (this.$field.is('input')) {
+				if ((this.isContentEditableDiv && !this.divInTextareaMode) || this.isInput) {
 					field.scrollLeft = 0;
 				} else {
 					field.scrollTop = 0;
@@ -165,7 +168,6 @@
 						str = (str.length > 0) ? str.substring(0, str.length - 1) : '';
 						this.setValue(str + '...', true);
 					}
-
 				}
 
 			}
@@ -174,6 +176,9 @@
 		enable: function enable() {
 			this.$element.removeClass('disabled');
 			this.$field.removeAttr('disabled');
+			if (this.isContentEditableDiv) {
+				this.$field.attr('contenteditable', 'true');
+			}
 		},
 
 		externalClickListener: function externalClickListener(e, force) {
@@ -185,6 +190,8 @@
 		getValue: function getValue() {
 			if (this.actualValue !== null) {
 				return this.actualValue;
+			} else if (this.isContentEditableDiv) {
+				return this.$field.html();
 			} else {
 				return this.$field.val();
 			}
@@ -235,11 +242,15 @@
 		 */
 		setValue: function setValue(val, suppressEllipsis) {
 			//if suppressEllipsis is undefined, check placards init settings
-			if(typeof suppressEllipsis === "undefined"){
+			if (typeof suppressEllipsis === 'undefined') {
 				suppressEllipsis = !this.options.applyEllipsis;
 			}
 
-			this.$field.val(val);
+			if (this.isContentEditableDiv) {
+				this.$field.empty().append(val);
+			} else {
+				this.$field.val(val);
+			}
 
 			if (!suppressEllipsis && !_isShown(this)) {
 				this.applyEllipsis();
@@ -249,13 +260,13 @@
 		},
 
 		show: function show() {
-			if(_isShown(this)){return;}
-			if(!_closeOtherPlacards()){return;}
+			if (_isShown(this)) { return; }
+			if (!_closeOtherPlacards()) { return; }
 
-			this.previousValue = this.$field.val();
+			this.previousValue = (this.isContentEditableDiv) ? this.$field.html() : this.$field.val();
 
 			if (this.actualValue !== null) {
-				this.setValue(this.actualValue);
+				this.setValue(this.actualValue, true);
 				this.actualValue = null;
 			}
 

less/placard.less

@@ -7,14 +7,14 @@
 
 		&[data-ellipsis="true"] {
 			&.showing {
-				input.placard-field {
-					overflow: visible;
+				div.placard-field, input.placard-field {
+					overflow: auto;
 					text-overflow: clip;
 					white-space: normal;
 				}
 			}
 
-			input.placard-field {
+			div.placard-field, input.placard-field {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -24,6 +24,12 @@
 				}
 			}
 
+			div.placard-field[data-textarea] {
+				overflow: auto;
+				text-overflow: clip;
+				white-space: normal;
+			}
+
 			textarea.placard-field {
 				&[readonly] {
 					overflow: hidden;
@@ -39,7 +45,7 @@
 				z-index: 1;
 			}
 
-			input.placard-field, textarea.placard-field {
+			div.placard-field, input.placard-field, textarea.placard-field {
 				background: @true-white;
 				border: 1px solid @gray80;
 				box-shadow: none;
@@ -48,7 +54,7 @@
 			}
 		}
 
-		input.placard-field, textarea.placard-field {
+		div.placard-field, input.placard-field, textarea.placard-field {
 			resize: none;
 
 			&[readonly] {
@@ -71,6 +77,15 @@
 			}
 		}
 
+		div.placard-field {
+			width: 168px;
+			overflow: auto;
+
+			&[data-textarea] {
+				height: 54px;
+			}
+		}
+
 		&-cancel {
 			font-size: 12px;
 			margin-right: 4px;

markup/placard-variations.txt

@@ -1,6 +1,10 @@
 //Text area placard
 - replace input element classed '.placard-field' with the following:
-    '<textarea class="form-control placard-field" readonly="readonly"></textarea>'
+    '<textarea class="form-control placard-field"></textarea>'
+
+//Content-editable div placard
+- replace input element classed '.placard-field' with the following:
+    '<div class="form-control placard-field" contenteditable="true"></div>'
 
 //Glass styling
 - add the class 'glass' to the '.placard-field' element

test/markup/placard-markup.html

@@ -24,6 +24,16 @@
 		</div>
 	</div>
 
+	<div class="placard" data-ellipsis="true" id="placard3">
+		<div class="placard-popup"></div>
+		<div class="placard-header"><h5>Header</h5></div>
+		<div class="form-control placard-field" contenteditable="true"></div>
+		<div class="placard-footer">
+			<a class="placard-cancel" href="#">Cancel</a>
+			<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
+		</div>
+	</div>
+
 </div>
 </body>
 </html>

test/placard-test.js

@@ -56,6 +56,23 @@ define(function(require){
 		$placard.remove();
 	});
 
+	test('should behave as expected - contenteditable div', function(){
+		var $placard = $(html).find('#placard3');
+
+		$placard.placard();
+		$placard.on('cancelled.fu.placard', function(e, helpers){
+			ok(1===1, 'default action event (cancel) triggered upon external click');
+		});
+		$('body').append($placard);
+
+		$placard.find('.placard-field').focus().focus();
+		equal($placard.hasClass('showing'), true, 'placard shows when appropriate');
+
+		$('body').click();
+		equal($placard.hasClass('showing'), false, 'placard hides when appropriate');
+		$placard.remove();
+	});
+
 	test('show/hide functions should behave as expected', function(){
 		var $placard = $(html).find('#placard1');
 		$placard.placard();