mirror of
https://github.com/twisterarmy/cloud-server.git
synced 2025-03-13 05:51:46 +00:00
refactor to support modular structure
This commit is contained in:
ghost
parent
724e93447e
commit
d2fd2f114f
3
src/application/controller/common/module/feed.php
Normal file
3
src/application/controller/common/module/feed.php
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require(PROJECT_DIR . '/application/view/common/module/feed.phtml');
|
||||||
@ -11,7 +11,11 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="css/app.css" />
|
<link rel="stylesheet" type="text/css" href="css/app.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="css/module/menu.css" />
|
<link rel="stylesheet" type="text/css" href="css/module/menu.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="css/module/post.css" />
|
<link rel="stylesheet" type="text/css" href="css/module/post.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/module/feed.css" />
|
||||||
<script src="js/jquery.js"></script>
|
<script src="js/jquery.js"></script>
|
||||||
|
<script src="js/module/menu.js"></script>
|
||||||
|
<script src="js/module/post.js"></script>
|
||||||
|
<script src="js/module/feed.js"></script>
|
||||||
<script src="js/home.js"></script>
|
<script src="js/home.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-c-1 bg-img-1 c-0">
|
<body class="bg-c-1 bg-img-1 c-0">
|
||||||
|
|||||||
1
src/application/view/common/module/feed.phtml
Normal file
1
src/application/view/common/module/feed.phtml
Normal file
@ -0,0 +1 @@
|
|||||||
|
<div class="moduleFeed" id="moduleFeed"></div>
|
||||||
@ -1,13 +1,13 @@
|
|||||||
<div class="modulePost">
|
<div class="modulePost" id="modulePost">
|
||||||
<form action="/" method="POST" name="post">
|
<form action="/" method="POST" name="post">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="<?php echo PROJECT_HOST ?>/api/image?hash=<?php echo $_SESSION['userName'] ?>" alt="" />
|
<img src="<?php echo PROJECT_HOST ?>/api/image?hash=<?php echo $_SESSION['userName'] ?>" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="message">
|
<div class="message">
|
||||||
<textarea name="post" placeholder="<?php echo _('Enter your post...') ?>" id="message"></textarea>
|
<textarea name="post" placeholder="<?php echo _('Enter your post...') ?>"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<div class="button" onclick="Home.post.add('#feed', '#message')"><?php echo _('Send') ?></div>
|
<div class="button" onclick="ModulePost.add()"><?php echo _('Send') ?></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -5,6 +5,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<?php include(PROJECT_DIR . '/application/controller/common/module/post.php') ?>
|
<?php include(PROJECT_DIR . '/application/controller/common/module/post.php') ?>
|
||||||
<div class="feed" id="feed"></div>
|
<?php include(PROJECT_DIR . '/application/controller/common/module/feed.php') ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -31,51 +31,4 @@ a:active {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
margin-bottom: 64px
|
margin-bottom: 64px
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item {
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
color: #1c1d1e;
|
|
||||||
background: rgb(238, 238, 238);
|
|
||||||
border-radius: 3px;
|
|
||||||
min-height: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item .avatar {
|
|
||||||
position: absolute;
|
|
||||||
top: 19px;
|
|
||||||
left: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item .avatar img {
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px #fff solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item .message {
|
|
||||||
padding-left: 73px;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item .message .retwist {
|
|
||||||
border: 1px #ccc solid;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: #e6e6e6;
|
|
||||||
margin-top: 8px
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .feed .item .message .quote {
|
|
||||||
margin-top: 8px
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .item .message .info {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container .item .message .info .time {
|
|
||||||
float: right;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
46
src/public/css/module/feed.css
Normal file
46
src/public/css/module/feed.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.moduleFeed .item {
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
color: #1c1d1e;
|
||||||
|
background: rgb(238, 238, 238);
|
||||||
|
border-radius: 3px;
|
||||||
|
min-height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .avatar {
|
||||||
|
position: absolute;
|
||||||
|
top: 19px;
|
||||||
|
left: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .avatar img {
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px #fff solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .message {
|
||||||
|
padding-left: 73px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .message .retwist {
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #e6e6e6;
|
||||||
|
margin-top: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .message .quote {
|
||||||
|
margin-top: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .message .info {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moduleFeed .item .message .info .time {
|
||||||
|
float: right;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
@ -1,127 +1,12 @@
|
|||||||
var Home = {
|
|
||||||
template: {
|
|
||||||
feed: {
|
|
||||||
item: {
|
|
||||||
append: function(feed, userName, time, message, reTwist) {
|
|
||||||
|
|
||||||
if (reTwist === undefined || reTwist.length == 0) {
|
|
||||||
var rt = false;
|
|
||||||
} else {
|
|
||||||
var rt = $(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'retwist'
|
|
||||||
}).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'info'
|
|
||||||
}).append(
|
|
||||||
reTwist.userName
|
|
||||||
).append(
|
|
||||||
$('<span/>', {
|
|
||||||
'class': 'time'
|
|
||||||
}).append(
|
|
||||||
reTwist.time
|
|
||||||
)
|
|
||||||
)
|
|
||||||
).append(reTwist.message)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
$(feed).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'item'
|
|
||||||
}).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'avatar'
|
|
||||||
}).append(
|
|
||||||
$('<img/>', {
|
|
||||||
'src': '/api/image?hash=' + userName,
|
|
||||||
'alt': '',
|
|
||||||
})
|
|
||||||
)
|
|
||||||
).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'message'
|
|
||||||
}).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': 'info'
|
|
||||||
}).append(
|
|
||||||
userName
|
|
||||||
).append(
|
|
||||||
$('<span/>', {
|
|
||||||
'class': 'time'
|
|
||||||
}).append(
|
|
||||||
time
|
|
||||||
)
|
|
||||||
)
|
|
||||||
).append(rt).append(
|
|
||||||
$('<div/>', {
|
|
||||||
'class': (message != '' ? 'quote' : '')
|
|
||||||
}).append(message)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
post: {
|
|
||||||
add: function(feed, input) {
|
|
||||||
$.ajax({
|
|
||||||
url: 'api/post/add',
|
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
message: $(input).val()
|
|
||||||
},
|
|
||||||
success: function (response) {
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
|
|
||||||
$(input).val('');
|
|
||||||
|
|
||||||
Home.post.get(feed, true);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
alert(response.message);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(jqXHR, textStatus, errorThrown) {
|
|
||||||
console.log(textStatus, errorThrown);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
get: function(feed, reFresh) {
|
|
||||||
$.ajax({
|
|
||||||
url: 'api/post/get',
|
|
||||||
type: 'POST',
|
|
||||||
data: {},
|
|
||||||
success: function (response) {
|
|
||||||
if (response.success) {
|
|
||||||
|
|
||||||
if (reFresh) {
|
|
||||||
$(feed).html('');
|
|
||||||
}
|
|
||||||
|
|
||||||
$(response.posts).each(function() {
|
|
||||||
Home.template.feed.item.append(feed, this.userName, this.time, this.message, this.reTwist);
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
alert(response.message);
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(jqXHR, textStatus, errorThrown) {
|
|
||||||
console.log(textStatus, errorThrown);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
Home.post.get('#feed', true);
|
// Init modules
|
||||||
|
ModuleMenu.init('/');
|
||||||
|
ModuleFeed.load('#moduleFeed', true);
|
||||||
|
|
||||||
|
// Event listeners
|
||||||
|
$(document).on('modulePost.add:success', function(/*event, response*/) {
|
||||||
|
ModuleFeed.load('#moduleFeed', true);
|
||||||
|
});
|
||||||
|
|
||||||
$('#moduleMenu > a[href="/"]').addClass('active');
|
|
||||||
});
|
});
|
||||||
92
src/public/js/module/feed.js
Normal file
92
src/public/js/module/feed.js
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
var ModuleFeed = {
|
||||||
|
template: {
|
||||||
|
feed: {
|
||||||
|
item: {
|
||||||
|
append: function(feed, userName, time, message, reTwist) {
|
||||||
|
if (reTwist === undefined || reTwist.length == 0) {
|
||||||
|
var rt = false;
|
||||||
|
} else {
|
||||||
|
var rt = $(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'retwist'
|
||||||
|
}).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'info'
|
||||||
|
}).append(
|
||||||
|
reTwist.userName
|
||||||
|
).append(
|
||||||
|
$('<span/>', {
|
||||||
|
'class': 'time'
|
||||||
|
}).append(
|
||||||
|
reTwist.time
|
||||||
|
)
|
||||||
|
)
|
||||||
|
).append(reTwist.message)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
$(feed).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'item'
|
||||||
|
}).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'avatar'
|
||||||
|
}).append(
|
||||||
|
$('<img/>', {
|
||||||
|
'src': '/api/image?hash=' + userName,
|
||||||
|
'alt': '',
|
||||||
|
})
|
||||||
|
)
|
||||||
|
).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'message'
|
||||||
|
}).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': 'info'
|
||||||
|
}).append(
|
||||||
|
userName
|
||||||
|
).append(
|
||||||
|
$('<span/>', {
|
||||||
|
'class': 'time'
|
||||||
|
}).append(
|
||||||
|
time
|
||||||
|
)
|
||||||
|
)
|
||||||
|
).append(rt).append(
|
||||||
|
$('<div/>', {
|
||||||
|
'class': (message != '' ? 'quote' : '')
|
||||||
|
}).append(message)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
load: function(feed, reFresh) {
|
||||||
|
$.ajax({
|
||||||
|
url: 'api/post/get',
|
||||||
|
type: 'POST',
|
||||||
|
data: {},
|
||||||
|
success: function (response) {
|
||||||
|
if (response.success) {
|
||||||
|
|
||||||
|
if (reFresh) {
|
||||||
|
$(feed).html('');
|
||||||
|
}
|
||||||
|
|
||||||
|
$(response.posts).each(function() {
|
||||||
|
ModuleFeed.template.feed.item.append(feed, this.userName, this.time, this.message, this.reTwist);
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
alert(response.message);
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(jqXHR, textStatus, errorThrown) {
|
||||||
|
console.log(textStatus, errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
5
src/public/js/module/menu.js
Normal file
5
src/public/js/module/menu.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
var ModuleMenu = {
|
||||||
|
init: function(href) {
|
||||||
|
$('#moduleMenu a[href="' + href + '"]').addClass('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
30
src/public/js/module/post.js
Normal file
30
src/public/js/module/post.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
var ModulePost = {
|
||||||
|
add: function() {
|
||||||
|
|
||||||
|
var input = $('#modulePost textarea');
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: 'api/post/add',
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
message: input.val()
|
||||||
|
},
|
||||||
|
success: function (response) {
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
|
||||||
|
input.val('');
|
||||||
|
|
||||||
|
$(document).trigger('modulePost.add:success', [response]);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
alert(response.message);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(jqXHR, textStatus, errorThrown) {
|
||||||
|
console.log(textStatus, errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user