Skip to content

Caret iframe support / refactor default document occurrences #1152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
evindor wants to merge 2 commits into
base: howling-mad
Choose a base branch
from
Open

Caret iframe support / refactor default document occurrences #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57a9510
Experimental iframe support
evindor Apr 4, 2014
b777b6b
replace default document in undo.js
evindor Apr 4, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions sandbox/_frame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../src/aloha.css">
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(open-sans.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(open-sans-bold.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
.aloha-block {
width: 100px;
height: 100px;
padding: 10px;
background: #999;
color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
cursor: -webkit-grab;
cursor: -moz-grab;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2) inset;
}
.aloha-block:hover {
background: #df215a;
}
img.aloha-block {
width: auto;
height: auto;
display: block;
padding: 0;
}
ol {
counter-reset: counter;
list-style-type: none;
}
ol>li:before {
counter-increment: counter;
content: counters(counter, ".") ") ";
margin-left: -1em;
}
</style>
</head>
<body>
<div contenteditable=true class="aloha-editable">
<h1>Aloha Editor</h1>
<p>
<img draggable="true"
class="aloha-block"
src="demo.jpg"
alt=""
style="float:left; margin: 0 20px 20px 0" />
Lorem ipsum &nbsp;dolor sit amet, <b>consec<i>tet</i>ur</b> adipiscin
elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecen
congue ligula ac quam viverra nec consectetur ante hendrerit
</p>
<div draggable="true" class="aloha-block"
data-aloha='{"hello":"word"}'>Aloha Block</div>
<p>
Donec et mollis dolor. Praesent et diam eget libero egesta
mattis sit amet vitae augue. Nam tincidunt congue enim, u
porta lorem lacinia consectetur. Donec ut libero sed arc
vehicula ultricies a non tortor*
</p>
<ul>
<li>one</li>
<li>two</li>
<li>three
<ol>
<li>four</li>
<li>five</li>
<li class="bold"><u><i>six</i></u></li>
</ol>
</li>
</ul>
<p>
Donec et mollis dolor. Praesent et diam eget libero egesta
mattis sit amet vitae augue.
Nam tincidunt congue enim, u porta lorem lacinia consectetur.
Donec ut libero sed arc vehicula ultricies a non tortor
</p>
</div>
</body>
</html>
42 changes: 42 additions & 0 deletions sandbox/frame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<html>
<head>
<title>Aloha Editor</title>
<meta charset="UTF-8">
<style>
iframe {
margin: 50px auto 0 -500px;
left: 50%;
position: absolute;
display: block;
}
</style>
</head>
<body>
<iframe width=1000 height=400 src="./_frame.html"></iframe>
<script src="../src/require-pronto.js"></script>
<script src="../src/require-pronto.dev.js"></script>
<script>
(function () {
'use strict';
function setVersion (version) {
var h1 = document.querySelector('h1');
if (h1) {
h1.innerHTML = h1.innerHTML + ': <span style="color:#df215a">' + version + '</span>';
}
}
function main(aloha) {
aloha(document.querySelector('iframe').contentDocument.querySelector('.aloha-editable'));
}
if ('undefined' === typeof aloha) {
setVersion('src');
require(['../src/aloha'], main);
} else {
setVersion('build');
main(aloha);
}
}());
</script>
</body>
</html>

10 changes: 5 additions & 5 deletions src/aloha.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ define([
alohaEvent.editor = editor;
Fn.comp(
setSelection,
//Selections.handle,
Selections.handle,
Keys.handle,
Typing.handle,
Blocks.handle,
DragDrop.handle,
Expand All @@ -66,17 +67,14 @@ define([
alohaEvent.editable = alohaEvent.editor.editables[1];
return alohaEvent;
},
Mouse.handle,
Keys.handle
Mouse.handle
)(alohaEvent);
}

editor.editables = {};
editor.BLOCK_CLASS = 'aloha-block';
editor.CARET_CLASS = 'aloha-caret';
editor.selectionContext = Selections.Context();

Events.setup(editor, document);

/*
SelectionChange.addHandler(document, SelectionChange.handler(
Expand All @@ -94,6 +92,8 @@ define([
* Also serves as short aloha.aloha.
*/
function aloha(elem) {
editor.selectionContext = Selections.Context(elem.ownerDocument);
Events.setup(editor, elem.ownerDocument);
var editable = Editables.Editable(elem);
editable.overrides = [];
editable.settings = {
Expand Down
3 changes: 2 additions & 1 deletion src/keys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ define([
if (!event) {
return alohaEvent;
}
var range = (event instanceof KeyboardEvent) ? Ranges.get() : null;
var doc = alohaEvent.editor.selectionContext.caret.ownerDocument;
var range = (event instanceof KeyboardEvent) ? Ranges.get(doc) : null;
if (range) {
alohaEvent.range = range;
var editable = Editables.fromBoundary(
Expand Down
8 changes: 4 additions & 4 deletions src/selections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,11 +560,11 @@ define([
*
* Will create a DOM element at the end of the document body to be used to
* represent the caret position.
*
* @param {Document} doc
* @return {Object}
*/
function Context() {
var caret = document.createElement('div');
function Context(doc) {
var caret = doc.createElement('div');
caret.style.display = 'none';
Dom.addClass(caret, 'aloha-caret');
Dom.insert(caret, caret.ownerDocument.body, true);
Expand Down Expand Up @@ -622,7 +622,7 @@ define([
alohaEvent.range.commonAncestorContainer.ownerDocument
);
}
return Ranges.get();
return Ranges.get(alohaEvent.editor.selectionContext.caret.ownerDocument);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/undo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -798,7 +798,7 @@ define([
lastInsertNode = null;
var node = record.node;
var path = containerPath.concat(pathBeforeNode(container, node));
changes.push(makeDeleteChange(path, [document.createTextNode(record.oldValue)]));
changes.push(makeDeleteChange(path, [node.ownerDocument.createTextNode(record.oldValue)]));
changes.push(makeInsertChange(path, [Dom.clone(node)]));
} else {
// NB: only COMPOUND_DELETEs should occur in a recordTree,
Expand Down