diff --git a/dev/app/app.js b/dev/app/app.js
index be6e9b7..2c43747 100644
--- a/dev/app/app.js
+++ b/dev/app/app.js
@@ -17,6 +17,15 @@ angular
vm.showControls = true;
vm.fit = false;
+ vm.myButtonLabels = {
+ rotateLeft: ' (rotate left) ',
+ rotateRight: ' (rotate right) ',
+ zoomIn: ' (zoomIn) ',
+ zoomOut: ' (zoomOut) ',
+ fit: ' (fit) ',
+ crop: ' [crop] '
+ };
+
vm.updateResultImage = function(base64) {
vm.resultImage = base64;
$scope.$apply(); // Apply the changes.
diff --git a/dev/index.html b/dev/index.html
index 0b5db75..4281548 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -26,6 +26,7 @@
Angular image cropper
center-on-init="true"
api="vm.cropperApi"
crop-callback="vm.updateResultImage"
+ action-labels="vm.myButtonLabels"
>
diff --git a/src/imageCropper.js b/src/imageCropper.js
index 9133eb1..7f189e6 100644
--- a/src/imageCropper.js
+++ b/src/imageCropper.js
@@ -27,7 +27,15 @@ function Cropper(options) {
showControls: true,
fitOnInit: false,
centerOnInit: false,
- zoomStep: 0.1
+ zoomStep: 0.1,
+ actionLabels: {
+ rotateLeft: ' < ',
+ rotateRight: ' > ',
+ zoomIn: ' + ',
+ zoomOut: ' - ',
+ fit: '(fit)',
+ crop: '[crop]'
+ }
};
// Setup options.
@@ -176,18 +184,18 @@ Cropper.prototype.buildDOM = function() {
_elements.controls.wrapper.className = 'imgCropper-controls';
_elements.controls.rotateLeft = document.createElement('button');
- _elements.controls.rotateLeft.innerHTML = ' ⟲ ';
+ _elements.controls.rotateLeft.innerHTML = this.options.actionLabels.rotateLeft;
_elements.controls.rotateRight = document.createElement('button');
- _elements.controls.rotateRight.innerHTML = ' ⟳ ';
+ _elements.controls.rotateRight.innerHTML = this.options.actionLabels.rotateRight;
_elements.controls.zoomIn = document.createElement('button');
- _elements.controls.zoomIn.innerHTML = ' ⊕ ';
+ _elements.controls.zoomIn.innerHTML = this.options.actionLabels.zoomIn;
_elements.controls.zoomOut = document.createElement('button');
- _elements.controls.zoomOut.innerHTML = ' ⊖ ';
+ _elements.controls.zoomOut.innerHTML = this.options.actionLabels.zoomOut;
_elements.controls.fit = document.createElement('button');
- _elements.controls.fit.innerHTML = ' ⊞ ';
+ _elements.controls.fit.innerHTML = this.options.actionLabels.fit;
_elements.controls.crop = document.createElement('button');
- _elements.controls.crop.innerHTML = ' ⧉ ';
+ _elements.controls.crop.innerHTML = this.options.actionLabels.crop;
// Target -> Wrapper -> buttons
_elements.controls.wrapper.appendChild(_elements.controls.rotateLeft);
diff --git a/src/imageCropperDirective.js b/src/imageCropperDirective.js
index 9cae94d..ab9313f 100644
--- a/src/imageCropperDirective.js
+++ b/src/imageCropperDirective.js
@@ -19,13 +19,17 @@ module.exports = function(angular, Cropper) {
imageUrl: '@',
showControls: '@',
width: '@',
- zoomStep: '@'
+ zoomStep: '@',
+ actionLabels: '&'
},
bindToController: true,
controllerAs: 'vm',
controller: function() {
var self = this;
+ // Get action labels.
+ this.actionLabels = this.actionLabels();
+
// Get callback.
this.apiCallback = this.api();
this.cropCallback = this.cropCallback();