working on help tips

This commit is contained in:
Botanic 2013-06-17 00:25:04 -07:00
parent 93937db2d9
commit b7052ff21c
5 changed files with 79 additions and 57 deletions

View file

@ -3,9 +3,9 @@ $(document).ready(function(){
//default theme(CSS) is cerulean, change it if needed //default theme(CSS) is cerulean, change it if needed
var current_theme = $.cookie('current_theme')==null ? 'cerulean' :$.cookie('current_theme'); var current_theme = $.cookie('current_theme')==null ? 'cerulean' :$.cookie('current_theme');
switch_theme(current_theme); switch_theme(current_theme);
$('#themes a[data-value="'+current_theme+'"]').find('i').addClass('icon-ok'); $('#themes a[data-value="'+current_theme+'"]').find('i').addClass('icon-ok');
$('#themes a').click(function(e){ $('#themes a').click(function(e){
e.preventDefault(); e.preventDefault();
current_theme=$(this).attr('data-value'); current_theme=$(this).attr('data-value');
@ -14,19 +14,19 @@ $(document).ready(function(){
$('#themes i').removeClass('icon-ok'); $('#themes i').removeClass('icon-ok');
$(this).find('i').addClass('icon-ok'); $(this).find('i').addClass('icon-ok');
}); });
function switch_theme(theme_name) function switch_theme(theme_name)
{ {
$('#bs-css').attr('href','css/bootstrap-'+theme_name+'.css'); $('#bs-css').attr('href','css/bootstrap-'+theme_name+'.css');
} }
//ajax menu checkbox //ajax menu checkbox
$('#is-ajax').click(function(e){ $('#is-ajax').click(function(e){
$.cookie('is-ajax',$(this).prop('checked'),{expires:365}); $.cookie('is-ajax',$(this).prop('checked'),{expires:365});
}); });
$('#is-ajax').prop('checked',$.cookie('is-ajax')==='true' ? true : false); $('#is-ajax').prop('checked',$.cookie('is-ajax')==='true' ? true : false);
//disbaling some functions for Internet Explorer //disbaling some functions for Internet Explorer
if($.browser.msie) if($.browser.msie)
{ {
@ -34,16 +34,16 @@ $(document).ready(function(){
$('#for-is-ajax').hide(); $('#for-is-ajax').hide();
$('#toggle-fullscreen').hide(); $('#toggle-fullscreen').hide();
$('.login-box').find('.input-large').removeClass('span10'); $('.login-box').find('.input-large').removeClass('span10');
} }
//highlight current / active link //highlight current / active link
$('ul.main-menu li a').each(function(){ $('ul.main-menu li a').each(function(){
if($($(this))[0].href==String(window.location)) if($($(this))[0].href==String(window.location))
$(this).parent().addClass('active'); $(this).parent().addClass('active');
}); });
//establish history variables //establish history variables
var var
History = window.History, // Note: We are using a capital H instead of a lower h History = window.History, // Note: We are using a capital H instead of a lower h
@ -65,7 +65,7 @@ $(document).ready(function(){
} }
}); });
}); });
//ajaxify menus //ajaxify menus
$('a.ajax-link').click(function(e){ $('a.ajax-link').click(function(e){
if($.browser.msie) e.which=1; if($.browser.msie) e.which=1;
@ -80,9 +80,9 @@ $(document).ready(function(){
var $clink=$(this); var $clink=$(this);
History.pushState(null, null, $clink.attr('href')); History.pushState(null, null, $clink.attr('href'));
$('ul.main-menu li.active').removeClass('active'); $('ul.main-menu li.active').removeClass('active');
$clink.parent('li').addClass('active'); $clink.parent('li').addClass('active');
}); });
//animating menus on hover //animating menus on hover
$('ul.main-menu li:not(.nav-header)').hover(function(){ $('ul.main-menu li:not(.nav-header)').hover(function(){
$(this).animate({'margin-left':'+=5'},300); $(this).animate({'margin-left':'+=5'},300);
@ -90,24 +90,24 @@ $(document).ready(function(){
function(){ function(){
$(this).animate({'margin-left':'-=5'},300); $(this).animate({'margin-left':'-=5'},300);
}); });
//other things to do on document ready, seperated for ajax calls //other things to do on document ready, seperated for ajax calls
docReady(); docReady();
}); });
function docReady(){ function docReady(){
//prevent # links from moving to top //prevent # links from moving to top
$('a[href="#"][data-top!=true]').click(function(e){ $('a[href="#"][data-top!=true]').click(function(e){
e.preventDefault(); e.preventDefault();
}); });
//rich text editor //rich text editor
$('.cleditor').cleditor(); $('.cleditor').cleditor();
//datepicker //datepicker
$('.datepicker').datepicker(); $('.datepicker').datepicker();
//notifications //notifications
$('.noty').click(function(e){ $('.noty').click(function(e){
e.preventDefault(); e.preventDefault();
@ -226,7 +226,7 @@ function docReady(){
}); });
//tour //tour
if($('.tour').length && typeof(tour)=='undefined') if($('.index').length && typeof(tour)=='undefined')
{ {
var tour = new Tour(); var tour = new Tour();
tour.addStep({ tour.addStep({
@ -246,18 +246,7 @@ function docReady(){
title: "Dashboard", title: "Dashboard",
content: "This is your dashboard from here you will find highlights." content: "This is your dashboard from here you will find highlights."
}); });
tour.addStep({
element: "#for-is-ajax",
title: "Ajax",
content: "You can change if pages load with Ajax or not."
});
tour.addStep({
element: ".top-nav a:first",
placement: "bottom",
title: "Visit Site",
content: "Visit your front end from here."
});
tour.restart(); tour.restart();
} }
@ -284,10 +273,13 @@ function docReady(){
e.preventDefault(); e.preventDefault();
$('#myModal').modal('show'); $('#myModal').modal('show');
}); });
$('.btn-help').click(function(e){
alert('test');
});
//initialize the external events for calender //initialize the external events for calender
$('#external-events div.external-event').each(function() { $('#external-events div.external-event').each(function() {
@ -296,17 +288,17 @@ function docReady(){
var eventObject = { var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title title: $.trim($(this).text()) // use the element's text as the event title
}; };
// store the Event Object in the DOM element so we can get to it later // store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject); $(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI // make the event draggable using jQuery UI
$(this).draggable({ $(this).draggable({
zIndex: 999, zIndex: 999,
revert: true, // will cause the event to go back to its revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag revertDuration: 0 // original position after the drag
}); });
}); });
@ -320,31 +312,31 @@ function docReady(){
editable: true, editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!! droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object // retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject'); var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object // we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject); var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported // assign it the date that was reported
copiedEventObject.start = date; copiedEventObject.start = date;
copiedEventObject.allDay = allDay; copiedEventObject.allDay = allDay;
// render the event on the calendar // render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked? // is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) { if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list // if so, remove the element from the "Draggable Events" list
$(this).remove(); $(this).remove();
} }
} }
}); });
//chart with points //chart with points
if($("#sincos").length) if($("#sincos").length)
{ {
@ -401,7 +393,7 @@ function docReady(){
previousPoint = null; previousPoint = null;
} }
}); });
$("#sincos").bind("plotclick", function (event, pos, item) { $("#sincos").bind("plotclick", function (event, pos, item) {
@ -411,14 +403,14 @@ function docReady(){
} }
}); });
} }
//flot chart //flot chart
if($("#flotchart").length) if($("#flotchart").length)
{ {
var d1 = []; var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25) for (var i = 0; i < Math.PI * 2; i += 0.25)
d1.push([i, Math.sin(i)]); d1.push([i, Math.sin(i)]);
var d2 = []; var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25) for (var i = 0; i < Math.PI * 2; i += 0.25)
d2.push([i, Math.cos(i)]); d2.push([i, Math.cos(i)]);
@ -426,7 +418,7 @@ function docReady(){
var d3 = []; var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1) for (var i = 0; i < Math.PI * 2; i += 0.1)
d3.push([i, Math.tan(i)]); d3.push([i, Math.tan(i)]);
$.plot($("#flotchart"), [ $.plot($("#flotchart"), [
{ label: "sin(x)", data: d1}, { label: "sin(x)", data: d1},
{ label: "cos(x)", data: d2}, { label: "cos(x)", data: d2},
@ -449,7 +441,7 @@ function docReady(){
} }
}); });
} }
//stack chart //stack chart
if($("#stackchart").length) if($("#stackchart").length)
{ {
@ -502,7 +494,7 @@ function docReady(){
{ label: "Firefox", data: 90}, { label: "Firefox", data: 90},
{ label: "Chrome", data: 112} { label: "Chrome", data: 112}
]; ];
if($("#piechart").length) if($("#piechart").length)
{ {
$.plot($("#piechart"), data, $.plot($("#piechart"), data,
@ -520,7 +512,7 @@ function docReady(){
show: false show: false
} }
}); });
function pieHover(event, pos, obj) function pieHover(event, pos, obj)
{ {
if (!obj) if (!obj)
@ -530,7 +522,7 @@ function docReady(){
} }
$("#piechart").bind("plothover", pieHover); $("#piechart").bind("plothover", pieHover);
} }
//donut chart //donut chart
if($("#donutchart").length) if($("#donutchart").length)
{ {
@ -603,7 +595,7 @@ function docReady(){
plot.setData([ getRandomData() ]); plot.setData([ getRandomData() ]);
// since the axes don't change, we don't need to call plot.setupGrid() // since the axes don't change, we don't need to call plot.setupGrid()
plot.draw(); plot.draw();
setTimeout(update, updateInterval); setTimeout(update, updateInterval);
} }

View file

@ -0,0 +1,26 @@
function show_help(help_tip)
{
if(help_tip =='test')
{
var tour = new Tour();
tour.addStep({
element: ".span10:first", /* html element next to which the step popover should be shown */
placement: "top",
title: "Custom Tour", /* title of the popover */
content: "You can create tour like this. Click Next." /* content of the popover */
});
tour.addStep({
element: ".theme-container",
placement: "left",
title: "Themes",
content: "You change your theme from here."
});
tour.addStep({
element: "ul.main-menu a:first",
title: "Dashboard",
content: "This is your dashboard from here you will find highlights."
});
tour.restart();
}
}

View file

@ -31,7 +31,7 @@
</ul> </ul>
</div> </div>
<!-- theme selector ends --> <!-- theme selector ends -->
<button onclick="show_help('test')">Help Test</button>
<!-- user dropdown starts --> <!-- user dropdown starts -->
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@ -114,6 +114,7 @@
<div class="box-header well"> <div class="box-header well">
<h2><i class="icon-info-sign"></i> Introduction</h2> <h2><i class="icon-info-sign"></i> Introduction</h2>
<div class="box-icon"> <div class="box-icon">
<a href="#" class="btn btn-help btn-round"><i class="icon-info-sign"></i></a>
<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a> <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a> <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a> <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>

View file

@ -233,6 +233,9 @@
<script src="js/jquery.history.js"></script> <script src="js/jquery.history.js"></script>
<!-- application script for Charisma demo --> <!-- application script for Charisma demo -->
<script src="js/charisma.js"></script> <script src="js/charisma.js"></script>
<!-- help script for page help -->
<script src="js/help.js"></script>
</body> </body>

View file

@ -12,7 +12,7 @@
<div class="alert alert-info"> <div class="alert alert-info">
{$welcome_message} {$welcome_message}
</div> </div>
<form name="Page1"method="post"> <form name="Page1"method="post">
<table> <table>
@ -27,7 +27,7 @@
onfocus= onfocus=
"javascript:showTooltip('{$username_tooltip}', this);" /> "javascript:showTooltip('{$username_tooltip}', this);" />
</td> </td>
<td id="comment-Username" {if isset($USERNAME_ERROR) && $USERNAME_ERROR eq "TRUE"}class="error"{/if} width="42%">{if isset($Username)}{$Username}{/if}</td> <td id="comment-Username" {if isset($USERNAME_ERROR) && $USERNAME_ERROR eq "TRUE"}class="error"{/if} width="42%">{if isset($Username)}{$Username}{/if}</td>
</tr> </tr>
@ -124,7 +124,7 @@
</div> </div>
</div> </div>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
{/block} {/block}