Skip to content

Commit

Permalink
embed intent responsiveness and cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@gpoitch
gpoitch committed Sep 4, 2014
1 parent 76e465c commit 83a73ff
Show file tree
Hide file tree
Showing 12 changed files with 162 additions and 74 deletions.
2 changes: 1 addition & 1 deletion .jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"nonew" : true, // Prohibit use of constructors for side-effects.
"regexp" : true, // Prohibit `.` and `[^...]` in regular expressions.
"undef" : true, // Require all non-global variables be declared before they are used.
//"unused" : true, // Warn when variables are created but not used.
"unused" : true, // Warn when variables are created but not used.
"trailing" : true, // Prohibit trailing whitespaces.
"es3" : true, // Prohibit trailing commas for old IE
"esnext" : true, // Allow ES.next specific features such as `const` and `let`.
Expand Down
6 changes: 4 additions & 2 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@ body {
}

header {
background-color: rgba(255,255,255,0.92);
border-bottom: 1px solid #dcdcdc;
position: fixed;
left:0; right:0; top: 0;
z-index: 10;
height: 3.125em;
background-color: rgba(252,252,252,0.92);
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
color: #454545;
}

.demo-title {
Expand Down
2 changes: 1 addition & 1 deletion dist/content-kit-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}
.ck-editor blockquote {
border-left: 4px solid #0b8bff;
margin: 0 0 0 -1.2em;
margin: 1em 0 1em -1.2em;
padding-left: 1.05em;
color: #a0a0a0;
}
Expand Down
111 changes: 77 additions & 34 deletions dist/content-kit-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @version 0.1.0
* @author Garth Poitras <garth22@gmail.com> (http://garthpoitras.com/)
* @license MIT
* Last modified: Aug 31, 2014
* Last modified: Sep 4, 2014
*/

(function(exports, document) {
Expand Down Expand Up @@ -75,7 +75,7 @@ define("content-kit-compiler/compiler",
/**
* @method parse
* @param input
* @return Object
* @return Array
*/
Compiler.prototype.parse = function(input) {
return this.parser.parse(input);
Expand All @@ -84,12 +84,21 @@ define("content-kit-compiler/compiler",
/**
* @method render
* @param data
* @return Object
* @return String
*/
Compiler.prototype.render = function(data) {
return this.renderer.render(data);
};

/**
* @method sanitize
* @param input
* @return String
*/
Compiler.prototype.sanitize = function(input) {
return this.render(this.parse(input));
};

/**
* @method registerBlockType
* @param {Type} type
Expand Down Expand Up @@ -825,6 +834,8 @@ define("content-kit-compiler/parsers/html-parser",
var unwrapNode = __dependency7__.unwrapNode;
var attributesForNode = __dependency7__.attributesForNode;

var attributeBlacklist = { 'style': 1, 'class': 1 }; // filter out inline styles and classes

/**
* Gets the last block in the set or creates and return a default block if none exist yet.
*/
Expand Down Expand Up @@ -914,7 +925,7 @@ define("content-kit-compiler/parsers/html-parser",
type : type.id,
type_name : this.includeTypeNames && type.name,
value : trim(textOfNode(node)),
attributes : attributesForNode(node),
attributes : attributesForNode(node, attributeBlacklist),
markup : this.parseBlockMarkup(node)
});
}
Expand Down Expand Up @@ -982,7 +993,7 @@ define("content-kit-compiler/parsers/html-parser",
type_name : this.includeTypeNames && type.name,
start : startIndex,
end : endIndex,
attributes : attributesForNode(node, { style: 1 }) // filter out inline styles
attributes : attributesForNode(node, attributeBlacklist)
});
}
}
Expand Down Expand Up @@ -1937,7 +1948,6 @@ define("content-kit-editor/editor/editor",
var ImageCommand = __dependency13__["default"];
var OEmbedCommand = __dependency14__["default"];
var TextFormatCommand = __dependency15__["default"];
var RootTags = __dependency16__.RootTags;
var Keycodes = __dependency16__.Keycodes;
var getSelectionBlockElement = __dependency17__.getSelectionBlockElement;
var getSelectionBlockTagName = __dependency17__.getSelectionBlockTagName;
Expand Down Expand Up @@ -1996,7 +2006,6 @@ define("content-kit-editor/editor/editor",
var cleanedContent = cleanPastedContent(e, Type.TEXT.tag);
if (cleanedContent) {
document.execCommand('insertHTML', false, cleanedContent);
editor.syncModel();
}
});
}
Expand All @@ -2020,7 +2029,7 @@ define("content-kit-editor/editor/editor",
});
}

