Skip to content

Instantly share code, notes, and snippets.

@seyaobey
Created May 3, 2017 11:40
Show Gist options
  • Save seyaobey/d4a04f280ca8bf4b80995664014be87b to your computer and use it in GitHub Desktop.
Save seyaobey/d4a04f280ca8bf4b80995664014be87b to your computer and use it in GitHub Desktop.
edit bootstrap
!function(t){var e=function(e,a){this.$element=t(e),this.options=t.extend({},t.fn.editstrap.defaults,this.$element.data(),"object"==typeof a&&a),this.init()};e.prototype={constructor:e,init:function(e){if(this.checkEmpty(this.$element),this.$element.wrap(t('<span class="edit-parent-span"></span>')),this.$element.parent().attr("title",this.options.title),this.$element.addClass("editable-field"),this.$element.parent().wrap(t("<span></span>")),this.$element.parent().parent().append('<div style="padding-top:5px;"><small class="result-message"></small></div>'),this.options.displayEditIcon){var a=t('<span class="edit-icon-container"></span>'),i=t("<i></i>");i.addClass(this.options.editClasses),a.append(i),this.$element.parent().append(a)}this.$element.parent().hover(function(){t(this).removeClass("edit-parent-span"),t(this).addClass("edit-parent-span-hover"),t(this).parent().find(".edit-icon-container").css("opacity",100)}).mouseleave(function(){t(this).addClass("edit-parent-span"),t(this).removeClass("edit-parent-span-hover"),t(this).find(".edit-icon-container").css("opacity",0)});var s=this;this.$element.parent().click(function(){var e;e=void 0!=s.options.value?s.options.value:void 0!=t(this).find(".editable-field").attr("data-edit-value")?t(this).find(".editable-field").attr("data-edit-value"):t(this).find(".editable-field").text()!=s.options.emptyText?t(this).find(".editable-field").text():"",void 0==s.options.pk&&(s.options.pk=t(this).find(".editable-field").attr("data-edit-pk")),t(this).attr("data-editable-active",!0),t(this).hide();var a=t(this);t(this).parent().prepend(s.getHtml(e,a))}),t(document).on("click.editable-field",function(e){var a,i=t(e.target),n=t.merge(s.options.excludeClasses,[".edit-parent-span",".edit-pointer",".edit-form",".select2-body-container",".datepicker-dropdown"]);if(t.contains(document.documentElement,e.target)&&!i.is(document)){for(a=0;a<n.length;a++)if(i.is(n[a])||i.parents(n[a]).length)return;t(".edit-parent-span").each(function(e,a){s.closeEditable(t(a),void 0)}),t(".select2-body-container").html(""),t(".result-message").hide()}})},closeEditable:function(t,e){"true"==t.attr("data-editable-active")&&(t.find(".editable-field").html(e),t.show(),this.checkEmpty(t),t.attr("data-editable-active",!1),t.parent().find(".edit-form").remove())},submitEditable:function(e,a,i){var s=this.options.validateValue(i);if(s.success)if(void 0==this.options.url)this.options.value=i,a=this.options.prependText+a+this.options.appendText,this.closeEditable(e,a),this.options.displaySuccess(this.$element,i,a);else{var n=this.options.data,o=this;n.value=i,void 0!=this.options.pk&&(n.pk=this.options.pk),this.$element.parent().parent().find(".result-message").html(this.options.ajaxLoaderIcon+this.options.ajaxLoaderText),this.$element.parent().parent().find(".result-message").show(),t.ajax({method:"POST",url:o.options.url,data:n,success:function(t){o.options.value=i,a=o.options.prependText+a+o.options.appendText,o.closeEditable(e,a),o.options.displaySuccess(o.$element,i,a)},error:function(t,e,a){o.options.displayError(o.$element,"Error on submit : "+t.status+" "+a)}})}else this.options.displayError(this.$element,s.message)},checkEmpty:function(t){""==t.text()&&t.text(this.options.emptyText)},validateDate:function(e,a,i){if(""===e)return i;var s=a,n=s,o=e,l=o;if(s.length>o.length)return!1;var p=-1!==l.indexOf("/")?"/":-1!==l.indexOf("-")?"-":" ";if(null===p||-1===l.indexOf(p))return!1;l=l.split(p),n=n.split(p);var d=-1!=t.inArray("yyyy",n)?"yyyy":"yy",r=t.inArray("mm",n)>-1?"mm":"MM",c=t.inArray("dd",n)>-1?"dd":"d",u=l[t.inArray(d,n)],h=l[t.inArray(r,n)],f=l[t.inArray(c,n)];if(h=h.length>2?t.inArray(h,t.fn.datepicker.dates[this.options.language].months)+1:h,!u||!h||!f||4!==u.length)return!1;if(isNaN(u)||isNaN(h)||isNaN(f))return!1;if(f.length>2||h.length>2||u.length>4)return!1;if(f=parseInt(f,10),h=parseInt(h,10),u=parseInt(u,10),1e3>u||u>9999||0>=h||h>12)return!1;var v=[31,28,31,30,31,30,31,31,30,31,30,31];return(u%400===0||u%100!==0&&u%4===0)&&(v[1]=29),0>=f||f>v[h-1]?!1:!0},getValueAndText:function(t,e,a,i){var s=e.val();void 0==a&&(a="");var n=a;switch(t){case"text":n+=e.val();break;case"select":n+=e.find("option:selected").text();break;case"date":n+=e.val()}return void 0==i&&(i=""),n+=i,{value:s,text:n}},getHtml:function(e,a){var i='<span class="validate edit-pointer input-group-addon edit-validate-'+this.options.validateClass+'"><i class="glyphicon glyphicon-ok"></span>',s=t('<div class="input-group input-group-sm select2-bootstrap-append select2-bootstrap-prepend edit-form" ></div>');if(""!=this.options.prependText&&void 0!=this.options.prependText){var n=t('<span class="input-group-addon">'+this.options.prependText+"</span>");s.prepend(n)}var o=this;switch(this.options.type){case"text":var l=t('<input class="form-control" />');l.val(e),l.attr("placeholder",o.options.placeholder),s.append(l),s.append(i),s.find(".validate").click(function(){var e=t(this).parent().find("input").val();o.submitEditable(a,e,e)}),o.options.validateOnEnter&&s.find("input").keypress(function(e){var i=e.which;if(13==i){var s=t(this).val();o.submitEditable(a,s,s)}});break;case"textArea":var p=t('<textarea class="form-control"></textarea>');p.css("height","auto"),p.val(e),p.attr("placeholder",o.options.placeholder),p.attr("rows",o.options.textAreaRows),s.append(p),s.append(i),s.find(".validate").click(function(){var e=t(this).parent().find("textarea").val();o.submitEditable(a,e,e)});break;case"select":var d=t('<select class="form-control"></select>');e==o.options.emptyText&&d.append('<option value="null">'+e+"</option>"),t.each(o.options.dataSelect,function(t,e){d.append('<option value="'+e.value+'">'+e.text+"</option>")}),s.append(d),s.find("select").val(o.options.value),s.find("select").change(function(){o.submitEditable(a,t(this).find("option:selected").text(),t(this).find("option:selected").val())});break;case"select2":var d=t('<select class="form-control"></select>');e==o.options.emptyText&&d.append('<option value="null">'+e+"</option>");var r=[];r=t.isFunction(o.options.dataSelect)?o.options.dataSelect():o.options.dataSelect,t.each(r,function(t,e){d.append('<option value="'+e.value+'">'+e.text+"</option>")}),s.append(d),s.find("select").val(o.options.value),s.find("select").change(function(){o.submitEditable(a,t(this).find("option:selected").text(),t(this).find("option:selected").val())}),s.find("select").select2({width:"100%"}),s.removeClass("input-group-sm");break;case"multiple":var c=t('<div class="input-group input-group-sm select2-bootstrap-append"></div>'),d=t('<select class="form-control" multiple="multiple"></select>'),r=[];r=t.isFunction(o.options.dataSelect)?o.options.dataSelect():o.options.dataSelect,t.each(r,function(t,e){d.append('<option value="'+e.value+'">'+e.text+"</option>")}),d.val(o.options.value),c.append(d),c.append(i),s.append(c);s.find("select").select2({closeOnSelect:!1,width:"100%",dropdownParent:t("body").find(".select2-body-container")});s.find(".validate").click(function(){var e=[];t(this).parent().find("select option:selected").each(function(a,i){e.push(t(i).text())}),o.submitEditable(a,e.join(o.options.multipleSeparator),t(this).parent().find("select").val())});break;case"date":var l=t('<input class="form-control input-group-sm" />');l.val(e),l.attr("placeholder",o.options.placeholder),l.datepicker({format:o.options.dateFormat,language:o.options.language}).on("changeDate",function(e){o.validateDate(t(this).val(),o.options.dateFormat,!1)&&(l.datepicker("hide"),o.submitEditable(a,t(this).val(),t(this).val()))}),s.append(l);break;case"typeahead":var l=t('<input class="form-control" />');l.val(e),l.attr("placeholder",o.options.placeholder),s.append(l),s.find("input").typeahead(o.options.typeahead.options,o.options.typeahead.dataset).bind("typeahead:select",function(e,i){o.submitEditable(a,t(this).val(),t(this).val())}),s.find(".tt-hint").remove();break;case"tags":var l=t('<input class="form-control input-group-sm" data-role="tagsinput" />');l.val(e),l.attr("placeholder",o.options.placeholder),s.append(l),s.append(i);var u=s.find("input");u.tagsinput({tagClass:function(t){return"label label-info"}}),s.removeClass("input-group-sm"),s.find(".bootstrap-tagsinput").addClass("form-control"),s.find(".validate").click(function(){var t=u.tagsinput("items");o.submitEditable(a,t.join(o.options.multipleSeparator),t)})}if(""!=this.options.appendText&&void 0!=this.options.appendText){var n=t('<span class="input-group-addon">'+this.options.appendText+"</span>");s.find(".validate").length?n.insertBefore(s.find(".validate")):s.append(n)}return s}},t.fn.editstrap=function(t){return new e(this,t)},t.fn.editstrap.defaults={title:"Click to edit",emptyText:"None",type:"text",language:"en",dateFormat:"mm/dd/yyyy",validateClass:"default",appendText:"",prependText:"",multipleSeparator:" ",value:void 0,dataSelect:[],data:{},displayEditIcon:!0,editClasses:"glyphicon glyphicon-pencil",delayToHide:3e3,successMessage:"Value changed successfully",errorMessage:"Error has occured",successClass:"edit-has-success",errorClass:"edit-has-error",displaySuccess:function(t,e,a){var i=t.parent().parent().find(".result-message");i.removeClass("edit-has-success edit-has-error"),i.html(this.successMessage),i.addClass(this.successClass),i.show().delay(this.delayToHide).fadeOut()},displayError:function(t,e){var a=t.parent().parent().find(".result-message");a.removeClass(this.errorClass+" "+this.successClass),a.html(e),a.addClass(this.errorClass),a.show()},validateValue:function(t){return{success:!0,message:""}},validateOnEnter:!0,textAreaRows:10,excludeClasses:[],placeholder:"",ajaxLoaderIcon:'<i class="glyphicon glyphicon-refresh gly-spin"></i>',ajaxLoaderText:" "}}(window.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment