Natedesigns





Editorial Publishing Solution – Cut and Paste jQuery

As a requirement for the English Home blogs, and as a future improvement to our CMS publishing system; we needed to provide a way for users to change the order of the images, visually, to the blog post that they are publishing. I delivered the front-end solution which needed to work in IE8 on jQuery 1.2. The user can change the order of the images/paragraphs and then output a code that would be posted into our CMS to put this change live. I’ve provided a working copy of the solution here, though you’ll need to refresh the page to see it working due to the page loading in Ajax. I’ve currently not found a workaround..opps. Please find a breakdown of the code below, which as always feel free to hack.
function cutPaste(){
	/*
		NOTE: CSS is used for comparison logic on cutButton and pasteButton background-color property to know state, this could easily be a css class?
 
		*/
			var myItem = "";
			var pasteArea;

	
			//Add event listeners for buttons - get events this way?
			var cutButtons = $('.cutButton');
			var pasteButtons = $('.pasteButton');	
			
			//Check IE
			var isMSIE = /*@[email protected]*/0;

								
			$(cutButtons).each(function(){
								
				//Add click function to each of the cutButtons in the Array.
				$(this).click(function(ev){		
				var thisBgColor = $(this).css('background-color');
											
					if(myItem == ""){

						//No item selected - store the items parent box
						myItem = $(this).parent();
						
						//Change colour of button to alert user that item has been 'cut'
						$(this).css({
							"background-color" : "green",
							"opacity" : "1.0"
						});
						
					} else if (thisBgColor == 'green' || thisBgColor == 'rgb(0, 128, 0)'){
						
						//User wants to cancel select as button is already green
						myItem = "";
						
						//Change colour of button back to non selected state
						$(this).css({
							"background-color" : "black",
							"opacity" : "0.5"
						});
						
						$(this).hover(
							function(){
								$(this).css({
									'opacity': '0.5'								
									});
								},
							function(){
								$(this).css({
									'opacity': '0.3'
									});
								}	
						);
						
						
													
					} else if (thisBgColor == 'black' || thisBgColor == 'rgb(0, 0, 0)'){
					//button isn't green, but another button is - user want to override memory with this button

						//find old green button and make it black
						$('.cutButton').each(function(){
							//set variable to instance of this
							thisBgColor = $(this).css('background-color');
							
							if(thisBgColor == 'green' || thisBgColor == 'rgb(0, 128, 0)'){
								$(this).css({
									"background-color" : "black",
									"opacity" : "0.5"
								});
							}
						});
											
						//Store the items parent box
						myItem = $(this).parent();
						
						//Change colour of button to alert user that item has been 'cut'
						$(this).css({
							"background-color" : "green",
							"opacity" : "1.0"
						});

					}
					
					if(ev.stopPropagation()){
						ev.stopPropagation();
					}else{
						ev.cancelBubble;
					}	
				});
			});
			
			
			$(pasteButtons).each(function(){
				
				var thisIdPaste = $(this).attr('id');
				//alert(thisIdPaste);
				
				$(this).click(function(ev){
										
					//check if myItem has any content			
					if(myItem != ""){
						
						//find the area which is being pasted into
						pasteArea = $(this).parent();

						//paste the item
						$(pasteArea).prepend(myItem);
						
						//Change color back to black of original button - find button from parent stored in memory
						var myItemChildren = $(myItem).children();
						var button;
						$(myItemChildren).each(function(){
							if($(this).hasClass('cutButton')){
								button = $(this);
								}
							})
						$(button).css({
							'background-color':'black',
							'opacity': '0.5'
							});
							
						//due to applying css hover is broken, so reapply a hover state function to that button.
						$(button).hover(
							function(){
								$(this).css({
									'opacity': '0.5'
								});
								},
							function(){
								$(this).css({
									'opacity': '0.3'
								});
								}	
						);
						
						//When pasted the window scrolls to show pasted item in new placement
						 $('html, body').animate({
                        	scrollTop: $(myItem).offset().top
                   		 }, 750);
						
					} else {
						
						//User hasn't got an item in memory - tell them!
						alert('No item in memory - please select item to paste');	
						
						//Change color back to black of original button - find button from parent stored in memory
						$('.cutButton').css({
							'background-color':'black',
							'opacity': '0.5'
						});
					}
					
					//Clear the memory so that user can no longer paste until another item is 'cut'.
					myItem = "";
				
					if(ev.stopPropagation()){
						//Not IE
						ev.stopPropagation();
					} else {
						//IE
						ev.cancelBubble;
					}	
				});	
				
			});
	
	
			$('#saveLayoutButton').click(function(){

					var itemOrder = [];
					
					//run through items of content-a pic out p + div items
					$('.content-a').children().each(function(){
						//Grab the p items
						if($(this).is('p[name]')){
							//push into array
							itemOrder.push($(this).attr('name'));
						//Is it a div?
						} else if( $(this).is('div') ){
						
							//does it have an image in it? (all image containers are class inner)
							if($(this).children('div[name]')){
								
								//Get the children with class .inner
								var thisDivChildren = [];
								if($(this).children('div').is('.inner')){
									$(this).children('.inner').each(function(){
										thisDivChildren.push($(this));
										});
									}
								
								//from array above get the attr Name and add into array
								$(thisDivChildren).each(function(){	
								
									//push to array
									itemOrder.push($(this).attr('name'));
								});								
							}
						}
					});
	
					var string = "[";
	
					$(itemOrder).each(function(){
						string += $(this).get() + ",";
					});
	
					string = string.substring(0, string.length - 1);
	
					string += "]"; 
	
					//alert('Please copy this to Polopoly to change your layout: \n \n' + string);
					
					//Need to save to memory rather than alert
					if (isMSIE) {
					// do IE-specific things
						window.prompt ("Please COPY the text highlighted (Ctrl+C), then paste to the field in Prestiege named 'Custome Layout Code'", string);
					} else {
					  // do non IE-specific things
					  	window.prompt ("Please COPY the text highlighted (Ctrl+C), then paste to the field in Prestiege named 'Custome Layout Code'", string);
					}
			});
			
			$(pasteButtons).each(function(){			
				$(this).hover(
					//onHover
					function(){
						if(myItem == ""){
							//nothign to copy so indicate that you shouldn't be pasting yet...
							$(this).css({
								'background-color':'red'
							});
						}else{
							//ok to paste
							$(this).css({
								'background-color':'green'
							});
						}
					},
					//hover out
					function(){
							//return to normal state
							$(this).css({
								'background-color':'black'
							});
					}
				);
			});
}