Use glif instead of openlayers for imagemanipulation behavior
This commit is contained in:
Jacob Mendt
parent
3164a54882
commit
7bec34a2ca
|
|
@ -0,0 +1,26 @@
|
|||
/*!
|
||||
* WebGL image filter library
|
||||
* https://github.com/slub/webgl-image-filter/
|
||||
*
|
||||
* Released under the MIT license (https://github.com/slub/webgl-image-filter/blob/master/LICENSE)
|
||||
*
|
||||
* Date: 2015-11-04
|
||||
*/
|
||||
(function(){var f=this;function h(a,c){var d=a.split("."),b=f;d[0]in b||!b.execScript||b.execScript("var "+d[0]);for(var e;d.length&&(e=d.shift());)d.length||void 0===c?b[e]?b=b[e]:b=b[e]={}:b[e]=c};var l={a:{},compile:function(a,c,d){c=a.createShader(c);a.shaderSource(c,d);a.compileShader(c);return a.getShaderParameter(c,a.COMPILE_STATUS)?c:(console.log(a.getShaderInfoLog(c)),null)},c:function(a,c){function d(a,b,c){a.replace(new RegExp("\\b"+b+" \\w+ (\\w+)","ig"),function(a,b){c[b]=0})}var b=a.createProgram(),e=l.compile(a,a.VERTEX_SHADER,l.VERTEX_IDENTITY),g=l.compile(a,a.FRAGMENT_SHADER,c);b.uniform={};b.attribute={};a.attachShader(b,e);a.attachShader(b,g);a.linkProgram(b);a.getProgramParameter(b,
|
||||
a.LINK_STATUS)||console.log(a.getProgramInfoLog(b));d(l.VERTEX_IDENTITY,"attribute",b.attribute);for(var k in b.attribute)b.attribute[k]=a.getAttribLocation(b,k);d(l.VERTEX_IDENTITY,"uniform",b.uniform);d(c,"uniform",b.uniform);for(var m in b.uniform)b.uniform[m]=a.getUniformLocation(b,m);return b},BLUR:"precision highp float;\nvarying vec2 vUv;\nuniform sampler2D texture;\nuniform vec2 px;\nvoid main(void) {\ngl_FragColor = vec4(0.0);\ngl_FragColor += texture2D(texture, vUv + vec2(-7.0*px.x, -7.0*px.y))*0.0044299121055113265;\ngl_FragColor += texture2D(texture, vUv + vec2(-6.0*px.x, -6.0*px.y))*0.00895781211794;\ngl_FragColor += texture2D(texture, vUv + vec2(-5.0*px.x, -5.0*px.y))*0.0215963866053;\ngl_FragColor += texture2D(texture, vUv + vec2(-4.0*px.x, -4.0*px.y))*0.0443683338718;\ngl_FragColor += texture2D(texture, vUv + vec2(-3.0*px.x, -3.0*px.y))*0.0776744219933;\ngl_FragColor += texture2D(texture, vUv + vec2(-2.0*px.x, -2.0*px.y))*0.115876621105;\ngl_FragColor += texture2D(texture, vUv + vec2(-1.0*px.x, -1.0*px.y))*0.147308056121;\ngl_FragColor += texture2D(texture, vUv )*0.159576912161;\ngl_FragColor += texture2D(texture, vUv + vec2( 1.0*px.x, 1.0*px.y))*0.147308056121;\ngl_FragColor += texture2D(texture, vUv + vec2( 2.0*px.x, 2.0*px.y))*0.115876621105;\ngl_FragColor += texture2D(texture, vUv + vec2( 3.0*px.x, 3.0*px.y))*0.0776744219933;\ngl_FragColor += texture2D(texture, vUv + vec2( 4.0*px.x, 4.0*px.y))*0.0443683338718;\ngl_FragColor += texture2D(texture, vUv + vec2( 5.0*px.x, 5.0*px.y))*0.0215963866053;\ngl_FragColor += texture2D(texture, vUv + vec2( 6.0*px.x, 6.0*px.y))*0.00895781211794;\ngl_FragColor += texture2D(texture, vUv + vec2( 7.0*px.x, 7.0*px.y))*0.0044299121055113265;\n}",
|
||||
COLOR_WITH_ALPHA:"precision highp float;\nvarying vec2 vUv;\nuniform sampler2D texture;\nuniform float m[20];\nvoid main(void) {\nvec4 c = texture2D(texture, vUv);\ngl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[3] * c.a + m[4];\ngl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[8] * c.a + m[9];\ngl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14];\ngl_FragColor.a = m[15] * c.r + m[16] * c.g + m[17] * c.b + m[18] * c.a + m[19];\n}",COLOR_WITHOUT_ALPHA:"precision highp float;\nvarying vec2 vUv;\nuniform sampler2D texture;\nuniform float m[20];\nvoid main(void) {\nvec4 c = texture2D(texture, vUv);\ngl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[4];\ngl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[9];\ngl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[14];\ngl_FragColor.a = c.a;\n}",
|
||||
CONVOLUTION:"precision highp float;\nvarying vec2 vUv;\nuniform sampler2D texture;\nuniform vec2 px;\nuniform float m[9];\nvoid main(void) {\nvec4 c11 = texture2D(texture, vUv - px);\nvec4 c12 = texture2D(texture, vec2(vUv.x, vUv.y - px.y));\nvec4 c13 = texture2D(texture, vec2(vUv.x + px.x, vUv.y - px.y));\nvec4 c21 = texture2D(texture, vec2(vUv.x - px.x, vUv.y) );\nvec4 c22 = texture2D(texture, vUv);\nvec4 c23 = texture2D(texture, vec2(vUv.x + px.x, vUv.y) );\nvec4 c31 = texture2D(texture, vec2(vUv.x - px.x, vUv.y + px.y) );\nvec4 c32 = texture2D(texture, vec2(vUv.x, vUv.y + px.y) );\nvec4 c33 = texture2D(texture, vUv + px );\ngl_FragColor = \nc11 * m[0] + c12 * m[1] + c22 * m[2] +\nc21 * m[3] + c22 * m[4] + c23 * m[5] +\nc31 * m[6] + c32 * m[7] + c33 * m[8];\ngl_FragColor.a = c22.a;\nif (c22.r == 255.0 && c22.g == 255.0 && c22.b == 255.0){\ngl_FragColor.rgb = vec3(255,255,255);\n}\n}",
|
||||
VERTEX_IDENTITY:"precision highp float;\nattribute vec2 pos;\nattribute vec2 uv;\nvarying vec2 vUv;\nuniform float flipY;\nvoid main(void) {\nvUv = uv;\ngl_Position = vec4(pos.x, pos.y*flipY, 0.0, 1.);\n}"};var r={blur:function(a,c,d,b){var e=void 0!==b?b:1;b=e/7/c.width;var e=e/7/c.height,g=n(a,"BLUR");p(a,g);a.uniform2f(g.uniform.px,0,e);q(a,c,g,!1,!0);a.uniform2f(g.uniform.px,b,0);q(a,c,g,d)},brightness:function(a,c,d,b){b=void 0!==b?b:1;r.colorMatrix.call(this,[b,0,0,0,0,0,b,0,0,0,0,0,b,0,0,0,0,0,1,0],a,c,d)},brownie:function(a,c,d){r.colorMatrix.call(this,[.5997023498159715,.34553243048391263,-.2708298674538042,0,47.43192855600873,-.037703249837783157,.8609577587992641,.15059552388459913,0,-36.96841498319127,
|
||||
.24113635128153335,-.07441037908422492,.44972182064877153,0,-7.562075277591283,0,0,0,1,0],a,c,d)},colorMatrix:function(a,c,d,b){a=new Float32Array(a);a[4]/=255;a[9]/=255;a[14]/=255;a[19]/=255;var e=n(c,1==a[18]&&0==a[3]&&0==a[8]&&0==a[13]&&0==a[15]&&0==a[16]&&0==a[17]&&0==a[19]?"COLOR_WITHOUT_ALPHA":"COLOR_WITH_ALPHA");p(c,e);c.uniform1fv(e.uniform.m,a);q(c,d,e,b)},contrast:function(a,c,d,b){b=void 0!==b?b:1;var e=-128*(b-1);r.colorMatrix.call(this,[b,0,0,0,e,0,b,0,0,e,0,0,b,0,e,0,0,0,1,0],a,c,d)},
|
||||
convolution:function(a,c,d,b){a=new Float32Array(a);var e=1/d.width,g=1/d.height,k=n(c,"CONVOLUTION");p(c,k);c.uniform1fv(k.uniform.m,a);c.uniform2f(k.uniform.px,e,g);q(c,d,k,b)},desaturateLuminance:function(a,c,d){r.colorMatrix.call(this,[.2764723,.929708,.0938197,0,-37.1,.2764723,.929708,.0938197,0,-37.1,.2764723,.929708,.0938197,0,-37.1,0,0,0,1,0],a,c,d)},detectEdges:function(a,c,d){r.convolution.call(this,[0,1,0,-3,1,0,1,0],a,c,d)},emboss:function(a,c,d,b){b=void 0!==b?b:1;r.convolution.call(this,
|
||||
[-2*b,-1*b,0,-1*b,1,1*b,0,1*b,2*b],a,c,d)},hue:function(a,c,d,b){var e=(void 0!==b?b:0)/180*Math.PI;b=Math.cos(e);e=Math.sin(e);r.colorMatrix.call(this,[.213+.787*b+-.213*e,.715+-.715*b+-.715*e,.072+-.072*b+.928*e,0,0,.213+-.213*b+.143*e,.715+b*(1-.715)+.14*e,.072+-.072*b+-.283*e,0,0,.213+-.213*b+-.787*e,.715+-.715*b+.715*e,.072+.928*b+.072*e,0,0,0,0,0,1,0],a,c,d)},kodachrome:function(a,c,d){r.colorMatrix.call(this,[1.1285582396593525,-.3967382283601348,-.03992559172921793,0,63.72958762196502,-.16404339962244616,
|
||||
1.0835251566291304,-.05498805115633132,0,24.732407896706203,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,35.62982807460946,0,0,0,1,0],a,c,d)},negative:function(a,c,d){r.contrast(a,c,d,-2)},polaroid:function(a,c,d){r.colorMatrix.call(this,[1.438,-.062,-.062,0,0,-.122,1.378,-.122,0,0,-.016,-.016,1.483,0,0,0,0,0,1,0],a,c,d)},saturation:function(a,c,d,b){b=2*(void 0!==b?b:0)/3+1;var e=-.5*(b-1);r.colorMatrix.call(this,[b,e,e,0,0,e,b,e,0,0,e,e,b,0,0,0,0,0,1,0],a,c,d)},sepia:function(a,c,
|
||||
d){r.colorMatrix.call(this,[.393,.7689999,.18899999,0,0,.349,.6859999,.16799999,0,0,.272,.5339999,.13099999,0,0,0,0,0,1,0],a,c,d)},sharpen:function(a,c,d,b){b=void 0!==b?b:1;r.convolution.call(this,[0,-1*b,0,-1*b,1+4*b,-1*b,0,-1*b,0],a,c,d)},shiftToBGR:function(a,c,d){r.colorMatrix.call(this,[0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0],a,c,d)},sobelX:function(a,c,d){r.convolution.call(this,[-1,0,1,-2,0,2,-1,0,1],a,c,d)},sobelY:function(a,c,d){r.convolution.call(this,[-1,-2,-1,0,0,0,1,2,1],a,c,d)},technicolor:function(a,
|
||||
c,d){r.colorMatrix.call(this,[1.9125277891456083,-.8545344976951645,-.09155508482755585,0,11.793603434377337,-.3087833385928097,1.7658908555458428,-.10601743074722245,0,-70.35205161461398,-.231103377548616,-.7501899197440212,1.847597816108189,0,30.950940869491138,0,0,0,1,0],a,c,d)},vintagePinhole:function(a,c,d){r.colorMatrix.call(this,[.6279345635605994,.3202183420819367,-.03965408211312453,0,9.651285835294123,.02578397704808868,.6441188644374771,.03259127616149294,0,7.462829176470591,.0466055556782719,
|
||||
-.0851232987247891,.5241648018700465,0,5.159190588235296,0,0,0,1,0],a,c,d)}};var t=[],u=0,v=0,w=[null,null];h("glif.addFilter",function(a){t.push({g:r[a],b:Array.prototype.slice.call(arguments,1)})});
|
||||
h("glif.apply",function(a,c){u=0;if(0!=t.length){w=[null,null];var d=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,-1,1,0,0,1,-1,1,1,1,1,1,0]),b=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,b);a.bufferData(a.ARRAY_BUFFER,d,a.STATIC_DRAW);a.pixelStorei(a.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);a.viewport(0,0,c.width,c.height);for(d=0;d<t.length;d++)b=t[d],b.g.apply(this,[a,c,d===t.length-1].concat(b.b||[]))}});
|
||||
function q(a,c,d,b,e){var g=null,k=null,m=null;0==u?(g=a.createTexture(),a.bindTexture(a.TEXTURE_2D,g),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.NEAREST),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.NEAREST),a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,c)):g=x(a,c).h;u++;!b||e&1?(v=(v+1)%2,k=x(a,c).f):(k=null,m=0==u%2);a.bindTexture(a.TEXTURE_2D,
|
||||
g);a.bindFramebuffer(a.FRAMEBUFFER,k);a.uniform1f(d.uniform.flipY,m?-1:1);a.drawArrays(a.TRIANGLES,0,6)}
|
||||
function x(a,c){var d=v,b=w,e;if(!(e=w[d])){e=a.createFramebuffer();a.bindFramebuffer(a.FRAMEBUFFER,e);a.bindRenderbuffer(a.RENDERBUFFER,a.createRenderbuffer());var g=a.createTexture();a.bindTexture(a.TEXTURE_2D,g);a.texImage2D(a.TEXTURE_2D,0,a.RGBA,c.width,c.height,0,a.RGBA,a.UNSIGNED_BYTE,null);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,
|
||||
a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,g,0);a.bindTexture(a.TEXTURE_2D,null);a.bindFramebuffer(a.FRAMEBUFFER,null);e={f:e,h:g}}b[d]=e;return w[d]}function n(a,c){var d=c.toUpperCase(),b=void 0!==l.a[d]?l.a[d]:l.c(a,l[d]);l.a.hasOwnProperty(d)||(l.a[d]=b);return b}h("glif.reset",function(){t=[];for(var a in l.a)delete l.a[a]});
|
||||
function p(a,c){a.useProgram(c);var d=Float32Array.BYTES_PER_ELEMENT,b=4*d;a.enableVertexAttribArray(c.attribute.pos);a.vertexAttribPointer(c.attribute.pos,2,a.FLOAT,!1,b,0*d);a.enableVertexAttribArray(c.attribute.uv);a.vertexAttribPointer(c.attribute.uv,2,a.FLOAT,!1,b,2*d)};}).call(window);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
"ol.control.OverviewMap",
|
||||
"ol.extent.getCenter",
|
||||
"ol.Feature",
|
||||
"ol.Feature'clone",
|
||||
"ol.Feature#clone",
|
||||
"ol.Feature#get",
|
||||
"ol.Feature#getId",
|
||||
"ol.Feature#getGeometry",
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
"ol.layer.Layer#getContrast",
|
||||
"ol.layer.Layer#getHue",
|
||||
"ol.layer.Layer#getSaturation",
|
||||
"ol.layer.Layer#setBrightness",
|
||||
"ol.layer.Layer#setContrast",
|
||||
"ol.layer.Layer#on",
|
||||
"ol.layer.Layer#un",
|
||||
"ol.layer.Layer#setHue",
|
||||
"ol.layer.Layer#setSaturation",
|
||||
"ol.layer.Vector",
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@ class tx_dlf_pageview extends tx_dlf_plugin {
|
|||
// Add OpenLayers library.
|
||||
$output[] = '
|
||||
<link type="text/css" rel="stylesheet" href="'.\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath($this->extKey).'lib/OpenLayers/ol3.css">
|
||||
<script type="text/javascript" src="'.\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath($this->extKey).'lib/OpenLayers/glif.min.js"></script>\';
|
||||
<script type="text/javascript" src="'.\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath($this->extKey).'lib/OL3/ol-debug.js"></script>';
|
||||
// <script type="text/javascript" src="'.\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath($this->extKey).'lib/OpenLayers/ol3-dlf.js"></script>';
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@ dlfViewerImageManipulationControl = function(options) {
|
|||
*/
|
||||
this.toolContainerEl_ = dlfUtils.exists(options.toolContainer) ? options.toolContainer: $('.tx-dlf-toolbox')[0];
|
||||
|
||||
//
|
||||
// Append open/close behavior to toolbox
|
||||
//
|
||||
var openToolbox = $.proxy(function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -71,11 +74,79 @@ dlfViewerImageManipulationControl = function(options) {
|
|||
|
||||
this.activate();
|
||||
}, this);
|
||||
|
||||
|
||||
$(this.anchor_).on('click', openToolbox);
|
||||
$(this.anchor_).on('touchstart', openToolbox);
|
||||
|
||||
//
|
||||
// Initialize the filter
|
||||
//
|
||||
/**
|
||||
* @type {{brightness: number, contrast: number, hue: number, saturation: number}}
|
||||
* @private
|
||||
*/
|
||||
this.filtersDefault_ = {
|
||||
'brightness': 1,
|
||||
'contrast': 1,
|
||||
'hue': 0,
|
||||
'saturation': 0
|
||||
};
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.filters_ = $.extend({}, this.filtersDefault_);
|
||||
|
||||
/**
|
||||
* Is filter updated
|
||||
* @type {boolean}
|
||||
* @private
|
||||
*/
|
||||
this.filterUpdated_ = false;
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.handler_ = {
|
||||
'postcomposeImageFilter': $.proxy(function (event) {
|
||||
var webglContext = event['glContext'],
|
||||
canvas = $('canvas.ol-unselectable')[0];
|
||||
|
||||
if (webglContext !== undefined && webglContext !== null) {
|
||||
var gl = webglContext.getGL();
|
||||
|
||||
if (this.filterUpdated_) {
|
||||
glif.reset();
|
||||
|
||||
for (var filter in this.filters_) {
|
||||
glif.addFilter(filter, this.filters_[filter]);
|
||||
};
|
||||
|
||||
this.filterUpdated_ = false;
|
||||
}
|
||||
|
||||
glif.apply(gl, canvas);
|
||||
|
||||
// for showing openlayers that the program changed
|
||||
// if missing openlayers will produce errors because it
|
||||
// expected other shaders in the webgl program
|
||||
webglContext.useProgram(undefined);
|
||||
}
|
||||
}, this),
|
||||
'resetFilter': $.proxy(function(event) {
|
||||
var layer = this.layers[0];
|
||||
|
||||
var sliderEls = $('.slider.slider-imagemanipulation');
|
||||
for (var i = 0; i < sliderEls.length; i++) {
|
||||
var sliderEl = sliderEls[i],
|
||||
type = sliderEl.getAttribute('data-type'),
|
||||
value = this.filtersDefault_[type];
|
||||
|
||||
$(sliderEl).slider('value', value);
|
||||
};
|
||||
}, this)
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -91,36 +162,78 @@ dlfViewerImageManipulationControl.prototype.activate = function(){
|
|||
if (dlfUtils.exists(this.sliderContainer_)) {
|
||||
$(this.sliderContainer_).show().addClass('open');
|
||||
} else {
|
||||
this.sliderContainer_ = this.initializeSliderContainer_(this.toolContainerEl_);
|
||||
// create outer container
|
||||
var outerContainer = $('<div class="image-manipulation ol-unselectable"></div>');
|
||||
$(this.toolContainerEl_).append(outerContainer);
|
||||
|
||||
/**
|
||||
* Inner slider container
|
||||
* @type {Element}
|
||||
* @private
|
||||
*/
|
||||
this.sliderContainer_ = $('<div class="slider-container" style="display:none;"></div>');
|
||||
$(outerContainer).append(this.sliderContainer_);
|
||||
|
||||
//
|
||||
// Create slider for filters
|
||||
//
|
||||
var contrastSlider = this.createSlider_('slider-contrast', 'horizontal', 'contrast',
|
||||
[1, 0, 2, 0.01], this.dic['contrast']),
|
||||
saturationSlider = this.createSlider_('slider-saturation', 'horizontal', 'saturation',
|
||||
[0, -1, 1, 0.01], this.dic['saturation']),
|
||||
brightnessSlider = this.createSlider_('slider-brightness', 'horizontal', 'brightness',
|
||||
[1, 0, 2, 0.1], this.dic['brightness']),
|
||||
hueSlider = this.createSlider_('slider-hue', 'horizontal', 'hue',
|
||||
[0, -180, 180, 5], this.dic['hue']);
|
||||
$(this.sliderContainer_).append(contrastSlider);
|
||||
$(this.sliderContainer_).append(saturationSlider);
|
||||
$(this.sliderContainer_).append(brightnessSlider);
|
||||
$(this.sliderContainer_).append(hueSlider);
|
||||
|
||||
// button for reset to default state
|
||||
var resetBtn = $('<button class="reset-btn" title="' + this.dic['reset'] + '">' + this.dic['reset'] + '</button>');
|
||||
$(this.sliderContainer_).append(resetBtn);
|
||||
$(resetBtn).on('click', this.handler_.resetFilter);
|
||||
|
||||
// fade in
|
||||
$(this.sliderContainer_).show().addClass('open');
|
||||
}
|
||||
|
||||
// add postcompose listener to layers
|
||||
for (var i = 0; i < this.layers.length; i++) {
|
||||
this.layers[i].on('postcompose', this.handler_.postcomposeImageFilter);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} className
|
||||
* @param {string} orientation
|
||||
* @param {Function} updateFn
|
||||
* @param {number=} opt_baseValue
|
||||
* @param {string} key
|
||||
* @param {Array.<number>|undefined} opt_baseValue
|
||||
* @param {string=} opt_title
|
||||
* @return {Element}
|
||||
* @private
|
||||
*/
|
||||
dlfViewerImageManipulationControl.prototype.createSlider_ = function(className, orientation, updateFn, opt_baseValue, opt_title){
|
||||
dlfViewerImageManipulationControl.prototype.createSlider_ = function(className, orientation, key, opt_baseValues, opt_title){
|
||||
var title = dlfUtils.exists('opt_title') ? opt_title : '',
|
||||
sliderEl = $('<div class="slider slider-imagemanipulation ' + className + '" title="' + title + '"></div>'),
|
||||
baseMin = 0,
|
||||
baseMax = 100,
|
||||
sliderEl = $('<div class="slider slider-imagemanipulation ' + className + '" title="' + title + '" data-type="' +
|
||||
key +'"></div>'),
|
||||
baseMin = dlfUtils.exists(opt_baseValues) ? opt_baseValues[1] : 0,
|
||||
baseMax = dlfUtils.exists(opt_baseValues) ? opt_baseValues[2] : 100,
|
||||
steps = dlfUtils.exists(opt_baseValues) ? opt_baseValues[3] : 1,
|
||||
minValueEl,
|
||||
maxValueEl,
|
||||
startValue = dlfUtils.exists(opt_baseValue) ? opt_baseValue : 100;
|
||||
startValue = dlfUtils.exists(opt_baseValues) ? opt_baseValues[0] : 100;
|
||||
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {Element} element
|
||||
* @param {Object} event
|
||||
* @param {Object} ui
|
||||
*/
|
||||
var updatePosition = function(value, element){
|
||||
var update = $.proxy(function(event, ui){
|
||||
var value = ui['value'],
|
||||
layer = this.layers[0],
|
||||
element = valueEl[0];
|
||||
|
||||
if (orientation == 'vertical') {
|
||||
var style_top = 100 - ((value - baseMin) / (baseMax - baseMin) * 100);
|
||||
element.style.top = style_top + '%';
|
||||
|
|
@ -131,30 +244,27 @@ dlfViewerImageManipulationControl.prototype.createSlider_ = function(className,
|
|||
var style_left = (value - baseMin) / (baseMax - baseMin) * 100;
|
||||
element.style.left = style_left + '%';
|
||||
element.innerHTML = value + '%';
|
||||
};
|
||||
|
||||
// update filters.
|
||||
this.filters_[key] = value;
|
||||
this.filterUpdated_ = true;
|
||||
layer.changed();
|
||||
}, this);
|
||||
|
||||
$(sliderEl).slider({
|
||||
'min': 0,
|
||||
'max': 100,
|
||||
'min': baseMin,
|
||||
'max': baseMax,
|
||||
'value': startValue,
|
||||
'animate': 'slow',
|
||||
'orientation': orientation,
|
||||
'step': 1,
|
||||
'slide': function( event, ui ) {
|
||||
var value = ui['value'];
|
||||
updatePosition(value, valueEl[0]);
|
||||
updateFn(value);
|
||||
},
|
||||
'change': $.proxy(function( event, ui ){
|
||||
var value = ui['value'];
|
||||
updatePosition(value, valueEl[0]);
|
||||
updateFn(value);
|
||||
}, this)
|
||||
'step': steps,
|
||||
'slide': update,
|
||||
'change': update
|
||||
});
|
||||
|
||||
// append tooltips
|
||||
var innerHtml = dlfUtils.exists(opt_baseValue) ? opt_baseValue + '%' : '100%',
|
||||
valueEl = $('<div class="tooltip value ' + className + '">' + innerHtml + '</div>');
|
||||
var innerHtml = dlfUtils.exists(opt_baseValues) ? opt_baseValues[0] + '%' : '100%',
|
||||
valueEl = $('<div class="tooltip value ' + className + '">' + innerHtml + '</div>');
|
||||
$(sliderEl).append(valueEl);
|
||||
|
||||
return sliderEl;
|
||||
|
|
@ -171,6 +281,11 @@ dlfViewerImageManipulationControl.prototype.deactivate = function(){
|
|||
|
||||
$(this.sliderContainer_).hide().removeClass('open');
|
||||
|
||||
// remove postcompose listener to map
|
||||
for (var i = 0; i < this.layers.length; i++) {
|
||||
this.layers[i].un('postcompose', this.handler_.postcomposeImageFilter);
|
||||
};
|
||||
|
||||
// trigger close event but only if an manipulation map has already been initialize
|
||||
$(this).trigger("deactivate-imagemanipulation");
|
||||
};
|
||||
|
|
@ -189,6 +304,8 @@ dlfViewerImageManipulationControl.prototype.initializeSliderContainer_ = functio
|
|||
var sliderContainer = $('<div class="slider-container" style="display:none;"></div>');
|
||||
$(outerContainer).append(sliderContainer);
|
||||
|
||||
|
||||
|
||||
// add contrast slider
|
||||
var contrastSlider = this.createSlider_('slider-contrast', 'horizontal', $.proxy(function(value){
|
||||
for (var i = 0; i < this.layers.length; i++) {
|
||||
|
|
@ -235,23 +352,39 @@ dlfViewerImageManipulationControl.prototype.initializeSliderContainer_ = functio
|
|||
saturation: 1
|
||||
};
|
||||
|
||||
$(resetBtn).on('click', $.proxy(function(e){
|
||||
// reset the layer
|
||||
for (var i = 0; i < this.layers.length; i++) {
|
||||
this.layers[i].setContrast(defaultValues.contrast);
|
||||
this.layers[i].setHue(defaultValues.hue);
|
||||
this.layers[i].setBrightness(defaultValues.brightness);
|
||||
this.layers[i].setSaturation(defaultValues.saturation);
|
||||
}
|
||||
|
||||
// reset the sliders
|
||||
var sliderEls = $('.slider-imagemanipulation');
|
||||
for (var i = 0; i < sliderEls.length; i++){
|
||||
var sliderEl = sliderEls[i];
|
||||
var resetValue = $(sliderEl).hasClass('slider-hue') || $(sliderEl).hasClass('slider-brightness') ? 50 : 100;
|
||||
$(sliderEl).slider('value', resetValue);
|
||||
}
|
||||
}, this));
|
||||
//$(resetBtn).on('click', $.proxy(function(e){
|
||||
// var layer = this.layers[0];
|
||||
//
|
||||
// // remove postcomposeHandler
|
||||
// layer.un('postcompose', postcomposeHandler);
|
||||
// postcomposeRegistered = false;
|
||||
//
|
||||
// // reset the sliders
|
||||
// var sliderEls = goog.dom.getElementsByClass('slider', sliderContainer);
|
||||
// for (var i = 0; i < sliderEls.length; i++) {
|
||||
// var sliderEl = sliderEls[i],
|
||||
// type = sliderEl.getAttribute('data-type'),
|
||||
// value = vk2.control.ImageManipulation.Filters[type];
|
||||
//
|
||||
// $(sliderEl).slider('value', value);
|
||||
// };
|
||||
//
|
||||
// // reset the layer
|
||||
// for (var i = 0; i < this.layers.length; i++) {
|
||||
// this.layers[i].setContrast(defaultValues.contrast);
|
||||
// this.layers[i].setHue(defaultValues.hue);
|
||||
// this.layers[i].setBrightness(defaultValues.brightness);
|
||||
// this.layers[i].setSaturation(defaultValues.saturation);
|
||||
// }
|
||||
//
|
||||
// // reset the sliders
|
||||
// var sliderEls = $('.slider-imagemanipulation');
|
||||
// for (var i = 0; i < sliderEls.length; i++){
|
||||
// var sliderEl = sliderEls[i];
|
||||
// var resetValue = $(sliderEl).hasClass('slider-hue') || $(sliderEl).hasClass('slider-brightness') ? 50 : 100;
|
||||
// $(sliderEl).slider('value', resetValue);
|
||||
// }
|
||||
//}, this));
|
||||
|
||||
return sliderContainer;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue