annotate johndyer-mediaelement-13fa20a/src/js/mep-feature-contextmenu.js @ 25:4a4bd554b4c1 tip

Closing this sub branch.
author Daniele Barchiesi <daniele.barchiesi@eecs.qmul.ac.uk>
date Mon, 25 Mar 2013 14:02:54 +0000
parents 032bc65ebafc
children
rev   line source
gyorgy@0 1 /*
gyorgy@0 2 * ContextMenu Plugin
gyorgy@0 3 *
gyorgy@0 4 *
gyorgy@0 5 */
gyorgy@0 6
gyorgy@0 7
gyorgy@0 8 mejs.MepDefaults.contextMenuItems = [
gyorgy@0 9 // demo of a fullscreen option
gyorgy@0 10 {
gyorgy@0 11 render: function(player) {
gyorgy@0 12
gyorgy@0 13 // check for fullscreen plugin
gyorgy@0 14 if (typeof player.enterFullScreen == 'undefined')
gyorgy@0 15 return null;
gyorgy@0 16
gyorgy@0 17 if (player.isFullScreen) {
gyorgy@0 18 return "Turn off Fullscreen";
gyorgy@0 19 } else {
gyorgy@0 20 return "Go Fullscreen";
gyorgy@0 21 }
gyorgy@0 22 },
gyorgy@0 23 click: function(player) {
gyorgy@0 24 if (player.isFullScreen) {
gyorgy@0 25 player.exitFullScreen();
gyorgy@0 26 } else {
gyorgy@0 27 player.enterFullScreen();
gyorgy@0 28 }
gyorgy@0 29 }
gyorgy@0 30 }
gyorgy@0 31 ,
gyorgy@0 32 // demo of a mute/unmute button
gyorgy@0 33 {
gyorgy@0 34 render: function(player) {
gyorgy@0 35 if (player.media.muted) {
gyorgy@0 36 return "Unmute";
gyorgy@0 37 } else {
gyorgy@0 38 return "Mute";
gyorgy@0 39 }
gyorgy@0 40 },
gyorgy@0 41 click: function(player) {
gyorgy@0 42 if (player.media.muted) {
gyorgy@0 43 player.setMuted(false);
gyorgy@0 44 } else {
gyorgy@0 45 player.setMuted(true);
gyorgy@0 46 }
gyorgy@0 47 }
gyorgy@0 48 },
gyorgy@0 49 // separator
gyorgy@0 50 {
gyorgy@0 51 isSeparator: true
gyorgy@0 52 }
gyorgy@0 53 ,
gyorgy@0 54 // demo of simple download video
gyorgy@0 55 {
gyorgy@0 56 render: function(player) {
gyorgy@0 57 return "Download Video";
gyorgy@0 58 },
gyorgy@0 59 click: function(player) {
gyorgy@0 60 window.location.href = player.media.currentSrc;
gyorgy@0 61 }
gyorgy@0 62 }
gyorgy@0 63
gyorgy@0 64 ];
gyorgy@0 65
gyorgy@0 66
gyorgy@0 67 (function($) {
gyorgy@0 68
gyorgy@0 69
gyorgy@0 70
gyorgy@0 71 MediaElementPlayer.prototype.buildcontextmenu = function(player, controls, layers, media) {
gyorgy@0 72
gyorgy@0 73 // create context menu
gyorgy@0 74 player.contextMenu = $('<div class="mejs-contextmenu"></div>')
gyorgy@0 75 .appendTo($('body'))
gyorgy@0 76 .hide();
gyorgy@0 77
gyorgy@0 78 // create events for showing context menu
gyorgy@0 79 player.container.bind('contextmenu', function(e) {
gyorgy@0 80 e.preventDefault();
gyorgy@0 81 player.renderContextMenu(e.clientX, e.clientY);
gyorgy@0 82 return false;
gyorgy@0 83 });
gyorgy@0 84 player.container.bind('click', function() {
gyorgy@0 85 player.contextMenu.hide();
gyorgy@0 86 });
gyorgy@0 87 }
gyorgy@0 88
gyorgy@0 89 MediaElementPlayer.prototype.renderContextMenu = function(x,y) {
gyorgy@0 90
gyorgy@0 91 // alway re-render the items so that things like "turn fullscreen on" and "turn fullscreen off" are always written correctly
gyorgy@0 92 var t = this,
gyorgy@0 93 html = '',
gyorgy@0 94 items = t.options.contextMenuItems;
gyorgy@0 95
gyorgy@0 96 for (var i=0, il=items.length; i<il; i++) {
gyorgy@0 97
gyorgy@0 98 if (items[i].isSeparator) {
gyorgy@0 99 html += '<div class="mejs-contextmenu-separator"></div>';
gyorgy@0 100 } else {
gyorgy@0 101
gyorgy@0 102 var rendered = items[i].render(t);
gyorgy@0 103
gyorgy@0 104 // render can return null if the item doesn't need to be used at the moment
gyorgy@0 105 if (rendered != null) {
gyorgy@0 106 html += '<div class="mejs-contextmenu-item" data-itemindex="' + i + '">' + rendered + '</div>';
gyorgy@0 107 }
gyorgy@0 108 }
gyorgy@0 109 }
gyorgy@0 110
gyorgy@0 111 // position and show the context menu
gyorgy@0 112 t.contextMenu
gyorgy@0 113 .empty()
gyorgy@0 114 .append($(html))
gyorgy@0 115 .css({top:y, left:x})
gyorgy@0 116 .show()
gyorgy@0 117
gyorgy@0 118 // bind events
gyorgy@0 119 t.contextMenu.find('.mejs-contextmenu-item').click(function() {
gyorgy@0 120 // which one is this?
gyorgy@0 121 var itemIndex = parseInt( $(this).data('itemindex'), 10 );
gyorgy@0 122
gyorgy@0 123 // perform click action
gyorgy@0 124 t.options.contextMenuItems[itemIndex].click(t);
gyorgy@0 125
gyorgy@0 126 // close
gyorgy@0 127 t.contextMenu.hide();
gyorgy@0 128 });
gyorgy@0 129
gyorgy@0 130 }
gyorgy@0 131
gyorgy@0 132 })(mejs.$);