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

Commit

Permalink
Merge pull request #747 from wymeditor/issue_747
Browse files Browse the repository at this point in the history
Image resizing
  • Loading branch information
mightyiam committed Oct 28, 2015
2 parents e17a6e4 + 518ffb3 commit 83200f2
Show file tree
Hide file tree
Showing 19 changed files with 894 additions and 143 deletions.
2 changes: 1 addition & 1 deletion .jshintrc
Expand Up @@ -51,7 +51,7 @@
"jquery" : true,

"nomen" : false,
"onevar" : true,
"onevar" : false,
"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",
"<%= 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>',
'<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',
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",
"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');
}
});
});
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 () {
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 () {
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

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) {
var result = [];
for (var key in elem) {
if (key.indexOf('on') === 0 && key !== 'onmousemove') {
result.push(key.slice(2));
}
}
return result.join(' ');
}
};

Expand Down

0 comments on commit 83200f2

Please sign in to comment.