336 lines
18 KiB
PHP
336 lines
18 KiB
PHP
<?php
|
|
|
|
//initilize the page
|
|
require_once 'init.web.php';
|
|
|
|
/*---------------- PHP Custom Scripts ---------
|
|
|
|
YOU CAN SET CONFIGURATION VARIABLES HERE BEFORE IT GOES TO NAV, RIBBON, ETC.
|
|
E.G. $page_title = "Custom Title" */
|
|
|
|
$page_title = "Chat";
|
|
|
|
/* ---------------- END PHP Custom Scripts ------------- */
|
|
|
|
//include header
|
|
//you can add your custom css in $page_css array.
|
|
//Note: all css files are inside css/ folder
|
|
$page_css[] = "your_style.css";
|
|
include("inc/header.php");
|
|
|
|
//include left panel (navigation)
|
|
//follow the tree in inc/config.ui.php
|
|
//$page_nav["misc"]["sub"]["blank"]["active"] = true;
|
|
include("inc/nav.php");
|
|
|
|
?>
|
|
<!-- ==========================CONTENT STARTS HERE ========================== -->
|
|
|
|
<!-- MAIN PANEL -->
|
|
<div id="main" role="main">
|
|
|
|
<!-- RIBBON -->
|
|
<div id="ribbon">
|
|
|
|
<span class="ribbon-button-alignment">
|
|
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true">
|
|
<i class="fa fa-refresh"></i>
|
|
</span>
|
|
</span>
|
|
|
|
<!-- breadcrumb -->
|
|
<ol class="breadcrumb">
|
|
<li>Home</li><li>Miscellaneous</li><li>Blank Page</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- You can also add more buttons to the
|
|
ribbon for further usability
|
|
|
|
Example below:
|
|
|
|
<span class="ribbon-button-alignment pull-right">
|
|
<span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
|
|
<span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
|
|
<span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
|
|
</span> -->
|
|
|
|
</div>
|
|
<!-- END RIBBON -->
|
|
|
|
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div id="content">
|
|
|
|
<!-- row -->
|
|
<div class="row">
|
|
|
|
<!-- col -->
|
|
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
|
|
<h1 class="page-title txt-color-blueDark">
|
|
|
|
<!-- PAGE HEADER -->
|
|
<i class="fa-fw fa fa-home"></i>
|
|
Page Header
|
|
<span>>
|
|
Subtitle
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
<!-- right side of the page with the sparkline graphs -->
|
|
<!-- col -->
|
|
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
|
|
<!-- sparks -->
|
|
<ul id="sparks">
|
|
<li class="sparks-info">
|
|
<h5> My Income <span class="txt-color-blue">$47,171</span></h5>
|
|
<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
|
|
1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
|
|
</div>
|
|
</li>
|
|
<li class="sparks-info">
|
|
<h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i> 45%</span></h5>
|
|
<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
|
|
110,150,300,130,400,240,220,310,220,300, 270, 210
|
|
</div>
|
|
</li>
|
|
<li class="sparks-info">
|
|
<h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i> 2447</span></h5>
|
|
<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
|
|
110,150,300,130,400,240,220,310,220,300, 270, 210
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- end sparks -->
|
|
</div>
|
|
<!-- end col -->
|
|
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<!--
|
|
The ID "widget-grid" will start to initialize all widgets below
|
|
You do not need to use widgets if you dont want to. Simply remove
|
|
the <section></section> and you can use wells or panels instead
|
|
-->
|
|
|
|
<!-- widget grid -->
|
|
<section id="widget-grid" class="">
|
|
|
|
|
|
<div class="alert alert-warning">
|
|
<strong>Description:</strong> This is a jQuery UI plugin serves as the front end of a simple Comet chat server. It is a pure UI plugin so you can easily plug it into whatever communication protocol of your choice.
|
|
</div>
|
|
<!-- row -->
|
|
<div class="row">
|
|
|
|
<!-- NEW WIDGET START -->
|
|
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
|
|
|
<!-- Widget ID (each widget will need unique ID)-->
|
|
<div class="jarviswidget well" id="wid-id-0">
|
|
<!-- widget options:
|
|
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
|
|
|
|
data-widget-colorbutton="false"
|
|
data-widget-editbutton="false"
|
|
data-widget-togglebutton="false"
|
|
data-widget-deletebutton="false"
|
|
data-widget-fullscreenbutton="false"
|
|
data-widget-custombutton="false"
|
|
data-widget-collapsed="true"
|
|
data-widget-sortable="false"
|
|
|
|
-->
|
|
<header>
|
|
<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
|
|
<h2>Widget Title </h2>
|
|
|
|
</header>
|
|
|
|
<!-- widget div-->
|
|
<div>
|
|
|
|
<!-- widget edit box -->
|
|
<div class="jarviswidget-editbox">
|
|
<!-- This area used as dropdown edit box -->
|
|
<input class="form-control" type="text">
|
|
</div>
|
|
<!-- end widget edit box -->
|
|
|
|
<!-- widget content -->
|
|
<div class="widget-body">
|
|
|
|
<!-- this is what the user will see -->
|
|
<h5>Here are the few options you can customize for your chat box:</h5>
|
|
<img src="img/demo/chat.png" alt="Chat" class="bordered img-responsive" style="margin-bottom:10px;">
|
|
<br>
|
|
|
|
<div class="alert alert-info">
|
|
In the box below we will capture every chat window opened. Try to open the chat windows by clicking on the left chat users. You will notice all the chats being logged below.
|
|
</div>
|
|
<div id="chatlog" style="height: 300px; border:1px dashed #333; overflow-x: auto" class="padding-10 custom-scroll">
|
|
<p><i><- Type in your chat window and see this chat log update</i></p>
|
|
</div>
|
|
</div>
|
|
<!-- end widget content -->
|
|
|
|
</div>
|
|
<!-- end widget div -->
|
|
|
|
</div>
|
|
<!-- end widget -->
|
|
|
|
</article>
|
|
<!-- WIDGET END -->
|
|
|
|
<!-- NEW WIDGET START -->
|
|
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
|
|
|
<!-- Widget ID (each widget will need unique ID)-->
|
|
<div class="jarviswidget well" id="wid-id-1">
|
|
<!-- widget options:
|
|
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
|
|
|
|
data-widget-colorbutton="false"
|
|
data-widget-editbutton="false"
|
|
data-widget-togglebutton="false"
|
|
data-widget-deletebutton="false"
|
|
data-widget-fullscreenbutton="false"
|
|
data-widget-custombutton="false"
|
|
data-widget-collapsed="true"
|
|
data-widget-sortable="false"
|
|
|
|
-->
|
|
<header>
|
|
<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
|
|
<h2>Widget Title </h2>
|
|
|
|
</header>
|
|
|
|
<!-- widget div-->
|
|
<div>
|
|
|
|
<!-- widget edit box -->
|
|
<div class="jarviswidget-editbox">
|
|
<!-- This area used as dropdown edit box -->
|
|
<input class="form-control" type="text">
|
|
</div>
|
|
<!-- end widget edit box -->
|
|
|
|
<!-- widget content -->
|
|
<div class="widget-body">
|
|
|
|
<!-- this is what the user will see -->
|
|
|
|
<h5>Here are the few options you can customize for your chat box:</h5>
|
|
|
|
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000">options</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #000000; font-weight: bold">{</span>
|
|
<span style="color: #000000">id</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">//id for the DOM element</span>
|
|
<span style="color: #000000">title</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// title of the chatbox</span>
|
|
<span style="color: #000000">user</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// can be anything associated with this chatbox</span>
|
|
<span style="color: #000000">hidden</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">false</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// show or hide the chatbox</span>
|
|
<span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">0</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// relative to right edge of the browser window</span>
|
|
<span style="color: #000000">width</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">230</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// width of the chatbox</span>
|
|
<span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
|
|
<span style="color: #8f5902; font-style: italic">// override this</span>
|
|
<span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">boxManager</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">first_name</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
|
|
<span style="color: #000000; font-weight: bold">},</span>
|
|
<span style="color: #000000">boxClosed</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">)</span> <span style="color: #000000; font-weight: bold">{},</span> <span style="color: #8f5902; font-style: italic">// called when the close icon is clicked</span>
|
|
<span style="color: #000000; font-weight: bold">...</span>
|
|
<span style="color: #000000; font-weight: bold">}</span>
|
|
</pre></div>
|
|
<br>
|
|
<h5>To create a chatbox at the bottom of the browser window with an offset of 200px to the right edge, use the following code:</h5>
|
|
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87">document</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">ready</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(){</span>
|
|
<span style="color: #8f5902; font-style: italic">// to create</span>
|
|
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">({</span><span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"chat_div"</span><span style="color: #000000; font-weight: bold">,</span>
|
|
<span style="color: #000000">title</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"Title"</span><span style="color: #000000; font-weight: bold">,</span>
|
|
<span style="color: #000000">user</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"can be anything"</span>
|
|
<span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">200</span><span style="color: #000000; font-weight: bold">,</span>
|
|
<span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
|
|
<span style="color: #000000">alert</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"DOM "</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #4e9a06">" just typed in "</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
|
|
<span style="color: #000000; font-weight: bold">}});</span>
|
|
<span style="color: #8f5902; font-style: italic">// to insert a message</span>
|
|
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"boxManager"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"Mr. Foo"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"Barrr!"</span><span style="color: #000000; font-weight: bold">);</span>
|
|
<span style="color: #000000; font-weight: bold">});</span>
|
|
</pre></div>
|
|
|
|
<br>
|
|
<h5>Use the following standard jQuery UI approach to access the options after the chat box is created:</h5>
|
|
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000; font-weight: bold">...</span>
|
|
<span style="color: #8f5902; font-style: italic">// getter</span>
|
|
<span style="color: #204a87; font-weight: bold">var</span> <span style="color: #000000">offset</span> <span style="color: #ce5c00; font-weight: bold">=</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"offset"</span><span style="color: #000000; font-weight: bold">);</span>
|
|
|
|
<span style="color: #8f5902; font-style: italic">// setter, to change the possition of the chatbox</span>
|
|
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"offset"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #0000cf; font-weight: bold">300</span><span style="color: #000000; font-weight: bold">);</span>
|
|
</pre></div>
|
|
|
|
|
|
</div>
|
|
<!-- end widget content -->
|
|
|
|
</div>
|
|
<!-- end widget div -->
|
|
|
|
</div>
|
|
<!-- end widget -->
|
|
|
|
</article>
|
|
<!-- WIDGET END -->
|
|
|
|
</div>
|
|
|
|
<!-- end row -->
|
|
|
|
<!-- row -->
|
|
|
|
<div class="row">
|
|
|
|
<!-- a blank row to get started -->
|
|
<div class="col-sm-12">
|
|
<!-- your contents here -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- end row -->
|
|
|
|
</section>
|
|
<!-- end widget grid -->
|
|
|
|
</div>
|
|
<!-- END MAIN CONTENT -->
|
|
|
|
</div>
|
|
<!-- END MAIN PANEL -->
|
|
<!-- ==========================CONTENT ENDS HERE ========================== -->
|
|
|
|
<?php
|
|
// include page footer
|
|
include("inc/footer.php");
|
|
?>
|
|
|
|
<?php
|
|
//include required scripts
|
|
include("inc/scripts.php");
|
|
?>
|
|
|
|
<!-- PAGE RELATED PLUGIN(S)
|
|
<script src="<?php echo ASSETS_URL; ?>/js/plugin/YOURJS.js"></script>-->
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
// PAGE RELATED SCRIPTS
|
|
})
|
|
|
|
</script>
|
|
|
|
<?php
|
|
//include footer
|
|
include("inc/google-analytics.php");
|
|
?>
|