Skip to content
This repository has been archived by the owner on Apr 2, 2021. It is now read-only.

Image resizing #747

Merged
merged 63 commits into from Oct 28, 2015
Merged
Show file tree
Hide file tree
Changes from 61 commits
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
df2f162
ImageResizer module
mightyiam Oct 8, 2015
4553a10
Seamless skin example initial content: wrap the `img` in a `p`
mightyiam Oct 8, 2015
4276e4a
Use a PNG instead of an SVG in example content of seamless skin
mightyiam Oct 12, 2015
d32e80d
Merge branch 'master' into issue_747
mightyiam Oct 12, 2015
0aabe0e
ImageResizer: factor out some new methods
mightyiam Oct 12, 2015
9187554
ImageResizer: change text in resize handle
mightyiam Oct 12, 2015
ff1d1aa
ImageResizer: fix image de-instrumentation
mightyiam Oct 12, 2015
100e7ed
ImageResizer: small code refactor
mightyiam Oct 12, 2015
d900318
Small refactor in ImageResizer
mightyiam Oct 12, 2015
6d3ffa9
ImageResizer: name events `evt` instead of `e`
mightyiam Oct 12, 2015
572e46b
ImageResizer: return false on image clicks just in case
mightyiam Oct 12, 2015
4bac15d
ImageResizer: remove extra blank line
mightyiam Oct 12, 2015
3522002
ImageResizer: handle dragstart, cut and selectionchange
mightyiam Oct 12, 2015
0d26d43
ImageResizer: rename the event handlers to be more explicit
mightyiam Oct 12, 2015
65b78d1
ImageResizer: slight optimization
mightyiam Oct 12, 2015
8b5d153
ImageResizer: handle document mouse/key-down events
mightyiam Oct 12, 2015
c7bbd4f
ImageResizer: workaround firefox initial handle width bug
mightyiam Oct 13, 2015
7d0609e
Big work on ImageHandler (was ImageResizer)
mightyiam Oct 21, 2015
73c395e
Changelog entry for #747
mightyiam Oct 21, 2015
cd1ae2b
Some unit tests for image resize handle
mightyiam Oct 21, 2015
061b0b8
Update image selection tests for new ImageHandler
mightyiam Oct 21, 2015
77317ef
Add new image handle tests to the test suite
mightyiam Oct 21, 2015
5b01833
XmlValidator: remove style attribute from images + test
mightyiam Oct 24, 2015
20f7e06
ImageHandler: workaround an IE8 mousemove quirk
mightyiam Oct 24, 2015
e5d8535
ImageHandler: skip a keypress test in IE8
mightyiam Oct 24, 2015
57f1db4
Adjust 'image selection via click' test for IE8
mightyiam Oct 24, 2015
adbca67
Make linter happy
mightyiam Oct 24, 2015
9968fc2
Tiny fix in an ImageHandler test
mightyiam Oct 24, 2015
7882747
Fix ImageHandler's _onMousemove
mightyiam Oct 24, 2015
df26db6
ImageHandler: style the image without moving it!
mightyiam Oct 24, 2015
40bbf32
ImageHandler: merge _onImgMouseover into _onMousemove
mightyiam Oct 24, 2015
8db3eef
ImageHandler: detach resize handle on image dragstart
mightyiam Oct 24, 2015
5d8332d
ImageHandler: disallow drag-drop images in IE9
mightyiam Oct 24, 2015
a742512
ImageHandler: remove extra line
mightyiam Oct 24, 2015
aae5d8f
ImageHandler: some code style fixes
mightyiam Oct 24, 2015
2e4b4a0
ImageHandler: some code comments fixes
mightyiam Oct 24, 2015
e4bcb56
ImageHandler: Use different cursors on imgs
mightyiam Oct 24, 2015
1807196
Fix some ImageHandler tests
mightyiam Oct 25, 2015
e3b4c11
ImageHandler: decouple _onImgClick from resize handle
mightyiam Oct 25, 2015
2f71826
Fix some lint issues
mightyiam Oct 25, 2015
3dfaefc
Remove WYMeditor.IMAGE_CONTAINER_CLASS
mightyiam Oct 25, 2015
d67dfbb
Fix some click handler code
mightyiam Oct 25, 2015
a1f8441
Even more correct click binding
mightyiam Oct 25, 2015
08e1ff6
ImageHandler: semantic change (img)DragDropAllowed
mightyiam Oct 25, 2015
757b84a
ImageHandler: _IMAGE_HIGHLIGHT_COLOR
mightyiam Oct 25, 2015
55cbb30
ImageHandler: use HR in resize handle text
mightyiam Oct 25, 2015
ae5e3ef
ImageHandler: use HR in resize handle text
mightyiam Oct 25, 2015
fb59c5d
Merge branch 'issue_747' of github.com:wymeditor/wymeditor into issue…
mightyiam Oct 25, 2015
91bdd74
ImageHandler: fix issue with resize handle hr
mightyiam Oct 25, 2015
d0cf40d
ImageHandler: code comments and style fixes
mightyiam Oct 25, 2015
af2c84b
ImageHandler: use a dedicated current image marker
mightyiam Oct 25, 2015
d44ea4c
ImageHandler: allow image drag-drop in firefox
mightyiam Oct 26, 2015
cd2db34
ImageHandler: fix line flow in firefox in resize handle
mightyiam Oct 26, 2015
c27f314
ImageHandler: some code comment fixes
mightyiam Oct 26, 2015
bf48e28
ImageHandler: fix and allow drag-drop of images in IE11
mightyiam Oct 26, 2015
82c38c0
ImageHandler: IE11: prevent native resize handles on resize handle
mightyiam Oct 26, 2015
503189c
ImageHandler: registerModification
mightyiam Oct 26, 2015
274e93f
some code comment fixes
mightyiam Oct 26, 2015
88cc54e
ImageHandler: make linter happy
mightyiam Oct 26, 2015
5d34cef
Update image-resize-handle tests
mightyiam Oct 26, 2015
73bfe8a
ImageHandler: do not store `_resizeHandleAttached` as state. check
mightyiam Oct 26, 2015
2a3f9f1
ImageHandler: fix code comment
mightyiam Oct 28, 2015
518ffb3
ImageHandler: remove extra space char
mightyiam Oct 28, 2015
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .jshintrc
Expand Up @@ -51,7 +51,7 @@
"jquery" : true,

