Skip to content

Commit

Permalink
add sliders for brightness, contrast, and saturation. controls now ch…
Browse files Browse the repository at this point in the history 
…ange css filter property and rotate uses OSD functionality
  • Loading branch information
@rsinghal
rsinghal committed Jun 17, 2016
1 parent 3985840 commit faa8dd8
Show file tree
Hide file tree
Showing 4 changed files with 289 additions and 48 deletions.
107 changes: 70 additions & 37 deletions js/src/widgets/contextControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,43 @@
init: function() {
var _this = this;

this.element = jQuery(this.annotationTemplate({
this.annotationElement = jQuery(this.annotationTemplate({
tools : _this.availableAnnotationTools,
showEdit : this.annotationCreationAvailable,
showRefresh : this.annotationRefresh
})).appendTo(this.container.find('.mirador-osd-annotation-controls'));

this.manipulationElement = jQuery(this.manipulationTemplate({
})).appendTo(this.container.find('.mirador-manipulation-controls'));

this.setQtips();

this.annotationElement.hide();
this.manipulationElement.hide();

this.setBorderFillColorPickers();
this.hide();
this.bindEvents();
},

setQtips: function() {
var _this = this;
_this.manipulationElement.each(function() {
jQuery(this).qtip({
content: {
text: jQuery(this).attr('title'),
},
position: {
my: 'bottom center',
at: 'top center',
viewport: true
},
style: {
classes: 'qtip-dark qtip-shadow qtip-rounded'
}
});
});
},

setBorderFillColorPickers: function() {
var _this = this;
_this.container.find(".borderColorPicker").spectrum({
Expand Down Expand Up @@ -132,21 +158,29 @@
});
},

show: function() {
this.element.fadeIn("150");
annotationShow: function() {
this.annotationElement.fadeIn("150");
},

annotationHide: function() {
this.annotationElement.fadeOut("150");
},

manipulationShow: function() {
this.manipulationElement.fadeIn("150");
},

hide: function() {
this.element.fadeOut("150");
manipulationHide: function() {
this.manipulationElement.fadeOut("150");
},

bindEvents: function() {
var _this = this;
this.container.find('.mirador-osd-back').on('click', function() {
_this.element.remove();
_this.element = jQuery(_this.template()).appendTo(_this.container);
_this.bindEvents();
});
// this.container.find('.mirador-osd-back').on('click', function() {
// _this.element.remove();
// _this.element = jQuery(_this.template()).appendTo(_this.container);
// _this.bindEvents();
// });
},

annotationTemplate: Handlebars.compile([
Expand Down Expand Up @@ -185,50 +219,49 @@
'<i class="fa fa-lg fa-refresh"></i>',
'</a>',
'{{/if}}',
'{{/if}}',
'</div>',
'<div class="mirador-manipulation-controls">',
'<a class="hud-control mirador-toggle-manipulation">',
'<i class="material-icons">tune</i>',
'</a>',
'<a class="hud-control mirador-rotate-right">',
'{{/if}}'
/*'<a class="mirador-osd-list hud-control">',
'<i class="fa fa-lg fa-list"></i>',
'</a>',*/
/*'<a class="mirador-osd-search hud-control" role="button">',
'<i class="fa fa-lg fa-search"></i>',
'</a>',*/
/*'<a class="mirador-osd-rect-tool hud-control" role="button">',
'<i class="fa fa-lg fa-gear"></i>',
'</a>',*/
].join('')),

manipulationTemplate: Handlebars.compile([
'<a class="hud-control mirador-osd-rotate-right" title="{{t "rotateRightTooltip"}}">',
'<i class="fa fa-lg fa-rotate-right"></i>',
'</a>',
'<a class="hud-control mirador-rotate-left">',
'<a class="hud-control mirador-osd-rotate-left" title="{{t "rotateLeftTooltip"}}">',
'<i class="fa fa-lg fa-rotate-left"></i>',
'</a>',
'<a class="hud-control mirador-brightness">',
'<a class="hud-control mirador-osd-brightness" title="{{t "brightnessTooltip"}}">',
'<i class="material-icons">wb_sunny</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-brightness-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-contrast">',
'<a class="hud-control mirador-osd-contrast" title="{{t "contrastTooltip"}}">',
'<i class="material-icons">brightness_6</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-contrast-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-saturation">',
'<a class="hud-control mirador-osd-saturation" title="{{t "saturationTooltip"}}">',
'<i class="material-icons">gradient</i>',
'<i class="fa fa-caret-down"></i>',
'<div class="mirador-osd-saturation-slider mirador-slider"/>',
'</a>',
'<a class="hud-control mirador-grayscale">',
'<a class="hud-control mirador-osd-grayscale" title="{{t "grayscaleTooltip"}}">',
'<i class="material-icons">filter_b_and_w</i>',
'</a>',
'<a class="hud-control mirador-invert">',
'<a class="hud-control mirador-osd-invert" title="{{t "invertTooltip"}}">',
'<i class="material-icons">invert_colors</i>',
'</a>',
'<a class="hud-control mirador-reset">',
'<a class="hud-control mirador-osd-reset" title="{{t "resetTooltip"}}">',
'<i class="fa fa-lg fa-refresh"></i>',
'</a>',
'</div>',
'</div>',
/*'<a class="mirador-osd-list hud-control">',
'<i class="fa fa-lg fa-list"></i>',
'</a>',*/
/*'<a class="mirador-osd-search hud-control" role="button">',
'<i class="fa fa-lg fa-search"></i>',
'</a>',*/
/*'<a class="mirador-osd-rect-tool hud-control" role="button">',
'<i class="fa fa-lg fa-gear"></i>',
'</a>',*/
'</a>'
].join('')),

// for accessibility, make sure to add aria-labels just like above
Expand Down
53 changes: 47 additions & 6 deletions js/src/widgets/hud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
$.Hud.prototype = {

init: function() {
this.createStateMachine();
this.createStateMachines();

this.element = jQuery(this.template({
showNextPrev : this.showNextPrev,
Expand Down Expand Up @@ -45,10 +45,11 @@
var _this = this;
},

createStateMachine: function() {
//add more to these as AnnoState becomes more complex
createStateMachines: function() {
var _this = this,
duration = "200";

//add more to these as AnnoState becomes more complex
//initial state is 'none'
this.annoState = StateMachine.create({
events: [
Expand All @@ -70,7 +71,7 @@
ondisplayOn: function(event, from, to) {
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-annotations-layer', 'selected']);
if (_this.annoEndpointAvailable) {
_this.contextControls.show();
_this.contextControls.annotationShow();
}
_this.eventEmitter.publish('modeChange.' + _this.windowId, 'displayAnnotations');
_this.eventEmitter.publish(('windowUpdated'), {
Expand All @@ -92,7 +93,7 @@
}
if (_this.annoEndpointAvailable) {
if (from === "annoOff") {
_this.contextControls.show();
_this.contextControls.annotationShow();
enableEditingAnnotations();
} else {
enableEditingAnnotations();
Expand Down Expand Up @@ -121,7 +122,7 @@
ondisplayOff: function(event, from, to) {
if (_this.annoEndpointAvailable) {
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-edit-mode', 'selected']);
_this.contextControls.hide();
_this.contextControls.annotationHide();
}
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-annotations-layer', 'selected']);
_this.eventEmitter.publish('modeChange.' + _this.windowId, 'default');
Expand All @@ -132,6 +133,38 @@
}
}
});

this.manipulationState = StateMachine.create({
events: [
{ name: 'startup', from: 'none', to: 'manipulationOff' },
{ name: 'displayOn', from: 'manipulationOff', to: 'manipulationOn' },
{ name: 'displayOff', from: 'manipulationOn', to: 'manipulationOff' }
],
callbacks: {
onstartup: function(event, from, to) {
_this.eventEmitter.publish(('windowUpdated'), {
id: _this.windowId,
manipulationState: to
});
},
ondisplayOn: function(event, from, to) {
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-manipulation-toggle', 'selected']);
_this.contextControls.manipulationShow();
_this.eventEmitter.publish(('windowUpdated'), {
id: _this.windowId,
manipulationState: to
});
},
ondisplayOff: function(event, from, to) {
_this.contextControls.manipulationHide();
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-manipulation-toggle', 'selected']);
_this.eventEmitter.publish(('windowUpdated'), {
id: _this.windowId,
manipulationState: to
});
}
}
});
},

template: Handlebars.compile([
Expand All @@ -149,6 +182,14 @@
'</a>',
'</div>',
'{{/if}}',
//TODO: implement this boolean setting
//'{{#if showImageControls}}',
'<div class="mirador-manipulation-controls">',
'<a class="mirador-manipulation-toggle hud-control" role="button" aria-label="Toggle image manipulation">',
'<i class="material-icons">tune</i>',
'</a>',
'</div>',
//'{{/if}}',
'</div>',
'{{#if showNextPrev}}',
'<a class="mirador-osd-next hud-control ">',
Expand Down

0 comments on commit faa8dd8

Please sign in to comment.