function bindDragAndDrop(editor) {
function bindDragAndDrop() {
// Use these to add/remove classes
// window.addEventListener('dragenter', function(e) { });
// window.addEventListener('dragleave', function(e) { });
Expand All @@ -2035,7 +2044,7 @@ define("content-kit-editor/editor/editor",
}

function bindLiveUpdate(editor) {
editor.element.addEventListener('input', function(e) {
editor.element.addEventListener('input', function() {
editor.syncModel();
});

Expand Down Expand Up @@ -2238,6 +2247,14 @@ define("content-kit-editor/utils/element-utils",
return false;
}

function elementContentIsEmpty(element) {
var content = element && element.innerHTML;
if (content) {
return content === '' || content === '<br>';
}
return false;
}

function getElementRelativeOffset(element) {
var offset = { left: 0, top: -window.pageYOffset };
var offsetParent = element.offsetParent;
Expand Down Expand Up @@ -2306,6 +2323,7 @@ define("content-kit-editor/utils/element-utils",
__exports__.swapElements = swapElements;
__exports__.getEventTargetMatchingTag = getEventTargetMatchingTag;
__exports__.nodeIsDescendantOfElement = nodeIsDescendantOfElement;
__exports__.elementContentIsEmpty = elementContentIsEmpty;
__exports__.getElementRelativeOffset = getElementRelativeOffset;
__exports__.getElementComputedStyleNumericProp = getElementComputedStyleNumericProp;
__exports__.positionElementToRect = positionElementToRect;
Expand Down Expand Up @@ -2525,16 +2543,28 @@ define("content-kit-editor/views/embed-intent",
var Toolbar = __dependency2__["default"];
var inherit = __dependency3__.inherit;
var getSelectionBlockElement = __dependency4__.getSelectionBlockElement;
var elementContentIsEmpty = __dependency5__.elementContentIsEmpty;
var positionElementToLeftOf = __dependency5__.positionElementToLeftOf;
var positionElementCenteredIn = __dependency5__.positionElementCenteredIn;
var ToolbarDirection = __dependency6__.ToolbarDirection;
var Keycodes = __dependency6__.Keycodes;
var nodeIsDescendantOfElement = __dependency5__.nodeIsDescendantOfElement;
var createDiv = __dependency5__.createDiv;

var LayoutStyle = {
GUTTER : 1,
CENTERED : 2
};

function computeLayoutStyle(rootElement) {
if (rootElement.getBoundingClientRect().left > 100) {
return LayoutStyle.GUTTER;
}
return LayoutStyle.CENTERED;
}

function EmbedIntent(options) {
var embedIntent = this;
var rootElement = options.rootElement;
var rootElement = embedIntent.rootElement = options.rootElement;
options.tagName = 'button';
options.classNames = ['ck-embed-intent-btn'];
View.call(embedIntent, options);
Expand All @@ -2556,22 +2586,16 @@ define("content-kit-editor/views/embed-intent",

function embedIntentHandler() {
var blockElement = getSelectionBlockElement();
var blockElementContent = blockElement && blockElement.innerHTML;
if (blockElementContent === '' || blockElementContent === '<br>') {
if (blockElement && elementContentIsEmpty(blockElement)) {
embedIntent.showAt(blockElement);
} else {
embedIntent.hide();
}
}

rootElement.addEventListener('keyup', embedIntentHandler);

document.addEventListener('mouseup', function(e) {
setTimeout(function() {
if (!nodeIsDescendantOfElement(e.target, embedIntent.toolbar.element)) {
embedIntentHandler();
}
});
document.addEventListener('mouseup', function() {
setTimeout(function() { embedIntentHandler(); });
});

document.addEventListener('keyup', function(e) {
Expand All @@ -2582,7 +2606,7 @@ define("content-kit-editor/views/embed-intent",

window.addEventListener('resize', function() {
if(embedIntent.isShowing) {
positionElementToLeftOf(embedIntent.element, embedIntent.atNode);
embedIntent.reposition();
if (embedIntent.toolbar.isShowing) {
embedIntent.toolbar.positionToContent(embedIntent.element);
}
Expand All @@ -2598,10 +2622,18 @@ define("content-kit-editor/views/embed-intent",
};

EmbedIntent.prototype.showAt = function(node) {
this.atNode = node;
this.show();
this.deactivate();
this.atNode = node;
positionElementToLeftOf(this.element, node);
this.reposition();
};

EmbedIntent.prototype.reposition = function() {
if (computeLayoutStyle(this.rootElement) === LayoutStyle.GUTTER) {
positionElementToLeftOf(this.element, this.atNode);
} else {
positionElementCenteredIn(this.element, this.atNode);
}
};

EmbedIntent.prototype.activate = function() {
Expand Down Expand Up @@ -2871,18 +2903,14 @@ define("content-kit-editor/views/toolbar",
var toolbar = this;
var commands = options.commands;
var commandCount = commands && commands.length, i;
toolbar.editor = options.editor || null;
toolbar.embedIntent = options.embedIntent || null;
toolbar.direction = options.direction || ToolbarDirection.TOP;
options.classNames = ['ck-toolbar'];
if (toolbar.direction === ToolbarDirection.RIGHT) {
options.classNames.push('right');
}

View.call(toolbar, options);

toolbar.editor = options.editor || null;
toolbar.embedIntent = options.embedIntent || null;
toolbar.activePrompt = null;
toolbar.buttons = [];
toolbar.setDirection(options.direction || ToolbarDirection.TOP);

toolbar.promptContainerElement = createDiv('ck-toolbar-prompt');
toolbar.buttonContainerElement = createDiv('ck-toolbar-buttons');
Expand Down Expand Up @@ -2960,6 +2988,15 @@ define("content-kit-editor/views/toolbar",
positioningMethod(this.element, content);
};

Toolbar.prototype.setDirection = function(direction) {
this.direction = direction;
if (direction === ToolbarDirection.RIGHT) {
this.addClass('right');
} else {
this.removeClass('right');
}
};

__exports__["default"] = Toolbar;
});
define("content-kit-editor/views/tooltip",
Expand Down Expand Up @@ -3047,12 +3084,18 @@ define("content-kit-editor/views/view",
this.element.focus();
},
addClass: function(className) {
this.classNames.push(className);
this.element.className = this.classNames.join(' ');
var index = this.classNames.indexOf(className);
if (index === -1) {
this.classNames.push(className);
this.element.className = this.classNames.join(' ');
}
},
removeClass: function(className) {
this.classNames.splice(this.classNames.indexOf(className), 1);
this.element.className = this.classNames.join(' ');
var index = this.classNames.indexOf(className);
if (index > -1) {
this.classNames.splice(index, 1);
this.element.className = this.classNames.join(' ');
}
}
};

Expand Down
2 changes: 1 addition & 1 deletion src/css/editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}
.ck-editor blockquote {
border-left: 4px solid @themeColorText;
margin: 0 0 0 -1.2em;
margin: 1em 0 1em -1.2em;
padding-left: 1.05em;
color: #a0a0a0;
}
Expand Down
13 changes: 11 additions & 2 deletions src/js/content-kit-compiler/compiler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function Compiler(options) {
/**
* @method parse
* @param input
* @return Object
* @return Array
*/
Compiler.prototype.parse = function(input) {
return this.parser.parse(input);
Expand All @@ -38,12 +38,21 @@ Compiler.prototype.parse = function(input) {
/**
* @method render
* @param data
* @return Object
* @return String
*/
Compiler.prototype.render = function(data) {
return this.renderer.render(data);
};

/**
* @method sanitize
* @param input
* @return String
*/
Compiler.prototype.sanitize = function(input) {
return this.render(this.parse(input));
};

/**
* @method registerBlockType
* @param {Type} type
Expand Down
6 changes: 4 additions & 2 deletions src/js/content-kit-compiler/parsers/html-parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { toArray } from '../../content-kit-utils/array-utils';
import { trim, trimLeft, sanitizeWhitespace } from '../../content-kit-utils/string-utils';
import { createElement, DOMParsingNode, textOfNode, unwrapNode, attributesForNode } from '../../content-kit-utils/node-utils';

var attributeBlacklist = { 'style': 1, 'class': 1 }; // filter out inline styles and classes

/**
* Gets the last block in the set or creates and return a default block if none exist yet.
*/
Expand Down Expand Up @@ -95,7 +97,7 @@ HTMLParser.prototype.parseBlock = function(node) {
type : type.id,
type_name : this.includeTypeNames && type.name,
value : trim(textOfNode(node)),
attributes : attributesForNode(node),
attributes : attributesForNode(node, attributeBlacklist),
markup : this.parseBlockMarkup(node)
});
}
Expand Down Expand Up @@ -163,7 +165,7 @@ HTMLParser.prototype.parseElementMarkup = function(node, startIndex) {
type_name : this.includeTypeNames && type.name,
start : startIndex,
end : endIndex,
attributes : attributesForNode(node, { style: 1 }) // filter out inline styles
attributes : attributesForNode(node, attributeBlacklist)
});
}
}
Expand Down
Loading

0 comments on commit 83a73ff

Please sign in to comment.