Vinnaren i pepparkakshustävlingen!
2017-05-27, 16:48
  #1
Medlem
sinewaves avatar
Lägg in ett script som gör att man t ex kan navigera runt i en tråd med tangentbordet.

Exempel (jquery):
Kod:
let flashback = {
	
	init: function(){
	
		this.keyboard();
		
	},
	
	/* keyboard shortcuts for navigation */
	keyboard: function(){
		
		var main = $('#site-left'),
			curPost = main.find('.post').first();
			
		curPost.addClass('curPost');
		
		// CTRL + RIGHT/LEFT-arrow to navigate pages
		$(document).on('keyup', function(e){
			
			// right/left key
			if ( e.ctrlKey  ) {
				
				if ( e.keyCode == 39 || e.keyCode == 37 ) {
					
					let curPage = main.find('.pagination').find('li.active'),
						nextPage = curPage.next('li').find('a').prop('href'),
						prevPage = curPage.prev('li').find('a').prop('href');
						
					if( e.keyCode == 39 && nextPage ) { document.location = nextPage; }
					else if( prevPage ) { document.location = prevPage; }
						
				}
				
				// down/up key
				if ( e.keyCode == 40 || e.keyCode == 38 ) {
					
					let	pagination = main.find('.pagination'),
						lastPage = pagination.find('li.last').find('a').prop('href'),
						firstPage = pagination.find('li.first').find('a').prop('href');
						
					if( e.keyCode == 40 && lastPage ) { document.location = lastPage; }
					else if( firstPage ) { document.location = firstPage; }
					
				}
			}			
			
			// n-key (next) || p-key (prev)
			if( e.keyCode == 78 || e.keyCode == 80 ){
				
				let	mainPosts = main.find('#posts'),
					curPost = mainPosts.find('.curPost'),
					posts = mainPosts.find('.post'),
					nextPost;				
				
				if( e.keyCode == 78 ){ nextPost = curPost.next('.post'); }
				else { nextPost = curPost.prev('.post'); }
				
				nextPost.addClass('curPost');
				curPost.removeClass('curPost');
				
				if( !nextPost.length ) { nextPost = posts.first(); nextPost.addClass('curPost'); }
				$('html, body').animate({
					scrollTop: nextPost.offset().top-20
				}, 300);
				
			}
			
			// C-key (quote a message)
			if( e.keyCode == 67 ){
				document.location = 'newreply.php?do=newreply&p=' + main.find('.curPost').data('postid');
			}
			
			// S-key (write in thread)
			if( e.keyCode == 83 ){
				document.location = 'newreply.php?do=newreply&noquote=1&p=' + main.find('.curPost').data('postid');
			}
			
		}) // end keyup
		
		
	}, // end keyboard()
	
	
	
	
	focusTextarea: function(){
		let textarea = $('#form-newreply').find('textarea').first()[0];
		let val = textarea.value;
		
		// replace text to bring cursor to last pos
		textarea.value = '';
		textarea.value  = val;
		textarea.focus();
		
	},
	
	
}; // flashback


// only init if its a thread
if( document.getElementById('posts') ) {
	flashback.init();
}
if( document.getElementById('form-newreply') ){
	flashback.focusTextarea();
}

Detta ger följande snabbkommandon om man är inne i en tråd:

Kod:
n: Scrolla till nästa inlägg
p: Scrolla till föregående inlägg
c: Citera nuvarande inlägg (nuvarande = det inlägg som scrollats till, om inget scrollats till så är det inlägg nummer 0 på nuvarande sida)
s: Skriv ett svar till en tråd
CTRL + högerpil: Gå till nästa sida (om en sådan finns)
CTRL + vänsterpil: Gå till föregående sida (om en sådan finns)
CTRL + uppåtpil: Gå till trådens första sida (om inte nuvarande = första sidan)
CTRL + nedåtpil: Gå till trådens första sida (om inte nuvarande = sista sidan)

För att testa detta kör t ex webbläsaren Chrome, öppna consolen och klistra in scriptet rakt av. Vid varje sidladdning kommer det dock givetvis att sluta fungera.

Varför snabbkommandon?
För att det gör att man kan utföra saker snabbare och mer effektivt för de som önskar det.
__________________
Senast redigerad av sinewave 2017-05-27 kl. 16:52.
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback