kaka-1.0.0.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. kaka = function(){
  2. var self = this;
  3. self.init = function(){
  4. self.bindPlugin();
  5. }
  6. self.bindPlugin = function(){
  7. $('[data-plugin]').each(function(idx){
  8. var el = $(this);
  9. var data = $(this).data();
  10. var fa = data.plugin.match(/\-(\w)/g);
  11. if (fa) {
  12. for(x in fa) {
  13. var funcName = data.plugin.replace(fa[x], fa[x].toUpperCase()).replace('-','');
  14. var func = eval('self.'+funcName);
  15. }
  16. } else {
  17. func = eval('self.'+data.plugin);
  18. }
  19. func(el, data);
  20. });
  21. $('[data-selected]').each(function(idx){
  22. var v = $(this).data('selected');
  23. $('option', this).each(function(){
  24. if ($(this).val()==v) {
  25. $(this).prop('selected', 1);
  26. }
  27. })
  28. });
  29. }
  30. self.validator = function(el, opts) {
  31. seajs.use(['/assets/js/kaka/libs/kaka.validator.js'], function(){
  32. new kaka.validator(el, opts);
  33. });
  34. }
  35. self.datetimePicker = function(el, opts) {
  36. $(el).data('type', 'datetime');
  37. self.datePicker(el, opts);
  38. }
  39. self.datePicker = function(el, opts){
  40. seajs.use(['/assets/js/datetime/bootstrap-datetimepicker.min.css',
  41. '/assets/js/datetime/bootstrap-datetimepicker.min.js'], function(){
  42. seajs.use(['/assets/js/datetime/locales/bootstrap-datetimepicker.zh-CN.js'], function(){
  43. var defaults = {
  44. format: 'yyyy/mm/dd',
  45. language: 'zh-CN',
  46. weekStart: 1,
  47. todayBtn: 1,
  48. autoclose: 1,
  49. minView: 2,
  50. todayHighlight: 1,
  51. startView: 2,
  52. forceParse: 0,
  53. showMeridian: 0
  54. };
  55. opts = $.extend(true, defaults, opts);
  56. switch (opts.type) {
  57. case 'datetime':
  58. opts.format = 'yyyy/mm/dd hh:ii';
  59. opts.minView = 0;
  60. opts.minuteStep = 5;
  61. break;
  62. case 'datehour':
  63. opts.format = 'yyyy/mm/dd hh:00';
  64. opts.minView = 1;
  65. break;
  66. }
  67. $(el).datetimepicker(opts);
  68. });
  69. });
  70. }
  71. self.chkGroup = function(el, opts){
  72. $('[role=chk-all]', el).unbind('click');
  73. $('[role=chk-all]', el).bind('click', function(){
  74. var chk = $(this).is(":checked") ? true : false;
  75. $('[role=chk-item]', el).prop('checked', chk);
  76. });
  77. $('[role=chk-item]', el).unbind('click');
  78. $('[role=chk-item]', el).bind('click', function(){
  79. var chk = true;
  80. $('[role=chk-item]', el).each(function(){
  81. if (!$(this).is(":checked")) chk = false;
  82. });
  83. $('[role=chk-all]', el).prop('checked', chk);
  84. });
  85. }
  86. self.editor = function(el, opts){
  87. seajs.use(['/assets/js/kindeditor/kindeditor.sea.js'], function(editor){
  88. var defaults = {
  89. uploadJson : '/misc.php?act=upload&token='+opts.token,
  90. filterMode : false,
  91. themeType : 'bootstrap',
  92. cssPath : '/assets/css/richtext.css',
  93. bodyClass: 'richtext',
  94. width: '100%',
  95. minWidth : 450,
  96. minHeight: 360,
  97. fontSizeTable : ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px', '38px', '42px'],
  98. items : [
  99. 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
  100. 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
  101. 'flash', 'media', 'insertfile', 'table', /*'hr', 'emoticons',*/ 'baidumap', 'pagebreak',
  102. 'anchor', 'link', 'unlink', '/',
  103. 'cut', 'copy', 'paste',
  104. 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
  105. 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
  106. 'superscript', '|', 'clearhtml', 'quickformat', /*'selectall', */'preview', 'print', 'template', 'code', 'source', 'fullscreen',
  107. ],
  108. afterBlur: function () {
  109. this.sync();
  110. }
  111. }
  112. opts = $.extend(true, defaults, opts);
  113. editor.create(el, opts);
  114. });
  115. }
  116. self.codeEditor = function(el, opts){
  117. var mode = $(el).data('mode');
  118. el.hide();
  119. seajs.use(['/assets/js/ace/ace.sea.js'], function(ace){
  120. var domId = 'ace-'+$(el).index();
  121. var editorDom = '<div class="form-control" style="height:350px; font-size:13px" id="'+domId+'"></div>';
  122. $(editorDom).insertAfter(el);
  123. var editor = ace.edit(domId);
  124. editor.getSession().setValue($(el).val());
  125. //editor.setTheme("ace/theme/twilight");
  126. editor.getSession().setMode('ace/mode/'+mode);
  127. editor.getSession().on('change', function(e) {
  128. var val = editor.getSession().getValue();
  129. $(el).val(val);
  130. });
  131. });
  132. }
  133. self.imgSelector = function(el, opts) {
  134. var id = 'img-selector';
  135. var limit = $(el).data('limit');
  136. var idx = $(el).index();
  137. var ipt = $(el).data('ipt');
  138. var ref = $(el).data('ref')?$(el).data('ref'):0;
  139. var dom = $('[data-ipt="'+ipt+'"]>.sui-img-selector-box');
  140. var url = '/?module=admincp&controller=image&action=selector&ipt='+ipt+'&ref='+ref+'&limit='+limit+'&idx='+idx;
  141. var val = $('.sui-img-value', el).html();
  142. var files = new Array();
  143. $.applyImage = function(file, ipt, DOM) {
  144. var tpl = '<input type="hidden" name="'+ipt+'" value="'+file+'" />'
  145. + '<a class="img-preview"><img src="'+file+'" role="btn" /></a>'
  146. + '<a class="JS_DelImg img-remove" href="javascript:;"><i class="fa fa-remove"></i> <span>移除</span></a>';
  147. $(DOM).html(tpl);
  148. $('.JS_DelImg', DOM).on('click', function(){
  149. $(DOM).empty().html('<input type="hidden" name="'+ipt+'" value="" />');
  150. event.stopPropagation();
  151. });
  152. }
  153. $.applyImages = function(files, ipt, DOM) {
  154. $(DOM).empty();
  155. for(x in files) {
  156. var file = files[x];
  157. var tpl = '<div class="JS_ImgItem img-item">'
  158. + '<div class="alt">'
  159. + '<input type="hidden" name="'+ipt+'['+x+'][id]" value="'+file.id+'">'
  160. + '<input type="hidden" name="'+ipt+'['+x+'][src]" value="'+file.src+'">'
  161. + '<textarea name="'+ipt+'['+x+'][alt]" class="form-control" placeholder="请输入图片说明">'+(file.alt?file.alt:'')+'</textarea>'
  162. + '<a href="javascript:;$(\'.alt\',\'.JS_ImgItem\').hide();" class="btn btn-primary btn-xs">确定</a>'
  163. + '</div>'
  164. + '<a class="thumb" title="'+(file.alt?file.alt:'')+'"><img src="'+file.src+'" data-id="'+file.id+'"></a>'
  165. + '<div class="operate">'
  166. + '<a href="javascript:;" class="JS_DelImg">'
  167. + '<i class="fa fa-remove"></i> 移除</a>'
  168. + '</div></div>';
  169. $(DOM).append(tpl);
  170. }
  171. $('.JS_ImgItem', DOM).on('click', function(){
  172. var el = $(this);
  173. $('.alt', DOM).hide();
  174. $('.alt', el).show();
  175. $(document).mouseup(function(e){
  176. var _con = el; // 设置目标区域
  177. if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
  178. $('.alt', DOM).hide();
  179. }
  180. });
  181. event.stopPropagation();
  182. });
  183. $('.JS_DelImg', DOM).on('click', function(){
  184. $(this).parents('.JS_ImgItem').remove();
  185. });
  186. $('.JS_Forward', DOM).on('click', function(){
  187. var e = $(this).parents('.JS_ImgItem');
  188. e.prev('.JS_ImgItem').before(e);
  189. });
  190. $('.JS_Backward', DOM).on('click', function(){
  191. var e = $(this).parents('.JS_ImgItem');
  192. e.next('.JS_ImgItem').after(e);
  193. });
  194. seajs.use(['/assets/js/dragsort/jquery.dragsort-0.5.2.min.js'], function(dragsort){
  195. $(DOM).dragsort("destroy");
  196. $(DOM).dragsort({placeHolderTemplate: "<div class='img-item'></div>"});
  197. });
  198. }
  199. if (val) {
  200. if (limit>1) {
  201. $.applyImages(eval('(' + val + ')'), ipt, dom);
  202. } else {
  203. $.applyImage(val, ipt, dom);
  204. }
  205. }
  206. $('[role="btn"]', el).unbind('click');
  207. $('[role="btn"]', el).bind('click', function(){
  208. $('#'+id).remove();
  209. $('body').append('<div class="modal fade" id="'+id+'" tabindex="-1" role="dialog" aria-hidden="false"></div>');
  210. $('#'+id).load(url,function(){
  211. $('#'+id).modal("show");
  212. $('.btn-ok').click(function(){
  213. if (limit>1) {
  214. $.applyImages(images, ipt, dom);
  215. } else {
  216. $.applyImage(images[0].src, ipt, dom);
  217. }
  218. });
  219. })
  220. });
  221. }
  222. self.userSelector = function(el, opts) {
  223. var id = 'user-selector';
  224. var role = $(el).data('role');
  225. var url = '/?module=admincp&controller=user&action=selector&role='+role;
  226. $('[role="btn"]', el).unbind('click');
  227. $('[role="btn"]', el).bind('click', function(){
  228. $('#'+id).remove();
  229. $('body').append('<div class="modal fade" id="'+id+'" tabindex="-1" role="dialog" aria-hidden="false"></div>');
  230. $('#'+id).load(url,function(){
  231. $('#'+id).modal("show");
  232. });
  233. });
  234. }
  235. self.tagsinput = function(el, opts) {
  236. seajs.use(['/assets/js/tagsinput/bootstrap-tagsinput.js',
  237. '/assets/js/tagsinput/bootstrap-tagsinput.css'], function(){
  238. var remoteUrl = $(el).data('typeahead');
  239. if (remoteUrl) {
  240. $(el).tagsinput({
  241. typeaheadjs: {
  242. valueKey: 'value',
  243. source: function(query, process) {
  244. $.getJSON(remoteUrl, {q:query}, function (data) {
  245. process(data);
  246. });
  247. }
  248. }
  249. });
  250. } else {
  251. $(el).tagsinput();
  252. }
  253. });
  254. }
  255. self.dragsort = function(el, opts) {
  256. seajs.use(['/assets/js/dragsort/jquery.dragsort-0.5.2.js'], function(dragsort){
  257. $(el).dragsort({
  258. dragSelectorExclude: "input, textarea, select, a, button",
  259. dragSelector:'tr',
  260. });
  261. });
  262. }
  263. self.chart = function(el, opts) {
  264. seajs.use(['/assets/js/highcharts/highcharts.js'], function(){
  265. var defaults = {
  266. credits: {
  267. enabled: false
  268. },
  269. yAxis: {
  270. title: {
  271. text: ''
  272. },
  273. }
  274. };
  275. if ($(el).attr('id')) {
  276. var obj = $(el).attr('id');
  277. } else {
  278. var obj = 'charts-'+$(el).index();
  279. $(el).attr('id', obj);
  280. }
  281. console.log(obj);
  282. opts = $.extend(true, defaults, opts);
  283. Highcharts.chart(obj, opts);
  284. });
  285. }
  286. self.dmenu = function(el, opts) {
  287. seajs.use(['/assets/js/kaka/libs/kaka.dmenu.js'], function() {
  288. var className = 'js-kaka-dmenu-'+$(el).index();
  289. $(el).hide().after('<div class="'+className+' form-inline"></div>');
  290. if (opts.size) {
  291. var tpl = '<select size="'+(opts.size)+'" class="form-control" style="margin-right:8px"></select>';
  292. } else {
  293. var tpl = '<select class="form-control form-control-select" style="margin-right:8px"></select>';
  294. }
  295. new kaka.dmenu('.'+className, {
  296. htmlTpl: tpl,
  297. script: opts.source,
  298. selected: $(el).val(),
  299. firstText: opts.deftext?opts.deftext:'主分类',
  300. callback: function(el, data) {
  301. $(el).val(data.id > 0 ? data.id : 0);
  302. }
  303. });
  304. });
  305. }
  306. self.init();
  307. return self;
  308. }
  309. var kaka = new kaka();