mirror of
https://github.com/fastmail/Squire.git
synced 2024-12-22 07:13:08 -05:00
Merge pull request #211 from InteractiveIntelligence/Path-contains-format-values
Update README and Tests
This commit is contained in:
commit
c1eb254758
2 changed files with 77 additions and 1 deletions
|
@ -179,7 +179,7 @@ Returns self (the Squire instance).
|
|||
|
||||
### getPath
|
||||
|
||||
Returns the path through the DOM tree from the `<body>` element to the current current cursor position. This is a string consisting of the tag, id and class names in CSS format. For example `BODY>BLOCKQUOTE>DIV#id>STRONG>SPAN.font>EM`. If a selection has been made, so different parts of the selection may have different paths, the value will be `(selection)`. The path is useful for efficiently determining the current formatting for bold, italic, underline etc, and thus determining button state. If a selection has been made, you can has the `hasFormat` method instead to get the current state for the properties you care about.
|
||||
Returns the path through the DOM tree from the `<body>` element to the current current cursor position. This is a string consisting of the tag, id, class, font, and color names in CSS format. For example `BODY>BLOCKQUOTE>DIV#id>STRONG>SPAN.font[fontFamily=Arial,sans-serif]>EM`. If a selection has been made, so different parts of the selection may have different paths, the value will be `(selection)`. The path is useful for efficiently determining the current formatting for bold, italic, underline etc, and thus determining button state. If a selection has been made, you can has the `hasFormat` method instead to get the current state for the properties you care about.
|
||||
|
||||
### getFontInfo
|
||||
|
||||
|
|
|
@ -195,6 +195,82 @@ describe('Squire RTE', function () {
|
|||
});
|
||||
});
|
||||
|
||||
describe('getPath', function () {
|
||||
var startHTML;
|
||||
beforeEach( function () {
|
||||
startHTML = '<div>one <b>two three</b> four <i>five</i></div>';
|
||||
editor.setHTML(startHTML);
|
||||
|
||||
var range = doc.createRange();
|
||||
range.setStart(doc.body.childNodes.item(0), 0);
|
||||
range.setEnd(doc.body.childNodes.item(0), 1);
|
||||
editor.setSelection(range);
|
||||
});
|
||||
|
||||
it('returns the path to the selection', function () {
|
||||
var range = doc.createRange();
|
||||
range.setStart(doc.body.childNodes.item(0).childNodes.item(1), 0);
|
||||
range.setEnd(doc.body.childNodes.item(0).childNodes.item(1), 0);
|
||||
editor.setSelection(range);
|
||||
|
||||
//Manually tell it to update the path
|
||||
editor._updatePath(range);
|
||||
expect(editor.getPath(), 'to be', 'DIV>B');
|
||||
});
|
||||
|
||||
it('includes id in the path', function () {
|
||||
editor.insertHTML('<div id="spanId">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV#spanId');
|
||||
});
|
||||
|
||||
it('includes class name in the path', function () {
|
||||
editor.insertHTML('<div class="myClass">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.myClass');
|
||||
});
|
||||
|
||||
it('includes all class names in the path', function () {
|
||||
editor.insertHTML('<div class="myClass myClass2 myClass3">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.myClass.myClass2.myClass3');
|
||||
});
|
||||
|
||||
it('includes direction in the path', function () {
|
||||
editor.insertHTML('<div dir="rtl">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV[dir=rtl]');
|
||||
});
|
||||
|
||||
it('includes highlight value in the path', function () {
|
||||
editor.insertHTML('<div class="highlight" style="background-color: rgb(255, 0, 0)">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.highlight[backgroundColor=rgb(255,0,0)]');
|
||||
});
|
||||
|
||||
it('includes color value in the path', function () {
|
||||
editor.insertHTML('<div class="colour" style="color: rgb(255, 0, 0)">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.colour[color=rgb(255,0,0)]');
|
||||
});
|
||||
|
||||
it('includes font family value in the path', function () {
|
||||
editor.insertHTML('<div class="font" style="font-family: Arial, sans-serif">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.font[fontFamily=Arial,sans-serif]');
|
||||
});
|
||||
|
||||
it('includes font size value in the path', function () {
|
||||
editor.insertHTML('<div class="size" style="font-size: 12pt">Text</div>');
|
||||
expect(editor.getPath(), 'to be', 'DIV.size[fontSize=12pt]');
|
||||
});
|
||||
|
||||
it('is (selection) when the selection is a range', function() {
|
||||
var range = doc.createRange();
|
||||
range.setStart(doc.body.childNodes.item(0).childNodes.item(0), 0);
|
||||
range.setEnd(doc.body.childNodes.item(0).childNodes.item(3), 0);
|
||||
editor.setSelection(range);
|
||||
|
||||
//Manually tell it to update the path
|
||||
editor._updatePath(range);
|
||||
|
||||
expect(editor.getPath(), 'to be', '(selection)');
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
editor = null;
|
||||
var iframe = document.getElementById('testFrame');
|
||||
|
|
Loading…
Reference in a new issue