كود بلغة HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{ACPMAIN3}</title>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<small>
<a class="navbar-brand" href="admin.php">
<i class="fa fa-leaf"></i>
DRAKOLA
</a>
</small>
</div>
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
</a>
</li>
<li class="light-blue dropdown-modal">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<img class="nav-user-photo" src="assets/images/avatars/user.jpg" alt="KHALED's Photo" />
<span class="user-info">
<small>Welcome,</small>
KHALED
</span>
<i class="ace-icon fa fa-caret-down"></i>
</a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="admin.php?cont=edit_settings">
<i class="ace-icon fa fa-cog"></i>
Settings
</a>
</li>
<li>
<a href="profile.html">
<i class="ace-icon fa fa-user"></i>
Profile
</a>
</li>
<li class="divider"></li>
<li>
<a href="admin.php?cont=logout">
<i class="ace-icon fa fa-power-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-container -->
</div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try{ace.settings.loadState('sidebar')}catch(e){}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div><!-- /.sidebar-shortcuts -->
<ul class="nav nav-list">
<li class="active">
<a href="admin.php">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> HOME </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
{MENU01}
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_users">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0100}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_users">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0101}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_user">
<i class="c-blue-500 ti-user"></i>
{MENU0102}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_usergroups">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0103}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_usergroup">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0104}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-user"></i>
<span class="menu-text">{MENU02}</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_services">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0200}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_service">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0201}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_scheduled_services">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0202}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_service_history">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0203}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-comment"></i>
<span class="menu-text"> {MENU03} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_managers">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0300}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_manager">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0301}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-mouse-pointer"></i>
<span class="menu-text"> {MENU04} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_nases">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0400}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_nas">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0401}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-signal"></i>
<span class="menu-text"> {MENU05} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_ap">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0500}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_ap">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0501}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-info"></i>
<span class="menu-text"> {MENU07} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_pools">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0700}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_pool">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0701}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-leaf"></i>
<span class="menu-text"> {MENU08} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=search_invoices">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0800}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=batch_billing">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0801}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-qrcode"></i>
<span class="menu-text"> {MENU09} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_cardseries">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0900}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_users&listacctype=4">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0901}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_refillcards">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0902}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_refillcards">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0903}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=cardgen">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0904}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=cardstats">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0905}
</a>
<b class="arrow"></b>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-stack-exchange"></i>
<span class="menu-text"> {MENU10} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_users&listacctype=32">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1000}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_ias">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1001}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=new_ias">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1002}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-cogs"></i>
<span class="menu-text"> {MENU11} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=list_online_radius">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1100}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=traffic_report">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1102}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_traffic_data">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1103}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_traffic_summary">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1104}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_cts_data">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1105}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=search_postauth">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1106}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=quick_syslog">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1107}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=list_syslog">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1108}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=sysinfo">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1109}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=sysstats">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1110}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-plane"></i>
<span class="menu-text"> {MENU12} </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=show_bulkmail">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1200}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=show_bulksms">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1201}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=start_radius_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1202}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=stop_radius_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1203}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=restart_radius_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1204}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=resync_radius">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1205}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=start_dhcp_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1206}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=stop_dhcp_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1207}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=restart_dhcp_server">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1208}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=resync_dhcp">
<i class="menu-icon fa fa-caret-right"></i>
{MENU1209}
</a>
<b class="arrow"></b>
</li>
</li>
</ul>
</li>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-power-off"></i>
<span class="menu-text">
{MENU00}
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="admin.php?cont=edit_settings">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0001}
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="admin.php?cont=logout">
<i class="menu-icon fa fa-caret-right"></i>
{MENU0002}
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="admin.php">Home</a>
</li>
</ul><!-- /.breadcrumb -->
<div class="nav-search" id="nav-search">
<form action="admin.php?cont=list_users" method="post" class="sidebar-form" id="Form_search_users" name="form2" >
<span class="input-icon">
<input type="text" name="username" class="form-control" placeholder="Search...">
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
</form>
</div><!-- /.nav-search -->
</div>
<div class="page-content">
<div class="" id="">
<div class="" id="">
<i class=""></i>
</div>
</div><!-- /.pull-left -->
</div><!-- /.ace-settings-box -->
</div><!-- /.ace-settings-container -->
</nav>
<div class="container">
<div class="visible-sm" style="margin-top: 20px;"> </div>
<div class="kangndo">
{CONTENT}
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<footer class="footer">
<div class="container-fluid">
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="assets/js/jquery-ui.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/jquery.easypiechart.min.js"></script>
<script src="assets/js/jquery.sparkline.index.min.js"></script>
<script src="assets/js/jquery.flot.min.js"></script>
<script src="assets/js/jquery.flot.pie.min.js"></script>
<script src="assets/js/jquery.flot.resize.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
$('.easy-pie-chart.percentage').each(function(){
var $box = $(this).closest('.infobox');
var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
var size = parseInt($(this).data('size')) || 50;
$(this).easyPieChart({
barColor: barColor,
trackColor: trackColor,
scaleColor: false,
lineCap: 'butt',
lineWidth: parseInt(size/10),
animate: ace.vars['old_ie'] ? false : 1000,
size: size
});
})
$('.sparkline').each(function(){
var $box = $(this).closest('.infobox');
var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
$(this).sparkline('html',
{
tagValuesAttribute:'data-values',
type: 'bar',
barColor: barColor ,
chartRangeMin:$(this).data('min') || 0
});
});
//flot chart resize plugin, somehow manipulates default browser resize event to optimize it!
//but sometimes it brings up errors with normal resize event handlers
$.resize.throttleWindow = false;
var placeholder = $('#piechart-placeholder').css({'width':'90%' , 'min-height':'150px'});
var data = [
{ label: "social networks", data: 38.7, color: "#68BC31"},
{ label: "search engines", data: 24.5, color: "#2091CF"},
{ label: "ad campaigns", data: 8.2, color: "#AF4E96"},
{ label: "direct traffic", data: 18.6, color: "#DA5430"},
{ label: "other", data: 10, color: "#FEE074"}
]
function drawPieChart(placeholder, data, position) {
$.plot(placeholder, data, {
series: {
pie: {
show: true,
tilt:0.8,
highlight: {
opacity: 0.25
},
stroke: {
color: '#fff',
width: 2
},
startAngle: 2
}
},
legend: {
show: true,
position: position || "ne",
labelBoxBorderColor: null,
margin:[-30,15]
}
,
grid: {
hoverable: true,
clickable: true
}
})
}
drawPieChart(placeholder, data);
/**
we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
so that's not needed actually.
*/
placeholder.data('chart', data);
placeholder.data('draw', drawPieChart);
//pie chart tooltip example
var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
var previousPoint = null;
placeholder.on('plothover', function (event, pos, item) {
if(item) {
if (previousPoint != item.seriesIndex) {
previousPoint = item.seriesIndex;
var tip = item.series['label'] + " : " + item.series['percent']+'%';
$tooltip.show().children(0).text(tip);
}
$tooltip.css({top:pos.pageY + 10, left:pos.pageX + 10});
} else {
$tooltip.hide();
previousPoint = null;
}
});
/////////////////////////////////////
$(document).one('ajaxloadstart.page', function(e) {
$tooltip.remove();
});
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.5) {
d2.push([i, Math.cos(i)]);
}
var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.2) {
d3.push([i, Math.tan(i)]);
}
var sales_charts = $('#sales-charts').css({'width':'100%' , 'height':'220px'});
$.plot("#sales-charts", [
{ label: "Domains", data: d1 },
{ label: "Hosting", data: d2 },
{ label: "Services", data: d3 }
], {
hoverable: true,
shadowSize: 0,
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
tickLength: 0
},
yaxis: {
ticks: 10,
min: -2,
max: 2,
tickDecimals: 3
},
grid: {
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor:'#555'
}
});
$('#recent-box [data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('.tab-content')
var off1 = $parent.offset();
var w1 = $parent.width();
var off2 = $source.offset();
//var w2 = $source.width();
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
return 'left';
}
$('.dialogs,.comments').ace_scroll({
size: 300
});
//Android's default browser somehow is confused when tapping on label which will lead to dragging the task
//so disable dragging when clicking on label
var agent = navigator.userAgent.toLowerCase();
if(ace.vars['touch'] && ace.vars['android']) {
$('#tasks').on('touchstart', function(e){
var li = $(e.target).closest('#tasks li');
if(li.length == 0)return;
var label = li.find('label.inline').get(0);
if(label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation() ;
});
}
$('#tasks').sortable({
opacity:0.8,
revert:true,
forceHelperSize:true,
placeholder: 'draggable-placeholder',
forcePlaceholderSize:true,
tolerance:'pointer',
stop: function( event, ui ) {
//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
$(ui.item).css('z-index', 'auto');
}
}
);
$('#tasks').disableSelection();
$('#tasks input:checkbox').removeAttr('checked').on('click', function(){
if(this.checked) $(this).closest('li').addClass('selected');
else $(this).closest('li').removeClass('selected');
});
//show the dropdowns on top or bottom depending on window height and menu position
$('#task-tab .dropdown-hover').on('mouseenter', function(e) {
var offset = $(this).offset();
var $w = $(window)
if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)
$(this).addClass('dropup');
else $(this).removeClass('dropup');
});
})
</script>
</body>
</html>
</SCRIPT>