From 1e12cb63535d386a05c30d0903eb44b32e471a64 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Tue, 7 Aug 2018 18:37:58 -0400 Subject: [PATCH 001/102] Story highlighter is in. Needs class appliers and segmented control for turning on/off highlights. --- apps/reader/views.py | 32 +- apps/rss_feeds/models.py | 7 +- assets.yml | 2 + media/css/reader.css | 4 + media/js/newsblur/common/assetmodel.js | 3 +- media/js/newsblur/models/stories.js | 13 +- media/js/newsblur/views/story_detail_view.js | 35 +- media/js/vendor/rangy/rangy-classapplier.js | 1103 +++++ media/js/vendor/rangy/rangy-core.js | 3845 +++++++++++++++++ media/js/vendor/rangy/rangy-highlighter.js | 619 +++ .../rangy/rangy-selectionsaverestore.js | 252 ++ media/js/vendor/rangy/rangy-serializer.js | 314 ++ media/js/vendor/rangy/rangy-textrange.js | 1930 +++++++++ 13 files changed, 8139 insertions(+), 20 deletions(-) create mode 100755 media/js/vendor/rangy/rangy-classapplier.js create mode 100755 media/js/vendor/rangy/rangy-core.js create mode 100755 media/js/vendor/rangy/rangy-highlighter.js create mode 100755 media/js/vendor/rangy/rangy-selectionsaverestore.js create mode 100755 media/js/vendor/rangy/rangy-serializer.js create mode 100755 media/js/vendor/rangy/rangy-textrange.js diff --git a/apps/reader/views.py b/apps/reader/views.py index 7fcb8674e..b63a95af6 100644 --- a/apps/reader/views.py +++ b/apps/reader/views.py @@ -668,8 +668,7 @@ def load_single_feed(request, feed_id): starred_stories = MStarredStory.objects(user_id=user.pk, story_feed_id=feed.pk, story_hash__in=story_hashes)\ - .hint([('user_id', 1), ('story_hash', 1)])\ - .only('story_hash', 'starred_date', 'user_tags') + .hint([('user_id', 1), ('story_hash', 1)]) shared_story_hashes = MSharedStory.check_shared_story_hashes(user.pk, story_hashes) shared_stories = [] if shared_story_hashes: @@ -677,8 +676,7 @@ def load_single_feed(request, feed_id): story_hash__in=shared_story_hashes)\ .hint([('story_hash', 1)])\ .only('story_hash', 'shared_date', 'comments') - starred_stories = dict([(story.story_hash, dict(starred_date=story.starred_date, - user_tags=story.user_tags)) + starred_stories = dict([(story.story_hash, story) for story in starred_stories]) shared_stories = dict([(story.story_hash, dict(shared_date=story.shared_date, comments=story.comments)) @@ -703,11 +701,13 @@ def load_single_feed(request, feed_id): story['read_status'] = 0 if story['story_hash'] in starred_stories: story['starred'] = True - starred_date = localtime_for_timezone(starred_stories[story['story_hash']]['starred_date'], + starred_story = Feed.format_story(starred_stories[story['story_hash']]) + starred_date = localtime_for_timezone(starred_story['starred_date'], user.profile.timezone) story['starred_date'] = format_story_link_date__long(starred_date, now) story['starred_timestamp'] = starred_date.strftime('%s') - story['user_tags'] = starred_stories[story['story_hash']]['user_tags'] + story['user_tags'] = starred_story['user_tags'] + story['highlights'] = starred_story['highlights'] if story['story_hash'] in shared_stories: story['shared'] = True shared_date = localtime_for_timezone(shared_stories[story['story_hash']]['shared_date'], @@ -1196,9 +1196,8 @@ def load_read_stories(request): for story in shared_stories]) starred_stories = MStarredStory.objects(user_id=user.pk, story_hash__in=story_hashes)\ - .hint([('user_id', 1), ('story_hash', 1)])\ - .only('story_hash', 'starred_date') - starred_stories = dict([(story.story_hash, story.starred_date) + .hint([('user_id', 1), ('story_hash', 1)]) + starred_stories = dict([(story.story_hash, story) for story in starred_stories]) nowtz = localtime_for_timezone(now, user.profile.timezone) @@ -1215,7 +1214,8 @@ def load_read_stories(request): } if story['story_hash'] in starred_stories: story['starred'] = True - starred_date = localtime_for_timezone(starred_stories[story['story_hash']], + starred_story = Feed.format_story(starred_stories[story['story_hash']]) + starred_date = localtime_for_timezone(starred_story['starred_date'], user.profile.timezone) story['starred_date'] = format_story_link_date__long(starred_date, now) story['starred_timestamp'] = starred_date.strftime('%s') @@ -1343,10 +1343,10 @@ def load_river_stories__redis(request): story_hashes = [s['story_hash'] for s in stories] starred_stories = MStarredStory.objects( user_id=user.pk, - story_hash__in=story_hashes - ).only('story_hash', 'starred_date') + story_hash__in=story_hashes) starred_stories = dict([(story.story_hash, dict(starred_date=story.starred_date, - user_tags=story.user_tags)) + user_tags=story.user_tags, + highlights=story.highlights)) for story in starred_stories]) else: starred_stories = {} @@ -1394,6 +1394,7 @@ def load_river_stories__redis(request): story['starred_date'] = format_story_link_date__long(starred_date, now) story['starred_timestamp'] = starred_date.strftime('%s') story['user_tags'] = starred_stories[story['story_hash']]['user_tags'] + story['highlights'] = starred_stories[story['story_hash']]['highlights'] story['intelligence'] = { 'feed': apply_classifier_feeds(classifier_feeds, story['story_feed_id']), 'author': apply_classifier_authors(classifier_authors, story), @@ -2339,6 +2340,7 @@ def _mark_story_as_starred(request): story_id = request.REQUEST.get('story_id', None) story_hash = request.REQUEST.get('story_hash', None) user_tags = request.REQUEST.getlist('user_tags') or request.REQUEST.getlist('user_tags[]') + highlights = request.REQUEST.getlist('highlights') or request.REQUEST.getlist('highlights[]') message = "" if story_hash: story, _ = MStory.find_story(story_hash=story_hash) @@ -2355,8 +2357,9 @@ def _mark_story_as_starred(request): story_db.pop('starred_date', None) story_db.pop('id', None) story_db.pop('user_tags', None) + story_db.pop('highlights', None) now = datetime.datetime.now() - story_values = dict(starred_date=now, user_tags=user_tags, **story_db) + story_values = dict(starred_date=now, user_tags=user_tags, highlights=highlights, **story_db) params = dict(story_guid=story.story_guid, user_id=request.user.pk) starred_story = MStarredStory.objects(**params).limit(1) created = False @@ -2383,6 +2386,7 @@ def _mark_story_as_starred(request): new_user_tags = list(set(user_tags) - set(starred_story.user_tags or [])) removed_user_tags = list(set(starred_story.user_tags or []) - set(user_tags)) starred_story.user_tags = user_tags + starred_story.highlights = highlights starred_story.save() for tag in new_user_tags: diff --git a/apps/rss_feeds/models.py b/apps/rss_feeds/models.py index 5208afe13..cbc1bf940 100644 --- a/apps/rss_feeds/models.py +++ b/apps/rss_feeds/models.py @@ -1844,7 +1844,7 @@ class Feed(models.Model): story_title = strip_tags(story_content) if not story_title and story_db.story_permalink: story_title = story_db.story_permalink - if len(story_title) > 80: + if story_title and len(story_title) > 80: story_title = story_title[:80] + '...' story = {} @@ -1873,6 +1873,10 @@ class Feed(models.Model): story['starred_date'] = story_db.starred_date if hasattr(story_db, 'user_tags'): story['user_tags'] = story_db.user_tags + if hasattr(story_db, 'highlights'): + story['highlights'] = [json.decode(highlight) for highlight in story_db.highlights] + print story_db.highlights + print [json.decode(highlight) for highlight in story_db.highlights] if hasattr(story_db, 'shared_date'): story['shared_date'] = story_db.shared_date if hasattr(story_db, 'comments'): @@ -2783,6 +2787,7 @@ class MStarredStory(mongo.DynamicDocument): story_hash = mongo.StringField() story_tags = mongo.ListField(mongo.StringField(max_length=250)) user_tags = mongo.ListField(mongo.StringField(max_length=128)) + highlights = mongo.ListField(mongo.StringField(max_length=10000)) image_urls = mongo.ListField(mongo.StringField(max_length=1024)) meta = { diff --git a/assets.yml b/assets.yml index 3b1a4b9f2..64cc19ac9 100644 --- a/assets.yml +++ b/assets.yml @@ -71,6 +71,8 @@ javascripts: - media/js/vendor/highlight.js - media/js/vendor/fitvid.js - media/js/vendor/imagesLoaded-*.js + - media/js/vendor/rangy/rangy-core.js + - media/js/vendor/rangy/rangy-*.js - media/js/newsblur/reader/reader_utils.js - media/js/newsblur/reader/reader.js - media/js/newsblur/reader/reader_popover.js diff --git a/media/css/reader.css b/media/css/reader.css index cb4918887..28b4ecbf3 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -3172,6 +3172,10 @@ body { border: 3px solid #f5c3c3; } +.NB-feed-story-content .NB-starred-story-selection-highlight { + background-color: #FFEE8E; +} + /* =========================== */ /* = Story content expansion = */ /* =========================== */ diff --git a/media/js/newsblur/common/assetmodel.js b/media/js/newsblur/common/assetmodel.js index 7b604f0dc..d8f796645 100644 --- a/media/js/newsblur/common/assetmodel.js +++ b/media/js/newsblur/common/assetmodel.js @@ -246,7 +246,8 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({ this.make_request('/reader/mark_story_hash_as_starred', { story_hash: story.get('story_hash'), - user_tags: story.get('user_tags') + user_tags: story.get('user_tags'), + highlights: story.highlights_serialized() }, pre_callback); }, diff --git a/media/js/newsblur/models/stories.js b/media/js/newsblur/models/stories.js index ccd6cf2bc..fabc47791 100644 --- a/media/js/newsblur/models/stories.js +++ b/media/js/newsblur/models/stories.js @@ -213,10 +213,10 @@ NEWSBLUR.Models.Story = Backbone.Model.extend({ // = Saved Stories = // ================= - toggle_starred: function() { + toggle_starred: function(force_starred) { this.set('user_tags', this.existing_tags(), {silent: true}); - if (!this.get('starred')) { + if (!this.get('starred') || force_starred === true) { NEWSBLUR.assets.starred_count += 1; this.set('starred', true); } else { @@ -278,6 +278,13 @@ NEWSBLUR.Models.Story = Backbone.Model.extend({ }, []))); return all_tags; + }, + + highlights_serialized: function() { + var highlights = this.get('highlights'); + return _.map(highlights, function(highlight) { + return $.toJSON(highlight); + }); } }); @@ -297,7 +304,7 @@ NEWSBLUR.Collections.Stories = Backbone.Collection.extend({ this.bind('reset', this.clear_previous_stories_stack, this); // this.bind('change:selected', this.change_selected); }, - + // =========== // = Actions = // =========== diff --git a/media/js/newsblur/views/story_detail_view.js b/media/js/newsblur/views/story_detail_view.js index cd879bede..d808fa709 100644 --- a/media/js/newsblur/views/story_detail_view.js +++ b/media/js/newsblur/views/story_detail_view.js @@ -17,6 +17,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ "mouseenter .NB-feed-story-manage-icon" : "mouseenter_manage_icon", "mouseleave .NB-feed-story-manage-icon" : "mouseleave_manage_icon", "contextmenu .NB-feed-story-header" : "show_manage_menu_rightclick", + "mouseup .NB-feed-story-content" : "mouseup_check_selection", "click .NB-feed-story-manage-icon" : "show_manage_menu", "click .NB-feed-story-show-changes" : "show_story_changes", "click .NB-feed-story-header-title" : "open_feed", @@ -30,7 +31,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ }, initialize: function() { - _.bindAll(this, 'mouseleave', 'mouseenter'); + _.bindAll(this, 'mouseleave', 'mouseenter', 'mouseup_check_selection'); this.model.bind('change', this.toggle_classes, this); this.model.bind('change:read_status', this.toggle_read_status, this); this.model.bind('change:selected', this.toggle_selected, this); @@ -93,6 +94,7 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ this.generate_gradients(); this.render_comments(); this.attach_handlers(); + this.apply_starred_story_selections(); if (!this.model.get('image_urls') || (this.model.get('image_urls') && this.model.get('image_urls').length == 0)) { this.watch_images_load(); } @@ -712,6 +714,37 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ }, + mouseup_check_selection: function() { + rangy.init(); + + var selection = rangy.getSelection(); + var html = selection.toHtml(); + var selection_serialized = rangy.serializeSelection(selection, true, this.$(".NB-feed-story-content").get(0)); + var selections = this.model.get('highlights') || []; + + selections.push([html, selection_serialized]); + + this.model.set('highlights', selections); + this.model.toggle_starred(true); + + this.apply_starred_story_selections(); + + return true; + }, + + apply_starred_story_selections: function() { + rangy.init(); + + var applier = rangy.createClassApplier("NB-starred-story-selection-highlight"); + var selections = this.model.get('highlights') || []; + + for (var s in selections) { + var selection_serialized = selections[s][1]; + console.log(['selection', selection_serialized, this.$(".NB-feed-story-content").get(0)]); + rangy.deserializeSelection(selection_serialized, this.$(".NB-feed-story-content").get(0)); + } + }, + show_manage_menu_rightclick: function(e) { if (!NEWSBLUR.assets.preference('show_contextmenus')) return; diff --git a/media/js/vendor/rangy/rangy-classapplier.js b/media/js/vendor/rangy/rangy-classapplier.js new file mode 100755 index 000000000..9fe90d857 --- /dev/null +++ b/media/js/vendor/rangy/rangy-classapplier.js @@ -0,0 +1,1103 @@ +/** + * Class Applier module for Rangy. + * Adds, removes and toggles classes on Ranges and Selections + * + * Part of Rangy, a cross-browser JavaScript range and selection library + * https://github.com/timdown/rangy + * + * Depends on Rangy core. + * + * Copyright 2015, Tim Down + * Licensed under the MIT license. + * Version: 1.3.1-dev + * Build date: 20 May 2015 + */ +(function(factory, root) { + if (typeof define == "function" && define.amd) { + // AMD. Register as an anonymous module with a dependency on Rangy. + define(["./rangy-core"], factory); + } else if (typeof module != "undefined" && typeof exports == "object") { + // Node/CommonJS style + module.exports = factory( require("rangy") ); + } else { + // No AMD or CommonJS support so we use the rangy property of root (probably the global variable) + factory(root.rangy); + } +})(function(rangy) { + rangy.createModule("ClassApplier", ["WrappedSelection"], function(api, module) { + var dom = api.dom; + var DomPosition = dom.DomPosition; + var contains = dom.arrayContains; + var util = api.util; + var forEach = util.forEach; + + + var defaultTagName = "span"; + var createElementNSSupported = util.isHostMethod(document, "createElementNS"); + + function each(obj, func) { + for (var i in obj) { + if (obj.hasOwnProperty(i)) { + if (func(i, obj[i]) === false) { + return false; + } + } + } + return true; + } + + function trim(str) { + return str.replace(/^\s\s*/, "").replace(/\s\s*$/, ""); + } + + function classNameContainsClass(fullClassName, className) { + return !!fullClassName && new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName); + } + + // Inefficient, inelegant nonsense for IE's svg element, which has no classList and non-HTML className implementation + function hasClass(el, className) { + if (typeof el.classList == "object") { + return el.classList.contains(className); + } else { + var classNameSupported = (typeof el.className == "string"); + var elClass = classNameSupported ? el.className : el.getAttribute("class"); + return classNameContainsClass(elClass, className); + } + } + + function addClass(el, className) { + if (typeof el.classList == "object") { + el.classList.add(className); + } else { + var classNameSupported = (typeof el.className == "string"); + var elClass = classNameSupported ? el.className : el.getAttribute("class"); + if (elClass) { + if (!classNameContainsClass(elClass, className)) { + elClass += " " + className; + } + } else { + elClass = className; + } + if (classNameSupported) { + el.className = elClass; + } else { + el.setAttribute("class", elClass); + } + } + } + + var removeClass = (function() { + function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) { + return (whiteSpaceBefore && whiteSpaceAfter) ? " " : ""; + } + + return function(el, className) { + if (typeof el.classList == "object") { + el.classList.remove(className); + } else { + var classNameSupported = (typeof el.className == "string"); + var elClass = classNameSupported ? el.className : el.getAttribute("class"); + elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer); + if (classNameSupported) { + el.className = elClass; + } else { + el.setAttribute("class", elClass); + } + } + }; + })(); + + function getClass(el) { + var classNameSupported = (typeof el.className == "string"); + return classNameSupported ? el.className : el.getAttribute("class"); + } + + function sortClassName(className) { + return className && className.split(/\s+/).sort().join(" "); + } + + function getSortedClassName(el) { + return sortClassName( getClass(el) ); + } + + function haveSameClasses(el1, el2) { + return getSortedClassName(el1) == getSortedClassName(el2); + } + + function hasAllClasses(el, className) { + var classes = className.split(/\s+/); + for (var i = 0, len = classes.length; i < len; ++i) { + if (!hasClass(el, trim(classes[i]))) { + return false; + } + } + return true; + } + + function canTextBeStyled(textNode) { + var parent = textNode.parentNode; + return (parent && parent.nodeType == 1 && !/^(textarea|style|script|select|iframe)$/i.test(parent.nodeName)); + } + + function movePosition(position, oldParent, oldIndex, newParent, newIndex) { + var posNode = position.node, posOffset = position.offset; + var newNode = posNode, newOffset = posOffset; + + if (posNode == newParent && posOffset > newIndex) { + ++newOffset; + } + + if (posNode == oldParent && (posOffset == oldIndex || posOffset == oldIndex + 1)) { + newNode = newParent; + newOffset += newIndex - oldIndex; + } + + if (posNode == oldParent && posOffset > oldIndex + 1) { + --newOffset; + } + + position.node = newNode; + position.offset = newOffset; + } + + function movePositionWhenRemovingNode(position, parentNode, index) { + if (position.node == parentNode && position.offset > index) { + --position.offset; + } + } + + function movePreservingPositions(node, newParent, newIndex, positionsToPreserve) { + // For convenience, allow newIndex to be -1 to mean "insert at the end". + if (newIndex == -1) { + newIndex = newParent.childNodes.length; + } + + var oldParent = node.parentNode; + var oldIndex = dom.getNodeIndex(node); + + forEach(positionsToPreserve, function(position) { + movePosition(position, oldParent, oldIndex, newParent, newIndex); + }); + + // Now actually move the node. + if (newParent.childNodes.length == newIndex) { + newParent.appendChild(node); + } else { + newParent.insertBefore(node, newParent.childNodes[newIndex]); + } + } + + function removePreservingPositions(node, positionsToPreserve) { + + var oldParent = node.parentNode; + var oldIndex = dom.getNodeIndex(node); + + forEach(positionsToPreserve, function(position) { + movePositionWhenRemovingNode(position, oldParent, oldIndex); + }); + + dom.removeNode(node); + } + + function moveChildrenPreservingPositions(node, newParent, newIndex, removeNode, positionsToPreserve) { + var child, children = []; + while ( (child = node.firstChild) ) { + movePreservingPositions(child, newParent, newIndex++, positionsToPreserve); + children.push(child); + } + if (removeNode) { + removePreservingPositions(node, positionsToPreserve); + } + return children; + } + + function replaceWithOwnChildrenPreservingPositions(element, positionsToPreserve) { + return moveChildrenPreservingPositions(element, element.parentNode, dom.getNodeIndex(element), true, positionsToPreserve); + } + + function rangeSelectsAnyText(range, textNode) { + var textNodeRange = range.cloneRange(); + textNodeRange.selectNodeContents(textNode); + + var intersectionRange = textNodeRange.intersection(range); + var text = intersectionRange ? intersectionRange.toString() : ""; + + return text != ""; + } + + function getEffectiveTextNodes(range) { + var nodes = range.getNodes([3]); + + // Optimization as per issue 145 + + // Remove non-intersecting text nodes from the start of the range + var start = 0, node; + while ( (node = nodes[start]) && !rangeSelectsAnyText(range, node) ) { + ++start; + } + + // Remove non-intersecting text nodes from the start of the range + var end = nodes.length - 1; + while ( (node = nodes[end]) && !rangeSelectsAnyText(range, node) ) { + --end; + } + + return nodes.slice(start, end + 1); + } + + function elementsHaveSameNonClassAttributes(el1, el2) { + if (el1.attributes.length != el2.attributes.length) return false; + for (var i = 0, len = el1.attributes.length, attr1, attr2, name; i < len; ++i) { + attr1 = el1.attributes[i]; + name = attr1.name; + if (name != "class") { + attr2 = el2.attributes.getNamedItem(name); + if ( (attr1 === null) != (attr2 === null) ) return false; + if (attr1.specified != attr2.specified) return false; + if (attr1.specified && attr1.nodeValue !== attr2.nodeValue) return false; + } + } + return true; + } + + function elementHasNonClassAttributes(el, exceptions) { + for (var i = 0, len = el.attributes.length, attrName; i < len; ++i) { + attrName = el.attributes[i].name; + if ( !(exceptions && contains(exceptions, attrName)) && el.attributes[i].specified && attrName != "class") { + return true; + } + } + return false; + } + + var getComputedStyleProperty = dom.getComputedStyleProperty; + var isEditableElement = (function() { + var testEl = document.createElement("div"); + return typeof testEl.isContentEditable == "boolean" ? + function (node) { + return node && node.nodeType == 1 && node.isContentEditable; + } : + function (node) { + if (!node || node.nodeType != 1 || node.contentEditable == "false") { + return false; + } + return node.contentEditable == "true" || isEditableElement(node.parentNode); + }; + })(); + + function isEditingHost(node) { + var parent; + return node && node.nodeType == 1 && + (( (parent = node.parentNode) && parent.nodeType == 9 && parent.designMode == "on") || + (isEditableElement(node) && !isEditableElement(node.parentNode))); + } + + function isEditable(node) { + return (isEditableElement(node) || (node.nodeType != 1 && isEditableElement(node.parentNode))) && !isEditingHost(node); + } + + var inlineDisplayRegex = /^inline(-block|-table)?$/i; + + function isNonInlineElement(node) { + return node && node.nodeType == 1 && !inlineDisplayRegex.test(getComputedStyleProperty(node, "display")); + } + + // White space characters as defined by HTML 4 (http://www.w3.org/TR/html401/struct/text.html) + var htmlNonWhiteSpaceRegex = /[^\r\n\t\f \u200B]/; + + function isUnrenderedWhiteSpaceNode(node) { + if (node.data.length == 0) { + return true; + } + if (htmlNonWhiteSpaceRegex.test(node.data)) { + return false; + } + var cssWhiteSpace = getComputedStyleProperty(node.parentNode, "whiteSpace"); + switch (cssWhiteSpace) { + case "pre": + case "pre-wrap": + case "-moz-pre-wrap": + return false; + case "pre-line": + if (/[\r\n]/.test(node.data)) { + return false; + } + } + + // We now have a whitespace-only text node that may be rendered depending on its context. If it is adjacent to a + // non-inline element, it will not be rendered. This seems to be a good enough definition. + return isNonInlineElement(node.previousSibling) || isNonInlineElement(node.nextSibling); + } + + function getRangeBoundaries(ranges) { + var positions = [], i, range; + for (i = 0; range = ranges[i++]; ) { + positions.push( + new DomPosition(range.startContainer, range.startOffset), + new DomPosition(range.endContainer, range.endOffset) + ); + } + return positions; + } + + function updateRangesFromBoundaries(ranges, positions) { + for (var i = 0, range, start, end, len = ranges.length; i < len; ++i) { + range = ranges[i]; + start = positions[i * 2]; + end = positions[i * 2 + 1]; + range.setStartAndEnd(start.node, start.offset, end.node, end.offset); + } + } + + function isSplitPoint(node, offset) { + if (dom.isCharacterDataNode(node)) { + if (offset == 0) { + return !!node.previousSibling; + } else if (offset == node.length) { + return !!node.nextSibling; + } else { + return true; + } + } + + return offset > 0 && offset < node.childNodes.length; + } + + function splitNodeAt(node, descendantNode, descendantOffset, positionsToPreserve) { + var newNode, parentNode; + var splitAtStart = (descendantOffset == 0); + + if (dom.isAncestorOf(descendantNode, node)) { + return node; + } + + if (dom.isCharacterDataNode(descendantNode)) { + var descendantIndex = dom.getNodeIndex(descendantNode); + if (descendantOffset == 0) { + descendantOffset = descendantIndex; + } else if (descendantOffset == descendantNode.length) { + descendantOffset = descendantIndex + 1; + } else { + throw module.createError("splitNodeAt() should not be called with offset in the middle of a data node (" + + descendantOffset + " in " + descendantNode.data); + } + descendantNode = descendantNode.parentNode; + } + + if (isSplitPoint(descendantNode, descendantOffset)) { + // descendantNode is now guaranteed not to be a text or other character node + newNode = descendantNode.cloneNode(false); + parentNode = descendantNode.parentNode; + if (newNode.id) { + newNode.removeAttribute("id"); + } + var child, newChildIndex = 0; + + while ( (child = descendantNode.childNodes[descendantOffset]) ) { + movePreservingPositions(child, newNode, newChildIndex++, positionsToPreserve); + } + movePreservingPositions(newNode, parentNode, dom.getNodeIndex(descendantNode) + 1, positionsToPreserve); + return (descendantNode == node) ? newNode : splitNodeAt(node, parentNode, dom.getNodeIndex(newNode), positionsToPreserve); + } else if (node != descendantNode) { + newNode = descendantNode.parentNode; + + // Work out a new split point in the parent node + var newNodeIndex = dom.getNodeIndex(descendantNode); + + if (!splitAtStart) { + newNodeIndex++; + } + return splitNodeAt(node, newNode, newNodeIndex, positionsToPreserve); + } + return node; + } + + function areElementsMergeable(el1, el2) { + return el1.namespaceURI == el2.namespaceURI && + el1.tagName.toLowerCase() == el2.tagName.toLowerCase() && + haveSameClasses(el1, el2) && + elementsHaveSameNonClassAttributes(el1, el2) && + getComputedStyleProperty(el1, "display") == "inline" && + getComputedStyleProperty(el2, "display") == "inline"; + } + + function createAdjacentMergeableTextNodeGetter(forward) { + var siblingPropName = forward ? "nextSibling" : "previousSibling"; + + return function(textNode, checkParentElement) { + var el = textNode.parentNode; + var adjacentNode = textNode[siblingPropName]; + if (adjacentNode) { + // Can merge if the node's previous/next sibling is a text node + if (adjacentNode && adjacentNode.nodeType == 3) { + return adjacentNode; + } + } else if (checkParentElement) { + // Compare text node parent element with its sibling + adjacentNode = el[siblingPropName]; + if (adjacentNode && adjacentNode.nodeType == 1 && areElementsMergeable(el, adjacentNode)) { + var adjacentNodeChild = adjacentNode[forward ? "firstChild" : "lastChild"]; + if (adjacentNodeChild && adjacentNodeChild.nodeType == 3) { + return adjacentNodeChild; + } + } + } + return null; + }; + } + + var getPreviousMergeableTextNode = createAdjacentMergeableTextNodeGetter(false), + getNextMergeableTextNode = createAdjacentMergeableTextNodeGetter(true); + + + function Merge(firstNode) { + this.isElementMerge = (firstNode.nodeType == 1); + this.textNodes = []; + var firstTextNode = this.isElementMerge ? firstNode.lastChild : firstNode; + if (firstTextNode) { + this.textNodes[0] = firstTextNode; + } + } + + Merge.prototype = { + doMerge: function(positionsToPreserve) { + var textNodes = this.textNodes; + var firstTextNode = textNodes[0]; + if (textNodes.length > 1) { + var firstTextNodeIndex = dom.getNodeIndex(firstTextNode); + var textParts = [], combinedTextLength = 0, textNode, parent; + forEach(textNodes, function(textNode, i) { + parent = textNode.parentNode; + if (i > 0) { + parent.removeChild(textNode); + if (!parent.hasChildNodes()) { + dom.removeNode(parent); + } + if (positionsToPreserve) { + forEach(positionsToPreserve, function(position) { + // Handle case where position is inside the text node being merged into a preceding node + if (position.node == textNode) { + position.node = firstTextNode; + position.offset += combinedTextLength; + } + // Handle case where both text nodes precede the position within the same parent node + if (position.node == parent && position.offset > firstTextNodeIndex) { + --position.offset; + if (position.offset == firstTextNodeIndex + 1 && i < len - 1) { + position.node = firstTextNode; + position.offset = combinedTextLength; + } + } + }); + } + } + textParts[i] = textNode.data; + combinedTextLength += textNode.data.length; + }); + firstTextNode.data = textParts.join(""); + } + return firstTextNode.data; + }, + + getLength: function() { + var i = this.textNodes.length, len = 0; + while (i--) { + len += this.textNodes[i].length; + } + return len; + }, + + toString: function() { + var textParts = []; + forEach(this.textNodes, function(textNode, i) { + textParts[i] = "'" + textNode.data + "'"; + }); + return "[Merge(" + textParts.join(",") + ")]"; + } + }; + + var optionProperties = ["elementTagName", "ignoreWhiteSpace", "applyToEditableOnly", "useExistingElements", + "removeEmptyElements", "onElementCreate"]; + + // TODO: Populate this with every attribute name that corresponds to a property with a different name. Really?? + var attrNamesForProperties = {}; + + function ClassApplier(className, options, tagNames) { + var normalize, i, len, propName, applier = this; + applier.cssClass = applier.className = className; // cssClass property is for backward compatibility + + var elementPropertiesFromOptions = null, elementAttributes = {}; + + // Initialize from options object + if (typeof options == "object" && options !== null) { + if (typeof options.elementTagName !== "undefined") { + options.elementTagName = options.elementTagName.toLowerCase(); + } + tagNames = options.tagNames; + elementPropertiesFromOptions = options.elementProperties; + elementAttributes = options.elementAttributes; + + for (i = 0; propName = optionProperties[i++]; ) { + if (options.hasOwnProperty(propName)) { + applier[propName] = options[propName]; + } + } + normalize = options.normalize; + } else { + normalize = options; + } + + // Backward compatibility: the second parameter can also be a Boolean indicating to normalize after unapplying + applier.normalize = (typeof normalize == "undefined") ? true : normalize; + + // Initialize element properties and attribute exceptions + applier.attrExceptions = []; + var el = document.createElement(applier.elementTagName); + applier.elementProperties = applier.copyPropertiesToElement(elementPropertiesFromOptions, el, true); + each(elementAttributes, function(attrName, attrValue) { + applier.attrExceptions.push(attrName); + // Ensure each attribute value is a string + elementAttributes[attrName] = "" + attrValue; + }); + applier.elementAttributes = elementAttributes; + + applier.elementSortedClassName = applier.elementProperties.hasOwnProperty("className") ? + sortClassName(applier.elementProperties.className + " " + className) : className; + + // Initialize tag names + applier.applyToAnyTagName = false; + var type = typeof tagNames; + if (type == "string") { + if (tagNames == "*") { + applier.applyToAnyTagName = true; + } else { + applier.tagNames = trim(tagNames.toLowerCase()).split(/\s*,\s*/); + } + } else if (type == "object" && typeof tagNames.length == "number") { + applier.tagNames = []; + for (i = 0, len = tagNames.length; i < len; ++i) { + if (tagNames[i] == "*") { + applier.applyToAnyTagName = true; + } else { + applier.tagNames.push(tagNames[i].toLowerCase()); + } + } + } else { + applier.tagNames = [applier.elementTagName]; + } + } + + ClassApplier.prototype = { + elementTagName: defaultTagName, + elementProperties: {}, + elementAttributes: {}, + ignoreWhiteSpace: true, + applyToEditableOnly: false, + useExistingElements: true, + removeEmptyElements: true, + onElementCreate: null, + + copyPropertiesToElement: function(props, el, createCopy) { + var s, elStyle, elProps = {}, elPropsStyle, propValue, elPropValue, attrName; + + for (var p in props) { + if (props.hasOwnProperty(p)) { + propValue = props[p]; + elPropValue = el[p]; + + // Special case for class. The copied properties object has the applier's class as well as its own + // to simplify checks when removing styling elements + if (p == "className") { + addClass(el, propValue); + addClass(el, this.className); + el[p] = sortClassName(el[p]); + if (createCopy) { + elProps[p] = propValue; + } + } + + // Special case for style + else if (p == "style") { + elStyle = elPropValue; + if (createCopy) { + elProps[p] = elPropsStyle = {}; + } + for (s in props[p]) { + if (props[p].hasOwnProperty(s)) { + elStyle[s] = propValue[s]; + if (createCopy) { + elPropsStyle[s] = elStyle[s]; + } + } + } + this.attrExceptions.push(p); + } else { + el[p] = propValue; + // Copy the property back from the dummy element so that later comparisons to check whether + // elements may be removed are checking against the right value. For example, the href property + // of an element returns a fully qualified URL even if it was previously assigned a relative + // URL. + if (createCopy) { + elProps[p] = el[p]; + + // Not all properties map to identically-named attributes + attrName = attrNamesForProperties.hasOwnProperty(p) ? attrNamesForProperties[p] : p; + this.attrExceptions.push(attrName); + } + } + } + } + + return createCopy ? elProps : ""; + }, + + copyAttributesToElement: function(attrs, el) { + for (var attrName in attrs) { + if (attrs.hasOwnProperty(attrName) && !/^class(?:Name)?$/i.test(attrName)) { + el.setAttribute(attrName, attrs[attrName]); + } + } + }, + + appliesToElement: function(el) { + return contains(this.tagNames, el.tagName.toLowerCase()); + }, + + getEmptyElements: function(range) { + var applier = this; + return range.getNodes([1], function(el) { + return applier.appliesToElement(el) && !el.hasChildNodes(); + }); + }, + + hasClass: function(node) { + return node.nodeType == 1 && + (this.applyToAnyTagName || this.appliesToElement(node)) && + hasClass(node, this.className); + }, + + getSelfOrAncestorWithClass: function(node) { + while (node) { + if (this.hasClass(node)) { + return node; + } + node = node.parentNode; + } + return null; + }, + + isModifiable: function(node) { + return !this.applyToEditableOnly || isEditable(node); + }, + + // White space adjacent to an unwrappable node can be ignored for wrapping + isIgnorableWhiteSpaceNode: function(node) { + return this.ignoreWhiteSpace && node && node.nodeType == 3 && isUnrenderedWhiteSpaceNode(node); + }, + + // Normalizes nodes after applying a class to a Range. + postApply: function(textNodes, range, positionsToPreserve, isUndo) { + var firstNode = textNodes[0], lastNode = textNodes[textNodes.length - 1]; + + var merges = [], currentMerge; + + var rangeStartNode = firstNode, rangeEndNode = lastNode; + var rangeStartOffset = 0, rangeEndOffset = lastNode.length; + + var textNode, precedingTextNode; + + // Check for every required merge and create a Merge object for each + forEach(textNodes, function(textNode) { + precedingTextNode = getPreviousMergeableTextNode(textNode, !isUndo); + if (precedingTextNode) { + if (!currentMerge) { + currentMerge = new Merge(precedingTextNode); + merges.push(currentMerge); + } + currentMerge.textNodes.push(textNode); + if (textNode === firstNode) { + rangeStartNode = currentMerge.textNodes[0]; + rangeStartOffset = rangeStartNode.length; + } + if (textNode === lastNode) { + rangeEndNode = currentMerge.textNodes[0]; + rangeEndOffset = currentMerge.getLength(); + } + } else { + currentMerge = null; + } + }); + + // Test whether the first node after the range needs merging + var nextTextNode = getNextMergeableTextNode(lastNode, !isUndo); + + if (nextTextNode) { + if (!currentMerge) { + currentMerge = new Merge(lastNode); + merges.push(currentMerge); + } + currentMerge.textNodes.push(nextTextNode); + } + + // Apply the merges + if (merges.length) { + for (i = 0, len = merges.length; i < len; ++i) { + merges[i].doMerge(positionsToPreserve); + } + + // Set the range boundaries + range.setStartAndEnd(rangeStartNode, rangeStartOffset, rangeEndNode, rangeEndOffset); + } + }, + + createContainer: function(parentNode) { + var doc = dom.getDocument(parentNode); + var namespace; + var el = createElementNSSupported && !dom.isHtmlNamespace(parentNode) && (namespace = parentNode.namespaceURI) ? + doc.createElementNS(parentNode.namespaceURI, this.elementTagName) : + doc.createElement(this.elementTagName); + + this.copyPropertiesToElement(this.elementProperties, el, false); + this.copyAttributesToElement(this.elementAttributes, el); + addClass(el, this.className); + if (this.onElementCreate) { + this.onElementCreate(el, this); + } + return el; + }, + + elementHasProperties: function(el, props) { + var applier = this; + return each(props, function(p, propValue) { + if (p == "className") { + // For checking whether we should reuse an existing element, we just want to check that the element + // has all the classes specified in the className property. When deciding whether the element is + // removable when unapplying a class, there is separate special handling to check whether the + // element has extra classes so the same simple check will do. + return hasAllClasses(el, propValue); + } else if (typeof propValue == "object") { + if (!applier.elementHasProperties(el[p], propValue)) { + return false; + } + } else if (el[p] !== propValue) { + return false; + } + }); + }, + + elementHasAttributes: function(el, attrs) { + return each(attrs, function(name, value) { + if (el.getAttribute(name) !== value) { + return false; + } + }); + }, + + applyToTextNode: function(textNode, positionsToPreserve) { + + // Check whether the text node can be styled. Text within a