-
-
{$guidelines} {$error_message}
-
+ {$element->title} {$span_required}
+ {$error_message}
+ {$guidelines}
+ -
+
- + + +
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -218,7 +218,7 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } //check for populated value, if exist, use it instead default_value @@ -227,12 +227,14 @@ EOT; } $element_markup = <<
-
-
{$guidelines} {$error_message}
-
+ {$element->title} {$span_required}
+ {$error_message}
+ {$guidelines}
+ -
+
- + + +
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -326,7 +327,7 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } //check for populated value @@ -335,12 +336,14 @@ EOT; } $element_markup = <<
-
-
{$guidelines} {$error_message}
-
+ {$element->title} {$span_required}
+ {$error_message}
+ {$guidelines}
+ -
+
- + + +
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -369,7 +370,12 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; + } + + //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 = <<
-
-
- {$guidelines} {$error_message}
-
+ {$element->title} {$span_required}
+ {$error_message}
+ {$guidelines}
+ -
+
- + {$element->title} + DD-MM-YYYY + + + + + +
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -435,45 +422,29 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } - $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 = <<
-
-
- {$guidelines} {$error_message}
-
+ {$element->title} {$span_required}
+ {$error_message}
+ {$guidelines}
+ -
+
- + {$element->title} + DD-MM-AAAA + + + + + +
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -500,7 +470,7 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } $option_markup = ''; @@ -527,17 +497,19 @@ EOT; } } - $option_markup .= "id}_{$option->id}\" name=\"element_{$element->id}\" class=\"element radio\" type=\"radio\" value=\"{$option->id}\" {$checked} />\n"; - $option_markup .= "\n"; + $option_markup .= "-
{$option_markup}
-
{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -643,10 +614,10 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } - $option_markup = ''; + $option_markup = "
-
-
{$guidelines} {$error_message}
-
+
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 = "{$element->error_message}
"; + $error_message = "{$element->error_message}
"; } //check for required @@ -819,9 +781,10 @@ EOT; //check for guidelines if(!empty($element->guidelines)){ - $guidelines = "id}\">{$element->guidelines}
"; + $guidelines = "id}\">{$element->guidelines}
"; } + 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 = <<-
+
- + {$element->title} + HH:MM:SS + + + + + + +
Cancelar
Guardar
';
+
+ 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 += '' + 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;
+ }
+};
\ No newline at end of file