lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-10-15 19:54:57 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add image rotate option to Image Editor.

Browse Source
This commit is contained in:
Piotr Szmyd
2014-12-18 17:46:33 +01:00
parent dd9e4ad3e9
commit 085a7b7445
5 changed files with 115 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Orchard.Web/Modules/Orchard.ImageEditor/Drivers/ImageEditorRotatePartDriver.cs Normal file
View File

@@ -0,0 +1,14 @@
using Orchard.ContentManagement.Drivers;
using Orchard.ImageEditor.Models;
namespace Orchard.ImageEditor.Drivers {
public class ImageEditorRotatePartDriver : ContentPartDriver<ImageEditorPart> {
protected override DriverResult Display(ImageEditorPart part, string displayType, dynamic shapeHelper) {
return Combined(
ContentShape("Parts_Image_Editor_Rotate", () => shapeHelper.Parts_Image_Editor_Rotate()),
ContentShape("Parts_Image_Editor_RotateOptions", () => shapeHelper.Parts_Image_Editor_RotateOptions())
);
}
}
}

9
src/Orchard.Web/Modules/Orchard.ImageEditor/Orchard.ImageEditor.csproj
View File

@@ -84,6 +84,7 @@
<Content Include="Web.config" />
<Content Include="Scripts\Web.config" />
<Content Include="Styles\Web.config" />
<Compile Include="Drivers\ImageEditorRotatePartDriver.cs" />
<Compile Include="Properties\AssemblyInfo.cs" />
<Content Include="Module.txt" />
</ItemGroup>
@@ -129,7 +130,7 @@
<Content Include="Views\Parts\Image.Editor.Resize.cshtml" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\Parts\Image.Editor.ResizeOptions.cshtml" />
<Content Include="Views\Parts\Image.Editor.RotateOptions.cshtml" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\Parts\Image.Editor.CropOptions.cshtml" />
@@ -149,6 +150,12 @@
<ItemGroup>
<Content Include="Views\Admin\Edit.cshtml" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\Parts\Image.Editor.Rotate.cshtml" />
</ItemGroup>
<ItemGroup>
<Content Include="Views\Parts\Image.Editor.ResizeOptions.cshtml" />
</ItemGroup>
<PropertyGroup>
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

2
src/Orchard.Web/Modules/Orchard.ImageEditor/Placement.info
View File

@@ -10,6 +10,8 @@
<Place Parts_Image_Editor_CropOptions="Options"/>
<Place Parts_Image_Editor_Resize="Buttons:6"/>
<Place Parts_Image_Editor_ResizeOptions="Options"/>
<Place Parts_Image_Editor_Rotate="Buttons:7"/>
<Place Parts_Image_Editor_RotateOptions="Options"/>
<Place Parts_Image_Editor_Filter="Buttons:7"/>
<Place Parts_Image_Editor_FilterOptions="Options"/>

70
src/Orchard.Web/Modules/Orchard.ImageEditor/Views/Parts/Image.Editor.Rotate.cshtml Normal file
View File

@@ -0,0 +1,70 @@
<button id="rotate">@T("Rotate")</button>
@using (Script.Foot())
{
<script type="text/javascript">
//<![CDATA[
jQuery(function ($) {
$.imageEditor.registerPlugin(function () {
console.log('initializing rotate');
var host = $.imageEditor;
// save rotate
$('#rotate-apply').on('click', function () {
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
var degrees = $("#rotate-angle").val();
if (degrees != "180") {
canvas.width = host.image.height;
canvas.height = host.image.width;
} else {
canvas.width = host.image.width;
canvas.height = host.image.height;
}
$(host.image).css({
width: canvas.width,
height: canvas.height
});
var context = canvas.getContext('2d');
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height);
host.image.src = canvas.toDataURL("image/png");
};
image.src = host.image.src;
$('#rotate-options').hide();
host.hideOptions();
});
// cancel rotation
$('#rotate-cancel').on('click', function () {
$('#rotate-options').hide();
host.hideOptions();
});
$('#rotate').on("click", function () {
console.log('rotate clicked');
$('#rotate-options').show();
host.showOptions();
// focus and select current width
$("#rotate-angle").focus();
$("#rotate.angle").select();
});
});
});
//]]>
</script>
}

21
src/Orchard.Web/Modules/Orchard.ImageEditor/Views/Parts/Image.Editor.RotateOptions.cshtml Normal file
View File

@@ -0,0 +1,21 @@
@using Orchard.ImageEditor.Models
<div id="rotate-options" style="display: none">
<fieldset>
<div>
<label for="rotate-angle">@T("Angle")</label>
<select id="rotate-angle" class="text small">
<option value="0" selected="selected">@T("None")</option>
<option value="90">@T("90 deg. CW")</option>
<option value="270">@T("90 deg. CCW")</option>
<option value="180">@T("180 deg.")</option>
</select>
<span class="hint">@T("Rotation angle.")</span>
</div>
</fieldset>
<button id="rotate-apply">@T("Apply")</button>
<button id="rotate-cancel">@T("Cancel")</button>
</div>