Login   Register  
PHP Classes
elePHPant
Icontem

File: configure.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Alex  >  Lights GD  >  configure.php  >  Download  
File: configure.php
Role: Auxiliary script
Content type: text/plain
Description: Interface to the class
Class: Lights GD
Render blueprint image of house windows with panes
Author: By
Last change:
Date: 11 months ago
Size: 14,211 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Webpage">
<head>
  <meta charset="utf-8">
  <title>Configuration interface for Light_GDClass PHP Class</title>
  <meta name="description" content="settings to create a picture of window in GD">
  <meta name="keywords" content="configuration,settings,window,frame,gd">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

  <meta itemprop="name" content="Window Configure">
  <meta itemprop="description" content="settings to create a picture of window in GD">  

  <link rel="stylesheet" media="all" href="./style.css">
  <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,800" rel="stylesheet">
</head>
<body>
	<div id="wrapper">
		<header id="mainheader">
			<h1 class="title">Configure and create a picture of Window</h1>
			<article>
				Interface to set basic options for generation of a picture of window. <br>
				All work will be done in Light_GDClass which relies on gorgeous and majestic PHP GD.<br />
				<span style="font-size:8px;">&copy; <a style="color:#000;" href="http://www.webtag.ru">webtag.ru</a></span>
			</article>
		</header>
		<section class="settings">
			<h2>How many panes will be there in your window?</h2>
			<form name="lights" method="post" action="./fullsize.php" target="_blank">
			<select name="q_panes" class="q_panes">
				<option>Choose</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
			</select>
			<section id="tabs_container">
				<div id="flip-tabs" >
					<ul id="flip-navigation" ><li class="selected"><a href="#" id="tab-0">Pane 1</a></li></ul>
					<div id="flip-container" >
						<div>
							
						</div>
					</div>
				</div>
				<input type="button" value="Preview" class="preview_button">
			</section>
			</form>
		</section>
		<section class="preview"></section>
	</div>
<?php

?>
<div id="tab_temp">
	<h3>Settings for Pane %num%</h3>
	<label class="l_sizes">Width*</label><input type="text" class="i_sizes" name="Panes[%num%][width]" value="" placeholder="eg 100">
	%H<label class="l_sizes">Height*</label><input type="text" class="i_sizes" name="Panes[%num%][height]" value="" placeholder="eg 100">H%
	<label class="l_empty">Empty?</label>
	<select name="Panes[%num%][empty]" class="s_empty">
		<option value="1">Yes</option>
		<option value="2">No</option>
	</select>
	<div class="emptyRightBorder">
	<label class="l_emptyBorder">Right Border</label>
		<select name="Panes[%num%][emptyRightBorder]" class="s_emptyBorder">
			<option value="1">No</option>
			<option value="2">Yes</option>
		</select>
	</div>
	<div class="emptyLeftBorder">
	<label class="l_emptyBorder">Left Border</label>
		<select name="Panes[%num%][emptyLeftBorder]" class="s_emptyBorder">
			<option value="1">No</option>
			<option value="2">Yes</option>
		</select>
	</div>
	<div class="notEmptyBlock">
		<label class="l_border">Thickness of Border</label><input type="text" class="i_border" name="Panes[%num%][border]" value="" placeholder="eg 10">
		<label class="l_bColor">Border Color</label>
		<select name="Panes[%num%][borderColor]" class="s_bColor">
			<option value="1">White</option>
			<option value="2">Dark grey</option>
		</select>
		<label class="l_border2line">Thin Inner Padding</label>
		<select name="Panes[%num%][border2line]" class="s_border2line">
			<option value="1">No</option>
			<option value="2">Yes</option>
		</select>
		<label class="l_door">Handler</label>
		<select name="Panes[%num%][doorknob]" class="s_door">
			<option value="1">No Doorknob</option>
			<option value="3">On the right</option>
			<option value="2">On the left</option>
			<option value="4">At the top</option>
			<option value="5">At the bottom</option>
		</select>
		<div class="doorknobType">
		<label class="l_doorknob"> &nbsp; &nbsp;- <i>Handler Type</i></label>
		<select name="Panes[%num%][typeDoorknob]" class="s_doorknob">
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
		</div>
		<label class="l_separator">Frame Separator</label>
		<select name="Panes[%num%][separator]" class="s_separator">
			<option value="1">No</option>
			<option value="3">On the right</option>
			<option value="2">On the left</option>
		</select>
		<div class="separatorWidth">
			<label class="l_separator"> &nbsp; &nbsp;- <i>Separator Width</i></label><input type="text" class="i_separator" name="Panes[%num%][separatorWidth]" value="" placeholder="default 8">
		</div>
		<label class="l_dash">Dashed</label><input type="checkbox" class="i_dash" name="Panes[%num%][dashSign]" value="">
		<label class="l_star clear">Pane Stars</label>
		<span class="sp_star">&gt; Star</span> <input type="checkbox" class="c_star" name="Panes[%num%][gtStar]" value="">
		<span class="sp_star">&lt; Star</span> <input type="checkbox" class="c_star" name="Panes[%num%][ltStar]" value="">
		<span class="sp_star">&#94; Star</span> <input type="checkbox" class="c_star" name="Panes[%num%][upStar]" value="">
		<span class="sp_star">v Star</span> <input type="checkbox" class="c_star" name="Panes[%num%][dnStar]" value="">
		<hr width="89%" align="left">
		<label class="l_star minp">Pane Signs</label>
		<span class="sp_star">Arrow</span> <input type="checkbox" class="c_star" name="Panes[%num%][arrowSign]" value="">
		<span class="sp_star">Plus</span> <input type="checkbox" class="c_star" name="Panes[%num%][plusSign]" value="">
		<hr width="89%" align="left">
		<label class="l_typeStar">Type of stars</label>
		<select name="Panes[%num%][typeostar]" class="s_star">
			<option value="1">Solid</option>
			<option value="2">Dotted</option>
		</select>
		<label class="l_devide">Deviders</label>
		<select name="Panes[%num%][devide]" class="s_devide">
			<option value="1">No</option>
			<option value="2">Yes</option>
		</select>
		<div class="%num%_deviders">
			<label class="l_typeDevider">Type of Deviders</label>
			<select name="Panes[%num%][typeDevider]" class="s_typeDevider">
				<option value="1">1:0</option>
				<option value="2">2:0</option>
				<option value="3">3:0</option>
				<option value="4">1:1</option>
				<option value="5">2:1</option>
				<option value="6">3:1</option>
				<option value="7">2:2</option>
				<option value="8">0:1</option>
				<option value="9">0:2</option>
				<option value="10">1:2</option>
			</select>
			<div class="cell11">
				<label class="l_cell11">Cells at the top?</label>
				<select name="Panes[%num%][cell11]" class="s_cell11">
					<option value="1">No</option>
					<option value="2">Yes</option>
				</select>
			</div>
			<label class="l_thicknessDeviders">Thickness of deviders</label><input type="text" class="i_thicknessDeviders" name="Panes[%num%][thicknessDevider]" value="" placeholder="eg 20">
			<label class="l_distanceDevider">Distance between Deviders</label>	
			<select name="Panes[%num%][distanceDevider]" class="s_distanceDevider">
				<option value="1">Proportional</option>
				<option value="2">Custom</option>
			</select>	
			<label class="l_setDistanceCols">Distance Vertical (from left)</label><input type="text" class="i_setDistanceCols" name="Panes[%num%][setDistanceCol]" value="" placeholder="eg 200 or 200:300" disabled="disabled">
			<label class="l_setDistanceRows">Distance Horizontal (from top)</label><input type="text" class="i_setDistanceRows" name="Panes[%num%][setDistanceRow]" value="" placeholder="eg 100 or 100:200" disabled="disabled">
		</div>
	</div>
