diff --git a/source/Ox.UI/js/Video/VideoPlayerMenu.js b/source/Ox.UI/js/Video/VideoPlayerMenu.js new file mode 100644 index 00000000..7d437039 --- /dev/null +++ b/source/Ox.UI/js/Video/VideoPlayerMenu.js @@ -0,0 +1,83 @@ +Ox.VideoPlayerMenu = function(options, self) { + + self = self || {}; + var that = Ox.Element({}, self) + .defaults({ + items: [] + }) + .options(options || {}) + .update({ + // ... + }) + .on({ + click: function(e) { + var $target = $(e.target), group, id; + that.hide(); + if ( + !$target.is('.OxLine') + && !$target.is('.OxSpace') + && !$target.is('.OxDisabled') + ) { + group = $target.parent().data().group; + id = $target.parent().data().id; + self.$items.filter(function($item) { + return $item.data().group == group; + }).forEach(function($item) { + $($item.children()[1]).attr({ + src: Ox.UI.getImageURL('symbol' + ( + $item.data().id == id ? 'Check' : 'None' + )) + }); + }); + that.triggerEvent('click', { + group: group, + id: id + }); + } + } + }); + + self.$items = []; + self.height = 0; + + self.options.items.forEach(function(item) { + var $item; + if (!Ox.isEmpty(item)) { + $item = $('
') + .addClass('OxItem' + (item.disabled ? ' OxDisabled' : '')) + .data({ + group: item.group, + id: item.id + }) + .appendTo(that); + if (!item.disabled) { + $item.on({ + mouseenter: function() { + $(this).addClass('OxSelected'); + }, + mouseleave: function() { + $(this).removeClass('OxSelected'); + } + }); + } + $('
').html(item.title).appendTo($item); + $('').attr({ + src: Ox.UI.getImageURL( + 'symbol' + (item.checked ? 'Check' : 'None') + ) + }).appendTo($item); + self.$items.push($item); + self.height += 14; + } else { + $('
').addClass('OxSpace').appendTo(that); + $('
').addClass('OxLine').appendTo(that); + $('
').addClass('OxSpace').appendTo(that); + self.height += 5; + } + }); + + that.css({height: self.height + 'px'}); + + return that; + +};