first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,170 @@
|
||||
/**
|
||||
Address editable input.
|
||||
Internally value stored as {city: "Moscow", street: "Lenina", building: "15"}
|
||||
|
||||
@class address
|
||||
@extends abstractinput
|
||||
@final
|
||||
@example
|
||||
<a href="#" id="address" data-type="address" data-pk="1">awesome</a>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#address').editable({
|
||||
url: '/post',
|
||||
title: 'Enter city, street and building #',
|
||||
value: {
|
||||
city: "Moscow",
|
||||
street: "Lenina",
|
||||
building: "15"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
**/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var Address = function (options) {
|
||||
this.init('address', options, Address.defaults);
|
||||
};
|
||||
|
||||
//inherit from Abstract input
|
||||
$.fn.editableutils.inherit(Address, $.fn.editabletypes.abstractinput);
|
||||
|
||||
$.extend(Address.prototype, {
|
||||
/**
|
||||
Renders input from tpl
|
||||
|
||||
@method render()
|
||||
**/
|
||||
render: function() {
|
||||
this.$input = this.$tpl.find('input');
|
||||
},
|
||||
|
||||
/**
|
||||
Default method to show value in element. Can be overwritten by display option.
|
||||
|
||||
@method value2html(value, element)
|
||||
**/
|
||||
value2html: function(value, element) {
|
||||
if(!value) {
|
||||
$(element).empty();
|
||||
return;
|
||||
}
|
||||
var html = $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
|
||||
$(element).html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
Gets value from element's html
|
||||
|
||||
@method html2value(html)
|
||||
**/
|
||||
html2value: function(html) {
|
||||
/*
|
||||
you may write parsing method to get value by element's html
|
||||
e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
|
||||
but for complex structures it's not recommended.
|
||||
Better set value directly via javascript, e.g.
|
||||
editable({
|
||||
value: {
|
||||
city: "Moscow",
|
||||
street: "Lenina",
|
||||
building: "15"
|
||||
}
|
||||
});
|
||||
*/
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
Converts value to string.
|
||||
It is used in internal comparing (not for sending to server).
|
||||
|
||||
@method value2str(value)
|
||||
**/
|
||||
value2str: function(value) {
|
||||
var str = '';
|
||||
if(value) {
|
||||
for(var k in value) {
|
||||
str = str + k + ':' + value[k] + ';';
|
||||
}
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
/*
|
||||
Converts string to value. Used for reading value from 'data-value' attribute.
|
||||
|
||||
@method str2value(str)
|
||||
*/
|
||||
str2value: function(str) {
|
||||
/*
|
||||
this is mainly for parsing value defined in data-value attribute.
|
||||
If you will always set value by javascript, no need to overwrite it
|
||||
*/
|
||||
return str;
|
||||
},
|
||||
|
||||
/**
|
||||
Sets value of input.
|
||||
|
||||
@method value2input(value)
|
||||
@param {mixed} value
|
||||
**/
|
||||
value2input: function(value) {
|
||||
if(!value) {
|
||||
return;
|
||||
}
|
||||
this.$input.filter('[name="city"]').val(value.city);
|
||||
this.$input.filter('[name="street"]').val(value.street);
|
||||
this.$input.filter('[name="building"]').val(value.building);
|
||||
},
|
||||
|
||||
/**
|
||||
Returns value of input.
|
||||
|
||||
@method input2value()
|
||||
**/
|
||||
input2value: function() {
|
||||
return {
|
||||
city: this.$input.filter('[name="city"]').val(),
|
||||
street: this.$input.filter('[name="street"]').val(),
|
||||
building: this.$input.filter('[name="building"]').val()
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
Activates input: sets focus on the first field.
|
||||
|
||||
@method activate()
|
||||
**/
|
||||
activate: function() {
|
||||
this.$input.filter('[name="city"]').focus();
|
||||
},
|
||||
|
||||
/**
|
||||
Attaches handler to submit form in case of 'showbuttons=false' mode
|
||||
|
||||
@method autosubmit()
|
||||
**/
|
||||
autosubmit: function() {
|
||||
this.$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
||||
tpl: '<div class="editable-address"><label><span>City: </span><input type="text" name="city" class="input-small"></label></div>'+
|
||||
'<div class="editable-address"><label><span>Street: </span><input type="text" name="street" class="input-small"></label></div>'+
|
||||
'<div class="editable-address"><label><span>Building: </span><input type="text" name="building" class="input-mini"></label></div>',
|
||||
|
||||
inputclass: ''
|
||||
});
|
||||
|
||||
$.fn.editabletypes.address = Address;
|
||||
|
||||
}(window.jQuery));
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
Bootstrap wysihtml5 editor. Based on [bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5).
|
||||
You should include **manually** distributives of `wysihtml5` and `bootstrap-wysihtml5`:
|
||||
|
||||
<link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link>
|
||||
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>
|
||||
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
|
||||
|
||||
And also include `wysihtml5.js` from `inputs-ext` directory of x-editable:
|
||||
|
||||
<script src="js/inputs-ext/wysihtml5/wysihtml5.js"></script>
|
||||
|
||||
**Note:** It's better to use fresh bootstrap-wysihtml5 from it's [master branch](https://github.com/jhollingworth/bootstrap-wysihtml5/tree/master/src) as there is update for correct image insertion.
|
||||
|
||||
@class wysihtml5
|
||||
@extends abstractinput
|
||||
@final
|
||||
@since 1.4.0
|
||||
@example
|
||||
<div id="comments" data-type="wysihtml5" data-pk="1"><h2>awesome</h2> comment!</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#comments').editable({
|
||||
url: '/post',
|
||||
title: 'Enter comments'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
**/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var Wysihtml5 = function (options) {
|
||||
this.init('wysihtml5', options, Wysihtml5.defaults);
|
||||
|
||||
//extend wysihtml5 manually as $.extend not recursive
|
||||
this.options.wysihtml5 = $.extend({}, Wysihtml5.defaults.wysihtml5, options.wysihtml5);
|
||||
};
|
||||
|
||||
$.fn.editableutils.inherit(Wysihtml5, $.fn.editabletypes.abstractinput);
|
||||
|
||||
$.extend(Wysihtml5.prototype, {
|
||||
render: function () {
|
||||
var deferred = $.Deferred(),
|
||||
msieOld;
|
||||
|
||||
//generate unique id as it required for wysihtml5
|
||||
this.$input.attr('id', 'textarea_'+(new Date()).getTime());
|
||||
|
||||
this.setClass();
|
||||
this.setAttr('placeholder');
|
||||
|
||||
//resolve deffered when widget loaded
|
||||
$.extend(this.options.wysihtml5, {
|
||||
events: {
|
||||
load: function() {
|
||||
deferred.resolve();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$input.wysihtml5(this.options.wysihtml5);
|
||||
|
||||
/*
|
||||
In IE8 wysihtml5 iframe stays on the same line with buttons toolbar (inside popover).
|
||||
The only solution I found is to add <br>. If you fine better way, please send PR.
|
||||
*/
|
||||
msieOld = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
|
||||
if(msieOld) {
|
||||
this.$input.before('<br><br>');
|
||||
}
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
value2html: function(value, element) {
|
||||
$(element).html(value);
|
||||
},
|
||||
|
||||
html2value: function(html) {
|
||||
return html;
|
||||
},
|
||||
|
||||
value2input: function(value) {
|
||||
this.$input.data("wysihtml5").editor.setValue(value, true);
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.$input.data("wysihtml5").editor.focus();
|
||||
}
|
||||
});
|
||||
|
||||
Wysihtml5.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
||||
/**
|
||||
@property tpl
|
||||
@default <textarea></textarea>
|
||||
**/
|
||||
tpl:'<textarea></textarea>',
|
||||
/**
|
||||
@property inputclass
|
||||
@default editable-wysihtml5
|
||||
**/
|
||||
inputclass: 'editable-wysihtml5',
|
||||
/**
|
||||
Placeholder attribute of input. Shown when input is empty.
|
||||
|
||||
@property placeholder
|
||||
@type string
|
||||
@default null
|
||||
**/
|
||||
placeholder: null,
|
||||
/**
|
||||
Wysihtml5 default options.
|
||||
See https://github.com/jhollingworth/bootstrap-wysihtml5#options
|
||||
|
||||
@property wysihtml5
|
||||
@type object
|
||||
@default {stylesheets: false}
|
||||
**/
|
||||
wysihtml5: {
|
||||
stylesheets: false //see https://github.com/jhollingworth/bootstrap-wysihtml5/issues/183
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.editabletypes.wysihtml5 = Wysihtml5;
|
||||
|
||||
}(window.jQuery));
|
||||
Reference in New Issue
Block a user