From: Marcin Koziej Date: Wed, 9 May 2012 09:00:24 +0000 (+0200) Subject: menu shows, time to code js to it X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/d7faec10cb85ad286673eec266ccc397142bc20c?ds=sidebyside menu shows, time to code js to it --- diff --git a/apps/catalogue/templates/catalogue/base.html b/apps/catalogue/templates/catalogue/base.html index f3ebcd98..949b5f29 100644 --- a/apps/catalogue/templates/catalogue/base.html +++ b/apps/catalogue/templates/catalogue/base.html @@ -6,6 +6,7 @@ {% compressed_css 'catalogue' %} {% block title %}{% trans "Platforma Redakcyjna" %}{% endblock title %} + {% block add_css %}{% endblock %} @@ -42,8 +43,9 @@ - + {% compressed_js 'catalogue' %} +{% block add_js %}{% endblock %} {% block extrabody %} {% endblock %} diff --git a/apps/catalogue/templates/catalogue/book_list/book.html b/apps/catalogue/templates/catalogue/book_list/book.html index 46d5ae12..44534541 100755 --- a/apps/catalogue/templates/catalogue/book_list/book.html +++ b/apps/catalogue/templates/catalogue/book_list/book.html @@ -3,6 +3,7 @@ {% if book.single %} {% with book.0 as chunk %} + [B] [c] + [B] {{ book.title }} diff --git a/apps/catalogue/templates/catalogue/book_list/book_list.html b/apps/catalogue/templates/catalogue/book_list/book_list.html index 73811cab..ad8cbf94 100755 --- a/apps/catalogue/templates/catalogue/book_list/book_list.html +++ b/apps/catalogue/templates/catalogue/book_list/book_list.html @@ -12,8 +12,10 @@ + + +

{% trans "No books found." %}

{% endif %} + + diff --git a/apps/catalogue/templates/catalogue/book_list/chunk.html b/apps/catalogue/templates/catalogue/book_list/chunk.html index 14599428..fc893fdf 100755 --- a/apps/catalogue/templates/catalogue/book_list/chunk.html +++ b/apps/catalogue/templates/catalogue/book_list/chunk.html @@ -1,6 +1,7 @@ {% load i18n %}

jQuery Context Menu Plugin Demo

+ This plugin lets you add context menu functionality to your web applications. +

+ +

+ Tip: Try using your keyboard to make a selection. +

+ +

+ Back to the project page +

+ +

Demo

+ +

+ Right click to view the context menu +

+ +

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

+ +

+ + +

+ +

+ + +

+ +

Edit
Cut +
- Pe
+
Copy
Paste
Delete
Quit

+ + + diff --git a/redakcja/static/contextmenu2/jquery.contextMenu.css b/redakcja/static/contextmenu2/jquery.contextMenu.css new file mode 100644 index 00000000..5b2dd906 --- /dev/null +++ b/redakcja/static/contextmenu2/jquery.contextMenu.css @@ -0,0 +1,62 @@ +/* Generic context menu styles */ +.contextMenu { + position: absolute; + width: 120px; + z-index: 99999; + border: solid 1px #CCC; + background: #EEE; + padding: 0px; + margin: 0px; + display: none; +} + +.contextMenu LI { + list-style: none; + padding: 0px; + margin: 0px; +} + +.contextMenu A { + color: #333; + text-decoration: none; + display: block; + line-height: 20px; + height: 20px; + background-position: 6px center; + background-repeat: no-repeat; + outline: none; + padding: 1px 5px; + padding-left: 28px; +} + +.contextMenu LI.hover A { + color: #FFF; + background-color: #3399FF; +} + +.contextMenu LI.disabled A { + color: #AAA; + cursor: default; +} + +.contextMenu LI.hover.disabled A { + background-color: transparent; +} + +.contextMenu LI.separator { + border-top: solid 1px #CCC; +} + +/* + Adding Icons + + You can add icons to the context menu by adding + classes to the respective LI element(s) +*/ + +.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); } +.contextMenu LI.cut A { background-image: url(images/cut.png); } +.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); } +.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); } +.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); } +.contextMenu LI.quit A { background-image: url(images/door.png); } diff --git a/redakcja/static/contextmenu2/jquery.contextMenu.js b/redakcja/static/contextmenu2/jquery.contextMenu.js new file mode 100644 index 00000000..59c1737d --- /dev/null +++ b/redakcja/static/contextmenu2/jquery.contextMenu.js @@ -0,0 +1,211 @@ +// jQuery Context Menu Plugin +// +// Version 1.01 +// +// Cory S.N. LaViska +// A Beautiful Site (http://abeautifulsite.net/) +// +// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/ +// +// Terms of Use +// +// This plugin is dual-licensed under the GNU General Public License +// and the MIT License and is copyright A Beautiful Site, LLC. +// +if(jQuery)( function() { + $.extend($.fn, { + + contextMenu: function(o, callback) { + // Defaults + if( o.menu == undefined ) return false; + if( o.inSpeed == undefined ) o.inSpeed = 150; + if( o.outSpeed == undefined ) o.outSpeed = 75; + // 0 needs to be -1 for expected results (no fade) + if( o.inSpeed == 0 ) o.inSpeed = -1; + if( o.outSpeed == 0 ) o.outSpeed = -1; + // Loop each context menu + $(this).each( function() { + var el = $(this); + var offset = $(el).offset(); + // Add contextMenu class + $('#' + o.menu).addClass('contextMenu'); + // Simulate a true right click + $(this).mousedown( function(e) { + var evt = e; + evt.stopPropagation(); + $(this).mouseup( function(e) { + e.stopPropagation(); + var srcElement = $(this); + $(this).unbind('mouseup'); + if( evt.button == 2 ) { + // Hide context menus that may be showing + $(".contextMenu").hide(); + // Get this context menu + var menu = $('#' + o.menu); + + if( $(el).hasClass('disabled') ) return false; + + // Detect mouse position + var d = {}, x, y; + if( self.innerHeight ) { + d.pageYOffset = self.pageYOffset; + d.pageXOffset = self.pageXOffset; + d.innerHeight = self.innerHeight; + d.innerWidth = self.innerWidth; + } else if( document.documentElement && + document.documentElement.clientHeight ) { + d.pageYOffset = document.documentElement.scrollTop; + d.pageXOffset = document.documentElement.scrollLeft; + d.innerHeight = document.documentElement.clientHeight; + d.innerWidth = document.documentElement.clientWidth; + } else if( document.body ) { + d.pageYOffset = document.body.scrollTop; + d.pageXOffset = document.body.scrollLeft; + d.innerHeight = document.body.clientHeight; + d.innerWidth = document.body.clientWidth; + } + (e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft; + (e.pageY) ? y = e.pageY : y = e.clientY + d.scrollTop; + + // Show the menu + $(document).unbind('click'); + $(menu).css({ top: y, left: x }).fadeIn(o.inSpeed); + // Hover events + $(menu).find('A').mouseover( function() { + $(menu).find('LI.hover').removeClass('hover'); + $(this).parent().addClass('hover'); + }).mouseout( function() { + $(menu).find('LI.hover').removeClass('hover'); + }); + + // Keyboard + $(document).keypress( function(e) { + switch( e.keyCode ) { + case 38: // up + if( $(menu).find('LI.hover').size() == 0 ) { + $(menu).find('LI:last').addClass('hover'); + } else { + $(menu).find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover'); + if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:last').addClass('hover'); + } + break; + case 40: // down + if( $(menu).find('LI.hover').size() == 0 ) { + $(menu).find('LI:first').addClass('hover'); + } else { + $(menu).find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover'); + if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:first').addClass('hover'); + } + break; + case 13: // enter + $(menu).find('LI.hover A').trigger('click'); + break; + case 27: // esc + $(document).trigger('click'); + break + } + }); + + // When items are selected + $('#' + o.menu).find('A').unbind('click'); + $('#' + o.menu).find('LI:not(.disabled) A').click( function() { + $(document).unbind('click').unbind('keypress'); + $(".contextMenu").hide(); + // Callback + if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} ); + return false; + }); + + // Hide bindings + setTimeout( function() { // Delay for Mozilla + $(document).click( function() { + $(document).unbind('click').unbind('keypress'); + $(menu).fadeOut(o.outSpeed); + return false; + }); + }, 0); + } + }); + }); + + // Disable text selection + if( $.browser.mozilla ) { + $('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); }); + } else if( $.browser.msie ) { + $('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); }); + } else { + $('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); }); + } + // Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome) + $(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; }); + + }); + return $(this); + }, + + // Disable context menu items on the fly + disableContextMenuItems: function(o) { + if( o == undefined ) { + // Disable all + $(this).find('LI').addClass('disabled'); + return( $(this) ); + } + $(this).each( function() { + if( o != undefined ) { + var d = o.split(','); + for( var i = 0; i < d.length; i++ ) { + $(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled'); + + } + } + }); + return( $(this) ); + }, + + // Enable context menu items on the fly + enableContextMenuItems: function(o) { + if( o == undefined ) { + // Enable all + $(this).find('LI.disabled').removeClass('disabled'); + return( $(this) ); + } + $(this).each( function() { + if( o != undefined ) { + var d = o.split(','); + for( var i = 0; i < d.length; i++ ) { + $(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled'); + + } + } + }); + return( $(this) ); + }, + + // Disable context menu(s) + disableContextMenu: function() { + $(this).each( function() { + $(this).addClass('disabled'); + }); + return( $(this) ); + }, + + // Enable context menu(s) + enableContextMenu: function() { + $(this).each( function() { + $(this).removeClass('disabled'); + }); + return( $(this) ); + }, + + // Destroy context menu(s) + destroyContextMenu: function() { + // Destroy specified context menus + $(this).each( function() { + // Disable action + $(this).unbind('mousedown').unbind('mouseup'); + }); + return( $(this) ); + } + + }); +})(jQuery); \ No newline at end of file diff --git a/redakcja/static/js/catalogue/book_list.js b/redakcja/static/js/catalogue/book_list.js new file mode 100644 index 00000000..1ff5f064 --- /dev/null +++ b/redakcja/static/js/catalogue/book_list.js @@ -0,0 +1,56 @@ +(function($) { + $(function() { + // clicking on book checks chunks, too + $("input[name=select_book]").change(function(ev) { + $book = $(this); + $book.closest("table").find("input[name=select_chunk][data-book-id=" + $book.val() + "]").attr("checked", $book.is(':checked')); + }); + + // initialize context menu + + var get_ids = function() { + return $.map($("input[name=select_chunk]:checked"), function(ele, idx) { + return ele.value; + }).join(); + }; + + var set_stage = function(key, opt) { + var stage = $("select[name=stage] option[value!=]").eq(key).val(); + $.post($('input[name=chunk_mass_edit_url]').val(), + { + ids: get_ids(), + stage: stage, + }, + function(data, status) { + location.reload(true); + } + ); + }; + + $.contextMenu({ + selector: '#file-list', + items: { + "stage": { + name: "Set stage", + items: $.map($("select[name=stage] option[value!=]"), + function(ele, idx) { + return { + name: $(ele).text(), + callback: set_stage, + }; + }), + }, +/* "user": { + name: "Set user", + + }, + "status": { + name: "Set status", + items: + },*/ + + }, + }); + + }); +})(jQuery);