Author: mgallegos Date: 2012-05-20 02:08:47 +0200 (Sun, 20 May 2012) New Revision: 384 Added: trunk/src/fonts/ trunk/src/fonts/Cantarell-Regular.eot trunk/src/fonts/Cantarell-Regular.ttf trunk/src/images/button.png trunk/src/images/container.png trunk/src/images/input.png trunk/src/images/progress.png trunk/src/images/progress_bar.png trunk/src/images/progress_left.png trunk/src/images/progress_right.png trunk/src/images/send.png trunk/src/jquery.inputfocus-0.9.min.js trunk/src/mc-dia-form2.css Modified: trunk/src/mc-dia-form2.js trunk/wp-theme/mc2-form.php Log: Added: trunk/src/fonts/Cantarell-Regular.eot =================================================================== (Binary files differ) Property changes on: trunk/src/fonts/Cantarell-Regular.eot ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/fonts/Cantarell-Regular.ttf =================================================================== (Binary files differ) Property changes on: trunk/src/fonts/Cantarell-Regular.ttf ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/button.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/button.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/container.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/container.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/input.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/input.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/progress.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/progress.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/progress_bar.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/progress_bar.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/progress_left.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/progress_left.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/progress_right.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/progress_right.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/images/send.png =================================================================== (Binary files differ) Property changes on: trunk/src/images/send.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/src/jquery.inputfocus-0.9.min.js =================================================================== --- trunk/src/jquery.inputfocus-0.9.min.js (rev 0) +++ trunk/src/jquery.inputfocus-0.9.min.js 2012-05-20 00:08:47 UTC (rev 384) @@ -0,0 +1,11 @@ +/* + InputFocus for jQuery (version 0.9) + Copyright (c) 2009 Simone D'Amico + http://www.simonedamico.it/2009/08/jquery-inputfocus-evidenziare-i-campi-inp... + + Licensed under the MIT license: + http://www.opensource.org/licenses/mit-license.php + + Any and all use of this script must be accompanied by this copyright/license notice in its present form. +*/ +$.fn.inputfocus=function(params){params=$.extend({focus_class:"focus",value:""},params);this.each(function(){$(this).focus(function(){$(this).addClass(params.focus_class);this.value=(this.value==params.value)?'':this.value;});$(this).blur(function(){$(this).removeClass(params.focus_class);this.value=(this.value=='')?params.value:this.value;});});return this;}; \ No newline at end of file Added: trunk/src/mc-dia-form2.css =================================================================== --- trunk/src/mc-dia-form2.css (rev 0) +++ trunk/src/mc-dia-form2.css 2012-05-20 00:08:47 UTC (rev 384) @@ -0,0 +1,150 @@ +/* CSS Reset (Eric Meyer) +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} +*/ + +@font-face { + font-family: 'Cantarell'; + src: url(/mc/0.1/fonts/Cantarell-Regular.eot); + src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype'); +} + +body { + background-color: #f9f9f9; + color: #222; + font-family: Cantarell, Verdana, sans-serif; + font-size: 12px; +} + + +input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; } +input[type="submit"]:focus, input[type="button"]:focus { outline : none; } + +.clear { clear: both; } + +#container { + background: url('/mc/0.1/images/container.png') no-repeat; + width: 754px; + height: 370px; + margin: 20px auto; + padding: 50px 0; + overflow: hidden; + position: relative; +} + #container #first_step, #second_step, #third_step, #fourth_step { display: none; } + #container #first_step { display: block; } + + #container .form { margin: 66px 72px 0 72px; } + + #container h1, #container h2 { + font-size: Cantarell, Verdana, sans-serif; + text-align: center; + font-size: 24px; + text-shadow: 1px 1px 2px #222; + } + #container h1 span { color: #a90329; } + + #container h2 { + color: #888; + font-size: 20px; + text-align: left; + text-shadow: none; + } + + #container table { + margin: 20px 40px; + font-size: 14px; + font-weight: bold; + } + #container table td { + padding: 5px 10px; + } + #container table td:nth-child(2) { + color: #a90329; + } + + #container input, #container select { + background: url('/mc/0.1/images/input.png') no-repeat; + color: #888; + border: 1px solid #ccc; + font-family: Cantarell, Verdana, sans-serif; + font-weight: bold; + font-size: 15px; + width: 300px; + height: 35px; + padding: 0 25px; + margin: 20px 0; + float: left; + + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + } + #container input.submit { + background: url('/mc/0.1/images/button.png') no-repeat; + border: none; + cursor: pointer; + width: 85px; + height: 38px; + position: relative; + bottom: 2px; + left: 655px; + } + #container input.submit:focus { border: none; } + + #container input.send{ background: url('/mc/0.1/images/send.png') no-repeat; } + + #container input.error { border: 1px solid red; } + #container input.valid { border: 1px solid #1FFF00; } + + #container input:focus, #container select:focus { + border: 1px solid #a90329; + color: #a90329; + } + + #container select { padding: 5px 0 5px 25px; } + #container option { padding: 0 15px; } + + #container label { + color: #666; + font-size: 12px; + font-weight: bold; + line-height: 14px; + float: right; + margin: 23px -25px; + width: 270px; + } + + +#progress_bar { + background: url('/mc/0.1/images/progress_bar.png') no-repeat; + width: 339px; + height: 24px; + margin: 0 auto; + position: relative; +} + +#progress { + background: url('/mc/0.1/images/progress.png') repeat-x; + width: 0px; + height: 23px; + + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; +} +#progress_text { + position: relative; + line-height: 21px; + text-align: center; + font-weight: bold; + color: white; + text-shadow: 1px 1px 2px #222; + width: 339px; + height: 24px; + top: -23px; + left: 0; +} + + + + Modified: trunk/src/mc-dia-form2.js =================================================================== --- trunk/src/mc-dia-form2.js 2012-05-19 22:35:22 UTC (rev 383) +++ trunk/src/mc-dia-form2.js 2012-05-20 00:08:47 UTC (rev 384) @@ -511,4 +511,141 @@ $j("#mc-cat-selected-gr").slideUp(); $('#mc-form-optional-grassroots').hide(); }); -*/ \ No newline at end of file +*/ + + +$(function(){ + //original field values + var field_values = { + //id : value + 'username' : 'username', + 'password' : 'password', + 'cpassword' : 'password', + 'firstname' : 'first name', + 'lastname' : 'last name', + 'email' : 'email address' + }; + + + //inputfocus + $('input#username').inputfocus({ value: field_values['username'] }); + $('input#password').inputfocus({ value: field_values['password'] }); + $('input#cpassword').inputfocus({ value: field_values['cpassword'] }); + $('input#lastname').inputfocus({ value: field_values['lastname'] }); + $('input#firstname').inputfocus({ value: field_values['firstname'] }); + $('input#email').inputfocus({ value: field_values['email'] }); + + + + + //reset progress bar + $('#progress').css('width','0'); + $('#progress_text').html('0% Complete'); + + //first_step + $('form').submit(function(){ return false; }); + $('#submit_first').click(function(){ + //remove classes + $('#first_step input').removeClass('error').removeClass('valid'); + + //ckeck if inputs aren't empty + var fields = $('#first_step input[type=text], #first_step input[type=password]'); + var error = 0; + fields.each(function(){ + var value = $(this).val(); + if( value.length<4 || value==field_values[$(this).attr('id')] ) { + $(this).addClass('error'); + $(this).effect("shake", { times:3 }, 50); + + error++; + } else { + $(this).addClass('valid'); + } + }); + + if(!error) { + if( $('#password').val() != $('#cpassword').val() ) { + $('#first_step input[type=password]').each(function(){ + $(this).removeClass('valid').addClass('error'); + $(this).effect("shake", { times:3 }, 50); + }); + + return false; + } else { + //update progress bar + $('#progress_text').html('33% Complete'); + $('#progress').css('width','113px'); + + //slide steps + $('#first_step').slideUp(); + $('#second_step').slideDown(); + } + } else return false; + }); + + + $('#submit_second').click(function(){ + //remove classes + $('#second_step input').removeClass('error').removeClass('valid'); + + var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; + var fields = $('#second_step input[type=text]'); + var error = 0; + fields.each(function(){ + var value = $(this).val(); + if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { + $(this).addClass('error'); + $(this).effect("shake", { times:3 }, 50); + + error++; + } else { + $(this).addClass('valid'); + } + }); + + if(!error) { + //update progress bar + $('#progress_text').html('66% Complete'); + $('#progress').css('width','226px'); + + //slide steps + $('#second_step').slideUp(); + $('#third_step').slideDown(); + } else return false; + + }); + + + $('#submit_third').click(function(){ + //update progress bar + $('#progress_text').html('100% Complete'); + $('#progress').css('width','339px'); + + //prepare the fourth step + var fields = new Array( + $('#username').val(), + $('#password').val(), + $('#email').val(), + $('#firstname').val() + ' ' + $('#lastname').val(), + $('#age').val(), + $('#gender').val(), + $('#country').val() + ); + var tr = $('#fourth_step tr'); + tr.each(function(){ + //alert( fields[$(this).index()] ) + $(this).children('td:nth-child(2)').html(fields[$(this).index()]); + }); + + //slide steps + $('#third_step').slideUp(); + $('#fourth_step').slideDown(); + }); + + + $('#submit_fourth').click(function(){ + //send information to server + alert('Data sent'); + }); + +}); \ No newline at end of file Modified: trunk/wp-theme/mc2-form.php =================================================================== --- trunk/wp-theme/mc2-form.php 2012-05-19 22:35:22 UTC (rev 383) +++ trunk/wp-theme/mc2-form.php 2012-05-20 00:08:47 UTC (rev 384) @@ -1,8 +1,10 @@ <div class="mc-form-header"> +<!-- <div class="mc-form-intro"><h3> <?php _e("Frame your initiative or collective:", "mc"); ?></h3> <?php echo qtrans_generateLanguageSelectCode("text"); ?><img src="/mc/0.1/images/" alt="" class="mc-form-icon-result" id="mc-form-icon-result" style="display: block; margin: 40px 60px;" /> </div> + --> <div style="height: 10px;"> </div> <!-- @@ -28,52 +30,25 @@ <div class="mc-clean"></div> --> -<div id="slider1"> - <div> <!-- First slide --> - <div class="mc-form-category-group-a-v2" style="padding: 22px;"> - <div class="mc-form-required-info2" id="mc-form-required-name"> - <div class="label"> - <label id="mc-required-title-name" style="background-color: #FEFBFD"><?php _e("Name of your initiative", "mc"); ?><span class="required-field">*</span></label> - <label class="pre" for="ininame"></label> - <input type="text" name="ininame" value="" id="ininame"/> - </div> - </div> - <div class="mc-form-required-info2" id="mc-form-required-url"> - <div class="label"> - <label id="mc-required-title-url" style="background-color: #FEFBFD"><?php _e("Web address", "mc"); ?><span class="required-field">*</span></label> - <label id="infield-url" for="url" style="position: absolute;display: block;margin: 11px 0px 5px 12px;padding: 0;font-size: 14px;"><?php _e("something like http://example.com", "mc"); ?></label> - <!-- - <label id="label1" class="pre" for="url"><?php _e("something like http://example.com", "mc"); ?></label> - --> - <input type="text" name="url" value="" id="url"/> - </div> - </div> - <div id="mc-form-optional-languages"> - <div style="position: relative;float: left;width: 400px;font-size: 16px;margin-right:29px;margin-top: 20px;"> - <label id="mc-optional-languages" style="background-color: #FEFBFD"><?php _e("Language(s) (press enter or comma to separate)", "mc"); ?></label> - <input type="text" name="languages" value="" id="languages"/> - </div> - </div> - <div id="mc-form-optional-keywords"> - <div style="position: relative;float: left;width: 400px;font-size: 16px;margin-right:23px;margin-top: 20px;"> - <label id="mc-optional-keywords" style="background-color: #FEFBFD"><?php _e("Keywords (press enter or comma to separate)", "mc"); ?></label> - <!-- - <label class="pre" for="keywords"><?php _e("for ex: health, education, etc", "mc"); ?></label> - --> - <input type="text" name="keywords" value="" id="keywords"/> - </div> - </div> - <div class="mc-form-optional-info2" id="mc-form-optional-location"> - <div class="label"> - <label id="mc-optional-location" style="background-color: #FEFBFD"><?php _e("Location", "mc"); ?></label> - <input type="text" name="location" value="" id="location" onblur="$j('#ininame').focus();"/> - </div> - </div> - <div class="mc-clean"></div> - </div> +<div id="container"> + <div id="first_step"> <!-- First slide --> + <h1>FRAME YOUR <span>INITIATIVE</span> OR <span>COLLECTIVE</span></h1> + <div class="form"> + <input type="text" name="ininame" value="Name of your initiative" id="ininame"/> + <label for="ininame"><span class="required-field">*</span><?php _e("Name of your initiative or collective", "mc"); ?></label> + <input type="text" name="url" value="Web address" id="url"/> + <label for="url"><span class="required-field">*</span><?php _e("Web address ...", "mc"); ?></label> + <input type="text" name="languages" value="Language(s)" id="languages"/> + <label for="languages"><?php _e("Language(s) (press enter or comma to separate)", "mc"); ?></label> + <input type="text" name="keywords" value="Keywords" id="keywords"/> + <label for="keywords"><?php _e("Keywords (press enter or comma to separate)", "mc"); ?></label> + <input type="text" name="location" value="Location" id="location" onblur="$j('#ininame').focus();"/> + <label for="location"><?php _e("Location....", "mc"); ?></label> + </div> + <div class="clear"></div> </div><!-- End first slide --> - - <div> <!-- Second slide --> + + <div id="second_step"> <!-- Second slide --> <!-- <label id="mc-optional-optional-boxes"><?php _e("Click on those you think corespond to your initiative:", "mc"); ?></label> --> <div class="mc-cat-group-v2" id="mc-cat-group-a"> <div style="float: left;" class="mc-form-category-group-a-v2"> @@ -127,7 +102,7 @@ </div> <div class="mc-clean"></div> </div><!-- End second slide --> - <div><!-- Third slide --> + <div id="third_step"><!-- Third slide --> <div class="mc-cat-group-v2" id="mc-cat-group-b"> <div style="float: left;" class="mc-form-category-group-a-v2"> @@ -202,7 +177,7 @@ <div class="mc-clean"></div> </div><!-- End third slide --> - <div><!-- Fourth slide --> + <div id="fourth_step"><!-- Fourth slide --> <div class="mc-cat-group-v2" id="mc-cat-group-c"> <div style="float: left;" class="mc-form-category-group-a-v2"> <div class="mc-form-rounded mc-form-category-group-v2 float-left" style="padding-top: 35px;" id="mc-form-category-group-c"> @@ -249,118 +224,54 @@ <div class="mc-clean"></div> </div><!-- End Fourth slide --> - <div><div id="fifth"><!-- Fifth slide --> - - <div class="mc-cat-group-v2" id="mc-cat-group-d"> - <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="mc-form-rounded mc-form-category-group-v2 float-left" id="mc-form-category-group-d"> - <img src="/mc/0.1/images/cat-selected.png" alt="selected" class="mc-cat-selected mc-cat-selected-a" id="mc-cat-selected-gr" /> - <div id="mc-form-gr" class="mc-form-rounded mc-form-descbox mc-form-descbox-a"> - <!-- - <div id="mc-form-more-link-gr" class="mc-form-link"><?php _e("What is this?", "mc"); ?></div> - <div id="mc-form-less-link-gr" class="mc-form-link"><?php _e("less info", "mc"); ?></div> - --> - <div class="mc-form-descbox-header"><?php _e("Grassroots", "mc"); ?><input id="gr-checkbox" name="gr-checkbox" type="checkbox" value="N" onclick="clickCheckBox('gr')"></div> - <div class="mc-form-descbox-intro"><?php _e("Your initiative is driven by horizontal collective decisions", "mc"); ?></div> - <div id="mc-form-more-text-gr" class="mc-form-more-text-v2"> - <?php _e("<ul> <li>The initiative follows collective decision-making procedures for tackling most issues</li> <li>The hierarchical structure is minimal or inexistent. That is, horizontal grassroots discussions of the members have a major weight when compared with vertical instructions from the board</li> </ul>", "mc"); ?> - </div> - </div> - <div class="mc-form-icon mc-form-icon-a"> - <img id="mc-form-icon-gr" alt="rp" src="/mc/0.1/images/gr60.png" /> - </div> - </div> - <div style="float: left;width: auto;"> - <img src="/mc/0.1/images/step4.png" alt="step4" class="mc-steps-number-v2" /> - <div id="mc-form-optional-grassroots" style="width: 500px;"> - <!--<img src="/mc/0.1/images/button_cancel.png" alt="selected" id="button-close-d" style="display: inline;position: relative;top: -23px;z-index: 1000;left: 476px;"/>--> - <div class="blockMe4" style="position: relative;float: left;width: 440px;font-size: 16px;margin-left: 10px;margin-top: 45px;border: 1px solid #B7C4C8;"> - <label id="mc-optional-grassroots" style="color: #444;background-color: #F9F9F9;"><?php _e("Optional", "mc"); ?></label> - <label class="optional-labels-fields"> - <input type="checkbox" name="decisions-general-assemblies" value="S" id="decisions-general-assemblies" tabindex="22" disabled="disabled"/> - <?php _e("We take decisions mainly through general assemblies", "mc"); ?> - </label> - <label class="optional-labels-fields"> - <input type="checkbox" name="decisions-voting" value="S" id="decisions-voting" tabindex="23" disabled="disabled"/> - <?php _e("We take decisions through majority voting", "mc"); ?> - </label> - <label class="optional-labels-fields"> - <input type="checkbox" name="decisions-consensus" value="S" id="decisions-consensus" tabindex="24" disabled="disabled"/> - <?php _e("We take decisions through consensus, instead of majority", "mc"); ?> - </label> - <label class="optional-labels-fields"> - <input type="checkbox" name="representatives-democratically" value="S" id="representatives-democratically" tabindex="25" disabled="disabled"/> - <?php _e("We have representatives chosen democratically", "mc"); ?> - </label> - <label class="optional-labels-fields"> - <input type="checkbox" name="meetings-transparent" value="S" id="meetings-transparent" tabindex="26" onblur="$j('#decisions-general-assemblies').focus();" disabled="disabled"/> - <?php _e("We have a board whose meetings are transparent", "mc"); ?> - </label> - </div> - </div> - </div> - </div> - </div> - <div class="mc-clean"></div> - - </div><div class="mc-clean" style="height: 1px;"></div> - </div><!-- End Fifth slide --> - + </div> <!-- End Slider --> - - <div id="mc-form-optional-boxes"> - - <div style="position: relative;width: 100%;font-size: 16px;margin-right:23px;margin-top: 20px;"> - - - - - - - - - </div> - - <div class="mc-clean"></div> - </div> - <div class="mc-clean"></div> +<div id="progress_bar"> + <div id="progress"></div> + <div id="progress_text">0% Complete</div> +</div> - <!-- <div class="mc-dia-continue-btn" id="mc-dia-continue-btn"><?php _e("Continue", "mc"); ?></div> --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/mc/0.1/jquery.tagsinput.min.js"></script> -<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'></script> +<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'></script> +<!-- <script type='text/javascript' src='/mc/0.1/jquery.easing.1.3.js'></script> <script type='text/javascript' src='/mc/0.1/jquery.bxSlider.js'></script> + --> <script type='text/javascript' src='/mc/0.1/jquery.infieldlabel.min.js'></script> <script type='text/javascript' src='/mc/0.1/jquery.blockUI.js'></script> <script type='text/javascript' src='/mc/0.1/jquery.checkbox.min.js'></script> +<script type="text/javascript" src="/mc/0.1/jquery.inputfocus-0.9.min.js"></script> <script type="text/javascript" src="/mc/0.1/mc-dia-form2.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/black-tie/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="/mc/0.1/jquery.checkbox.css"/> +<link rel="stylesheet" type="text/css" href="/mc/0.1/mc-dia-form2.css"/> <script type="text/javascript"> $j(document).ready(function() { - $j('#languages').tagsInput({width:'400px',defaultText:'Add a language'}); - $j('#keywords').tagsInput({width:'400px',defaultText:'Add a keyword'}); + //$j('#languages').tagsInput({width:'400px',defaultText:'Add a language'}); + //$j('#keywords').tagsInput({width:'400px',defaultText:'Add a keyword'}); $j('#infield-donation-website').inFieldLabels(); $j('#infield-non-profit-website').inFieldLabels(); $j('#infield-open-accounting-website').inFieldLabels(); $j('#infield-creative-commons-website').inFieldLabels(); $j('#infield-other-license-website').inFieldLabels(); - $j('#infield-url').inFieldLabels(); + //$j('#infield-url').inFieldLabels(); $j('#infield-terms-of-use-website').inFieldLabels(); $j('#np-checkbox').checkbox(); $j('#rp-checkbox').checkbox(); $j('#rc-checkbox').checkbox(); $j('#gr-checkbox').checkbox(); + /* $j('#slider1').bxSlider({startingSlide:0}); $j('#fifth').remove(); + */ $("ul.qtrans_language_chooser > li").css("display", "inline"); });