Skip to content

Commit

Permalink
Move AnnotationSelectMenu into Player Options
Browse files Browse the repository at this point in the history
  • Loading branch information
@OpenHypervideo
OpenHypervideo committed Mar 17, 2017
1 parent ff2bb5e commit 6f79749
Show file tree
Hide file tree
Showing 8 changed files with 162 additions and 219 deletions.
180 changes: 53 additions & 127 deletions player/modules/AnnotationsController/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,7 @@

annotations = HypervideoModel.annotations;

initSidebarSelectmenu();
if ( FrameTrail.getState('hv_config_annotationsVisible') ) {
refreshSidebarSelectmenu(true);
} else {
refreshSidebarSelectmenu(false);
}

refreshAnnotationSelectmenu(true);
initAnnotations();

}
Expand All @@ -66,155 +60,92 @@
annotations = FrameTrail.module('HypervideoModel').annotations;
ViewVideo = FrameTrail.module('ViewVideo');

if ( FrameTrail.getState('hv_config_annotationsVisible') ) {
refreshSidebarSelectmenu(true);
} else {
refreshSidebarSelectmenu(false);
}
refreshAnnotationSelectmenu(true);

initAnnotations();

}



/**
* I connect the select menu (jquery-ui on select element)
* with the data model.
*
* @method initSidebarSelectmenu
* @private
*/
function initSidebarSelectmenu() {

var SelectAnnotationContainer = FrameTrail.module('Sidebar').SelectAnnotationContainer,
SelectAnnotation = FrameTrail.module('Sidebar').SelectAnnotationContainer.find('#SelectAnnotation'),
HypervideoModel = FrameTrail.module('HypervideoModel');


$.widget( 'custom.stylableselectmenu', $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( '<li>', {
text: item.label,
style: 'color: ' + item.element.attr( 'data-color' )
});

if ( item.disabled ) {
li.addClass( 'ui-state-disabled' );
}

$( '<span>', {
style: 'background-color: ' + item.element.attr( 'data-color' ),
'class': 'color-square'
})
.appendTo( li );

return li.appendTo( ul );
}
});

SelectAnnotation.stylableselectmenu();

SelectAnnotation.on('stylableselectmenuchange', function(evt, ui) {

FrameTrail.module('HypervideoModel').annotationSet = SelectAnnotation.val();
annotations = FrameTrail.module('HypervideoModel').annotations;

initAnnotations();

});

SelectAnnotation.on('stylableselectmenuselect', function(evt, ui) {

/*
// too much color in the interface, keep default color for now
SelectAnnotation.stylableselectmenu('widget').css({
'border-color': ui.item.element.attr( 'data-color' ),
color: ui.item.element.attr( 'data-color' )
});
*/

});

}