"nomen" : false,
"onevar" : true,
"onevar" : false,
Copy link
Contributor Author

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I 💟 js-standard-style

Copy link
Contributor

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

"passfail" : false,
"white" : true,

Expand Down
3 changes: 3 additions & 0 deletions CHANGELOG.md
Expand Up @@ -7,6 +7,9 @@ WYMeditor.

*release-date* TBD

* [#747](https://github.com/wymeditor/wymeditor/pull/747)
New: Image resizing

## 1.0.7

*release-date* September 22 2015
Expand Down
1 change: 1 addition & 0 deletions Gruntfile.js
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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",
Expand Down
2 changes: 1 addition & 1 deletion src/examples/20-seamless.html
Expand Up @@ -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>',
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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',
Expand Down
1 change: 1 addition & 0 deletions src/test/load-src.dev.js
Expand Up @@ -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',
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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',
Expand Down
1 change: 1 addition & 0 deletions src/test/unit/index.html
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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",
Expand Down
129 changes: 129 additions & 0 deletions src/test/unit/specific_feature_tests/image-resize-handle.js
@@ -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');
}
});
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.

112 changes: 21 additions & 91 deletions src/test/unit/specific_feature_tests/images.js
@@ -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";
Expand Down Expand Up @@ -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 () {
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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();
}
});
});
14 changes: 14 additions & 0 deletions src/test/unit/specific_feature_tests/xml_parser.js
Expand Up @@ -2,6 +2,8 @@
/* global
wymEqual,
prepareUnitTestModule,
manipulationTestHelper,
IMG_SRC,
testNoChangeInHtmlArray,
test,
QUnit,
Expand Down Expand Up @@ -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 () {
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 =
Expand Down
19 changes: 18 additions & 1 deletion src/wymeditor/core.js
Expand Up @@ -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: [
Expand Down Expand Up @@ -1087,7 +1090,7 @@ jQuery.fn.parentsOrSelf = function (selector) {
}
};

// String & array helpers
// Various helpers
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I added a helper that isn't about strings.


WYMeditor.Helper = {

Expand Down Expand Up @@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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(' ');
}
};

Expand Down