- Adaptación de los formularios a iOS (iPhone / iPod)
git-svn-id: https://192.168.0.254/svn/Proyectos.Incam_FormulariosCalidad/trunk@20 e2c41b2c-0c6f-0149-8b81-50b1a9191bb3
This commit is contained in:
parent
ff7326b843
commit
8b11d513ad
@ -156,14 +156,13 @@ EOT;
|
||||
//Website
|
||||
function mobile_display_url($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -173,7 +172,7 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
//check for default value
|
||||
@ -187,12 +186,14 @@ EOT;
|
||||
}
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
|
||||
<div>
|
||||
<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />
|
||||
</div>{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="bigfield">
|
||||
<input placeholder="{$element->default_value}" type="url" id="element_{$element->id}" name="element_{$element->id}" class="element text" value="{$element->default_value}" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -201,14 +202,13 @@ EOT;
|
||||
//Email
|
||||
function mobile_display_email($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -218,7 +218,7 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
//check for populated value, if exist, use it instead default_value
|
||||
@ -227,12 +227,14 @@ EOT;
|
||||
}
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
|
||||
<div>
|
||||
<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" maxlength="255" value="{$element->default_value}" />
|
||||
</div>{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="bigfield">
|
||||
<input placeholder="email" type="email" id="element_{$element->id}" name="element_{$element->id}" class="element text" value="{$element->default_value}" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -309,14 +311,13 @@ EOT;
|
||||
//Phone - Simple
|
||||
function mobile_display_simple_phone($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -326,7 +327,7 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
//check for populated value
|
||||
@ -335,12 +336,14 @@ EOT;
|
||||
}
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description">{$element->title} {$span_required}</label>
|
||||
<div>
|
||||
<input id="element_{$element->id}" name="element_{$element->id}" class="element text medium" type="text" maxlength="255" value="{$element->default_value}"/>
|
||||
</div>{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="bigfield">
|
||||
<input placeholder="{$element->default_value}" type="tel" id="element_{$element->id}" name="element_{$element->id}" class="element text" value="{$element->default_value}" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -351,15 +354,13 @@ EOT;
|
||||
//Date - Normal
|
||||
function mobile_display_date($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -369,7 +370,12 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
//check for populated value, if exist, use it instead default_value
|
||||
if(!empty($element->populated_value['element_'.$element->id]['default_value'])){
|
||||
$element->default_value = $element->populated_value['element_'.$element->id]['default_value'];
|
||||
}
|
||||
|
||||
$machform_path = '';
|
||||
@ -379,36 +385,19 @@ EOT;
|
||||
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description">{$element->title} {$span_required}</label>
|
||||
<span>
|
||||
<input id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" type="text" /> /
|
||||
<label for="element_{$element->id}_1">{$lang['date_mm']}</label>
|
||||
</span>
|
||||
<span>
|
||||
<input id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" type="text" /> /
|
||||
<label for="element_{$element->id}_2">{$lang['date_dd']}</label>
|
||||
</span>
|
||||
<span>
|
||||
<input id="element_{$element->id}_3" name="element_{$element->id}_3" class="element text" size="4" maxlength="4" value="{$element->populated_value['element_'.$element->id.'_3']['default_value']}" type="text" />
|
||||
<label for="element_{$element->id}_3">{$lang['date_yyyy']}</label>
|
||||
</span>
|
||||
|
||||
<span id="calendar_{$element->id}">
|
||||
<img id="cal_img_{$element->id}" class="datepicker" src="{$machform_path}images/calendar.gif" alt="Pick a date." />
|
||||
</span>
|
||||
<script type="text/javascript">
|
||||
Calendar.setup({
|
||||
inputField : "element_{$element->id}_3",
|
||||
baseField : "element_{$element->id}",
|
||||
displayArea : "calendar_{$element->id}",
|
||||
button : "cal_img_{$element->id}",
|
||||
ifFormat : "%B %e, %Y",
|
||||
onSelect : selectDate
|
||||
});
|
||||
</script>
|
||||
{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="smallfield">
|
||||
<span class="name">{$element->title}</span>
|
||||
<a href="javascript:openCalendar('element_{$element->id}_','element_{$element->id}_0','element_{$element->id}_1','element_{$element->id}_2','element_{$element->id}_3');" id="element_{$element->id}_" class="datefield">DD-MM-YYYY</a>
|
||||
<input type="hidden" id="element_{$element->id}_0" name="element_{$element->id}_0" value="">
|
||||
<input type="hidden" id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_3" name="element_{$element->id}_3" class="element text" size="4" maxlength="4" value="{$element->populated_value['element_'.$element->id.'_3']['default_value']}" type="text" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -417,15 +406,13 @@ EOT;
|
||||
//Date - Normal
|
||||
function mobile_display_europe_date($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -435,45 +422,29 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
$machform_path = '';
|
||||
if(!empty($element->machform_path)){
|
||||
$machform_path = $element->machform_path;
|
||||
//check for populated value, if exist, use it instead default_value
|
||||
if(!empty($element->populated_value['element_'.$element->id]['default_value'])){
|
||||
$element->default_value = $element->populated_value['element_'.$element->id]['default_value'];
|
||||
}
|
||||
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description">{$element->title} {$span_required}</label>
|
||||
<span>
|
||||
<input id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" type="text" /> /
|
||||
<label for="element_{$element->id}_1">{$lang['date_dd']}</label>
|
||||
</span>
|
||||
<span>
|
||||
<input id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" type="text" /> /
|
||||
<label for="element_{$element->id}_2">{$lang['date_mm']}</label>
|
||||
</span>
|
||||
<span>
|
||||
<input id="element_{$element->id}_3" name="element_{$element->id}_3" class="element text" size="4" maxlength="4" value="{$element->populated_value['element_'.$element->id.'_3']['default_value']}" type="text" />
|
||||
<label for="element_{$element->id}_3">{$lang['date_yyyy']}</label>
|
||||
</span>
|
||||
|
||||
<span id="calendar_{$element->id}">
|
||||
<img id="cal_img_{$element->id}" class="datepicker" src="{$machform_path}images/calendar.gif" alt="Pick a date." />
|
||||
</span>
|
||||
<script type="text/javascript">
|
||||
Calendar.setup({
|
||||
inputField : "element_{$element->id}_3",
|
||||
baseField : "element_{$element->id}",
|
||||
displayArea : "calendar_{$element->id}",
|
||||
button : "cal_img_{$element->id}",
|
||||
ifFormat : "%B %e, %Y",
|
||||
onSelect : selectEuropeDate
|
||||
});
|
||||
</script>
|
||||
{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="smallfield">
|
||||
<span class="name">{$element->title}</span>
|
||||
<a href="javascript:openCalendar('element_{$element->id}_','element_{$element->id}_0','element_{$element->id}_1','element_{$element->id}_2','element_{$element->id}_3');" id="element_{$element->id}_" class="datefield">DD-MM-AAAA</a>
|
||||
<input type="hidden" id="element_{$element->id}_0" name="element_{$element->id}_0" value="">
|
||||
<input type="hidden" id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_3" name="element_{$element->id}_3" class="element text" size="4" maxlength="4" value="{$element->populated_value['element_'.$element->id.'_3']['default_value']}" type="text" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -483,14 +454,13 @@ EOT;
|
||||
//Multiple Choice
|
||||
function mobile_display_radio($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -500,7 +470,7 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
$option_markup = '';
|
||||
@ -527,17 +497,19 @@ EOT;
|
||||
}
|
||||
}
|
||||
|
||||
$option_markup .= "<input id=\"element_{$element->id}_{$option->id}\" name=\"element_{$element->id}\" class=\"element radio\" type=\"radio\" value=\"{$option->id}\" {$checked} />\n";
|
||||
$option_markup .= "<label class=\"choice\" for=\"element_{$element->id}_{$option->id}\">{$option->option}</label>\n";
|
||||
$option_markup .= "<li class=\"radiobutton\">\n";
|
||||
$option_markup .= "<span class=\"name\">".$option->option."</span>\n";
|
||||
$option_markup .= "<input id=\"element_{$element->id}_{$option->id}\" name=\"element_{$element->id}\" type=\"radio\" value=\"{$option->id}\" {$checked} />\n";
|
||||
$option_markup .= "</li>\n";
|
||||
}
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description">{$element->title} {$span_required}</label>
|
||||
<span>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
{$option_markup}
|
||||
</span>{$guidelines} {$error_message}
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -626,14 +598,13 @@ EOT;
|
||||
//Dropdown
|
||||
function mobile_display_select($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -643,10 +614,10 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
$option_markup = '';
|
||||
$option_markup = "<li class=\"select\"><select name=\"select_{$element->id}\">\n";
|
||||
|
||||
$has_default = false;
|
||||
foreach ($element->options as $option){
|
||||
@ -668,23 +639,16 @@ EOT;
|
||||
$option_markup .= "<option value=\"{$option->id}\" {$selected}>{$option->option}</option>\n";
|
||||
}
|
||||
|
||||
if(!$has_default){
|
||||
if(!empty($element->populated_value['element_'.$element->id]['default_value'])){
|
||||
$option_markup = '<option value=""></option>'."\n".$option_markup;
|
||||
}else{
|
||||
$option_markup = '<option value="" selected="selected"></option>'."\n".$option_markup;
|
||||
}
|
||||
}
|
||||
$option_markup .= "</select><span class=\"arrow\"></span></li>\n";
|
||||
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
|
||||
<div>
|
||||
<select class="element select {$element->size}" id="element_{$element->id}" name="element_{$element->id}">
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
{$option_markup}
|
||||
</select>
|
||||
</div>{$guidelines} {$error_message}
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -801,15 +765,13 @@ EOT;
|
||||
//Time
|
||||
function mobile_display_time($element){
|
||||
//check for error
|
||||
$error_class = '';
|
||||
$error_message = '';
|
||||
$span_required = '';
|
||||
$guidelines = '';
|
||||
global $lang;
|
||||
|
||||
if(!empty($element->is_error)){
|
||||
$error_class = 'class="error"';
|
||||
$error_message = "<p class=\"error\">{$element->error_message}</p>";
|
||||
$error_message = "<br/><p class=\"error\">{$element->error_message}</p>";
|
||||
}
|
||||
|
||||
//check for required
|
||||
@ -819,9 +781,10 @@ EOT;
|
||||
|
||||
//check for guidelines
|
||||
if(!empty($element->guidelines)){
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\"><small>{$element->guidelines}</small></p>";
|
||||
$guidelines = "<p class=\"guidelines\" id=\"guide_{$element->id}\">{$element->guidelines}</p>";
|
||||
}
|
||||
|
||||
|
||||
if(!empty($element->populated_value['element_'.$element->id.'_4']['default_value'])){
|
||||
if($element->populated_value['element_'.$element->id.'_4']['default_value'] == 'AM'){
|
||||
$selected_am = 'selected';
|
||||
@ -844,25 +807,20 @@ EOT;
|
||||
}
|
||||
|
||||
$element_markup = <<<EOT
|
||||
<li id="li_{$element->id}" {$error_class}>
|
||||
<label class="description">{$element->title} {$span_required}</label>
|
||||
<span>
|
||||
<input id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text " size="2" type="text" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" /> :
|
||||
<label>{$lang['time_hh']}</label>
|
||||
</span>
|
||||
<span>
|
||||
<input id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text " size="2" type="text" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" /> {$seconds_separator}
|
||||
<label>{$lang['time_mm']}</label>
|
||||
</span>
|
||||
{$seconds_markup}
|
||||
<span>
|
||||
<select class="element select" style="width:4em" id="element_{$element->id}_4" name="element_{$element->id}_4">
|
||||
<option value="AM" {$selected_am}>AM</option>
|
||||
<option value="PM" {$selected_pm}>PM</option>
|
||||
</select>
|
||||
<label>AM/PM</label>
|
||||
</span>{$guidelines} {$error_message}
|
||||
</li>
|
||||
<span class="graytitle">{$element->title} {$span_required}</span>
|
||||
{$error_message}
|
||||
{$guidelines}
|
||||
<ul class="pageitem">
|
||||
<li class="smallfield">
|
||||
<span class="name">{$element->title}</span>
|
||||
<a href="javascript:openTimePicker('element_{$element->id}_','element_{$element->id}_0','element_{$element->id}_1','element_{$element->id}_2','element_{$element->id}_3','element_{$element->id}_4');" id="element_{$element->id}_" class="datefield">HH:MM:SS</a>
|
||||
<input type="hidden" id="element_{$element->id}_0" name="element_{$element->id}_0" value="">
|
||||
<input type="hidden" id="element_{$element->id}_1" name="element_{$element->id}_1" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_1']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_2" name="element_{$element->id}_2" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_2']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_3" name="element_{$element->id}_3" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_3']['default_value']}" type="text" />
|
||||
<input type="hidden" id="element_{$element->id}_4" name="element_{$element->id}_4" class="element text" size="2" maxlength="2" value="{$element->populated_value['element_'.$element->id.'_4']['default_value']}" type="text" />
|
||||
</li>
|
||||
</ul>
|
||||
EOT;
|
||||
|
||||
return $element_markup;
|
||||
@ -1931,7 +1889,7 @@ EOT;
|
||||
|
||||
//If you would like to remove the "Powered by MachForm" link, please contact us at customer.service@appnitro.com before doing so
|
||||
$form_markup = <<<EOT
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta content="yes" name="apple-mobile-web-app-capable" />
|
||||
@ -1940,7 +1898,10 @@ EOT;
|
||||
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
|
||||
<link href="{$css_dir}style.css" rel="stylesheet" media="screen" type="text/css" />
|
||||
<link href="{$css_dir}forms.css" rel="stylesheet" media="screen" type="text/css" />
|
||||
<link href="{$css_dir}spinningwheel.css" rel="stylesheet" media="screen" type="text/css" />
|
||||
<script src="mobile/apple/javascript/functions.js" type="text/javascript"></script>
|
||||
<script src="mobile/apple/javascript/spinningwheel.js" type="text/javascript"></script>
|
||||
<script src="mobile/apple/javascript/calendar.js" type="text/javascript"></script>
|
||||
<title>{$form->name}</title>
|
||||
<link href="pics/startup.png" rel="apple-touch-startup-image" />
|
||||
</head>
|
||||
@ -2334,7 +2295,7 @@ EOT;
|
||||
}
|
||||
|
||||
$form_markup = <<<EOT
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta content="yes" name="apple-mobile-web-app-capable" />
|
||||
@ -2344,6 +2305,7 @@ EOT;
|
||||
<link href="{$css_dir}style.css" rel="stylesheet" media="screen" type="text/css" />
|
||||
<link href="{$css_dir}forms.css" rel="stylesheet" media="screen" type="text/css" />
|
||||
<script src="mobile/apple/javascript/functions.js" type="text/javascript"></script>
|
||||
<script src="mobile/apple/javascript/calendar.js" type="text/javascript"></script>
|
||||
<title>{$form->name}</title>
|
||||
<link href="pics/startup.png" rel="apple-touch-startup-image" />
|
||||
</head>
|
||||
@ -2494,7 +2456,7 @@ EOT;
|
||||
}
|
||||
|
||||
$form_markup = <<<EOT
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
@ -70,3 +70,12 @@ textarea.large
|
||||
width:98%;
|
||||
height:7.5em;
|
||||
}
|
||||
|
||||
|
||||
.datefield {
|
||||
color:blue;
|
||||
float:right;
|
||||
position:relative;
|
||||
top:12px;
|
||||
right:10px;
|
||||
}
|
||||
|
||||
92
mobile/apple/css/spinningwheel.css
Normal file
92
mobile/apple/css/spinningwheel.css
Normal file
@ -0,0 +1,92 @@
|
||||
#sw-wrapper {
|
||||
position:absolute; z-index:1000;
|
||||
left:0;
|
||||
width:100%;
|
||||
font-family:helvetica, sans-serif;
|
||||
background:rgba(0,0,0,0.7);
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
#sw-header {
|
||||
position:relative;
|
||||
width:100%; height:43px;
|
||||
border-top:1px solid #000; border-bottom:1px solid #000;
|
||||
background:url(../images/sw-header.png) 0 0 repeat-x;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#sw-cancel, #sw-done {
|
||||
position:absolute;
|
||||
top:7px;
|
||||
height:20px; line-height:20px;
|
||||
padding:0 5px; margin:0;
|
||||
border-width:5px;
|
||||
font-size:12px; font-weight:bold;
|
||||
text-shadow:rgba(0,0,0,0.8) 0 -1px 0;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#sw-cancel {
|
||||
left:7px;
|
||||
float:left;
|
||||
-webkit-border-image:url(../images/sw-button-cancel.png) 5;
|
||||
}
|
||||
|
||||
#sw-done {
|
||||
right:7px;
|
||||
float:right;
|
||||
-webkit-border-image:url(../images/sw-button-done.png) 5;
|
||||
}
|
||||
|
||||
.sw-pressed { opacity:0.4; }
|
||||
|
||||
#sw-slots-wrapper {
|
||||
position:relative; z-index:999;
|
||||
display:block;
|
||||
height:215px;
|
||||
padding:0 11px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#sw-slots {
|
||||
display:table;
|
||||
width:100%;
|
||||
background:#fcfcfc;
|
||||
}
|
||||
|
||||
#sw-slots div {
|
||||
display:table-cell;
|
||||
height:100%;
|
||||
padding-top:86px;
|
||||
border-left:2px solid #0d0e0f;
|
||||
background-color:#fcfcfc;
|
||||
background-image: url(../images/sw-slot-border.png);
|
||||
background-position: 0 0, 100% 0;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
#sw-slots div:first-child { border:0; }
|
||||
|
||||
#sw-slots ul {
|
||||
padding:0 0 85px 0; margin:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#sw-slots .sw-right { text-align:right; }
|
||||
#sw-slots .sw-shrink { width:1%; }
|
||||
#sw-slots .sw-readonly { background:#ddd; }
|
||||
|
||||
#sw-slots li {
|
||||
padding:0 8px;
|
||||
height:44px;
|
||||
overflow:hidden;
|
||||
font:bold 24px/44px Helvetica,sans-serif;
|
||||
}
|
||||
|
||||
#sw-frame {
|
||||
position:absolute; z-index:1000;
|
||||
left:0; right:0; bottom:0;
|
||||
height:183px;
|
||||
border-width:16px;
|
||||
-webkit-border-image:url(../images/sw-alpha.png) 16;
|
||||
}
|
||||
BIN
mobile/apple/images/sw-alpha.png
Normal file
BIN
mobile/apple/images/sw-alpha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
mobile/apple/images/sw-button-cancel.png
Normal file
BIN
mobile/apple/images/sw-button-cancel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
mobile/apple/images/sw-button-done.png
Normal file
BIN
mobile/apple/images/sw-button-done.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 B |
BIN
mobile/apple/images/sw-header.png
Normal file
BIN
mobile/apple/images/sw-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 682 B |
BIN
mobile/apple/images/sw-slot-border.png
Normal file
BIN
mobile/apple/images/sw-slot-border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 B |
77
mobile/apple/javascript/calendar.js
Normal file
77
mobile/apple/javascript/calendar.js
Normal file
@ -0,0 +1,77 @@
|
||||
function openTimePicker(elem1,elem2,elem3,elem4,elem5) {
|
||||
var now = new Time();
|
||||
var hours = { };
|
||||
var minutes = { };
|
||||
var seconds = { };
|
||||
|
||||
for( var i = 0; i < 24; i += 1 ) {
|
||||
hours[i] = i;
|
||||
}
|
||||
|
||||
for( i = 0; i < 60; i += 1 ) {
|
||||
minutes[i] = i;
|
||||
seconds[i] = i;
|
||||
}
|
||||
|
||||
alert('jur');
|
||||
|
||||
SpinningWheel.addSlot(hours, 'right', now.getHours());
|
||||
SpinningWheel.addSlot(minutes, 'right', now.getMinutes());
|
||||
SpinningWheel.addSlot(seconds, 'right', now.getSeconds());
|
||||
|
||||
SpinningWheel.setCancelAction(function(){
|
||||
//document.getElementById(elem1).innerHTML = "cancelled";
|
||||
});
|
||||
|
||||
SpinningWheel.setDoneAction(function(){
|
||||
var results = SpinningWheel.getSelectedValues();
|
||||
|
||||
var ap = "AM";
|
||||
if (results.keys[0] > 11) { ap = "PM"; }
|
||||
if (results.keys[0] > 12) { results.keys[0] = results.keys[0] - 12; }
|
||||
if (results.keys[0] == 0) { results.keys[0] = 12; }
|
||||
|
||||
document.getElementById(elem1).innerHTML = results.values.join(' ');
|
||||
document.getElementById(elem2).value = results.keys.join(' ');
|
||||
document.getElementById(elem3).value = results.keys[0];
|
||||
document.getElementById(elem4).value = results.keys[1];
|
||||
document.getElementById(elem5).value = results.keys[2];
|
||||
document.getElementById(elem6).value = ap;
|
||||
});
|
||||
|
||||
SpinningWheel.open();
|
||||
}
|
||||
|
||||
function openCalendar(elem1,elem2,elem3,elem4,elem5) {
|
||||
var now = new Date();
|
||||
var days = { };
|
||||
var years = { };
|
||||
var months = { 1: 'Ene', 2: 'Feb', 3: 'Mar', 4: 'Abr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Ago', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dic' };
|
||||
|
||||
for( var i = 1; i < 32; i += 1 ) {
|
||||
days[i] = i;
|
||||
}
|
||||
|
||||
for( i = now.getFullYear()-10; i < now.getFullYear()+10; i += 1 ) {
|
||||
years[i] = i;
|
||||
}
|
||||
|
||||
SpinningWheel.addSlot(days, 'right', now.getDate());
|
||||
SpinningWheel.addSlot(months, '', now.getMonth());
|
||||
SpinningWheel.addSlot(years, 'right', now.getFullYear());
|
||||
|
||||
SpinningWheel.setCancelAction(function(){
|
||||
//document.getElementById(elem1).innerHTML = "cancelled";
|
||||
});
|
||||
SpinningWheel.setDoneAction(function(){
|
||||
var results = SpinningWheel.getSelectedValues();
|
||||
document.getElementById(elem1).innerHTML = results.values.join(' ');
|
||||
document.getElementById(elem2).value = results.keys.join(' ');
|
||||
document.getElementById(elem3).value = results.keys[0];
|
||||
document.getElementById(elem4).value = results.keys[1];
|
||||
document.getElementById(elem5).value = results.keys[2];
|
||||
});
|
||||
|
||||
SpinningWheel.open();
|
||||
}
|
||||
|
||||
492
mobile/apple/javascript/spinningwheel.js
Normal file
492
mobile/apple/javascript/spinningwheel.js
Normal file
@ -0,0 +1,492 @@
|
||||
/**
|
||||
*
|
||||
* Find more about the Spinning Wheel function at
|
||||
* http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11
|
||||
*
|
||||
* Copyright (c) 2009 Matteo Spinelli, http://cubiq.org/
|
||||
* Released under MIT license
|
||||
* http://cubiq.org/dropbox/mit-license.txt
|
||||
*
|
||||
* Version 1.4 - Last updated: 2009.07.09
|
||||
*
|
||||
*/
|
||||
|
||||
var SpinningWheel = {
|
||||
cellHeight: 44,
|
||||
friction: 0.003,
|
||||
slotData: [],
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Event handler
|
||||
*
|
||||
*/
|
||||
|
||||
handleEvent: function (e) {
|
||||
if (e.type == 'touchstart') {
|
||||
this.lockScreen(e);
|
||||
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
|
||||
this.tapDown(e);
|
||||
} else if (e.currentTarget.id == 'sw-frame') {
|
||||
this.scrollStart(e);
|
||||
}
|
||||
} else if (e.type == 'touchmove') {
|
||||
this.lockScreen(e);
|
||||
|
||||
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
|
||||
this.tapCancel(e);
|
||||
} else if (e.currentTarget.id == 'sw-frame') {
|
||||
this.scrollMove(e);
|
||||
}
|
||||
} else if (e.type == 'touchend') {
|
||||
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
|
||||
this.tapUp(e);
|
||||
} else if (e.currentTarget.id == 'sw-frame') {
|
||||
this.scrollEnd(e);
|
||||
}
|
||||
} else if (e.type == 'webkitTransitionEnd') {
|
||||
if (e.target.id == 'sw-wrapper') {
|
||||
this.destroy();
|
||||
} else {
|
||||
this.backWithinBoundaries(e);
|
||||
}
|
||||
} else if (e.type == 'orientationchange') {
|
||||
this.onOrientationChange(e);
|
||||
} else if (e.type == 'scroll') {
|
||||
this.onScroll(e);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Global events
|
||||
*
|
||||
*/
|
||||
|
||||
onOrientationChange: function (e) {
|
||||
window.scrollTo(0, 0);
|
||||
this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
|
||||
this.calculateSlotsWidth();
|
||||
},
|
||||
|
||||
onScroll: function (e) {
|
||||
this.swWrapper.style.top = window.innerHeight + window.pageYOffset + 'px';
|
||||
},
|
||||
|
||||
lockScreen: function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Initialization
|
||||
*
|
||||
*/
|
||||
|
||||
reset: function () {
|
||||
this.slotEl = [];
|
||||
|
||||
this.activeSlot = null;
|
||||
|
||||
this.swWrapper = undefined;
|
||||
this.swSlotWrapper = undefined;
|
||||
this.swSlots = undefined;
|
||||
this.swFrame = undefined;
|
||||
},
|
||||
|
||||
calculateSlotsWidth: function () {
|
||||
var div = this.swSlots.getElementsByTagName('div');
|
||||
for (var i = 0; i < div.length; i += 1) {
|
||||
this.slotEl[i].slotWidth = div[i].offsetWidth;
|
||||
}
|
||||
},
|
||||
|
||||
create: function () {
|
||||
var i, l, out, ul, div;
|
||||
|
||||
this.reset(); // Initialize object variables
|
||||
|
||||
// Create the Spinning Wheel main wrapper
|
||||
div = document.createElement('div');
|
||||
div.id = 'sw-wrapper';
|
||||
div.style.top = window.innerHeight + window.pageYOffset + 'px'; // Place the SW down the actual viewing screen
|
||||
div.style.webkitTransitionProperty = '-webkit-transform';
|
||||
div.innerHTML = '<div id="sw-header"><div id="sw-cancel">Cancelar</' + 'div><div id="sw-done">Guardar</' + 'div></' + 'div><div id="sw-slots-wrapper"><div id="sw-slots"></' + 'div></' + 'div><div id="sw-frame"></' + 'div>';
|
||||
|
||||
document.body.appendChild(div);
|
||||
|
||||
this.swWrapper = div; // The SW wrapper
|
||||
this.swSlotWrapper = document.getElementById('sw-slots-wrapper'); // Slots visible area
|
||||
this.swSlots = document.getElementById('sw-slots'); // Pseudo table element (inner wrapper)
|
||||
this.swFrame = document.getElementById('sw-frame'); // The scrolling controller
|
||||
|
||||
// Create HTML slot elements
|
||||
for (l = 0; l < this.slotData.length; l += 1) {
|
||||
// Create the slot
|
||||
ul = document.createElement('ul');
|
||||
out = '';
|
||||
for (i in this.slotData[l].values) {
|
||||
out += '<li>' + this.slotData[l].values[i] + '<' + '/li>';
|
||||
}
|
||||
ul.innerHTML = out;
|
||||
|
||||
div = document.createElement('div'); // Create slot container
|
||||
div.className = this.slotData[l].style; // Add styles to the container
|
||||
div.appendChild(ul);
|
||||
|
||||
// Append the slot to the wrapper
|
||||
this.swSlots.appendChild(div);
|
||||
|
||||
ul.slotPosition = l; // Save the slot position inside the wrapper
|
||||
ul.slotYPosition = 0;
|
||||
ul.slotWidth = 0;
|
||||
ul.slotMaxScroll = this.swSlotWrapper.clientHeight - ul.clientHeight - 86;
|
||||
ul.style.webkitTransitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)'; // Add default transition
|
||||
|
||||
this.slotEl.push(ul); // Save the slot for later use
|
||||
|
||||
// Place the slot to its default position (if other than 0)
|
||||
if (this.slotData[l].defaultValue) {
|
||||
this.scrollToValue(l, this.slotData[l].defaultValue);
|
||||
}
|
||||
}
|
||||
|
||||
this.calculateSlotsWidth();
|
||||
|
||||
// Global events
|
||||
document.addEventListener('touchstart', this, false); // Prevent page scrolling
|
||||
document.addEventListener('touchmove', this, false); // Prevent page scrolling
|
||||
window.addEventListener('orientationchange', this, true); // Optimize SW on orientation change
|
||||
window.addEventListener('scroll', this, true); // Reposition SW on page scroll
|
||||
|
||||
// Cancel/Done buttons events
|
||||
document.getElementById('sw-cancel').addEventListener('touchstart', this, false);
|
||||
document.getElementById('sw-done').addEventListener('touchstart', this, false);
|
||||
|
||||
// Add scrolling to the slots
|
||||
this.swFrame.addEventListener('touchstart', this, false);
|
||||
},
|
||||
|
||||
open: function () {
|
||||
this.create();
|
||||
|
||||
this.swWrapper.style.webkitTransitionTimingFunction = 'ease-out';
|
||||
this.swWrapper.style.webkitTransitionDuration = '400ms';
|
||||
this.swWrapper.style.webkitTransform = 'translate3d(0, -260px, 0)';
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Unload
|
||||
*
|
||||
*/
|
||||
|
||||
destroy: function () {
|
||||
this.swWrapper.removeEventListener('webkitTransitionEnd', this, false);
|
||||
|
||||
this.swFrame.removeEventListener('touchstart', this, false);
|
||||
|
||||
document.getElementById('sw-cancel').removeEventListener('touchstart', this, false);
|
||||
document.getElementById('sw-done').removeEventListener('touchstart', this, false);
|
||||
|
||||
document.removeEventListener('touchstart', this, false);
|
||||
document.removeEventListener('touchmove', this, false);
|
||||
window.removeEventListener('orientationchange', this, true);
|
||||
window.removeEventListener('scroll', this, true);
|
||||
|
||||
this.slotData = [];
|
||||
this.cancelAction = function () {
|
||||
return false;
|
||||
};
|
||||
|
||||
this.cancelDone = function () {
|
||||
return true;
|
||||
};
|
||||
|
||||
this.reset();
|
||||
|
||||
document.body.removeChild(document.getElementById('sw-wrapper'));
|
||||
},
|
||||
|
||||
close: function () {
|
||||
this.swWrapper.style.webkitTransitionTimingFunction = 'ease-in';
|
||||
this.swWrapper.style.webkitTransitionDuration = '400ms';
|
||||
this.swWrapper.style.webkitTransform = 'translate3d(0, 0, 0)';
|
||||
|
||||
this.swWrapper.addEventListener('webkitTransitionEnd', this, false);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Generic methods
|
||||
*
|
||||
*/
|
||||
|
||||
addSlot: function (values, style, defaultValue) {
|
||||
if (!style) {
|
||||
style = '';
|
||||
}
|
||||
|
||||
style = style.split(' ');
|
||||
|
||||
for (var i = 0; i < style.length; i += 1) {
|
||||
style[i] = 'sw-' + style[i];
|
||||
}
|
||||
|
||||
style = style.join(' ');
|
||||
|
||||
var obj = { 'values': values, 'style': style, 'defaultValue': defaultValue };
|
||||
this.slotData.push(obj);
|
||||
},
|
||||
|
||||
getSelectedValues: function () {
|
||||
var index, count,
|
||||
i, l,
|
||||
keys = [], values = [];
|
||||
|
||||
for (i in this.slotEl) {
|
||||
// Remove any residual animation
|
||||
this.slotEl[i].removeEventListener('webkitTransitionEnd', this, false);
|
||||
this.slotEl[i].style.webkitTransitionDuration = '0';
|
||||
|
||||
if (this.slotEl[i].slotYPosition > 0) {
|
||||
this.setPosition(i, 0);
|
||||
} else if (this.slotEl[i].slotYPosition < this.slotEl[i].slotMaxScroll) {
|
||||
this.setPosition(i, this.slotEl[i].slotMaxScroll);
|
||||
}
|
||||
|
||||
index = -Math.round(this.slotEl[i].slotYPosition / this.cellHeight);
|
||||
|
||||
count = 0;
|
||||
for (l in this.slotData[i].values) {
|
||||
if (count == index) {
|
||||
keys.push(l);
|
||||
values.push(this.slotData[i].values[l]);
|
||||
break;
|
||||
}
|
||||
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return { 'keys': keys, 'values': values };
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Rolling slots
|
||||
*
|
||||
*/
|
||||
|
||||
setPosition: function (slot, pos) {
|
||||
this.slotEl[slot].slotYPosition = pos;
|
||||
this.slotEl[slot].style.webkitTransform = 'translate3d(0, ' + pos + 'px, 0)';
|
||||
},
|
||||
|
||||
scrollStart: function (e) {
|
||||
// Find the clicked slot
|
||||
var xPos = e.targetTouches[0].clientX - this.swSlots.offsetLeft; // Clicked position minus left offset (should be 11px)
|
||||
|
||||
// Find tapped slot
|
||||
var slot = 0;
|
||||
for (var i = 0; i < this.slotEl.length; i += 1) {
|
||||
slot += this.slotEl[i].slotWidth;
|
||||
|
||||
if (xPos < slot) {
|
||||
this.activeSlot = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// If slot is readonly do nothing
|
||||
if (this.slotData[this.activeSlot].style.match('readonly')) {
|
||||
this.swFrame.removeEventListener('touchmove', this, false);
|
||||
this.swFrame.removeEventListener('touchend', this, false);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.slotEl[this.activeSlot].removeEventListener('webkitTransitionEnd', this, false); // Remove transition event (if any)
|
||||
this.slotEl[this.activeSlot].style.webkitTransitionDuration = '0'; // Remove any residual transition
|
||||
|
||||
// Stop and hold slot position
|
||||
var theTransform = window.getComputedStyle(this.slotEl[this.activeSlot]).webkitTransform;
|
||||
theTransform = new WebKitCSSMatrix(theTransform).m42;
|
||||
if (theTransform != this.slotEl[this.activeSlot].slotYPosition) {
|
||||
this.setPosition(this.activeSlot, theTransform);
|
||||
}
|
||||
|
||||
this.startY = e.targetTouches[0].clientY;
|
||||
this.scrollStartY = this.slotEl[this.activeSlot].slotYPosition;
|
||||
this.scrollStartTime = e.timeStamp;
|
||||
|
||||
this.swFrame.addEventListener('touchmove', this, false);
|
||||
this.swFrame.addEventListener('touchend', this, false);
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
scrollMove: function (e) {
|
||||
var topDelta = e.targetTouches[0].clientY - this.startY;
|
||||
|
||||
if (this.slotEl[this.activeSlot].slotYPosition > 0 || this.slotEl[this.activeSlot].slotYPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
|
||||
topDelta /= 2;
|
||||
}
|
||||
|
||||
this.setPosition(this.activeSlot, this.slotEl[this.activeSlot].slotYPosition + topDelta);
|
||||
this.startY = e.targetTouches[0].clientY;
|
||||
|
||||
// Prevent slingshot effect
|
||||
if (e.timeStamp - this.scrollStartTime > 80) {
|
||||
this.scrollStartY = this.slotEl[this.activeSlot].slotYPosition;
|
||||
this.scrollStartTime = e.timeStamp;
|
||||
}
|
||||
},
|
||||
|
||||
scrollEnd: function (e) {
|
||||
this.swFrame.removeEventListener('touchmove', this, false);
|
||||
this.swFrame.removeEventListener('touchend', this, false);
|
||||
|
||||
// If we are outside of the boundaries, let's go back to the sheepfold
|
||||
if (this.slotEl[this.activeSlot].slotYPosition > 0 || this.slotEl[this.activeSlot].slotYPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
|
||||
this.scrollTo(this.activeSlot, this.slotEl[this.activeSlot].slotYPosition > 0 ? 0 : this.slotEl[this.activeSlot].slotMaxScroll);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Lame formula to calculate a fake deceleration
|
||||
var scrollDistance = this.slotEl[this.activeSlot].slotYPosition - this.scrollStartY;
|
||||
|
||||
// The drag session was too short
|
||||
if (scrollDistance < this.cellHeight / 1.5 && scrollDistance > -this.cellHeight / 1.5) {
|
||||
if (this.slotEl[this.activeSlot].slotYPosition % this.cellHeight) {
|
||||
this.scrollTo(this.activeSlot, Math.round(this.slotEl[this.activeSlot].slotYPosition / this.cellHeight) * this.cellHeight, '100ms');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var scrollDuration = e.timeStamp - this.scrollStartTime;
|
||||
|
||||
var newDuration = (2 * scrollDistance / scrollDuration) / this.friction;
|
||||
var newScrollDistance = (this.friction / 2) * (newDuration * newDuration);
|
||||
|
||||
if (newDuration < 0) {
|
||||
newDuration = -newDuration;
|
||||
newScrollDistance = -newScrollDistance;
|
||||
}
|
||||
|
||||
var newPosition = this.slotEl[this.activeSlot].slotYPosition + newScrollDistance;
|
||||
|
||||
if (newPosition > 0) {
|
||||
// Prevent the slot to be dragged outside the visible area (top margin)
|
||||
newPosition /= 2;
|
||||
newDuration /= 3;
|
||||
|
||||
if (newPosition > this.swSlotWrapper.clientHeight / 4) {
|
||||
newPosition = this.swSlotWrapper.clientHeight / 4;
|
||||
}
|
||||
} else if (newPosition < this.slotEl[this.activeSlot].slotMaxScroll) {
|
||||
// Prevent the slot to be dragged outside the visible area (bottom margin)
|
||||
newPosition = (newPosition - this.slotEl[this.activeSlot].slotMaxScroll) / 2 + this.slotEl[this.activeSlot].slotMaxScroll;
|
||||
newDuration /= 3;
|
||||
|
||||
if (newPosition < this.slotEl[this.activeSlot].slotMaxScroll - this.swSlotWrapper.clientHeight / 4) {
|
||||
newPosition = this.slotEl[this.activeSlot].slotMaxScroll - this.swSlotWrapper.clientHeight / 4;
|
||||
}
|
||||
} else {
|
||||
newPosition = Math.round(newPosition / this.cellHeight) * this.cellHeight;
|
||||
}
|
||||
|
||||
this.scrollTo(this.activeSlot, Math.round(newPosition), Math.round(newDuration) + 'ms');
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
scrollTo: function (slotNum, dest, runtime) {
|
||||
this.slotEl[slotNum].style.webkitTransitionDuration = runtime ? runtime : '100ms';
|
||||
this.setPosition(slotNum, dest ? dest : 0);
|
||||
|
||||
// If we are outside of the boundaries go back to the sheepfold
|
||||
if (this.slotEl[slotNum].slotYPosition > 0 || this.slotEl[slotNum].slotYPosition < this.slotEl[slotNum].slotMaxScroll) {
|
||||
this.slotEl[slotNum].addEventListener('webkitTransitionEnd', this, false);
|
||||
}
|
||||
},
|
||||
|
||||
scrollToValue: function (slot, value) {
|
||||
var yPos, count, i;
|
||||
|
||||
this.slotEl[slot].removeEventListener('webkitTransitionEnd', this, false);
|
||||
this.slotEl[slot].style.webkitTransitionDuration = '0';
|
||||
|
||||
count = 0;
|
||||
for (i in this.slotData[slot].values) {
|
||||
if (i == value) {
|
||||
yPos = count * this.cellHeight;
|
||||
this.setPosition(slot, yPos);
|
||||
break;
|
||||
}
|
||||
|
||||
count -= 1;
|
||||
}
|
||||
},
|
||||
|
||||
backWithinBoundaries: function (e) {
|
||||
e.target.removeEventListener('webkitTransitionEnd', this, false);
|
||||
|
||||
this.scrollTo(e.target.slotPosition, e.target.slotYPosition > 0 ? 0 : e.target.slotMaxScroll, '150ms');
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* Buttons
|
||||
*
|
||||
*/
|
||||
|
||||
tapDown: function (e) {
|
||||
e.currentTarget.addEventListener('touchmove', this, false);
|
||||
e.currentTarget.addEventListener('touchend', this, false);
|
||||
e.currentTarget.className = 'sw-pressed';
|
||||
},
|
||||
|
||||
tapCancel: function (e) {
|
||||
e.currentTarget.removeEventListener('touchmove', this, false);
|
||||
e.currentTarget.removeEventListener('touchend', this, false);
|
||||
e.currentTarget.className = '';
|
||||
},
|
||||
|
||||
tapUp: function (e) {
|
||||
this.tapCancel(e);
|
||||
|
||||
if (e.currentTarget.id == 'sw-cancel') {
|
||||
this.cancelAction();
|
||||
} else {
|
||||
this.doneAction();
|
||||
}
|
||||
|
||||
this.close();
|
||||
},
|
||||
|
||||
setCancelAction: function (action) {
|
||||
this.cancelAction = action;
|
||||
},
|
||||
|
||||
setDoneAction: function (action) {
|
||||
this.doneAction = action;
|
||||
},
|
||||
|
||||
cancelAction: function () {
|
||||
return false;
|
||||
},
|
||||
|
||||
cancelDone: function () {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user