framework7/components/input/input.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var a=t.$,i=t.utils,n=t.getDevice,r=(t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,i.bindMethods),s={ignoreTypes:["checkbox","button","submit","range","radio","image"],createTextareaResizableShadow:function(){var t=a(document.createElement("textarea"));t.addClass("textarea-resizable-shadow"),t.prop({disabled:!0,readonly:!0}),s.textareaResizableShadow=t},textareaResizableShadow:void 0,resizeTextarea:function(t){var e=a(t);s.textareaResizableShadow||s.createTextareaResizableShadow();var i=s.textareaResizableShadow;if(e.length&&e.hasClass("resizable")){0===s.textareaResizableShadow.parents().length&&this.$el.append(i);var n=window.getComputedStyle(e[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(t){var e=n[t];"font-size line-height letter-spacing width".split(" ").indexOf(t)>=0&&(e=e.replace(",",".")),i.css(t,e)}));var r=e[0].clientHeight;i.val("");var o=i[0].scrollHeight;i.val(e.val()),i.css("height",0);var l=i[0].scrollHeight;r!==l&&(l>o?e.css("height",l+"px"):l<r&&e.css("height",""),(l>o||l<r)&&(e.trigger("textarea:resize",{initialHeight:o,currentHeight:r,scrollHeight:l}),this.emit("textareaResize",{initialHeight:o,currentHeight:r,scrollHeight:l})))}},validate:function(t){var e=a(t);if(!e.length)return!0;var i=e.parents(".item-input"),n=e.parents(".input");function r(){e[0].f7ValidateReadonly&&(e[0].readOnly=!0)}e[0].f7ValidateReadonly&&(e[0].readOnly=!1);var s=e[0].validity,o=e.dataset().errorMessage||e[0].validationMessage||"";if(!s)return r(),!0;if(!s.valid){var l=e.nextAll(".item-input-error-message, .input-error-message");return o&&(0===l.length&&(l=a('<div class="'+(n.length?"input-error-message":"item-input-error-message")+'"></div>')).insertAfter(e),l.text(o)),l.length>0&&(i.addClass("item-input-with-error-message"),n.addClass("input-with-error-message")),i.addClass("item-input-invalid"),n.addClass("input-invalid"),e.addClass("input-invalid"),r(),!1}return i.removeClass("item-input-invalid item-input-with-error-message"),n.removeClass("input-invalid input-with-error-message"),e.removeClass("input-invalid"),r(),!0},validateInputs:function(t){var e=this;return a(t).find("input, textarea, select").map((function(t){return e.input.validate(t)})).indexOf(!1)<0},focus:function(t){var e=a(t),i=e.attr("type");s.ignoreTypes.indexOf(i)>=0||(e.parents(".item-input").addClass("item-input-focused"),e.parents(".input").addClass("input-focused"),e.addClass("input-focused"))},blur:function(t){var e=a(t);e.parents(".item-input").removeClass("item-input-focused"),e.parents(".input").removeClass("input-focused"),e.removeClass("input-focused")},checkEmptyState:function(t){var e=a(t);if(e.is("input, select, textarea, .item-input [contenteditable]")||(e=e.find("input, select, textarea, .item-input [contenteditable]").eq(0)),e.length){var i;i=e[0].hasAttribute("contenteditable")?e.find(".text-editor-placeholder").length?"":e.html():e.val();var n=e.parents(".item-input"),r=e.parents(".input");i&&"string"==typeof i&&""!==i.trim()||Array.isArray(i)&&i.length>0?(n.addClass("item-input-with-value"),r.addClass("input-with-value"),e.addClass("input-with-value"),e.trigger("input:notempty"),this.emit("inputNotEmpty",e[0])):(n.removeClass("item-input-with-value"),r.removeClass("input-with-value"),e.removeClass("input-with-value"),e.trigger("input:empty"),this.emit("inputEmpty",e[0]))}},scrollIntoView:function(t,e,i,n){void 0===e&&(e=0);var r=a(t),s=r.parents(".page-content, .panel, .card-expandable .card-content").eq(0);if(!s.length)return!1;var o=s[0].offsetHeight,l=s[0].scrollTop,u=parseInt(s.css("padding-top"),10),p=parseInt(s.css("padding-bottom"),10),d=s.offset().top-l,c=r.offset().top-d,h=c+l-u,m=c+l-o+p+r[0].offsetHeight,f=h+(m-h)/2;return l>h?(s.scrollTop(i?f:h,e),!0):l<m?(s.scrollTop(i?f:m,e),!0):(n&&s.scrollTop(i?f:m,e),!1)},init:function(){var t=this,e=n();s.createTextareaResizableShadow(),a(document).on("click",".input-clear-button",(function(){var e=a(this).siblings("input, textarea").eq(0),i=e.val();e.val("").trigger("input change").focus().trigger("input:clear",i),t.emit("inputClear",i)})),a(document).on("mousedown",".input-clear-button",(function(t){t.preventDefault()})),a(document).on("change input","input, textarea, select, .item-input [contenteditable]",(function(){var e=a(this),i=e.attr("type"),n=e[0].nodeName.toLowerCase(),r=e[0].hasAttribute("contenteditable");s.ignoreTypes.indexOf(i)>=0||(t.input.checkEmptyState(e),r||(null!==e.attr("data-validate-on-blur")||!e.dataset().validate&&null===e.attr("validate")||t.input.validate(e),"textarea"===n&&e.hasClass("resizable")&&t.input.resizeTextarea(e)))}),!0),a(document).on("focus","input, textarea, select, .item-input [contenteditable]",(function(){var i=this;t.params.input.scrollIntoViewOnFocus&&(e.android?a(window).once("resize",(function(){document&&document.activeElement===i&&t.input.scrollIntoView(i,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)})):t.input.scrollIntoView(i,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)),t.input.focus(i)}),!0),a(document).on("blur","input, textarea, select, .item-input [contenteditable]",(function(){var e=a(this),i=e[0].nodeName.toLowerCase();t.input.blur(e),(e.dataset().validate||null!==e.attr("validate")||null!==e.attr("data-validate-on-blur"))&&t.input.validate(e),"textarea"===i&&e.hasClass("resizable")&&s.textareaResizableShadow&&s.textareaResizableShadow.remove()}),!0),a(document).on("invalid","input, textarea, select",(function(e){var i=a(this);null!==i.attr("data-validate-on-blur")||!i.dataset().validate&&null===i.attr("validate")||(e.preventDefault(),t.input.validate(i))}),!0)}},o={name:"input",params:{input:{scrollIntoViewOnFocus:void 0,scrollIntoViewCentered:!1,scrollIntoViewDuration:0,scrollIntoViewAlways:!1}},create:function(){var t=this;void 0===t.params.input.scrollIntoViewOnFocus&&(t.params.input.scrollIntoViewOnFocus=n().android),r(t,{input:s})},on:{init:function(){this.input.init()},tabMounted:function(t){var e=this,i=a(t);i.find(".item-input, .input").each((function(t){a(t).find("input, select, textarea, [contenteditable]").each((function(t){var i=a(t);s.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))},pageInit:function(t){var e=this,i=t.$el;i.find(".item-input, .input").each((function(t){a(t).find("input, select, textarea, [contenteditable]").each((function(t){var i=a(t);s.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))},"panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint":function(t){var e=this;t&&t.$el?t.$el.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)})):a("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))}}};if(e){if(t.prototype.modules&&t.prototype.modules[o.name])return;t.use(o),t.instance&&(t.instance.useModuleParams(o,t.instance.params),t.instance.useModule(o))}return o}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))