Browse Source

refactor to support modular structure

main
ghost 3 years ago
parent
commit
d2fd2f114f
  1. 3
      src/application/controller/common/module/feed.php
  2. 4
      src/application/view/common/header/user.phtml
  3. 1
      src/application/view/common/module/feed.phtml
  4. 6
      src/application/view/common/module/post.phtml
  5. 2
      src/application/view/home.phtml
  6. 47
      src/public/css/app.css
  7. 46
      src/public/css/module/feed.css
  8. 129
      src/public/js/home.js
  9. 92
      src/public/js/module/feed.js
  10. 5
      src/public/js/module/menu.js
  11. 30
      src/public/js/module/post.js

3
src/application/controller/common/module/feed.php

@ -0,0 +1,3 @@
<?php
require(PROJECT_DIR . '/application/view/common/module/feed.phtml');

4
src/application/view/common/header/user.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

@ -0,0 +1 @@
<div class="moduleFeed" id="moduleFeed"></div>

6
src/application/view/common/module/post.phtml

@ -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>

2
src/application/view/home.phtml

@ -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>

47
src/public/css/app.css

@ -32,50 +32,3 @@ 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

@ -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;
}

129
src/public/js/home.js

@ -1,127 +1,12 @@
var Home = { $(document).ready(function() {
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); // Init modules
ModuleMenu.init('/');
ModuleFeed.load('#moduleFeed', true);
} // Event listeners
}, $(document).on('modulePost.add:success', function(/*event, response*/) {
error: function(jqXHR, textStatus, errorThrown) { ModuleFeed.load('#moduleFeed', true);
console.log(textStatus, errorThrown);
}
}); });
},
}
}
$(document).ready(function() {
Home.post.get('#feed', true);
$('#moduleMenu > a[href="/"]').addClass('active');
}); });

92
src/public/js/module/feed.js

@ -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

@ -0,0 +1,5 @@
var ModuleMenu = {
init: function(href) {
$('#moduleMenu a[href="' + href + '"]').addClass('active');
}
}

30
src/public/js/module/post.js

@ -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…
Cancel
Save