source: extensions/Piwecard/template/ecard.tpl @ 20254

{include file='include/colorbox.inc.tpl'}
{combine_script id='piwecard' load="footer" path='plugins/Piwecard/js/piwecard.js'}

{footer_script require="piwecard"}{literal}
jQuery(document).ready(function(){
        jQuery("#createECardOpen").colorbox({
                inline:true,
                href:"#addECardForm",
                width:"50%",
                minWidth:"500px",
                height:"90%",
                onComplete:function(){
                        {/literal}var nbMaxRecipients = {$ecard.nb_max_recipients};{literal}    
                        $("#cboxLoadedContent").css('background-color', $("#the_page #content").css('background-color'));
                        $(".ecard_defaultText").each(function(){
                                defaultTextFocusOut($(this));
                        });
                        if (nbMaxRecipients <= 1)
                                $('#ecard_add_recipient').css("display", "none");
                }
        });
        
        jQuery(document).on("focusin", ".ecard_defaultText", function() {
                defaultTextFocusIn($(this));
        });
    
    jQuery(document).on("focusout", ".ecard_defaultText", function() {
                defaultTextFocusOut($(this));
        });
        
        function defaultTextFocusIn(element) {
                if (element.val() == element[0].title) {
                        element.removeClass("ecard_defaultTextActive");
                        element.val("");
                }
        }
        
        function defaultTextFocusOut(element) {
                if (element.val() == "") {
                        element.addClass("ecard_defaultTextActive");
                        element.val(element[0].title);
                }
        }
        
        $('#ecard_add_recipient').click(function() {
                var num = $('.ecard_name_recipient').length-1;
                var newNum = new Number(num + 1);
                {/literal}var nbMaxRecipients = {$ecard.nb_max_recipients}-1;{literal}
                
                if (newNum <= nbMaxRecipients) {
                        var newRecipient = $('#ecard_field_recipient_' + num).clone().attr('id', 'ecard_field_recipient_' + newNum);
                        
                        newRecipient.find('.ecard_mandatory_fields').remove();
                        newRecipient.find('.ecard_error').css("display", "none");
                        newRecipient.find('#ecard_recipient_name_' + num + '_error').attr('id', 'ecard_recipient_name_' + newNum + '_error');
                        newRecipient.find('#ecard_recipient_email_' + num + '_error').attr('id', 'ecard_recipient_email_' + newNum + '_error');
                        newRecipient.find('#ecard_recipient_name_' + num).attr({
                                                                                                        id: 'ecard_recipient_name_' + newNum,
                                                                                                        name: 'ecard_recipient_name[' + newNum+']',
                                                                                                        value: ''
                        });
                        newRecipient.find('#ecard_recipient_email_' + num).attr({
                                                                                                        id: 'ecard_recipient_email_' + newNum,
                                                                                                        name: 'ecard_recipient_email[' + newNum+']',
                                                                                                        value: ''
                        });
                        newRecipient.find('#ecard_recipient_name_' + newNum).removeClass("ecard_error_input");
                        newRecipient.find('#ecard_recipient_email_' + newNum).removeClass("ecard_error_input");
                        defaultTextFocusOut(newRecipient.find('#ecard_recipient_name_' + newNum));
                        defaultTextFocusOut(newRecipient.find('#ecard_recipient_email_' + newNum));
                        
                        $('#ecard_field_recipient_' + num).after(newRecipient);
                }
                if (newNum == nbMaxRecipients) {
                        $('#ecard_add_recipient').css("display", "none");
                }
        });
});

function piwecard_checkForm(form) {
        var titleOK = piwecard_checkField(form.ecard_title, 0, 'block');
        var messageOK = piwecard_checkField(form.ecard_message, 0, 'block');
        var senderNameOK = piwecard_checkField(form.ecard_sender_name, 0, 'block');
        var senderEMailOK = piwecard_checkField(form.ecard_sender_email, 1, 'block');
        var recipientNameOK = new Array();
        var recipientEMailOK = new Array();
        var nbAdditionalRecipients = 0;
        var allRecipientNamesOK = false;
        var allRecipientEmailsOK = false;
        
        while(document.getElementById("ecard_recipient_email_" + nbAdditionalRecipients)) {
                var id_name = "ecard_recipient_name_"+nbAdditionalRecipients;
                var id_email = "ecard_recipient_email_"+nbAdditionalRecipients;
                recipientEMailOK[nbAdditionalRecipients] = piwecard_checkField(document.getElementById(id_email), 1, 'block', true);
                if (nbAdditionalRecipients == 0) {
                        recipientNameOK[0] = piwecard_checkField(form.ecard_recipient_name_0, 0, 'block');
                        recipientEMailOK[0] = piwecard_checkField(form.ecard_recipient_email_0, 1, 'block');
                } else if (recipientEMailOK[nbAdditionalRecipients] && document.getElementById(id_email).value != '') {
                        recipientNameOK[nbAdditionalRecipients] = piwecard_checkField(document.getElementById(id_name), 0, 'block', true);
                }
                nbAdditionalRecipients++;
        }
        
        for (var i=0; i<nbAdditionalRecipients; i++) {
                if (recipientNameOK[i] && recipientEMailOK[i]) {
                        allRecipientNamesOK = true;
                        allRecipientEmailsOK = true;
                } else {
                        allRecipientNamesOK = false;
                        allRecipientEmailsOK = false;
                        break;
                }
        }
        
        if (titleOK && messageOK && senderNameOK && senderEMailOK && allRecipientNamesOK && allRecipientEmailsOK)
                return true;
        else
                return false;
}
{/literal}{/footer_script}