/**
* I refresh the view of the select menu in the sidebar.
* When my parameter is false, I hide the select menu,
* otherwise I show it an append all available annotation sets
* as option to the select box.
*
* @method refreshSidebarSelectmenu
* @method refreshAnnotationSelectmenu
* @param {Boolean} visible
* @private
*/
function refreshSidebarSelectmenu(visible) {
function refreshAnnotationSelectmenu(visible) {

var SelectAnnotationContainer = FrameTrail.module('Sidebar').SelectAnnotationContainer,
HypervideoModel = FrameTrail.module('HypervideoModel'),
SelectAnnotation,
var AnnotationSettingsButton = ViewVideo.AnnotationSettingsButton,
SelectAnnotationContainer = AnnotationSettingsButton.find('#SelectAnnotationContainer'),
HypervideoModel = FrameTrail.module('HypervideoModel'),
annotationSets;


if (visible) {

SelectAnnotation = SelectAnnotationContainer.find('#SelectAnnotation'),
SelectSingle = SelectAnnotationContainer.find('#SelectAnnotationSingle'),
annotationSets = HypervideoModel.annotationSets;
annotationSets = HypervideoModel.annotationSets;

if ( annotationSets.length > 1 && !FrameTrail.getState('editMode') ) {
if ( annotationSets.length != 0 ) {

SelectAnnotation.empty();
SelectAnnotationContainer.empty();

var noAnnotationsButton = $('<div class="annotationSetButton none">None</div>');
noAnnotationsButton.click(function() {
FrameTrail.changeState('hv_config_annotationsVisible', false);
FrameTrail.changeState('viewSize', FrameTrail.getState('viewSize'));
}).appendTo(SelectAnnotationContainer);

for (var idx in annotationSets) {

SelectAnnotation.append(
'<option value="'
var annotationSetButton = $('<div class="annotationSetButton" data-annotationset-id="'
+ annotationSets[idx].id
+ '" data-color="#'
+ '" style="color: #'
+ annotationSets[idx].color
+ '">'
+ ';"><span class="colorSquare" style="background-color: #'
+ annotationSets[idx].color
+ ';"></span>'
+ annotationSets[idx].name
+ '</option>'
);
+ '</div>');

}
annotationSetButton.click(function() {
var setID = $(this).data('annotationset-id');

SelectAnnotation.stylableselectmenu('refresh');
SelectAnnotation.val(HypervideoModel.annotationSet).stylableselectmenu('refresh');
FrameTrail.module('HypervideoModel').annotationSet = setID;
annotations = FrameTrail.module('HypervideoModel').annotations;

var uiObj = {
item: {
element: SelectAnnotationContainer.find('option').eq(0)
}
}
initAnnotations();

SelectAnnotation.trigger('stylableselectmenuselect', uiObj);

SelectAnnotation.stylableselectmenu('widget').show();
SelectSingle.text('').hide();
FrameTrail.changeState('hv_config_annotationsVisible', true);
FrameTrail.changeState('viewSize', FrameTrail.getState('viewSize'));

});

} else if ( annotationSets.length == 1 && !FrameTrail.getState('editMode') ) {
SelectAnnotationContainer.append(annotationSetButton);

SelectAnnotation.stylableselectmenu('widget').hide();
SelectSingle.text(annotationSets[0].name).show();
}

} else if ( FrameTrail.getState('editMode') ) {
var activeSet;
if ( !FrameTrail.getState('hv_config_annotationsVisible') ) {
activeSet = SelectAnnotationContainer.find('.annotationSetButton.none');
} else {
activeSet = SelectAnnotationContainer.find('.annotationSetButton[data-annotationset-id="'+ HypervideoModel.annotationSet +'"]');
}

SelectAnnotation.stylableselectmenu('widget').hide();
SelectSingle.text(FrameTrail.getState('username')).show();
activeSet.addClass('active');

}
AnnotationSettingsButton.show();

SelectAnnotationContainer.show();
} else {
AnnotationSettingsButton.hide();
}


} else if ( !FrameTrail.getState('editMode') ) {

SelectAnnotationContainer.hide();
AnnotationSettingsButton.hide();

}

Expand Down Expand Up @@ -989,23 +920,23 @@

if ( editMode === false && oldEditMode !== false && FrameTrail.getState('hv_config_annotationsVisible') ) {

refreshSidebarSelectmenu(true);
refreshAnnotationSelectmenu(true);

} else if ( editMode && oldEditMode === false ) {

HypervideoModel.annotationSet = '#myAnnotationSet';

refreshSidebarSelectmenu(true);
refreshAnnotationSelectmenu(true);

initAnnotations();

} else if ( editMode === false && FrameTrail.getState('hv_config_annotationsVisible') ) {

refreshSidebarSelectmenu(true);
refreshAnnotationSelectmenu(true);

} else {

refreshSidebarSelectmenu(false);
refreshAnnotationSelectmenu(false);

}

Expand Down Expand Up @@ -1248,8 +1179,7 @@
*/
function changeUserColor(newColor) {

var annotationSets = HypervideoModel.annotationSets,
SelectAnnotation = FrameTrail.module('Sidebar').SelectAnnotationContainer.find('#SelectAnnotation');
var annotationSets = HypervideoModel.annotationSets;

for (var idx in annotationSets) {

Expand All @@ -1259,9 +1189,9 @@

}

if (newColor.length > 1 && SelectAnnotation.stylableselectmenu) {
if (newColor.length > 1) {

refreshSidebarSelectmenu(true);
refreshAnnotationSelectmenu(true);

}

Expand All @@ -1278,11 +1208,7 @@
* @param {Boolean} oldState
*/
function toggleConfig_annotationsVisible(newState, oldState) {
if (newState == true) {
refreshSidebarSelectmenu(true);
} else {
refreshSidebarSelectmenu(false);
}
refreshAnnotationSelectmenu(true);
}


Expand Down
13 changes: 5 additions & 8 deletions player/modules/Sidebar/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,13 @@ FrameTrail.defineModule('Sidebar', function(){
+ ' <div class="viewmodeInfo">'
+ ' <span id="VideoDescription"></span>'
+ ' </div>'
/*
+ ' <div id="SelectAnnotationContainer" class="ui-front">'
+ ' <div class="descriptionLabel">Annotations</div>'
+ ' <select id="SelectAnnotation" name=""></select>'
+ ' <div id="SelectAnnotationSingle"></div>'
+ ' </div>'
*/
+ ' </div>'
+ ' </div>'
+ ' </div>'
Expand All @@ -68,10 +70,7 @@ FrameTrail.defineModule('Sidebar', function(){
ExportButton = domElement.find('.exportButton'),

ProjectDescription = sidebarContainer.find('#ProjectDescription'),
VideoDescription = sidebarContainer.find('#VideoDescription'),

SelectAnnotationContainer = domElement.find('#SelectAnnotationContainer');

VideoDescription = sidebarContainer.find('#VideoDescription');


SaveButton.click(function(){
Expand Down Expand Up @@ -145,10 +144,9 @@ FrameTrail.defineModule('Sidebar', function(){
function changeViewSize(arrayWidthAndHeight) {

var controlsHeight = domElement.find('#SidebarContainer > div.active > .viewmodeControls').height(),
viewModeInfoHeight = domElement.height() - FrameTrail.module('Titlebar').height - controlsHeight,
selectAnnotationsHeight = SelectAnnotationContainer.height();
viewModeInfoHeight = domElement.height() - FrameTrail.module('Titlebar').height - controlsHeight;

domElement.find('#SidebarContainer > div.active > .viewmodeInfo').css('max-height', viewModeInfoHeight - selectAnnotationsHeight - 40);
domElement.find('#SidebarContainer > div.active > .viewmodeInfo').css('max-height', viewModeInfoHeight - 40);

};

Expand Down Expand Up @@ -314,7 +312,6 @@ FrameTrail.defineModule('Sidebar', function(){
loggedIn: changeUserLogin
},

SelectAnnotationContainer: SelectAnnotationContainer,
newUnsavedChange: newUnsavedChange,

/**
Expand Down
32 changes: 0 additions & 32 deletions player/modules/Sidebar/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,36 +187,4 @@

#Sidebar.editActive #SidebarContainer .viewmodeControls .exportButton {
background-image: url("icons/export.png");
}

#SidebarContainer #SelectAnnotationContainer {
margin: 0px 10px 10px 10px;
}

#SidebarContainer #SelectAnnotationContainer #SelectAnnotation-button {
margin-top: 6px;
border-width: 2px;
border-color: #d1d1d1;
}

#SidebarContainer #SelectAnnotationContainer #SelectAnnotation-button:hover {
border-color: #F8F8F8;
}

#SidebarContainer #SelectAnnotationContainer #SelectAnnotation {
width: 178px;
}

#SidebarContainer #SelectAnnotationContainer .ui-menu-item {
padding-left: 5px;
}

#SidebarContainer #SelectAnnotationContainer .color-square {
background-image: url("icons/user.png");
background-position: center center;
background-size: 18px auto;
float: left;
height: 10px;
margin: 5px 5px 0 0;
width: 10px;
}
Binary file added player/modules/ViewVideo/icons/user.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6f79749

Please sign in to comment.