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();