From 8b9365c4437e1d6d5745a40c02c693793cb80459 Mon Sep 17 00:00:00 2001 From: buttflattery Date: Mon, 3 Feb 2020 03:22:49 +0500 Subject: [PATCH 1/3] replaced the array_walk function with foreach to boost performance --- src/traits/WizardTrait.php | 30 +++++++++++------------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/src/traits/WizardTrait.php b/src/traits/WizardTrait.php index b5fffa2..bb50259 100644 --- a/src/traits/WizardTrait.php +++ b/src/traits/WizardTrait.php @@ -34,22 +34,15 @@ private function _sortFields($fieldConfig, &$attributes, $step) $orderedAttributes = []; $unorderedAttributes = []; - array_walk( - $attributes, - function (&$item, $index, $fieldOrder) use ( - &$orderedAttributes, - &$unorderedAttributes - ) { - $moveToIndex = array_search($item, $fieldOrder); - - if ($moveToIndex !== false) { - $orderedAttributes[$moveToIndex] = $item; - } else { - $unorderedAttributes[] = $item; - } - }, - $fieldOrder - ); + foreach ($attributes as $item) { + $moveToIndex = array_search($item, $fieldOrder); + + if ($moveToIndex !== false) { + $orderedAttributes[$moveToIndex] = $item; + continue; + } + $unorderedAttributes[] = $item; + } //sort new order according to keys ksort($orderedAttributes); @@ -325,8 +318,8 @@ private function _createStepHtml($attributes, $modelIndex, $index, $model, $isTa //if custom config available for field if ($customConfigDefinedForField) { - - $customFieldConfig=(isset($fieldConfig[$attributesPrefixed[$attributeIndex]]))?$fieldConfig[$attributesPrefixed[$attributeIndex]]:$fieldConfig[$attribute]; + + $customFieldConfig = (isset($fieldConfig[$attributesPrefixed[$attributeIndex]])) ? $fieldConfig[$attributesPrefixed[$attributeIndex]] : $fieldConfig[$attribute]; //if filtered field $isFilteredField = $customFieldConfig === false; @@ -336,7 +329,6 @@ private function _createStepHtml($attributes, $modelIndex, $index, $model, $isTa continue; } - //custom field population $htmlFields .= $this->createCustomInput( $model, From 96e3f4938cfddf2ee9918f02e7f7a504a5008043 Mon Sep 17 00:00:00 2001 From: buttflattery Date: Wed, 5 Feb 2020 05:57:43 +0500 Subject: [PATCH 2/3] added updates for preview step --- src/FormWizard.php | 4 +- src/assets/css/smart_wizard.css | 11 ++++++ src/assets/css/smart_wizard.min.css | 2 +- src/assets/js/formwizard.js | 60 ++++++++++++++++++++--------- src/assets/js/formwizard.min.js | 2 +- 5 files changed, 57 insertions(+), 22 deletions(-) diff --git a/src/FormWizard.php b/src/FormWizard.php index 61cfe15..834272d 100644 --- a/src/FormWizard.php +++ b/src/FormWizard.php @@ -651,7 +651,7 @@ public function createFormWizard() 'type' => self::STEP_TYPE_PREVIEW, 'title' => 'Final Preview', 'description' => 'Final Preview of all Steps', - 'formInfoText' => 'Click any of the steps below to edit them', + 'formInfoText' => 'Review information below and click to change', ], ] ); @@ -755,7 +755,7 @@ public function createBody($index, $formInfoText, $step) $isSkipable = ArrayHelper::getValue($step, 'isSkipable', false); //check if tabular step - $isTabularStep = $stepType == self::STEP_TYPE_TABULAR; + $isTabularStep = $stepType === self::STEP_TYPE_TABULAR; //tabular rows limit $limitRows = ArrayHelper::getValue($step, 'limitRows', self::ROWS_UNLIMITED); diff --git a/src/assets/css/smart_wizard.css b/src/assets/css/smart_wizard.css index e6266bd..83a4f09 100644 --- a/src/assets/css/smart_wizard.css +++ b/src/assets/css/smart_wizard.css @@ -197,6 +197,17 @@ cursor: not-allowed; } +.notify-target { + box-shadow: 0 0 5px rgba(81, 203, 238, 1); + padding: 3px 0px 3px 3px; + margin: 5px 1px 3px 0px; + border: 1px solid rgba(81, 203, 238, 1); + -webkit-transition: all 0.30s ease-in-out; + -moz-transition: all 0.30s ease-in-out; + -ms-transition: all 0.30s ease-in-out; + -o-transition: all 0.30s ease-in-out; +} + @media screen and (max-width: 768px) { .sw-theme-default>.nav-tabs>li { float: none !important; diff --git a/src/assets/css/smart_wizard.min.css b/src/assets/css/smart_wizard.min.css index c2f195d..c2ba131 100644 --- a/src/assets/css/smart_wizard.min.css +++ b/src/assets/css/smart_wizard.min.css @@ -8,4 +8,4 @@ * * Licensed under the terms of MIT License * https://github.com/techlab/SmartWizard/blob/master/LICENSE - */.sw-main{font-family:Montserrat,sans-serif!important;position:relative;display:block;margin:0;padding:0;border-radius:.25rem!important;background:#fff}.sw-main .sw-container{display:block;margin:0;padding:0;position:relative}.sw-theme-default .field-heading{border-bottom:1px solid #a1a1a1;margin-bottom:31px;font-size:1.3em}.sw-main .formwizard_finish,.sw-main .formwizard_next,.sw-main .formwizard_prev{font-family:inherit!important}.sw-main .step-content{display:none;position:relative;margin:0}.sw-main .sw-toolbar{margin-left:0}.sw-main .tabular-row i.remove-row{float:right;clear:both;color:#d9534f;cursor:pointer}.sw-main .fields_container .tabular-row{margin-top:10px;border-top:1px solid #c8c8c8;padding:5px;width:80%}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important;display:flex}.sw-main .sw-toolbar{margin-left:0}.sw-theme-default{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3)}.sw-theme-default .sw-container{min-height:250px}.sw-theme-default .step-content{padding:10px;border:0 solid #d4d4d4;background-color:#fff;text-align:left}.sw-theme-default .sw-toolbar{border-radius:0!important;padding-left:10px;padding-right:10px;padding:10px;margin-bottom:0!important}.sw-theme-default .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-default .sw-toolbar-bottom{border-top-color:#ddd!important}.sw-theme-default>ul.step-anchor{background:#f9f9f9;padding:0!important}.sw-theme-default>ul.step-anchor>li{position:relative;margin-right:2px}.sw-theme-default>ul.step-anchor>li>a,.sw-theme-default>ul.step-anchor>li>a:hover{border:none!important;color:#bbb!important;text-decoration:none;outline-style:none;background:0 0!important;border:none!important;cursor:not-allowed}.sw-theme-default>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li>a::after{content:"";background:teal;height:2px;position:absolute;width:100%;left:0;bottom:0;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.sw-theme-default>ul.step-anchor>li.active>a{border:none!important;color:teal!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.active>a::after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.done>a{border:none!important;color:green!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.done>a::after{background:#5cb85c;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.danger>a{border:none!important;color:#d9534f!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.danger>a::after{background:#d9534f;border-left-color:#f8d7da;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.disabled>a,.sw-theme-default>ul.step-anchor>li.disabled>a:hover{color:#eee!important;cursor:not-allowed}@media screen and (max-width:768px){.sw-theme-default>.nav-tabs>li{float:none!important}}.sw-loading::after{position:absolute;display:block;opacity:1;content:"";top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);-webkit-transition:all .2s ease;transition:all .2s ease;z-index:2}.sw-loading::before{content:"";display:inline-block;position:absolute;top:50%;left:50%;z-index:10;border:10px solid #f3f3f3;border-radius:50%;border-top:10px solid #3498db;width:80px;height:80px;margin-top:-40px;margin-left:-40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} \ No newline at end of file + */.sw-main{font-family:Montserrat,sans-serif!important;position:relative;display:block;margin:0;padding:0;border-radius:.25rem!important;background:#fff}.sw-main .sw-container{display:block;margin:0;padding:0;position:relative}.sw-theme-default .field-heading{border-bottom:1px solid #a1a1a1;margin-bottom:31px;font-size:1.3em}.sw-main .formwizard_finish,.sw-main .formwizard_next,.sw-main .formwizard_prev{font-family:inherit!important}.sw-main .step-content{display:none;position:relative;margin:0}.sw-main .sw-toolbar{margin-left:0}.sw-main .tabular-row i.remove-row{float:right;clear:both;color:#d9534f;cursor:pointer}.sw-main .fields_container .tabular-row{margin-top:10px;border-top:1px solid #c8c8c8;padding:5px;width:80%}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important;display:flex}.sw-main .sw-toolbar{margin-left:0}.sw-theme-default{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3)}.sw-theme-default .sw-container{min-height:250px}.sw-theme-default .step-content{padding:10px;border:0 solid #d4d4d4;background-color:#fff;text-align:left}.sw-theme-default .sw-toolbar{border-radius:0!important;padding-left:10px;padding-right:10px;padding:10px;margin-bottom:0!important}.sw-theme-default .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-default .sw-toolbar-bottom{border-top-color:#ddd!important}.sw-theme-default>ul.step-anchor{background:#f9f9f9;padding:0!important}.sw-theme-default>ul.step-anchor>li{position:relative;margin-right:2px}.sw-theme-default>ul.step-anchor>li>a,.sw-theme-default>ul.step-anchor>li>a:hover{border:none!important;color:#bbb!important;text-decoration:none;outline-style:none;background:0 0!important;border:none!important;cursor:not-allowed}.sw-theme-default>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li>a::after{content:"";background:teal;height:2px;position:absolute;width:100%;left:0;bottom:0;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.sw-theme-default>ul.step-anchor>li.active>a{border:none!important;color:teal!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.active>a::after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.done>a{border:none!important;color:green!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.done>a::after{background:#5cb85c;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.danger>a{border:none!important;color:#d9534f!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.danger>a::after{background:#d9534f;border-left-color:#f8d7da;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.disabled>a,.sw-theme-default>ul.step-anchor>li.disabled>a:hover{color:#eee!important;cursor:not-allowed}.notify-target{box-shadow:0 0 5px rgba(81,203,238,1);padding:3px 0 3px 3px;margin:5px 1px 3px 0;border:1px solid rgba(81,203,238,1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out}@media screen and (max-width:768px){.sw-theme-default>.nav-tabs>li{float:none!important}}.sw-loading::after{position:absolute;display:block;opacity:1;content:"";top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);-webkit-transition:all .2s ease;transition:all .2s ease;z-index:2}.sw-loading::before{content:"";display:inline-block;position:absolute;top:50%;left:50%;z-index:10;border:10px solid #f3f3f3;border-radius:50%;border-top:10px solid #3498db;width:80px;height:80px;margin-top:-40px;margin-left:-40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} \ No newline at end of file diff --git a/src/assets/js/formwizard.js b/src/assets/js/formwizard.js index 3e4fe73..152f01c 100644 --- a/src/assets/js/formwizard.js +++ b/src/assets/js/formwizard.js @@ -155,7 +155,7 @@ $.formwizard = { btnFinish.removeClass("hidden d-none"); btnPrev.removeClass("disabled hidden d-none"); //call preview step if enabled - $.formwizard.helper.addPreviewStep(wizardContainerId); + $.formwizard.previewStep.add(wizardContainerId); } else { btnPrev.removeClass("disabled"); btnNext.removeClass("disabled hidden d-none"); @@ -167,7 +167,10 @@ $.formwizard = { currentIndex: function (form) { return $(form + " ul.step-anchor>li.active").index(); }, - addPreviewStep: (wizardContainerId) => { + + }, + previewStep: { + add: (wizardContainerId) => { let formwizardOptions = $.formwizard.options; let formId = $(wizardContainerId).closest('form').attr('id'); let fragment = document.createDocumentFragment(); @@ -183,20 +186,22 @@ $.formwizard = { if (formwizardOptions.hasOwnProperty(formId) && formwizardOptions[formId].enablePreview) { let fields = $.formwizard.fields[formId]; + fields.forEach(function (stepFields, step) { let stepPreviewContainer = document.createElement("div"); stepPreviewContainer.setAttribute('class', classListGroup + ' preview-container'); stepPreviewContainer.dataset.step = step; let rowHtml = '

