framework7/lazy-components/input.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var a=document,o=window,f=e.$,i=(e.Template7,e.utils),n=e.device,l=(e.support,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,{ignoreTypes:["checkbox","button","submit","range","radio","image"],createTextareaResizableShadow:function(){var e=f(a.createElement("textarea"));e.addClass("textarea-resizable-shadow"),e.prop({disabled:!0,readonly:!0}),l.textareaResizableShadow=e},textareaResizableShadow:void 0,resizeTextarea:function(e){var t=f(e);l.textareaResizableShadow||l.createTextareaResizableShadow();var a=l.textareaResizableShadow;if(t.length&&t.hasClass("resizable")){0===l.textareaResizableShadow.parents().length&&this.root.append(a);var i=o.getComputedStyle(t[0]);"padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display".split(" ").forEach(function(e){var t=i[e];0<="font-size line-height letter-spacing width".split(" ").indexOf(e)&&(t=t.replace(",",".")),a.css(e,t)});var n=t[0].clientHeight;a.val("");var r=a[0].scrollHeight;a.val(t.val()),a.css("height",0);var s=a[0].scrollHeight;n!==s&&(r<s?(t.css("height",s+"px"),t.trigger("textarea:resize",{initialHeight:r,currentHeight:n,scrollHeight:s})):s<n&&(t.css("height",""),t.trigger("textarea:resize",{initialHeight:r,currentHeight:n,scrollHeight:s})))}},validate:function(e){var t=f(e);if(t.length){var a=t.parents(".item-input"),i=t.parents(".input"),n=t[0].validity,r=t.dataset().errorMessage||t[0].validationMessage||"";if(n)if(n.valid)a.removeClass("item-input-invalid item-input-with-error-message"),i.removeClass("input-invalid input-with-error-message"),t.removeClass("input-invalid");else{var s=t.nextAll(".item-input-error-message, .input-error-message");r&&(0===s.length&&(s=f('<div class="'+(i.length?"input-error-message":"item-input-error-message")+'"></div>')).insertAfter(t),s.text(r)),0<s.length&&(a.addClass("item-input-with-error-message"),i.addClass("input-with-eror-message")),a.addClass("item-input-invalid"),i.addClass("input-invalid"),t.addClass("input-invalid")}}},validateInputs:function(e){var a=this;f(e).find("input, textarea, select").each(function(e,t){a.input.validate(t)})},focus:function(e){var t=f(e),a=t.attr("type");0<=l.ignoreTypes.indexOf(a)||(t.parents(".item-input").addClass("item-input-focused"),t.parents(".input").addClass("input-focused"),t.addClass("input-focused"))},blur:function(e){var t=f(e);t.parents(".item-input").removeClass("item-input-focused"),t.parents(".input").removeClass("input-focused"),t.removeClass("input-focused")},checkEmptyState:function(e){var t=f(e);if(t.is("input, select, textarea")||(t=t.find("input, select, textarea").eq(0)),t.length){var a=t.val(),i=t.parents(".item-input"),n=t.parents(".input");a&&"string"==typeof a&&""!==a.trim()||Array.isArray(a)&&0<a.length?(i.addClass("item-input-with-value"),n.addClass("input-with-value"),t.addClass("input-with-value"),t.trigger("input:notempty")):(i.removeClass("item-input-with-value"),n.removeClass("input-with-value"),t.removeClass("input-with-value"),t.trigger("input:empty"))}},scrollIntoView:function(e,t,a,i){void 0===t&&(t=0);var n=f(e),r=n.parents(".page-content, .panel").eq(0);if(!r.length)return!1;var s=r[0].offsetHeight,o=r[0].scrollTop,l=parseInt(r.css("padding-top"),10),u=parseInt(r.css("padding-bottom"),10),p=r.offset().top-o,d=n.offset().top-p,c=d+o-l,h=d+o-s+u+n[0].offsetHeight,v=c+(h-c)/2;return c<o?(r.scrollTop(a?v:c,t),!0):o<h?(r.scrollTop(a?v:h,t),!0):(i&&r.scrollTop(a?v:h,t),!1)},init:function(){var i=this;l.createTextareaResizableShadow(),f(a).on("click",".input-clear-button",function(){var e=f(this).siblings("input, textarea").eq(0),t=e.val();e.val("").trigger("input change").focus().trigger("input:clear",t)}),f(a).on("change input","input, textarea, select",function(){var e=f(this),t=e.attr("type"),a=e[0].nodeName.toLowerCase();0<=l.ignoreTypes.indexOf(t)||(i.input.checkEmptyState(e),(e.dataset().validate||null!==e.attr("validate"))&&i.input.validate(e),"textarea"===a&&e.hasClass("resizable")&&i.input.resizeTextarea(e))},!0),f(a).on("focus","input, textarea, select",function(){var e=this;i.params.input.scrollIntoViewOnFocus&&(n.android?f(o).once("resize",function(){a&&a.activeElement===e&&i.input.scrollIntoView(e,i.params.input.scrollIntoViewDuration,i.params.input.scrollIntoViewCentered,i.params.input.scrollIntoViewAlways)}):i.input.scrollIntoView(e,i.params.input.scrollIntoViewDuration,i.params.input.scrollIntoViewCentered,i.params.input.scrollIntoViewAlways)),i.input.focus(e)},!0),f(a).on("blur","input, textarea, select",function(){var e=f(this),t=e[0].nodeName.toLowerCase();i.input.blur(e),(e.dataset().validate||null!==e.attr("validate"))&&i.input.validate(e),"textarea"===t&&e.hasClass("resizable")&&l.textareaResizableShadow&&l.textareaResizableShadow.remove()},!0),f(a).on("invalid","input, textarea, select",function(e){var t=f(this);(t.dataset().validate||null!==t.attr("validate"))&&(e.preventDefault(),i.input.validate(t))},!0)}}),r={name:"input",params:{input:{scrollIntoViewOnFocus:n.android,scrollIntoViewCentered:!1,scrollIntoViewDuration:0,scrollIntoViewAlways:!1}},create:function(){var e=this;i.extend(e,{input:{scrollIntoView:l.scrollIntoView.bind(e),focus:l.focus.bind(e),blur:l.blur.bind(e),validate:l.validate.bind(e),validateInputs:l.validateInputs.bind(e),checkEmptyState:l.checkEmptyState.bind(e),resizeTextarea:l.resizeTextarea.bind(e),init:l.init.bind(e)}})},on:{init:function(){this.input.init()},tabMounted:function(e){var i=this,t=f(e);t.find(".item-input, .input").each(function(e,t){f(t).find("input, select, textarea").each(function(e,t){var a=f(t);0<=l.ignoreTypes.indexOf(a.attr("type"))||i.input.checkEmptyState(a)})}),t.find("textarea.resizable").each(function(e,t){i.input.resizeTextarea(t)})},pageInit:function(e){var i=this,t=e.$el;t.find(".item-input, .input").each(function(e,t){f(t).find("input, select, textarea").each(function(e,t){var a=f(t);0<=l.ignoreTypes.indexOf(a.attr("type"))||i.input.checkEmptyState(a)})}),t.find("textarea.resizable").each(function(e,t){i.input.resizeTextarea(t)})}}};if(t){if(e.prototype.modules&&e.prototype.modules[r.name])return;e.use(r),e.instance&&(e.instance.useModuleParams(r,e.instance.params),e.instance.useModule(r))}return r}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))