Skip to content

Commit

Permalink
spa chat
Browse files Browse the repository at this point in the history
  • Loading branch information
Vivomo committed Apr 11, 2016
1 parent 5cdb3ac commit 43978a6
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 26 deletions.
16 changes: 3 additions & 13 deletions SPA/spa.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,14 @@

<script>
$(function () {
// spa.initModule( $('#spa'));
spa.initModule( $('#spa'));
});
</script>
</head>
<body>
<div id="spa">
<header class="spa-shell-head">
<div class="spa-shell-head-logo"></div>
<div class="spa-shell-head-acct"></div>
<div class="spa-shell-head-search"></div>
</header>
<section class="spa-shell-main">
<nav class="spa-shell-main-nav"></nav>
<div class="spa-shell-main-content"></div>
</section>
<footer class="spa-shell-foot"></footer>
<section class="spa-shell-chat"></section>
<section class="spa-shell-modal"></section>

</div>

</body>
</html>
4 changes: 2 additions & 2 deletions css/spa.css
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ a:hover {
top: 0;
left: 0;
width: inherit;
height: inherit;
height: 40px;
right: 0; }

.spa-shell-head-logo {
Expand All @@ -75,7 +75,7 @@ a:hover {
background-color: #00f; }

.spa-shell-main {
top: 4px;
top: 40px;
left: 0;
right: 0;
bottom: 40px; }
Expand Down
2 changes: 1 addition & 1 deletion js/spa.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

var spa = (function () {
var initModule = function ($container) {
$container.html('<h1>Hello World</h1>');
spa.shell.initModule($container)
};

return {initModule : initModule};
Expand Down
107 changes: 104 additions & 3 deletions js/spa.shell.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,104 @@
/**
* Created by Administrator on 2016/4/8.
*/
/*global $, spa*/
spa.shell = (function () {
//----------------- BEGIN MODULE SCOPE VARIABLES ------------
var configMap = {
main_html : '<header class="spa-shell-head">'+
' <div class="spa-shell-head-logo"></div>'+
' <div class="spa-shell-head-acct"></div>'+
' <div class="spa-shell-head-search"></div>'+
'</header>'+
'<section class="spa-shell-main">'+
' <nav class="spa-shell-main-nav"></nav>'+
' <div class="spa-shell-main-content"></div>'+
'</section>'+
'<footer class="spa-shell-foot"></footer>'+
'<section class="spa-shell-chat"></section>'+
'<section class="spa-shell-modal"></section>',
chat_extend_time : 1000,
chat_retract_time : 300,
chat_extend_height : 450,
chat_retract_height : 15
},
stateMap = {$container : null},
jqueryMap = {},
setJqueryMap, toggleChat, initModule;
//----------------- END MODULE SCOPE VARIABLES ------------

//----------------- BEGIN UTILITY METHODS ----------------
//----------------- END UTILITY METHODS ----------------

//------------------ BEGIN DOM METHOD ----------------
// Begin DOM method /setJqueryMap/
setJqueryMap = function(){
var $container = stateMap.$container;
jqueryMap = {
$container : $container,
$chat : $container.find('.spa-shell-chat')
};
};
// End DOM method /setJqueryMap/

//Begin DOM method /toggleChat/
/**
* Purpose : Extends or retracts chat slider
* @param do_extend - true ? extends slider : retracts slider
* @param callback - optional function to execute at end of animation
*/
toggleChat = function (do_extend, callback) {
var px_chat_ht = jqueryMap.$chat.height(),
is_open = px_chat_ht === configMap.chat_extend_height,
is_closed = px_chat_ht === configMap.chat_retract_height,
is_sliding = !is_open && !is_closed;

//avoid race condition
if (is_sliding) {
return false;
}
// Begin extend chat slider
if (do_extend) {
jqueryMap.$chat.animate({
height : configMap.chat_extend_height
}, configMap.chat_extend_time, function () {
callback && callback(jqueryMap.$chat);
});
return true;
}
// End extend chat slider

//Begin retract chat slider
jqueryMap.$chat.animate({
height : configMap.chat_retract_height
}, configMap.chat_extend_time, function () {
callback && callback(jqueryMap.$chat);
});
return true;
// End retract chat slider
};
//End DOM method /toggleChat/

//------------------ END DOM METHOD ----------------

//----------------------- BEGIN EVENT HANDLERS---------------------------------
//----------------------- END EVENT HANDLERS---------------------------------

//----------------------- BEGIN PUBLIC METHODS---------------------------------
//Begin public method /initModule/
initModule = function ($container) {
// load HTML and map jQuery collections
stateMap.$container = $container;
$container.html(configMap.main_html);
setJqueryMap();

// test toggle
setTimeout(function () {
toggleChat(true)
}, 3000);

setTimeout(function () {
toggleChat(false)
}, 8000)
};
//End public method /initModule/
return {initModule : initModule};
//----------------------- END PUBLIC METHODS---------------------------------
})();
12 changes: 6 additions & 6 deletions scss/inc/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,33 +57,33 @@
justify-content: center;
}

@mixin rect2($top, $left, $w:inherit, $h:inherit) {
@mixin rect2($top, $left, $w:initail, $h:initail) {
top: $top;
left: $left;
width: $w;
height: $h;
}

@mixin rect2r($top, $right, $w:inherit, $h:inherit) {
@mixin rect2r($top, $right, $w:initail, $h:initail) {
top: $top;
right: $right;
width: $w;
height: $h;
}

@mixin rect3($top, $left, $right, $w:inherit, $h:inherit){
@include rect2($top, $left, $w:inherit, $h:inherit);
@mixin rect3($top, $left, $right, $w:initail, $h:initail){
@include rect2($top, $left, $w, $h);
right: $right;
}

@mixin rect3b($bottom, $left, $right, $h:inherit){
@mixin rect3b($bottom, $left, $right, $h:initail){
left: $left;
right: $right;
bottom: $bottom;
height: $h;
}

@mixin rect($top,$bottom, $left, $right){
@mixin rect($top, $bottom, $left, $right){
top: $top;
left: $left;
right: $right;
Expand Down
2 changes: 1 addition & 1 deletion scss/spa.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}

.spa-shell-main{
@include rect(4px, 40px, 0, 0);
@include rect(40px, 40px, 0, 0);
}

.spa-shell-main-content, .spa-shell-main-nav{
Expand Down

0 comments on commit 43978a6

Please sign in to comment.