</div>
<div id="tabs_nav"><li><a href="#" id="tab-%numP%">Pane %num%</a></li></div>

<script type="text/javascript" src="./jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		var tab = $('#tab_temp').html();
		$('#flip-container').find('div').eq(0).html(tab.replace(/%num%/g,'1').replace(/%H/,'').replace(/H%/,''));
		$('div[class$="deviders"]').hide();
		$('select[name="q_panes"]').change(function(){
			var p = $(this).val();
			p = parseInt(p);
			if(!p || p == 'Choose'){
				$('#tabs_container').fadeOut('fast');
				return false;
			}
			
			if(p == 1){
				clearTabs();
				if($('#tabs_container').css('display') == 'none'){
					$('#tabs_container').fadeIn('fast',function(){
						defineSelect();
					});
				}
			} else if (p > 1 && p <= 6){
				clearTabs();
				var n = $('#tabs_nav').html();
				for(i=2;i<=p;i++){
					$('#flip-navigation').append(n.replace(/%numP%/,(i-1)).replace(/%num%/,i));
					$('#flip-container').append($('<div></div>').html(tab.replace(/%num%/g,i).replace(/%H.*H%/,'')).hide());
				}
				$('div[class$="deviders"]').hide();
				$('#tabs_container').fadeIn('fast',function(){
					clili();
					defineSelect();
					
				});
			}
		});
		$('.preview_button').click(function(event){
			event.preventDefault();
			$.ajax({
			   type: 'post',
			   //url: $(this).attr('action'),
			   url: './preview.php',
			   data: $('form[name="lights"]').serialize(),   // I WANT TO ADD EXTRA DATA + SERIALIZE DATA
			   success: function(data){
			      $('section.preview').html(data);
			      $('section.preview').css('background','none');
			   },
			   error: function(jqXHR, errStatus, errThrown){
			   	  console.log(errStatus);
			   	  alert('There is an error processing your request. Err: ' +errThrown);
			   }
			})
		});
		$('#fullsize').live('click',function(){
			if (!$('form[name="lights"]').attr('action') || $('form[name="lights"]').attr('action') != './fullsize.php') {
				$('form[name="lights"]').removeAttr('action').attr('action', './fullsize.php');
			}
			$('form[name="lights"]').submit();
		})
		$('#pdf').live('click',function(){
			$('form[name="lights"]').removeAttr('action').attr('action', './pdf.php');
			$('form[name="lights"]').submit();
		})
	});
	function clili(){
		$('#flip-navigation li a').each(function(){
			$(this).click(function(){
				$('#flip-navigation li').each(function(){
					$(this).removeClass('selected');
				});
				$(this).parent().addClass('selected');
				//extract index of tab from id of the navigation item
				var flipid=$(this).attr('id').substr(4);
				//Flip to that content tab
				$('#flip-container > div').each(function(ind){
					if(ind != flipid && $(this).css('display') != 'none'){
						$(this).hide();
					}else if(ind == flipid && $(this).css('display') == 'none'){
						$(this).fadeIn('fast');
					}
				})
				return false;
			});
		});
	}
	function clearTabs(){
		if($('#flip-navigation li').length >= 1){
			$('#flip-container > div').each(function(ind){
				if(ind == 0) return true;
				$(this).remove();
			})
			if($('#flip-container > div').css('display') == 'none'){
				$('#flip-container > div').show()
			}
			$('#flip-navigation > li').each(function(ind){
				if(ind==0) return true;
				$(this).remove();
			})
			if($('#flip-navigation li').attr('class') != 'selected'){
				$('#flip-navigation li').addClass('selected');
			}
		}
	}
	function defineSelect(){
		$('select.s_distanceDevider').change(function(){
			var index = $(this).parent().parent().parent().index();
			if($(this).val() == 2 && $('input.i_setDistanceCols').eq(index).attr('disabled')){
				$('input.i_setDistanceCols').eq(index).removeAttr('disabled');
				$('input.i_setDistanceRows').eq(index).removeAttr('disabled');
			}
			else if($(this).val() == 1 && !$('input.i_setDistanceCols').eq(index).attr('disabled')){
				$('input.i_setDistanceCols').eq(index).attr('disabled','disabled');
				$('input.i_setDistanceRows').eq(index).attr('disabled','disabled');
			}
		});
		$('select.s_door').change(function(){
			var index = $(this).parent().parent().index();
			if(($(this).val() >= 2 && $(this).val() <= 5) && $('div.doorknobType').eq(index).css('display') == 'none'){
				$('div.doorknobType').eq(index).fadeIn('fast');
			}
			else if($(this).val() == 1 && $('div.doorknobType').eq(index).css('display') != 'none'){
				$('div.doorknobType').eq(index).fadeOut('fast');
			}
		});
		$('select.s_separator').change(function(){
			var index = $(this).parent().parent().index();
			if(($(this).val() == 2 || $(this).val() == 3) && $('div.separatorWidth').eq(index).css('display') == 'none'){
				$('div.separatorWidth').eq(index).fadeIn('fast');
			}
			else if($(this).val() == 1 && $('div.separatorWidth').eq(index).css('display') != 'none'){
				$('div.separatorWidth').eq(index).fadeOut('fast');
			}
		});
		$('select.s_devide').change(function(){
			var index = $(this).parent().parent().index();
			if($(this).val() == 2 && $('div[class$="deviders"]').eq(index).css('display') == 'none'){
				$('div[class$="deviders"]').eq(index).fadeIn('fast');
			}
			if($(this).val() == 1 && $('div[class$="deviders"]').eq(index).css('display') != 'none'){
				$('div[class$="deviders"]').eq(index).fadeOut('fast');
			}
		});
		$('select.s_typeDevider').change(function(){
			var index = $(this).parent().parent().parent().index();
			if($(this).val() == 4 && $('div.cell11').eq(index).css('display') == 'none'){
				$('div.cell11').eq(index).fadeIn('fast');
			}
			if($(this).val() != 4 && $('div.cell11').eq(index).css('display') != 'none'){
				$('div.cell11').eq(index).fadeOut('fast');
			}
		});
		$('select.s_empty').change(function(){
			var index = $(this).parent().index();
			if($(this).val() == 2 && $('.notEmptyBlock').eq(index).css('display') == 'none'){
				$('.notEmptyBlock').eq(index).fadeIn('fast',function(){
					if($('.emptyRightBorder').eq(index).css('display') != 'none'){
						$('.emptyRightBorder').eq(index).find('select').val(1);
						$('.emptyRightBorder').eq(index).hide();
					}
					if($('.emptyLeftBorder').eq(index).css('display') != 'none'){
						$('.emptyLeftBorder').eq(index).find('select').val(1);
						$('.emptyLeftBorder').eq(index).hide();
					}
				});
			}
			if($(this).val() == 1 && $('.notEmptyBlock').eq(index).css('display') != 'none'){
				$('.notEmptyBlock').eq(index).fadeOut('fast',function(){
					if($('.emptyRightBorder').eq(index).css('display') == 'none'){
						$('.emptyRightBorder').eq(index).show();
					}				
					if($('.emptyLeftBorder').eq(index).css('display') == 'none'){
						$('.emptyLeftBorder').eq(index).show();
					}				
				});
			}			
		});
	}
</script>
</body>
</html>