Author: mgallegos Date: 2012-03-11 15:25:05 +0100 (Sun, 11 Mar 2012) New Revision: 166 Added: trunk/src/mc-dia-form2.js Modified: trunk/wp-theme/mc2-form.php Log: Added: trunk/src/mc-dia-form2.js =================================================================== --- trunk/src/mc-dia-form2.js (rev 0) +++ trunk/src/mc-dia-form2.js 2012-03-11 14:25:05 UTC (rev 166) @@ -0,0 +1,324 @@ +//var $ = jQuery.noConflict(); + +// categories selection + +function select_cat($id, $id2) { + var cat_id = "#mc-form-" + $id; + $(cat_id + ",#mc-form-icon-" + $id).click( + function () + { + if ($id != "rc") { + $(cat_id).addClass("mc-form-descbox-selected"); + $("#mc-cat-selected-"+ $id).slideDown(); + } + $("#mc-form-" + $id2).removeClass("mc-form-descbox-selected"); + $("#mc-cat-selected-"+ $id2).slideUp(); + // $("#mc-form-more-link-" + $id2).show('slow'); + $("#mc-form-less-link-" + $id2).hide(); + // $("#mc-form-" + $id).removeAttr("title"); + // $("#mc-form-" + $id2).attr("title", click_to_select); + $("#mc-form-more-text-" + $id2).slideUp(function() {adjustHeights();}); + if (cat_id == "#mc-form-rc") { + $("#mc-cat-rc-options").slideDown(function() {adjustHeights();}); + mc_rc="0"; + update_logo($id); + } else if (cat_id == "#mc-form-nrc") { + $("#mc-cat-rc-options").slideUp(function() {adjustHeights();}); + reset_areas(); + update_logo($id); + } else { + update_logo($id); + $("#mc-cat-rc-options").slideUp(function() {adjustHeights();}); + } + }); +}; + +function hover_cat($id) { + var cat_id = "#mc-form-" + $id; + $(cat_id + ",#mc-form-icon-" + $id).hover( + function () + { + $(cat_id).addClass("mc-form-descbox-high"); + if ($('#mc-form-less-link-'+$id).is(':hidden')) + $("#mc-form-more-link-"+$id).show(); + }, function () { + $(cat_id).removeClass("mc-form-descbox-high"); + if ($('#mc-form-less-link-'+$id).is(':hidden')) + $("#mc-form-more-link-"+$id).hide(); + }); +}; + +// More links + +function click_more_link($id) { + $("#mc-form-more-link-" + $id).click( + function (event) { + event.stopPropagation(); + $(this).hide(); + if ($id == "rc") { + $("#mc-cat-rc-options").slideDown(); + } + $("#mc-form-less-link-" + $id).show('slow'); + $("#mc-form-more-text-" + $id).show('slow',function() {adjustHeights();}); + + }); +}; + +function click_less_link($id) { + $("#mc-form-less-link-" + $id).click( + function (event) { + event.stopPropagation(); + $(this).hide(); + if ($id == "rc") { + $("#mc-cat-rc-options").slideUp(); + } + $("#mc-form-more-link-" + $id).show('slow'); + $("#mc-form-more-text-" + $id).slideUp(function() {adjustHeights();}); + if ($id == "rc") { $("#mc-cat-rc-options").slideUp(function() {adjustHeights();});} + }); +}; + +function hover_more_link($id) { + $("#mc-form-more-link-" + $id).hover( + function () { + $(this).addClass("mc-form-link-high"); + }, function () { + $(this).removeClass("mc-form-link-high"); + }); +}; + +function hover_less_link($id) { + $("#mc-form-less-link-" + $id).hover( + function () { + $(this).addClass("mc-form-link-high"); + }, function () { + $(this).removeClass("mc-form-link-high"); + }); +}; + +function hide_initial($id) { + $("#mc-form-more-link-" + $id).hide(); + $("#mc-form-more-text-" + $id).hide(); + $("#mc-form-less-link-" + $id).hide(); +}; + +function dclick_toggle($id) { + $("#mc-form-" + $id).dblclick( + function () { + var id_text = "#mc-form-more-text-" + $id; + var id_link = "#mc-form-more-link-" + $id; + if ($(id_text).is(':visible')) { $(id_text).slideUp(); $(id_link).slideDown(); } + else { $(id_text).slideDown(); $(id_link).slideUp(); }; + });}; + +function reset_areas() { + mc_rc="0"; + $("#mc-cat-rc-option-box-ec").removeClass("mc-cat-rc-option-box-selected"); + $("#mc-cat-rc-option-box-bo").removeClass("mc-cat-rc-option-box-selected"); + $("#mc-cat-rc-option-box-to").removeClass("mc-cat-rc-option-box-selected"); + $("#mc-cat-rc-option-box-di").removeClass("mc-cat-rc-option-box-selected"); + $("#mc-form-icon-rc").attr({src : "/mc/0.1/images/rc60.png"}); + $("#mc-cat-selected-rc").slideUp(); +} + +function select_area($id) { + var cat_id = "#mc-cat-rc-option-box-" + $id; + $(cat_id + ",#mc-cat-rc-option-icon-" + $id).click( + function (event) { + event.stopPropagation(); + reset_areas(); + $("#mc-form-rc").addClass("mc-form-descbox-selected"); + $("#mc-cat-selected-rc").slideDown(); + $(cat_id).addClass("mc-cat-rc-option-box-selected"); + $("#mc-form-icon-rc").attr({src : "/mc/0.1/images/rc" + $id + "60.png"}); + update_logo($id); + }); +}; + +// Inspired in: +// http://stackoverflow.com/questions/803688/how-do-i-keep-multiple-divs-the-sa... + +function adjustPairHeights($id1, $id2) { + var maxHeight = 0; + var idcat1 = "#mc-form-category-group-" + $id1; + var idcat2 = "#mc-form-category-group-" + $id2; + var ids = idcat1 + "," + idcat2; + $(ids).each(function(){ + $(this).height('auto'); + if (maxHeight < $(this).height()) {maxHeight = $(this).height();} + }); + if($(idcat1).height() < maxHeight) { $(idcat1).height(maxHeight); }; + if($(idcat2).height() < maxHeight) { $(idcat2).height(maxHeight); }; +} + +function adjustHeights() { + adjustPairHeights("aa", "ab"); + adjustPairHeights("bb", "ba"); +} + +function update_logo($cat) { + if ($cat == "np" ) mc_np="np-"; + if ($cat == "nnp") mc_np="fp-"; + if ($cat == "rp" ) mc_rp="rp-"; + if ($cat == "nrp") mc_rp="ex-"; + if ($cat == "gr" ) mc_gr="gr-"; + if ($cat == "ngr") mc_gr="rs-"; + if ($cat == "ec" || $cat == "bo" || + $cat == "to" || $cat == "di") mc_rc="rc." + $cat + "-"; + if ($cat == "nrc") mc_rc="ro-"; + + mc_category = ""; + var icon_url = ""; + + if (mc_np != "0" && mc_rp != "0" && mc_rc != "0" && mc_gr != "0") { + if (mc_np!="") { mc_category += mc_np; } + if (mc_rp!="") { mc_category += mc_rp; } + if (mc_rc!="") { mc_category += mc_rc; } + if (mc_gr!="") { mc_category += mc_gr; } + // /lang/mc-0-1-np-rp-sc-dc/ + mc_category = mc_category.replace(/-$/, ""); + icon_url = "/mc/0.1/images/" + mc_category + "-120x90-0.1.png"; + } + if (icon_url != "") { + $("#mc-form-icon-result").attr({src : icon_url}); + $("#mc-form-icon-result").show('fast'); + } else { + $("#mc-form-icon-result").hide(); + } + checkIfFormReady(); +} + +function checkIfFormReady() { + urlIni = $('#url').val(); + nameIni = $('#ininame').val(); + keywordsIni = $('#keywords').val(); + if (mc_category != "" && nameIni.length > 0 && urlIni.length > 0) { + $("#mc-dia-continue-btn").addClass("mc-dia-continue-btn-enabled"); + $("#mc-dia-continue-btn").removeClass("mc-dia-continue-btn-disabled"); + $("#mc-dia-continue-btn").effect("highlight", {}, 2000); + } else { + $("#mc-dia-continue-btn").addClass("mc-dia-continue-btn-disabled"); + $("#mc-dia-continue-btn").removeClass("mc-dia-continue-btn-enabled"); + } +} + +function confInputValidation($id) { + $($id).bind("change keyup", function(event) { + checkIfFormReady(); + }); +} + +// adapted from: +// http://stackoverflow.com/questions/1277070/is-there-an-equivalent-javascript... +function doadjustwithsleep( part ) { + if( part == 0 ) { + setTimeout( function() { doadjustwithsleep( 1 ); }, 1000 ); + } else if( part == 1 ) { + adjustHeights(); + } +} + +function conf_link($id) { + var nid = "n" + $id; + hover_more_link($id); + hover_more_link(nid); + hover_less_link(nid); + hover_less_link(nid); + hide_initial($id); + hide_initial(nid); + click_more_link($id); + click_more_link(nid); + click_less_link($id); + click_less_link(nid); + select_cat($id, nid); + select_cat(nid, $id); + hover_cat($id); + hover_cat(nid); + // dclick_toggle($id); + // dclick_toggle(nid); +}; + +function conf_click_continue() { + $("#mc-dia-continue-btn").click( + function (event) { + event.stopPropagation(); + if (mc_category != "" && urlIni.length > 0 && nameIni.length > 0) { + var currentUrl = window.location.pathname.split('/'); + var langCode = ""; + if (currentUrl[1] == 'preview') { langCode = 'en'; } + else { langCode = currentUrl[1]; }; + window.location.href="/" + langCode + "/" + mc_category + "-html/0.1/?ini_name=" + nameIni + + "&ini_url=" + urlIni + "&ini_keywords=" + keywordsIni; + } + }); +}; + + +// http://www.richreuter.com/2008/08/01/UsingJQueryToResizeTextBoxesToMaxLength... +function max_textsize() { + $('input[type=text]').each(function() { + var max_length = $(this).attr('maxlength'); + var multiplier = (max_length > 10) ? 7.3 : 8; + var w = (max_length * multiplier) + "px"; + $(this).width(w); +}); + +} + +// http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and... +$.fn.labelOver = function(overClass) { + return this.each(function() + { + var label = $(this); + var f = label.attr('for'); + if (f) { + var input = $('#' + f); + + this.hide = function() { + label.css({ textIndent: -10000 }); + }; + + this.show = function() { + if (input.val() == '') label.css({ textIndent: 0 }); + }; + + // handlers + input.focus(this.hide); + input.blur(this.show); + label.addClass(overClass).click(function(){ input.focus(); }); + + if (input.val() != '') this.hide(); + } + }); +}; + +var mc_np = "0"; +var mc_rp = "0"; +var mc_rc = "0"; +var mc_gr = "0"; +var mc_category = ""; +var nameIni = ""; +var urlIni = ""; +var keywordsIni = ""; +// var click_to_select = $("#mc-form-gr").attr("title"); // store of title value + +conf_link("np"); +conf_link("rp"); +conf_link("rc"); +conf_link("gr"); +select_area("ec"); +select_area("bo"); +select_area("to"); +select_area("di"); +confInputValidation("#url"); +confInputValidation("#ininame"); + +$("#mc-dia-continue-btn").addClass("mc-dia-continue-btn-disabled"); +$("#mc-cat-rc-options").hide(function() {adjustHeights();}); +$("#mc-form-icon-result").hide(); +conf_click_continue(); +$('label').labelOver('over-apply'); +// max_textsize(); +$(window).load(function () { doadjustwithsleep(0); }); + + Property changes on: trunk/src/mc-dia-form2.js ___________________________________________________________________ Name: svn:mime-type + text/plain Modified: trunk/wp-theme/mc2-form.php =================================================================== --- trunk/wp-theme/mc2-form.php 2012-03-11 14:20:20 UTC (rev 165) +++ trunk/wp-theme/mc2-form.php 2012-03-11 14:25:05 UTC (rev 166) @@ -188,9 +188,8 @@ <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> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css"/> -<!-- -<script type="text/javascript" src="/mc/0.1/mc-dia-form.js"></script> - --> +<script type="text/javascript" src="/mc/0.1/mc-dia-form2.js"></script> + <script type="text/javascript"> $('#languages').tagsInput({width:'415px',defaultText:'Add a language'}); $('#keywords').tagsInput({width:'415px',defaultText:'Add a keyword'});