Step ' + parseInt(step + 1) + '

'; stepFields.forEach(function (fieldName, index) { - let inputLabel = $.formwizard.helper.getpreviewInputLabel(fieldName); - let inputValue = $.formwizard.helper.getpreviewInputValue(formId, fieldName); + let inputLabel = $.formwizard.previewStep.getLabel(fieldName); + let inputValue = $.formwizard.previewStep.getValue(formId, fieldName); let stepData = { - label: inputLabel == '' ? 'NA' : inputLabel, - value: inputValue == '' ? 'NA' : inputValue + "label": inputLabel == '' ? 'NA' : inputLabel, + "value": inputValue == '' ? 'NA' : inputValue, + "target": fieldName }; - rowHtml += $.formwizard.helper.previewTemplate(stepData, bsVersion, formwizardOptions[formId]); + rowHtml += $.formwizard.previewStep.getTemplate(stepData, bsVersion, formwizardOptions[formId]); }); stepPreviewContainer.innerHTML = rowHtml; @@ -207,35 +212,57 @@ $.formwizard = { $(".preview-button").on('click', function (e) { let stepNo = $(this).closest('div.preview-container').data('step'); $.formwizard.formNavigation.goToStep(wizardContainerId, stepNo); + $.formwizard.previewStep.highlightTarget($(this).val()); }); } }, - getpreviewInputLabel: (fieldName) => { + getLabel: (fieldName) => { let text = $('#' + fieldName).siblings('label').text(); if (text !== '') { return text; } return $('#' + fieldName).attr("placeholder"); }, - getpreviewInputValue: (formId, fieldName) => { + getValue: (formId, fieldName) => { let inputType = $('#' + formId + ' #' + fieldName); if (inputType.is("select")) { //