1、WebIDE交互重构;

2、左侧菜单选中逻辑优化;
3、滚动到顶部插件优化
This commit is contained in:
xueli.xue 2017-03-22 19:42:45 +08:00
parent 9346d73591
commit 54dc233738
13 changed files with 176 additions and 132 deletions

View File

@ -31,6 +31,11 @@ public class JobCodeController {
public String index(Model model, int jobId) {
XxlJobInfo jobInfo = xxlJobInfoDao.loadById(jobId);
List<XxlJobLogGlue> jobLogGlues = xxlJobLogGlueDao.findByJobId(jobId);
if (jobInfo == null) {
throw new RuntimeException("抱歉,任务不存在.");
}
model.addAttribute("jobInfo", jobInfo);
model.addAttribute("jobLogGlues", jobLogGlues);
return "jobcode/jobcode.index";

View File

@ -24,8 +24,6 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- scrollup -->
<link rel="stylesheet" href="${request.contextPath}/static/plugins/scrollup/image.css">
<!-- pace -->
<link rel="stylesheet" href="${request.contextPath}/static/plugins/pace/themes/pace-theme-flash.css">
</#macro>
@ -39,9 +37,9 @@
<script src="${request.contextPath}/static/adminlte/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${request.contextPath}/static/adminlte/dist/js/app.min.js"></script>
<#-- jquery.slimscroll -->
<script src="${request.contextPath}/static/adminlte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- scrollup -->
<script src="${request.contextPath}/static/plugins/scrollup/jquery.scrollUp.min.js"></script>
<!-- pace -->
<script src="${request.contextPath}/static/plugins/pace/pace.min.js"></script>
<#-- jquery cookie -->
@ -75,7 +73,7 @@
</header>
</#macro>
<#macro commonLeft>
<#macro commonLeft pageName >
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
@ -83,10 +81,10 @@
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">常用模块</li>
<li class="nav-click" ><a href="${request.contextPath}/jobinfo"><i class="fa fa-circle-o text-red"></i> <span>调度管理</span></a></li>
<li class="nav-click" ><a href="${request.contextPath}/joblog"><i class="fa fa-circle-o text-yellow"></i><span>调度日志</span></a></li>
<li class="nav-click" ><a href="${request.contextPath}/jobgroup"><i class="fa fa-circle-o text-aqua"></i> <span>执行器管理</span></a></li>
<li class="nav-click" ><a href="${request.contextPath}/help"><i class="fa fa-circle-o text-red"></i><span>使用教程</span></a></li>
<li class="nav-click <#if pageName == "jobinfo">active</#if>" ><a href="${request.contextPath}/jobinfo"><i class="fa fa-circle-o text-red"></i> <span>调度管理</span></a></li>
<li class="nav-click <#if pageName == "joblog">active</#if>" ><a href="${request.contextPath}/joblog"><i class="fa fa-circle-o text-yellow"></i><span>调度日志</span></a></li>
<li class="nav-click <#if pageName == "jobgroup">active</#if>" ><a href="${request.contextPath}/jobgroup"><i class="fa fa-circle-o text-aqua"></i> <span>执行器管理</span></a></li>
<li class="nav-click <#if pageName == "help">active</#if>" ><a href="${request.contextPath}/help"><i class="fa fa-circle-o text-red"></i><span>使用教程</span></a></li>
</ul>
</section>
<!-- /.sidebar -->

View File

@ -10,7 +10,7 @@
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft />
<@netCommon.commonLeft "help" />
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

View File

@ -8,86 +8,98 @@
<link rel="stylesheet" href="${request.contextPath}/static/plugins/codemirror/addon/hint/show-hint.css">
<style type="text/css">
.CodeMirror {
border: 0px solid black;
font-size:16px;
width: 100%;
height: 100%;
/*bottom: 0;
top: 0px;*/
position: absolute;
}
</style>
</head>
<body class=" layout-top-nav">
<body class="skin-blue fixed layout-top-nav">
<#if !jobInfo?exists>
<div class="wrapper">
<div class="content-wrapper">
<section class="content-header">
<h1>抱歉任务不存在.</small></h1>
</section>
</div>
</div>
<#else>
<div class="wrapper">
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<#--<section class="content-header">
<h1>任务调度中心<small>任务GLUE管理</small></h1>
</section>-->
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-4">
<div class="input-group margin">
<div class="input-group-btn">
<button type="button" class="btn btn-info">版本回溯</button>
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<#-- icon -->
<div class="navbar-header">
<a href="../../index2.html" class="navbar-brand"><b>Web</b>IDE</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<select class="form-control" id="glue_version" >
<option value="glue_now" >${jobInfo.glueRemark}线上</option>
<#-- left nav -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" ><a href="#">任务:${jobInfo.jobDesc}<span class="sr-only">(current)</span></a></li>
</ul>
</div>
<#-- right nav -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">版本回溯 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:;" class="source_version" version="version_now" >${jobInfo.glueRemark}【OnLine】</a></li>
<textarea id="version_now" style="display:none;" >${jobInfo.glueSource}</textarea>
<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
<#list jobLogGlues as glue>
<option value="glue_log_${glue.id}" >${glue.glueRemark}</option>
<li><a href="javascript:;" class="source_version" version="version_${glue.id}" >${glue.glueRemark}</a></li>
<textarea id="version_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
</#list>
</#if>
</select>
<textarea id="glue_now" style="display:none;" >${jobInfo.glueSource}</textarea>
<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
<#list jobLogGlues as glue>
<textarea id="glue_log_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
</#list>
</#if>
</div>
</div>
<div class="col-xs-4">
<div class="input-group margin">
<div class="input-group-btn">
<button type="button" class="btn btn-info">备注</button>
</div>
<input type="text" class="form-control" id="glueRemark" value="" autocomplete="on" >
</div>
</div>
<div class="col-xs-2">
<div class="input-group margin">
<div class="input-group-btn">
<button type="button" class="btn btn-primary" id="save" >保存</button>
</div>
</div>
</div>
</ul>
</li>
<li id="save" >
<a href="javascript:;" >
<i class="fa fa-fw fa-save" ></i>
保存
</a>
</li>
</ul>
</div>
<div class="row" id="glueSource" >
<#--<div class="col-xs-12">
<div class="box callout callout-info">
<textarea id="glueSource" ></textarea>
</div>
</div>-->
</div>
</section>
</div>
</nav>
</header>
<div class="content-wrapper" id="ideWindow" ></div>
<!-- footer -->
<#--<@netCommon.commonFooter />-->
</div>
<!-- 保存.模态框 -->
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" ><i class="fa fa-bars"></i>保存</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form" role="form" >
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">源码备注<font color="red">*</font></label>
<div class="col-sm-10"><input type="text" class="form-control" id="glueRemark" placeholder="请输入备注信息" maxlength="64" ></div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="button" class="btn btn-primary ok" >保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<@netCommon.commonScript />
<script src="${request.contextPath}/static/plugins/codemirror/lib/codemirror.js"></script>
<script src="${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js"></script>
@ -98,6 +110,5 @@ var id = '${jobInfo.id}';
</script>
<script src="${request.contextPath}/static/js/jobcode.index.1.js"></script>
</#if>
</body>
</html>

View File

@ -14,7 +14,7 @@
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft />
<@netCommon.commonLeft "jobgroup" />
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

View File

@ -19,7 +19,7 @@
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft />
<@netCommon.commonLeft "jobinfo" />
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

View File

@ -14,7 +14,7 @@
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft />
<@netCommon.commonLeft "joblog" />
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

View File

@ -0,0 +1,16 @@
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 1.3.8
*
*/
(function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=
l*(b[0].scrollHeight-b.outerHeight());e&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),f),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);

