From d2fd2f114f6d14f0ffb1278b0696cadf85705498 Mon Sep 17 00:00:00 2001 From: ghost Date: Thu, 30 Dec 2021 22:01:55 +0200 Subject: [PATCH] refactor to support modular structure --- .../controller/common/module/feed.php | 3 + src/application/view/common/header/user.phtml | 4 + src/application/view/common/module/feed.phtml | 1 + src/application/view/common/module/post.phtml | 6 +- src/application/view/home.phtml | 2 +- src/public/css/app.css | 47 ------- src/public/css/module/feed.css | 46 ++++++ src/public/js/home.js | 131 ++---------------- src/public/js/module/feed.js | 92 ++++++++++++ src/public/js/module/menu.js | 5 + src/public/js/module/post.js | 30 ++++ 11 files changed, 193 insertions(+), 174 deletions(-) create mode 100644 src/application/controller/common/module/feed.php create mode 100644 src/application/view/common/module/feed.phtml create mode 100644 src/public/css/module/feed.css create mode 100644 src/public/js/module/feed.js create mode 100644 src/public/js/module/menu.js create mode 100644 src/public/js/module/post.js diff --git a/src/application/controller/common/module/feed.php b/src/application/controller/common/module/feed.php new file mode 100644 index 0000000..34612c0 --- /dev/null +++ b/src/application/controller/common/module/feed.php @@ -0,0 +1,3 @@ + + + + + diff --git a/src/application/view/common/module/feed.phtml b/src/application/view/common/module/feed.phtml new file mode 100644 index 0000000..1534064 --- /dev/null +++ b/src/application/view/common/module/feed.phtml @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/application/view/common/module/post.phtml b/src/application/view/common/module/post.phtml index e3bc6d6..62a9a07 100644 --- a/src/application/view/common/module/post.phtml +++ b/src/application/view/common/module/post.phtml @@ -1,13 +1,13 @@ -
+
- +
-
+
\ No newline at end of file diff --git a/src/application/view/home.phtml b/src/application/view/home.phtml index 6e320ec..4a2b6b2 100644 --- a/src/application/view/home.phtml +++ b/src/application/view/home.phtml @@ -5,6 +5,6 @@
-
+
\ No newline at end of file diff --git a/src/public/css/app.css b/src/public/css/app.css index d2daabd..1e2441b 100644 --- a/src/public/css/app.css +++ b/src/public/css/app.css @@ -31,51 +31,4 @@ a:active { .container { 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; } \ No newline at end of file diff --git a/src/public/css/module/feed.css b/src/public/css/module/feed.css new file mode 100644 index 0000000..c4a1d50 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/public/js/home.js b/src/public/js/home.js index febec03..8e1fca2 100644 --- a/src/public/js/home.js +++ b/src/public/js/home.js @@ -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 = $( - $('
', { - 'class': 'retwist' - }).append( - $('
', { - 'class': 'info' - }).append( - reTwist.userName - ).append( - $('', { - 'class': 'time' - }).append( - reTwist.time - ) - ) - ).append(reTwist.message) - ); - } - - $(feed).append( - $('
', { - 'class': 'item' - }).append( - $('
', { - 'class': 'avatar' - }).append( - $('', { - 'src': '/api/image?hash=' + userName, - 'alt': '', - }) - ) - ).append( - $('
', { - 'class': 'message' - }).append( - $('
', { - 'class': 'info' - }).append( - userName - ).append( - $('', { - 'class': 'time' - }).append( - time - ) - ) - ).append(rt).append( - $('
', { - '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() { - 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'); }); \ No newline at end of file diff --git a/src/public/js/module/feed.js b/src/public/js/module/feed.js new file mode 100644 index 0000000..ec630ae --- /dev/null +++ b/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 = $( + $('
', { + 'class': 'retwist' + }).append( + $('
', { + 'class': 'info' + }).append( + reTwist.userName + ).append( + $('', { + 'class': 'time' + }).append( + reTwist.time + ) + ) + ).append(reTwist.message) + ); + } + $(feed).append( + $('
', { + 'class': 'item' + }).append( + $('
', { + 'class': 'avatar' + }).append( + $('', { + 'src': '/api/image?hash=' + userName, + 'alt': '', + }) + ) + ).append( + $('
', { + 'class': 'message' + }).append( + $('
', { + 'class': 'info' + }).append( + userName + ).append( + $('', { + 'class': 'time' + }).append( + time + ) + ) + ).append(rt).append( + $('
', { + '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); + } + }); + }, +} \ No newline at end of file diff --git a/src/public/js/module/menu.js b/src/public/js/module/menu.js new file mode 100644 index 0000000..6d6f9c8 --- /dev/null +++ b/src/public/js/module/menu.js @@ -0,0 +1,5 @@ +var ModuleMenu = { + init: function(href) { + $('#moduleMenu a[href="' + href + '"]').addClass('active'); + } +} \ No newline at end of file diff --git a/src/public/js/module/post.js b/src/public/js/module/post.js new file mode 100644 index 0000000..be0bdcd --- /dev/null +++ b/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); + } + }); + }, +} \ No newline at end of file