</p>
<div style="display:none">
        <div id="addECardForm">
                <form method="post" onsubmit="return piwecard_checkForm(this);">
                        <fieldset>
                                <legend>{'piwecard_send_stage1'|@translate}</legend>
                                <div class="ecard_field">
                                        <div class="ecard_error" id="ecard_title_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
                                        <span class="ecard_label">{'Title'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
                                        <span class="ecard_input_right"><input name="ecard_title" type="text" id="ecard_title" class="ecard_defaultText" title="{$ecard.title}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
                                </div>
                                <div class="ecard_field">
                                        <div class="ecard_error" id="ecard_message_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
                                        <span class="ecard_label">{'piwecard_message'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
                                        <span class="ecard_input_right"><textarea name="ecard_message" id="ecard_message" class="ecard_defaultText" title="{$ecard.message}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></textarea></span>
                                </div>
                        </fieldset>
                        <fieldset>
                                <legend>{'piwecard_send_stage2'|@translate}</legend>
                                <div class="ecard_field">
                                        <div class="ecard_error" id="ecard_sender_name_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
                                        <div class="ecard_error" id="ecard_sender_email_error">{'piwecard_error'|@translate} {'piwecard_error_email'|@translate}</div>
                                        <span class="ecard_label">{'piwecard_sender'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
                                        <span class="ecard_name"><input name="ecard_sender_name" type="text" id="ecard_sender_name" maxlength="100" value="{$ecard.sender_name}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
                                        <span class="ecard_email"><input name="ecard_sender_email" type="text" id="ecard_sender_email" maxlength="100" {$ecard.changemail} value="{$ecard.sender_email}"  onblur="piwecard_checkField(this, 1, 'block');" onfocus="remove_error_style(this);"></span>
                                </div>
                                <div class="ecard_field" id="ecard_field_recipient_0">
                                        <div class="ecard_error" id="ecard_recipient_name_0_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
                                        <div class="ecard_error" id="ecard_recipient_email_0_error">{'piwecard_error'|@translate} {'piwecard_error_email'|@translate}</div>
                                        <span class="ecard_label">{'piwecard_recipient'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
                                        <span class="ecard_name ecard_name_recipient"><input name="ecard_recipient_name[0]" type="text" id="ecard_recipient_name_0" class="ecard_defaultText" maxlength="100" title="{$ecard.recipient_name}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
                                        <span class="ecard_email"><input name="ecard_recipient_email[0]" type="text" id="ecard_recipient_email_0" class="ecard_defaultText" maxlength="100" title="{$ecard.recipient_email}" onblur="piwecard_checkField(this, 1, 'block');" onfocus="remove_error_style(this);"></span>
                                </div>
                                <a href="javascript:void(0)" id="ecard_add_recipient">{'piwecard_add_recipient'|@translate}</a>
                        </fieldset>
                        <fieldset>
                                <legend>{'piwecard_send_stage3'|@translate}</legend>
                                <div class="ecard_field">
                                        <span class="ecard_label"><label for="ecard_copy">{'piwecard_sender_copy'|@translate} :</label></span>
                                        <span><input type="checkbox" id="ecard_copy" name="ecard_copy" {$ecard.copy}/></span>
                                        <div class="clear"></div>
                                </div>
                                <div class="ecard_field">
                                        <span class="ecard_label">{'piwecard_email_format'|@translate} : </span>
                                                <span>
                                                {foreach from=$ecard_email_format item=ecard_email_format}
                                                        <input type="radio" name="ecard_email_format" id="ecard_email_format_{$ecard_email_format.id}" value="{$ecard_email_format.id}" {$ecard_email_format.selected}><label for="ecard_email_format_{$ecard_email_format.id}"> {$ecard_email_format.name} </label>
                                                {/foreach}
                                        </span>
                                </div>
                                        <div class="ecard_field">
                                                {if isset($ecard_validity)}
                                                        <span class="ecard_label">{'piwecard_validity_label'|@translate} :</span>
                                                        <span>
                                                                {foreach from=$ecard_validity item=ecard_validity}
                                                                        <input type="radio" name="ecard_validity" id="ecard_validity_{$ecard_validity.id}" value="{$ecard_validity.id}" {$ecard_validity.selected}><label for="ecard_validity_{$ecard_validity.id}"> {$ecard_validity.name} </label>
                                                                {/foreach}
                                                        </span>
                                                {else}
                                                        <input type="hidden" name="ecard_validity" id="ecard_validity" value="{$ecard_validity_hidden}">
                                                {/if}
                                        </div>
                        </fieldset>
                        <fieldset>
                                <legend>{'piwecard_send_stage4'|@translate}</legend>
                                <div class="ecard_submit">
                                        <input type="submit" name="ecard_submit" value="{'piwecard_send'|@translate}" />
                                </div>
                        </fieldset>
                        <div>
                                <span class="ecard_mandatory_fields">* {'piwecard_send_mandatory_fields'|@translate}</span>
                        </div>
                </form>
        </div>
</div>
<p>
        <a href="#" class="createECardOpen" id="createECardOpen" title="{'piwecard_send_link'|@translate}">{'piwecard_send_link'|@translate}</a>
</p><p>