Skip to content

Commit

Permalink
Merge pull request #1074 from IIIF/1066-annotation-ux
Browse files Browse the repository at this point in the history 
border and fill dropdowns are disabled (and their tooltips) when a us…
  • Loading branch information
@rsinghal
rsinghal committed Aug 26, 2016
2 parents dd86d1a + 408c82d commit cdba870
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 27 deletions.
6 changes: 5 additions & 1 deletion css/mirador.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1086,7 +1086,10 @@ li.highlight {
font-size: 18px;
z-index:2;
}
.hud-control:hover {
.hud-control.hud-disabled {
opacity: 0.3;
}
.hud-control:not(.hud-disabled):hover {
/*transition: all 0.3s ease;*/
cursor: pointer;
opacity: 1;
Expand Down Expand Up @@ -1218,6 +1221,7 @@ li.highlight {
border-color: #ccc;
height: 11px;
border-radius: 3px;
cursor: default;
}

.mirador-osd-color-picker .material-icons {
Expand Down
19 changes: 13 additions & 6 deletions js/src/annotations/osd-svg-overlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,10 @@

this.eventsSubscriptions.push(_this.eventEmitter.subscribe('modeChange.' + _this.windowId,function(event,newMode){
_this.currentTool = '';
//if we are switching between editing and drawing, remove an old path
if (_this.inEditMode && _this.path) {
_this.removeFocus();
}
}));

this.eventsSubscriptions.push(_this.eventEmitter.subscribe('toggleDrawingTool.' + _this.windowId, function(event, tool) {
Expand Down Expand Up @@ -509,11 +513,14 @@
onMouseMove: function(event) {
this.overlay.cursorLocation = event.point;
if (!this.overlay.disabled) {
// We are in drawing mode
// if (this.overlay.paperScope.project.hitTest(event.point, this.overlay.hitOptions)) {
// } else {
// //jQuery(this.overlay.viewer.canvas).css('cursor','default');
// }
//We are in drawing mode
if (this.overlay.paperScope.project.hitTest(event.point, this.overlay.hitOptions)) {
this.overlay.eventEmitter.publish('POINTER_CURSOR.' + this.overlay.windowId);
} else if (this.overlay.currentTool && !this.overlay.path) {
this.overlay.eventEmitter.publish('CROSSHAIR_CURSOR.' + this.overlay.windowId);
} else {
this.overlay.eventEmitter.publish('DEFAULT_CURSOR.' + this.overlay.windowId);
}
event.stopPropagation();
if (this.overlay.currentTool) {
this.overlay.currentTool.onMouseMove(event, this.overlay);
Expand Down Expand Up @@ -583,6 +590,7 @@
}

if (this.overlay.currentTool) {
this.overlay.eventEmitter.publish('HUD_REMOVE_CLASS.'+this.overlay.windowId, ['.hud-dropdown', 'hud-disabled']);
event.point = this.overlay.getMousePositionInImage(event.point);
this.overlay.currentTool.onMouseDown(event, this.overlay);
}
Expand Down Expand Up @@ -978,7 +986,6 @@
this.segment = null;
this.path = null;
this.mode = '';
this.currentTool =null;
this.draftPaths.push(shape);

shape.data.editable = true;
Expand Down
59 changes: 39 additions & 20 deletions js/src/widgets/contextControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,19 @@

init: function() {
var _this = this;
var showStrokeStyle = false;
this.availableAnnotationStylePickers.forEach(function(picker){
if(picker == 'StrokeType'){
var showStrokeStyle = false,
showStrokeColor = false,
showFillColor = false;
this.availableAnnotationStylePickers.forEach(function(picker) {
if (picker === 'StrokeType') {
showStrokeStyle = true;
}
if (picker === 'FillColor') {
showFillColor = true;
}
if (picker === 'StrokeColor') {
showStrokeColor = true;
}
});
var annotationProperties = this.canvasControls.annotations;

Expand All @@ -31,6 +39,8 @@
tools : _this.availableAnnotationTools,
showEdit : annotationProperties.annotationCreation,
showStrokeStyle: showStrokeStyle,
showStrokeColor: showStrokeColor,
showFillColor: showFillColor,
showRefresh : annotationProperties.annotationRefresh
})).appendTo(this.container.find('.mirador-osd-annotation-controls'));
this.annotationElement.hide();
Expand Down Expand Up @@ -109,19 +119,6 @@
setBackground.solid(this.container.find('.mirador-line-type .solid'));
setBackground.dashed(this.container.find('.mirador-line-type .dashed'));
setBackground.dotdashed(this.container.find('.mirador-line-type .dotdashed'));

this.container.find('.mirador-line-type').on('mouseenter', function() {
_this.container.find('.type-list').stop().slideFadeToggle(300);
});
this.container.find('.mirador-line-type').on('mouseleave', function() {
_this.container.find('.type-list').stop().slideFadeToggle(300);
});
this.container.find('.mirador-line-type').find('ul li').on('click', function() {
var className = jQuery(this).find('i').attr('class').replace(/fa/, '').replace(/ /, '');
_this.removeBackgroundImage(_this.container.find('.mirador-line-type .border-type-image'));
setBackground[className](_this.container.find('.mirador-line-type .border-type-image'));
_this.eventEmitter.publish('toggleBorderType.' + _this.windowId, className);
});
},

setBorderFillColorPickers: function() {
Expand All @@ -146,6 +143,9 @@
_this.eventEmitter.publish('changeBorderColor.' + _this.windowId, color.toHexString());
jQuery(this).spectrum("set", color.toHexString());
},
move: function(color) {
_this.eventEmitter.publish('changeBorderColor.' + _this.windowId, color.toHexString());
},
maxSelectionSize: 4,
color: defaultBorderColor,
palette: [
Expand All @@ -164,7 +164,6 @@
showPalette: true,
showButtons: false,
showSelectionPalette: true,
hideAfterPaletteSelect: true,
appendTo: 'parent',
clickoutFiresChange: true,
containerClassName: 'fillColorPickerPop'+_this.windowId,
Expand All @@ -173,6 +172,9 @@
_this.eventEmitter.publish('changeFillColor.' + _this.windowId, [color.toHexString(), color.getAlpha()]);
jQuery(this).spectrum("set", color);
},
move: function(color) {
_this.eventEmitter.publish('changeFillColor.' + _this.windowId, [color.toHexString(), color.getAlpha()]);
},
maxSelectionSize: 4,
color: colorObj,
palette: [
Expand Down Expand Up @@ -203,6 +205,19 @@

bindEvents: function() {
var _this = this;

this.container.find('.mirador-line-type.hud-enabled').on('mouseenter', function() {
_this.container.find('.type-list').stop().slideFadeToggle(300);
});
this.container.find('.mirador-line-type.hud-enabled').on('mouseleave', function() {
_this.container.find('.type-list').stop().slideFadeToggle(300);
});
this.container.find('.mirador-line-type.hud-enabled').find('ul li').on('click', function() {
var className = jQuery(this).find('i').attr('class').replace(/fa/, '').replace(/ /, '');
_this.removeBackgroundImage(_this.container.find('.mirador-line-type .border-type-image'));
setBackground[className](_this.container.find('.mirador-line-type .border-type-image'));
_this.eventEmitter.publish('toggleBorderType.' + _this.windowId, className);
});
},

annotationTemplate: Handlebars.compile([
Expand All @@ -216,7 +231,7 @@
'</a>',
'{{/each}}',
'{{#if showStrokeStyle}}',
'<a class="hud-control mirador-line-type" role="button" aria-label="{{t "borderTypeTooltip"}}" title="{{t "borderTypeTooltip"}}">',
'<a class="hud-control hud-dropdown hud-disabled mirador-line-type" aria-label="{{t "borderTypeTooltip"}}" title="{{t "borderTypeTooltip"}}">',
'<i class="material-icons mirador-border-icon">create</i>',
'<i class="border-type-image solid"></i>',
'<i class="fa fa-caret-down dropdown-icon"></i>',
Expand All @@ -227,12 +242,16 @@
'</ul>',
'</a>',
'{{/if}}',
'<a class="hud-control mirador-osd-color-picker" title="{{t "borderColorTooltip"}}">',
'{{#if showStrokeColor}}',
'<a class="hud-control hud-dropdown hud-disabled mirador-osd-color-picker" title="{{t "borderColorTooltip"}}">',
'<input type="text" class="borderColorPicker"/>',
'</a>',
'<a class="hud-control mirador-osd-color-picker" title="{{t "fillColorTooltip"}}">',
'{{/if}}',
'{{#if showFillColor}}',
'<a class="hud-control hud-dropdown hud-disabled mirador-osd-color-picker" title="{{t "fillColorTooltip"}}">',
'<input type="text" class="fillColorPicker"/>',
'</a>',
'{{/if}}',
'{{#if showRefresh}}',
'<a class="hud-control mirador-osd-refresh-mode">',
'<i class="fa fa-lg fa-refresh"></i>',
Expand Down
20 changes: 20 additions & 0 deletions js/src/widgets/hud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,21 @@
});
}

this.listenForActions();
this.bindEvents();
},

listenForActions: function() {
var _this = this;
this.eventEmitter.subscribe('DISABLE_TOOLTIPS_BY_CLASS.' + this.windowId, function(event, className) {
_this.element.find(className).qtip('disable');
});

this.eventEmitter.subscribe('ENABLE_TOOLTIPS_BY_CLASS.' + this.windowId, function(event, className) {
_this.element.find(className).qtip('enable');
});
},

bindEvents: function() {
var _this = this;
},
Expand Down Expand Up @@ -80,6 +92,8 @@
}
_this.eventEmitter.publish('modeChange.' + _this.windowId, 'displayAnnotations');
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-pointer-mode', 'selected']);
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.hud-dropdown', 'hud-disabled']);
_this.eventEmitter.publish('DISABLE_TOOLTIPS_BY_CLASS.'+_this.windowId, '.hud-dropdown');
_this.eventEmitter.publish('DEFAULT_CURSOR.' + _this.windowId);
_this.eventEmitter.publish(('windowUpdated'), {
id: _this.windowId,
Expand All @@ -103,6 +117,8 @@
onchoosePointer: function(event, from, to) {
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-edit-mode', 'selected']);
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-pointer-mode', 'selected']);
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.hud-dropdown', 'hud-disabled']);
_this.eventEmitter.publish('DISABLE_TOOLTIPS_BY_CLASS.'+_this.windowId, '.hud-dropdown');
_this.eventEmitter.publish('CANCEL_ACTIVE_ANNOTATIONS.'+_this.windowId);
_this.eventEmitter.publish('modeChange.' + _this.windowId, 'displayAnnotations');
_this.eventEmitter.publish('DEFAULT_CURSOR.' + _this.windowId);
Expand All @@ -114,6 +130,8 @@
onchooseShape: function(event, from, to, shape) {
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-pointer-mode', 'selected']);
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-edit-mode', 'selected']);
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.hud-dropdown', 'hud-disabled']);
_this.eventEmitter.publish('ENABLE_TOOLTIPS_BY_CLASS.'+_this.windowId, '.hud-dropdown');
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-'+shape+'-mode', 'selected']);
_this.eventEmitter.publish('modeChange.' + _this.windowId, 'creatingAnnotation');
_this.eventEmitter.publish('CROSSHAIR_CURSOR.' + _this.windowId);
Expand All @@ -127,6 +145,8 @@
onchangeShape: function(event, from, to, shape) {
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-pointer-mode', 'selected']);
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-edit-mode', 'selected']);
_this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.hud-dropdown', 'hud-disabled']);
_this.eventEmitter.publish('ENABLE_TOOLTIPS_BY_CLASS.'+_this.windowId, '.hud-dropdown');
_this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-'+shape+'-mode', 'selected']);
_this.eventEmitter.publish('CROSSHAIR_CURSOR.' + _this.windowId);
//don't need to trigger a mode change, just change tool
Expand Down
3 changes: 3 additions & 0 deletions js/src/widgets/imageView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,9 @@
_this.eventEmitter.subscribe('CROSSHAIR_CURSOR.' + _this.windowId, function(event) {
jQuery(_this.osd.canvas).css("cursor", "crosshair");
});
_this.eventEmitter.subscribe('POINTER_CURSOR.' + _this.windowId, function(event) {
jQuery(_this.osd.canvas).css("cursor", "pointer");
});
//Related to Annotations HUD
},

Expand Down

0 comments on commit cdba870

Please sign in to comment.