/******************************************************************************* * * 系统首页布局设计js * *
* * 作者:hugh zhuang * 邮箱:zhuangxh@jee-soft.cn * 日期:2015-01-8-上午11:10:52 * 版权:广州宏天软件有限公司版权所有 ** ******************************************************************************/ var indexLayoutPlugin = null; ;(function($, window, document, undefined) { var pluginName = "indexLayout", defaults = { templateAliasKey:"template-alias"//模版别名 }, contenthandle = null, layouthistory=null, layoutClass= ".index-layout", STORAGE_KEY ="indexLayoutData", downloadLayout="#download-layout", currentDocument = null, timerSave = 1000, stopsave = 0, startdrag = 0, indexHtml = $(layoutClass).html(); //currenteditor = null function Plugin(element, options) { this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype = { init : function() { indexLayoutPlugin = this; //this.initCkeditor(); this.restoreData(); this.initData(); setInterval(function() { indexLayoutPlugin.handleSaveLayout(); }, timerSave); }, initData:function(){ this.initSetting(); this.initDraggable(); // 初始化容器 this.initContainer(); //初始化操作 this.initOperation(); this.removeElm(); this.gridSystemGenerator(); }, // //初始化Ckeditor // initCkeditor : function() { // CKEDITOR.disableAutoInline = true; // contenthandle = CKEDITOR.replace('contenteditor', { // language : 'zh-cn', // contentsCss : [ __ctx // + '/styles/common/css/bootstrap/bootstrap-combined.min.css' ], // allowedContent : true // }); // }, //初始化恢复数据 restoreData:function(){ // if (this.supportstorage()) { // layouthistory = JSON.parse(localStorage.getItem(STORAGE_KEY)); // if (!layouthistory) // return false; // window.indexHtml = layouthistory.list[layouthistory.count - 1]; // if (window.indexHtml) // $(layoutClass).html(window.indexHtml); // } $(layoutClass).html( $('#html').val()); }, initSetting:function(){ // 设置最小高度 $("body").css("min-height", $(window).height() - 20); // 设置布局最小高度 $(layoutClass).css("min-height", $(window).height() - 45); $('.sidebar-nav').css("height", $(window).height()-10); $('.sidebar-scroller').each(function() { $(this).slimScroll({ size : '7px', color : '#a1b2bd', width:180, height : $(window).height() - 40, alwaysVisible : ($(this).attr("data-always-visible") == "1" ? true: false), railVisible : ($(this).attr("data-rail-visible") == "1" ? true: false), railOpacity : 0.1, disableFadeOut : true }); }); }, initDraggable:function(){ var me = this; // 可以拖动 允许 添加的布局 $(".sidebar-nav .lyrow").draggable({ connectToSortable : layoutClass, helper : "clone", handle : ".drag", start : function(e, t) { if (!startdrag) stopsave++; startdrag = 1; }, drag : function(e, t) { t.helper.width(400); }, stop : function(e, t) { me.initSortable(); if (stopsave > 0) stopsave--; startdrag = 0; } }); //允许 添加的栏目 $(".sidebar-nav .box").draggable({ connectToSortable : ".column", helper : "clone", handle : ".drag", start : function(e, t) { if (!startdrag) stopsave++; startdrag = 1; }, drag : function(e, t) { t.helper.width(400); }, stop : function() { me.handleJsIds(); if (stopsave > 0) stopsave--; startdrag = 0; } }); }, /** * 初始化排序 */ initSortable:function(){ $(layoutClass+", "+layoutClass+" .column").sortable({ connectWith : ".column", opacity : .35, start : function(e, t) { if (!startdrag) stopsave++; startdrag = 1; }, stop : function(e, t) { if (stopsave > 0) stopsave--; startdrag = 0; } }); }, /** * 初始化容器 */ initContainer :function () { this.initSortable(); this.configurationElm(); }, /** * 处理编辑、下拉菜单配置 */ configurationElm :function (e, t) { //可以编辑 $(layoutClass).delegate(".configuration > button", "click", function(e) { e.preventDefault(); var t = $(this).parent().next().next().children(); $(this).toggleClass("active"); t.toggleClass($(this).attr("rel")); }); //处理下拉菜单 $(layoutClass).delegate(".configuration .dropdown-menu a", "click", function(e) { e.preventDefault(); var t = $(this).parent().parent(); var n = t.parent().parent().next().next().children(); t.find("li").removeClass("active"); $(this).parent().addClass("active"); var r = ""; t.find("a").each(function() { r += $(this).attr("rel") + " "; }); t.parent().removeClass("open"); n.removeClass(r); n.addClass($(this).attr("rel")); }); }, /** * 下载布局html */ downloadLayoutSrc:function () { var formatSrc = this.saveLayoutSrc(); $("#downloadModal textarea").empty(); $("#downloadModal textarea").val(formatSrc); }, getLyrow:function (lyrow,len){ var rtn = ""; for (var i = 0; i < len; i++) { rtn += lyrow+" "; } return rtn; }, /** * 保存布局的源码 * @returns {} */ saveLayoutSrc:function (){ var me = this; $(downloadLayout).children().html($(layoutClass).html()); var t = $(downloadLayout).children(); t.find(".preview, .configuration, .drag, .remove").remove(); t.find(".lyrow").addClass("removeClean"); t.find(".box-element").addClass("removeClean"); var lyrow = ".lyrow"; for (var i = 6; i >=0; i--) { var l = me.getLyrow(lyrow,i); t.find(l +".removeClean").each(function() { me.cleanHtml(this); }); } t.find(".removeClean").remove(); $(downloadLayout+" .column").removeClass("ui-sortable"); $(downloadLayout+" .row-fluid").removeClass("clearfix").children() .removeClass("column"); if ($(downloadLayout+" .container").length > 0) { me.changeStructure("row-fluid", "row"); } formatSrc = $.htmlClean($(downloadLayout).html(), { format : true, allowedAttributes : [ [ "id" ], [ "class" ],["data-action"], [ "data-toggle" ], [ "data-target" ], [ "data-parent" ], [ "role" ], [ "data-dismiss" ], [ "aria-labelledby" ], [ "aria-hidden" ], [ "data-slide-to" ], [ "data-slide" ], [me._defaults.templateAliasKey]] }); $(downloadLayout).html(formatSrc); return formatSrc; }, /** * 处理保存管理布局 */ saveRemoteLayout:function () { var name = $('#name').val(); if(name == ""){ BootstrapDialog.alert("请输入名称!"); return; } $("#saveRemoteLayout").attr("disabled","disabled"); //需要保存2套,一套是展示的模版,一套是设计的模版 var formatSrc = this.saveLayoutSrc(), html = $(formatSrc).clone(true), designHtml = $(layoutClass).clone(true); this.changeHtml(html); this.changeHtml(designHtml); var isDef =$("input[name='isDef']:checked").val(); $.ajax({ type : "POST", url : __ctx+"/platform/system/sysIndexLayoutManage/saveLayout.ht", data : { id:$('#id').val(), name:$('#name').val(), memo:$('#memo').val(), orgId:$('#orgId').val(), isDef:isDef, html : html.html(), designHtml: designHtml.html() }, success : function(data) { var obj = eval('(' + data + ')'); if (obj.result == 1) { BootstrapDialog.confirm("保存成功,是否继续操作?", function(rtn){ if(rtn){ window.location.href=__ctx+"/platform/system/sysIndexLayoutManage/design.ht?id="+obj.message; }else{ if(window.opener){ try{ window.opener.location.href=window.opener.location.href.getNewUrl(); }catch(e){} } window.close(); } }); } else { BootstrapDialog.error(obj.message,"提示信息"); } } }); }, /** * 保存我的布局 */ saveRemoteMyLayout:function(){ $("#button-my-save-modal").attr("disabled","disabled"); //需要保存2套,一套是展示的模版,一套是设计的模版 var formatSrc = this.saveLayoutSrc(), html = $(formatSrc).clone(true), designHtml = $(layoutClass).clone(true); this.changeHtml(html); this.changeHtml(designHtml); $.ajax({ type : "POST", url : __ctx+"/platform/system/sysIndexMyLayout/saveLayout.ht", data : { html : html.html(), designHtml: designHtml.html() }, success : function(data) { var obj = eval('(' + data + ')'); if (obj.result == 1) { BootstrapDialog.confirm("保存成功,是否继续操作?", function(rtn){ if(rtn){ window.location.href=__ctx+"/platform/system/sysIndexMyLayout/design.ht"; }else{ if(window.opener){ try{ window.opener.location.href=window.opener.location.href.getNewUrl(); }catch(e){} } window.close(); } }); } else { $("#button-my-save-modal").attr("disabled",""); BootstrapDialog.error(obj.message,"提示信息"); } } }); }, cleanHtml:function (e) { $(e).parent().append($(e).children().html()); }, changeHtml :function (html){ var me = this, templateAliasKey= me._defaults.templateAliasKey; html.find("["+templateAliasKey+"]").each(function(){ var self = $(this), alias = self.attr(templateAliasKey), div = $("").attr(templateAliasKey,alias); self.after(div); self.remove(); }); }, /** * 是否支持保存数据 localStorage * * @returns {Boolean} */ supportstorage:function () { if (typeof window.localStorage == 'object') return true; else return false; }, /** * 处理保存布局 */ handleSaveLayout:function () { var e = $(layoutClass).html(); if (!stopsave && e != window.indexHtml) { stopsave++; window.indexHtml = e; this.saveLayout(); stopsave--; } }, /** * 保存布局 */ saveLayout:function () { var data = layouthistory; if (!data) { data = {}; data.count = 0; data.list = []; } if (data.list.length > data.count) { for (var i = data.count; i < data.list.length; i++) data.list[i] = null; } data.list[data.count] = window.indexHtml; data.count++; if (this.supportstorage()) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } else {// 不支持本地保存可以考虑保存服务器 /* * $.ajax({ type: "POST", url: "/build/saveLayout", data: { layout: * $(layoutClass).html() }, success: function(data) { * //updateButtonsVisibility(); } }); */ } layouthistory = data; //console.info(data); }, /** * 清除布局 */ clearIndex: function () { $(layoutClass).empty(); layouthistory = null; if (this.supportstorage()) localStorage.removeItem(STORAGE_KEY); }, /** * 删除按钮激活样式 */ removeMenuClasses:function () { $("#menu-layoutit li button").removeClass("active"); }, changeStructure:function (e, t) { $(downloadLayout+" ." + e).removeClass(e).addClass(t); }, /** * 清除布局 */ removeElm :function () { var me =this; $(layoutClass).delegate(".remove", "click", function(e) { e.preventDefault(); $(this).parent().remove(); if (!$(layoutClass+" .lyrow").length > 0) { me.clearIndex(); } }); }, /** * 撤销布局 * @returns {Boolean} */ undoLayout:function () { var data = layouthistory; // console.log(data); if (data) { if (data.count < 2) return false; window.indexHtml = data.list[data.count - 2]; data.count--; $(layoutClass).html(window.indexHtml); if (this.supportstorage()) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } return true; } return false; /* * $.ajax({ type: "POST", url: "/build/getPreviousLayout", data: { }, * success: function(data) { undoOperation(data); } }); */ }, /** * 重做布局 * @returns {Boolean} */ redoLayout:function () { var data = layouthistory; if (data) { if (data.list[data.count]) { window.indexHtml = data.list[data.count]; data.count++; $(layoutClass).html(window.indexHtml); if (this.supportstorage()) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } return true; } } return false; /* * $.ajax({ type: "POST", url: "/build/getPreviousLayout", data: { }, * success: function(data) { redoOperation(data); } }); */ }, /** * 处理js的ID */ handleJsIds:function () { this.handleModalIds(); this.handleAccordionIds(); this.handleCarouselIds(); this.handleTabsIds(); }, handleAccordionIds:function () { var me = this, e = $(layoutClass+" #myAccordion"), t = me.randomNumber(), n = "accordion-" + t, r; e.attr("id", n); e.find(".accordion-group").each(function(e, t) { r = "accordion-element-" + me.randomNumber(); $(t).find(".accordion-toggle").each(function(e, t) { $(t).attr("data-parent", "#" + n); $(t).attr("href", "#" + r); }); $(t).find(".accordion-body").each(function(e, t) { $(t).attr("id", r); }); }); }, handleCarouselIds:function () { var e = $(layoutClass +" #myCarousel"), t = this.randomNumber(), n = "carousel-" + t; e.attr("id", n); e.find(".carousel-indicators li").each(function(e, t) { $(t).attr("data-target", "#" + n); }); e.find(".left").attr("href", "#" + n); e.find(".right").attr("href", "#" + n); }, handleModalIds:function () { var me = this, e = $(layoutClass+" #myModalLink"), t = me.randomNumber(), n = "modal-container-" + t, r = "modal-" + t; e.attr("id", r); e.attr("href", "#" + n); e.next().attr("id", n); }, handleTabsIds:function () { var me = this, e = $(layoutClass+" #myTabs"), t = me.randomNumber(), n = "tabs-" + t; e.attr("id", n); e.find(".tab-pane").each(function(e, t) { var n = $(t).attr("id"); var r = "panel-" + me.randomNumber(); $(t).attr("id", r); $(t).parent().parent().find("a[href=#" + n + "]").attr("href", "#" + r); }); }, // 随机一个1到 randomNumber:function () { return this.randomFromInterval(1, 1e6); }, randomFromInterval: function (e, t) { return Math.floor(Math.random() * (t - e + 1) + e); }, gridSystemGenerator:function () { $(".lyrow .preview input").bind("keyup", function() { var e = 0, t = "", n = $(this).val().split(" ", 12); $.each(n, function(n, r) { e = e + parseInt(r); t += ''; }); if (e == 12) { $(this).parent().next().children().html(t); $(this).parent().prev().show(); } else { $(this).parent().prev().hide(); } }); }, selectTemplate:function(){ var me = this; BootstrapDialog.show({ title : '选择模版', size: BootstrapDialog.SIZE_WIDE, url:__ctx+"/platform/system/sysIndexLayoutManage/selectTemplate.ht", //回调函数 sucCall:function(rtn){ $(layoutClass).html(rtn); me.initData(); indexPagePlugin.initUIEvent(); } }); }, //删除布局 deleteLayout:function(id){ BootstrapDialog.confirm("该操作是删除自己的布局,首页的布局取默认的布局。是否删除当前设计的布局?", function(rtn){ if(rtn){ $.ajax({ type : "POST", url : __ctx+"/platform/system/sysIndexMyLayout/deleteLayout.ht", data : { id : id }, success : function(data) { var obj = eval('(' + data + ')'); if (obj.result == 1) { BootstrapDialog.alert("删除成功!", function(){ window.location.href=__ctx+"/platform/system/sysIndexMyLayout/design.ht"; }); } else { BootstrapDialog.error(obj.message,"提示信息"); } } }); } }) }, /** * 初始化相关按钮操作 */ initOperation:function(){ var me = this; //保存编辑器内容 $("#savecontent").unbind("click").bind("click",function(e) { e.preventDefault(); //currenteditor.html(contenthandle.getData()); }); //下载(预览) $("[data-target=#downloadModal]").unbind("click").bind("click",function(e) { e.preventDefault(); me.downloadLayoutSrc(); }); $("[data-target=#saveMyModal]").unbind("click").bind("click",function(e) { e.preventDefault(); me.saveRemoteMyLayout(); }); //保存内容 $("#saveRemoteLayout").unbind("click").bind("click",function(e) { e.preventDefault(); me.saveRemoteLayout(); }); //下载 $("#download").unbind("click").bind("click",function() { me.downloadLayout(); return false; }); $("#downloadhtml").unbind("click").bind("click",function() { me.downloadHtmlLayout(); return false; }); //编辑 $("#edit").unbind("click").bind("click",function() { $("body").removeClass("devpreview sourcepreview"); $("body").addClass("edit"); me.removeMenuClasses(); $(this).addClass("active"); return false; }); $("#clear").unbind("click").bind("click",function(e) { e.preventDefault(); BootstrapDialog.confirm("是否清空布局?", function(rtn){ if(rtn) me.clearIndex(); }); }); $("#devpreview").unbind("click").bind("click",function() { $("body").removeClass("edit sourcepreview"); $("body").addClass("devpreview"); me.removeMenuClasses(); $(this).addClass("active"); return false; }); $("#sourcepreview").unbind("click").bind("click",function() { $("body").removeClass("edit"); $("body").addClass("devpreview sourcepreview"); me.removeMenuClasses(); $(this).addClass("active"); return false; }); //自适应宽度 $("#fluidPage").unbind("click").bind("click",function(e) { e.preventDefault(); me.changeStructure("container", "container-fluid"); $("#fixedPage").removeClass("active"); $(this).addClass("active"); me.downloadLayoutSrc(); }); //固定宽度 $("#fixedPage").unbind("click").bind("click",function(e) { e.preventDefault(); me.changeStructure("container-fluid", "container"); $("#fluidPage").removeClass("active"); $(this).addClass("active"); me.downloadLayoutSrc(); }); $(".nav-header").unbind("click").bind("click",function() { $(".sidebar-nav .boxes, .sidebar-nav .rows").hide(); $(this).next().slideDown(); }); //撤销 $('#undo').unbind("click").bind("click",function() { stopsave++; if (me.undoLayout()) me.initContainer(); stopsave--; }); //重做 $('#redo').unbind("click").bind("click",function() { stopsave++; if (me.redoLayout()) me.initContainer(); stopsave--; }); //设计模式的编辑 $('body.edit '+layoutClass).unbind("click").bind("click","[data-target=#editorModal]",function(e) { e.preventDefault(); //currenteditor = $(this).parent().parent().find('.view'); //var eText = currenteditor.html(); //contenthandle.setData(eText); }); $("#template").unbind("click").bind("click",function() { me.selectTemplate(); }); //删除我设计的布局 $('#button-delete-modal').unbind("click").bind("click",function() { me.deleteLayout($(this).attr('var')); }); } }; $.fn[pluginName] = function(options) { return this .each(function() { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); }; })(jQuery, window, document); $(document).ready(function() { $('body').indexLayout(); }); /** * 调整 */ $(window).resize(function() { indexLayoutPlugin.initSetting(); }); function selectOrg(){ var conf ={ isSingle:true, callback:function(orgId,orgName){ $('#orgId').val(orgId); $('#orgName').val(orgName); } }; if(!conf.isSingle)conf.isSingle=false; var scope={}; if(conf.scope) scope = (conf.scope).replace(/\'/g, '"'); var url=__ctx + '/platform/system/sysOrg/dialog.ht?isSingle=' + conf.isSingle; url=url.getNewUrl(); var that =this; BootstrapDialog.show({ title : '组织选择器', size: BootstrapDialog.SIZE_WIDE, url:url, scope : scope, //回调函数 sucCall:function(rtn){ conf.callback.call(that,rtn.orgId,rtn.orgName); } }); }