View File

@ -1,20 +1,5 @@
$(function(){
// 导航栏,选中样式处理js遍历匹配url遗弃
$(".nav-click").removeClass("active");
$(".nav-click").each(function(){
if( window.location.href.indexOf( $(this).find("a").attr("href") ) > -1){
$(this).addClass("active");
$(this).parents(".nav-click").addClass("active");
}
});
// scrollup
$.scrollUp({
animation: 'fade', // fade/slide/none
scrollImg: true
});
// logout
$("#logoutBtn").click(function(){
ComConfirm.show("确认注销登录?", function(){
@ -30,6 +15,48 @@ $(function(){
});
});
// slideToTop
var slideToTop = $("<div />");
slideToTop.html('<i class="fa fa-chevron-up"></i>');
slideToTop.css({
position: 'fixed',
bottom: '20px',
right: '25px',
width: '40px',
height: '40px',
color: '#eee',
'font-size': '',
'line-height': '40px',
'text-align': 'center',
'background-color': '#222d32',
cursor: 'pointer',
'border-radius': '5px',
'z-index': '99999',
opacity: '.7',
'display': 'none'
});
slideToTop.on('mouseenter', function () {
$(this).css('opacity', '1');
});
slideToTop.on('mouseout', function () {
$(this).css('opacity', '.7');
});
$('.wrapper').append(slideToTop);
$(window).scroll(function () {
if ($(window).scrollTop() >= 150) {
if (!$(slideToTop).is(':visible')) {
$(slideToTop).fadeIn(500);
}
} else {
$(slideToTop).fadeOut(500);
}
});
$(slideToTop).click(function () {
$("body").animate({
scrollTop: 0
}, 100);
});
// 左侧菜单状态js + 后端 + cookie方式
$('.sidebar-toggle').click(function(){
var adminlte_settings = $.cookie('adminlte_settings'); // 左侧菜单展开状态[adminlte_settings]on=展开off=折叠

View File

@ -6,25 +6,27 @@ $(function() {
lineNumbers : true,
matchBrackets : true
});*/
var codeEditor = CodeMirror(document.getElementById("glueSource"), {
var codeEditor = CodeMirror(document.getElementById("ideWindow"), {
mode : "text/x-java",
lineNumbers : true,
matchBrackets : true
matchBrackets : true,
value: $("#version_now").val()
});
codeEditor.setValue( $("#glue_now").val() );
// code change
$("#glue_version").change(function(){
var temp = $( "#" + $(this).val() ).val();
$(".source_version").click(function(){
var sourceId = $(this).attr('version');
var temp = $( "#" + sourceId ).val();
codeEditor.setValue( temp );
});
// editor height
var height = Math.max(document.documentElement.clientHeight, document.body.offsetHeight);
$(".CodeMirror").attr('style', 'height:'+ height +'px');
// code source save
$("#save").click(function() {
$('#saveModal').modal({backdrop: false, keyboard: false}).modal('show');
});
$("#saveModal .ok").click(function() {
var glueSource = codeEditor.getValue();
var glueRemark = $("#glueRemark").val();

View File

@ -1,8 +0,0 @@
/* Image style */
#scrollUp {
background-image: url('top.png');
bottom: 20px;
right: 20px;
width: 38px; /* Width of image */
height: 38px; /* Height of image */
}

View File

@ -1,7 +0,0 @@
/*!
* scrollup v2.4.1
* Url: http://markgoodyear.com/labs/scrollup/
* Copyright (c) Mark Goodyear @markgdyr http://markgoodyear.com
* License: MIT
*/
!function(l,o,e){"use strict";l.fn.scrollUp=function(o){l.data(e.body,"scrollUp")||(l.data(e.body,"scrollUp",!0),l.fn.scrollUp.init(o))},l.fn.scrollUp.init=function(r){var s,t,c,i,n,a,d,p=l.fn.scrollUp.settings=l.extend({},l.fn.scrollUp.defaults,r),f=!1;switch(d=p.scrollTrigger?l(p.scrollTrigger):l("<a/>",{id:p.scrollName,href:"#top"}),p.scrollTitle&&d.attr("title",p.scrollTitle),d.appendTo("body"),p.scrollImg||p.scrollTrigger||d.html(p.scrollText),d.css({display:"none",position:"fixed",zIndex:p.zIndex}),p.activeOverlay&&l("<div/>",{id:p.scrollName+"-active"}).css({position:"absolute",top:p.scrollDistance+"px",width:"100%",borderTop:"1px dotted"+p.activeOverlay,zIndex:p.zIndex}).appendTo("body"),p.animation){case"fade":s="fadeIn",t="fadeOut",c=p.animationSpeed;break;case"slide":s="slideDown",t="slideUp",c=p.animationSpeed;break;default:s="show",t="hide",c=0}i="top"===p.scrollFrom?p.scrollDistance:l(e).height()-l(o).height()-p.scrollDistance,n=l(o).scroll(function(){l(o).scrollTop()>i?f||(d[s](c),f=!0):f&&(d[t](c),f=!1)}),p.scrollTarget?"number"==typeof p.scrollTarget?a=p.scrollTarget:"string"==typeof p.scrollTarget&&(a=Math.floor(l(p.scrollTarget).offset().top)):a=0,d.click(function(o){o.preventDefault(),l("html, body").animate({scrollTop:a},p.scrollSpeed,p.easingType)})},l.fn.scrollUp.defaults={scrollName:"scrollUp",scrollDistance:300,scrollFrom:"top",scrollSpeed:300,easingType:"linear",animation:"fade",animationSpeed:200,scrollTrigger:!1,scrollTarget:!1,scrollText:"Scroll to top",scrollTitle:!1,scrollImg:!1,activeOverlay:!1,zIndex:2147483647},l.fn.scrollUp.destroy=function(r){l.removeData(e.body,"scrollUp"),l("#"+l.fn.scrollUp.settings.scrollName).remove(),l("#"+l.fn.scrollUp.settings.scrollName+"-active").remove(),l.fn.jquery.split(".")[1]>=7?l(o).off("scroll",r):l(o).unbind("scroll",r)},l.scrollUp=l.fn.scrollUp}(jQuery,window,document);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 698 B