Image resizing #747
Changes from 61 commits
df2f162
4553a10
4276e4a
d32e80d
0aabe0e
9187554
ff1d1aa
100e7ed
d900318
6d3ffa9
572e46b
4bac15d
3522002
0d26d43
65b78d1
8b5d153
c7bbd4f
7d0609e
73c395e
cd1ae2b
061b0b8
77317ef
5b01833
20f7e06
e5d8535
57f1db4
adbca67
9968fc2
7882747
df26db6
40bbf32
8db3eef
5d8332d
a742512
aae5d8f
2e4b4a0
e4bcb56
1807196
e3b4c11
2f71826
3dfaefc
d67dfbb
a1f8441
08e1ff6
757b84a
55cbb30
ae5e3ef
fb59c5d
91bdd74
d0cf40d
af2c84b
d44ea4c
cd2db34
c27f314
bf48e28
82c38c0
503189c
274e93f
88cc54e
5d34cef
73bfe8a
2a3f9f1
518ffb3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -274,6 +274,7 @@ module.exports = function (grunt) { | |
"<%= yeoman.app %>/wymeditor/editor/base.js", | ||
"<%= yeoman.app %>/wymeditor/editor/" + | ||
"document-structure-manager.js", | ||
"<%= yeoman.app %>/wymeditor/editor/image-handler.js", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Concatenate me this 💋 |
||
"<%= yeoman.app %>/wymeditor/editor/gecko.js", | ||
"<%= yeoman.app %>/wymeditor/editor/webkit.js", | ||
"<%= yeoman.app %>/wymeditor/editor/blink.js", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -51,7 +51,7 @@ <h2>Look ma! No double scrollbar!</h2> | |
html: [ | ||
'<p>Some initial content...</p>', | ||
'<p>And an image for asynchronously added size:</p>', | ||
'<img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Flag_of_Indiana.svg" alt="Flag of Indiana">', | ||
'<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Flag_of_Indiana.svg/500px-Flag_of_Indiana.svg.png" alt="Flag of Indiana"></p>', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do not use an SVG. They can't be resized in IE. Instead, they are cropped. |
||
'<p>Type in a few paragraphs and see the editor grow in height.</p>' | ||
].join(''), | ||
skin: 'seamless', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,6 +21,7 @@ function loadWymSrc(srcPath, extraRequirements, jqueryVersion) { | |
srcPath + 'wymeditor/editor/dialogs.js', | ||
srcPath + 'wymeditor/editor/base.js', | ||
srcPath + 'wymeditor/editor/document-structure-manager.js', | ||
srcPath + 'wymeditor/editor/image-handler.js', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Load me this in dev 💋 |
||
srcPath + 'wymeditor/editor/gecko.js', | ||
srcPath + 'wymeditor/editor/trident-pre-7.js', | ||
srcPath + 'wymeditor/editor/trident-7.js', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -70,6 +70,7 @@ | |
"specific_feature_tests/undo_redo.js", | ||
"specific_feature_tests/selection.js", | ||
"specific_feature_tests/images.js", | ||
"specific_feature_tests/image-resize-handle.js", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Test me this 💋 |
||
"specific_feature_tests/class_toggling.js", | ||
"specific_feature_tests/links.js", | ||
"specific_feature_tests/dialogs.js", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
/* jshint maxlen: 100 */ | ||
/* global | ||
manipulationTestHelper, | ||
prepareUnitTestModule, | ||
skipKeyboardShortcutTests, | ||
SKIP_THIS_TEST, | ||
test, | ||
expectOneMore, | ||
simulateKeyCombo, | ||
stop, | ||
start, | ||
strictEqual, | ||
ok, | ||
IMG_SRC | ||
*/ | ||
'use strict'; | ||
|
||
module("images-resize_handle", {setup: prepareUnitTestModule}); | ||
|
||
test("Resize handle is prepended to body on image `mousemove`", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img').mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
var $resizeHandle = wymeditor.$body().children().first(); | ||
expectOneMore(); | ||
ok($resizeHandle.hasClass('wym-resize-handle')); | ||
} | ||
}); | ||
}); | ||
|
||
test("image marker is immediately after image", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img').mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
expectOneMore(); | ||
var $imgMarker = wymeditor.$body().find('.wym-image-marker'); | ||
ok($imgMarker.prev('img').length); | ||
} | ||
}); | ||
}); | ||
|
||
test("resize handle has editor-only class", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img').mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
var $resizeHandle = wymeditor.$body().find('.wym-resize-handle'); | ||
expectOneMore(); | ||
ok($resizeHandle.hasClass('wym-editor-only')); | ||
} | ||
}); | ||
}); | ||
|
||
test("resize handle hidden on `mousemove` outside image and handle", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img') | ||
.mousemove() | ||
.parent().mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
expectOneMore(); | ||
strictEqual(wymeditor.$body().find('.wym-resize-handle').css('display'), 'none'); | ||
} | ||
}); | ||
}); | ||
|
||
test("resize handle not hidden on `mousemove` over handle", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img').mousemove(); | ||
wymeditor.$body().find('.wym-resize-handle').mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
expectOneMore(); | ||
strictEqual(wymeditor.$body().find('.wym-resize-handle').css('display'), 'block'); | ||
} | ||
}); | ||
}); | ||
|
||
test("resize handle with no image is hidden async after 'keypress'", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
setCaretInSelector: 'p', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img').mousemove().remove(); | ||
simulateKeyCombo(wymeditor, 'a'); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
expectOneMore(); | ||
stop(); | ||
setTimeout(function () { | ||
start(); | ||
strictEqual(wymeditor.$body().find('.wym-resize-handle').css('display'), 'none'); | ||
}, 0); | ||
}, | ||
skipFunc: function () { | ||
if (skipKeyboardShortcutTests) { | ||
return SKIP_THIS_TEST; | ||
} | ||
} | ||
}); | ||
}); | ||
|
||
test("resize handle with no image is hidden on `mousemove`", function () { | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" /></p>', | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find('img') | ||
.mousemove() | ||
.remove(); | ||
wymeditor.$body().find('.wym-resize-handle').mousemove(); | ||
}, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
expectOneMore(); | ||
strictEqual(wymeditor.$body().find('.wym-resize-handle').css('display'), 'none'); | ||
} | ||
}); | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There can be many more tests, but this is good enough for the benefit we're getting. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,14 @@ | ||
/* jshint evil: true */ | ||
/* global | ||
manipulationTestHelper, | ||
stop, | ||
start, | ||
prepareUnitTestModule, | ||
test, | ||
QUnit, | ||
expectOneMore, | ||
expectMore, | ||
strictEqual, | ||
makeSelection, | ||
inPhantomjs, | ||
SKIP_THIS_TEST, | ||
stop, | ||
start, | ||
IMG_SRC | ||
*/ | ||
"use strict"; | ||
|
@@ -188,99 +185,32 @@ test("Returns an image when it is exclusively selected", function () { | |
|
||
module("images-selection", {setup: prepareUnitTestModule}); | ||
|
||
test("Image is selected via `mouseup` in non pre-7 Trident", function () { | ||
test("Image is selected via `click`", function () { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This one is much simpler now. |
||
manipulationTestHelper({ | ||
startHtml: getSelectedImageHtml, | ||
prepareFunc: function (wymeditor) { | ||
wymeditor.deselect(); | ||
}, | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find("img").mouseup(); | ||
wymeditor.$body().find("img") | ||
.click(); | ||
}, | ||
expectedResultHtml: getSelectedImageHtml, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
var img = wymeditor.$body().find("img")[0]; | ||
expectOneMore(); | ||
strictEqual( | ||
wymeditor.getSelectedImage(), | ||
img | ||
); | ||
}, | ||
skipFunc: function () { | ||
if (inPhantomjs) { | ||
return SKIP_THIS_TEST; | ||
} | ||
if (jQuery.browser.msie && jQuery.browser.versionNumber <= 10) { | ||
return SKIP_THIS_TEST; | ||
} | ||
} | ||
}); | ||
}); | ||
|
||
test("Image is selected via `mouseup` in pre-7 trident", function () { | ||
var wymeditor, | ||
_selectSingleNode, | ||
resumeManipulationTestHelper; | ||
|
||
if ( | ||
jQuery.browser.msie !== true || | ||
jQuery.browser.versionNumber > 10 | ||
) { | ||
QUnit.expect(0); | ||
return; | ||
} | ||
|
||
wymeditor = jQuery.wymeditors(0); | ||
|
||
// Stop QUnit from running the next test | ||
stop(); | ||
// Save the original | ||
_selectSingleNode = wymeditor._selectSingleNode; | ||
// Replace it with a wrapper | ||
wymeditor._selectSingleNode = function (node) { | ||
// Call the original | ||
_selectSingleNode.call(wymeditor, node); | ||
// Unwrap | ||
wymeditor._selectSingleNode = _selectSingleNode; | ||
// Resume `manipulationTestHelper` | ||
resumeManipulationTestHelper(); | ||
// Allow QUnit to run the next test | ||
start(); | ||
}; | ||
|
||
resumeManipulationTestHelper = manipulationTestHelper({ | ||
async: true, | ||
startHtml: getSelectedImageHtml, | ||
prepareFunc: function (wymeditor) { | ||
wymeditor.deselect(); | ||
}, | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find("img").mouseup(); | ||
}, | ||
expectedResultHtml: getSelectedImageHtml, | ||
additionalAssertionsFunc: function (wymeditor) { | ||
var img = wymeditor.$body().find("img")[0]; | ||
expectOneMore(); | ||
strictEqual( | ||
wymeditor.getSelectedImage(), | ||
img | ||
); | ||
} | ||
}); | ||
}); | ||
|
||
test("Image is selected via `dragend` in IE", function () { | ||
manipulationTestHelper({ | ||
startHtml: getSelectedImageHtml, | ||
prepareFunc: function (wymeditor) { | ||
wymeditor.deselect(); | ||
}, | ||
manipulationFunc: function (wymeditor) { | ||
wymeditor.$body().find("img").trigger("dragend"); | ||
}, | ||
expectedResultHtml: getSelectedImageHtml, | ||
skipFunc: function () { | ||
return jQuery.browser.msie ? false : SKIP_THIS_TEST; | ||
var assertImageIsSelected = function () { | ||
strictEqual( | ||
wymeditor.getSelectedImage(), | ||
img | ||
); | ||
}; | ||
if (jQuery.browser.msie && jQuery.browser.versionNumber === 8) { | ||
// image is selected async | ||
stop(); | ||
setTimeout(function () { | ||
start(); | ||
assertImageIsSelected(); | ||
}); | ||
return; | ||
} | ||
assertImageIsSelected(); | ||
} | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,8 @@ | |
/* global | ||
wymEqual, | ||
prepareUnitTestModule, | ||
manipulationTestHelper, | ||
IMG_SRC, | ||
testNoChangeInHtmlArray, | ||
test, | ||
QUnit, | ||
|
@@ -934,6 +936,18 @@ test("Class removal is case insensitive", function () { | |
WYMeditor.CLASSES_REMOVED_BY_PARSER = defaultClassesRemovedByParser; | ||
}); | ||
|
||
module("XmlParser-remove_style_attribute", {setup: prepareUnitTestModule}); | ||
|
||
test("Style attribute is removed from images", function () { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because we use style on the image for UI. |
||
var expectedResultHtml = '<p><img src="' + IMG_SRC + '" /></p>'; | ||
manipulationTestHelper({ | ||
startHtml: '<p><img src="' + IMG_SRC + '" style="padding: 1em" /></p>', | ||
expectedStartHtml: expectedResultHtml, | ||
parseHtml: true, | ||
expectedResultHtml: expectedResultHtml | ||
}); | ||
}); | ||
|
||
module("XmlParser-unwrap_single_tag_in_list_item", {setup: prepareUnitTestModule}); | ||
|
||
var tagsToUnwrapInLists = | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -420,6 +420,9 @@ jQuery.extend(WYMeditor, { | |
// within the editor. | ||
EDITOR_ONLY_CLASS: "wym-editor-only", | ||
|
||
// Class for resize handles | ||
RESIZE_HANDLE_CLASS: "wym-resize-handle", | ||
|
||
// Classes that will be removed from all tags' class attribute by the | ||
// parser. | ||
CLASSES_REMOVED_BY_PARSER: [ | ||
|
@@ -1087,7 +1090,7 @@ jQuery.fn.parentsOrSelf = function (selector) { | |
} | ||
}; | ||
|
||
// String & array helpers | ||
// Various helpers | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because I added a helper that isn't about strings. |
||
|
||
WYMeditor.Helper = { | ||
|
||
|
@@ -1141,6 +1144,20 @@ WYMeditor.Helper = { | |
} | ||
} | ||
return null; | ||
}, | ||
|
||
// naively returns all event types | ||
// of the provided an element | ||
// according the its property keys that | ||
// begin with 'on' | ||
getAllEventTypes: function (elem) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Helpful for debugging!!! |
||
var result = []; | ||
for (var key in elem) { | ||
if (key.indexOf('on') === 0 && key !== 'onmousemove') { | ||
result.push(key.slice(2)); | ||
} | ||
} | ||
return result.join(' '); | ||
} | ||
}; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Blah. I don't like this style and it was removed in JSHint. Notice you can't find it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I 💟
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lol...of course there's already a fork with semicolons :p