diff --git a/extensions/embed/js/forum/dist/extension.js b/extensions/embed/js/forum/dist/extension.js index 7b3e323a4..702a51101 100644 --- a/extensions/embed/js/forum/dist/extension.js +++ b/extensions/embed/js/forum/dist/extension.js @@ -10,15 +10,15 @@ //# sourceMappingURL=iframeResizer.contentWindow.map; 'use strict'; -System.register('flarum/embed/components/DiscussionPage', ['flarum/components/DiscussionPage', 'flarum/components/PostStream', 'flarum/helpers/listItems'], function (_export, _context) { +System.register('flarum/embed/components/DiscussionPage', ['flarum/components/DiscussionPage', 'flarum/components/LoadingIndicator', 'flarum/helpers/listItems'], function (_export, _context) { "use strict"; - var BaseDiscussionPage, PostStream, listItems, DiscussionPage; + var BaseDiscussionPage, LoadingIndicator, listItems, DiscussionPage; return { setters: [function (_flarumComponentsDiscussionPage) { BaseDiscussionPage = _flarumComponentsDiscussionPage.default; - }, function (_flarumComponentsPostStream) { - PostStream = _flarumComponentsPostStream.default; + }, function (_flarumComponentsLoadingIndicator) { + LoadingIndicator = _flarumComponentsLoadingIndicator.default; }, function (_flarumHelpersListItems) { listItems = _flarumHelpersListItems.default; }], @@ -50,7 +50,7 @@ System.register('flarum/embed/components/DiscussionPage', ['flarum/components/Di m( 'div', { className: 'DiscussionPage-discussion' }, - m( + this.discussion ? [m( 'nav', { className: 'DiscussionPage-nav--embed' }, m( @@ -58,12 +58,11 @@ System.register('flarum/embed/components/DiscussionPage', ['flarum/components/Di null, listItems(this.sidebarItems().toArray()) ) - ), - m( + ), m( 'div', { className: 'DiscussionPage-stream' }, - this.stream ? this.stream.render() : '' - ) + this.stream.render() + )] : m(LoadingIndicator, { className: 'LoadingIndicator--block' }) ) ) ); @@ -104,10 +103,10 @@ System.register('flarum/embed/components/DiscussionPage', ['flarum/components/Di });; 'use strict'; -System.register('flarum/embed/main', ['flarum/extend', 'flarum/app', 'flarum/components/Composer', 'flarum/components/PostStream', 'flarum/components/ModalManager', 'flarum/components/AlertManager', 'flarum/components/PostMeta', 'flarum/utils/mapRoutes', 'flarum/utils/Pane', 'flarum/utils/Drawer', 'flarum/embed/components/DiscussionPage'], function (_export, _context) { +System.register('flarum/embed/main', ['flarum/extend', 'flarum/app', 'flarum/components/Composer', 'flarum/components/PostStream', 'flarum/components/ModalManager', 'flarum/components/AlertManager', 'flarum/components/PostMeta', 'flarum/utils/mapRoutes', 'flarum/utils/Pane', 'flarum/utils/Drawer', 'flarum/utils/ScrollListener', 'flarum/embed/components/DiscussionPage'], function (_export, _context) { "use strict"; - var override, extend, app, Composer, PostStream, ModalManager, AlertManager, PostMeta, mapRoutes, Pane, Drawer, DiscussionPage; + var override, extend, app, Composer, PostStream, ModalManager, AlertManager, PostMeta, mapRoutes, Pane, Drawer, ScrollListener, DiscussionPage; return { setters: [function (_flarumExtend) { override = _flarumExtend.override; @@ -130,6 +129,8 @@ System.register('flarum/embed/main', ['flarum/extend', 'flarum/app', 'flarum/com Pane = _flarumUtilsPane.default; }, function (_flarumUtilsDrawer) { Drawer = _flarumUtilsDrawer.default; + }, function (_flarumUtilsScrollListener) { + ScrollListener = _flarumUtilsScrollListener.default; }, function (_flarumEmbedComponentsDiscussionPage) { DiscussionPage = _flarumEmbedComponentsDiscussionPage.default; }], @@ -156,7 +157,7 @@ System.register('flarum/embed/main', ['flarum/extend', 'flarum/app', 'flarum/com return original(post).replace('/embed', '/d'); }); - app.pageInfo = m.prop(); + app.pageInfo = m.prop({}); var reposition = function reposition() { var info = app.pageInfo(); @@ -205,6 +206,15 @@ System.register('flarum/embed/main', ['flarum/extend', 'flarum/app', 'flarum/com }); } + // Add a class to the body which indicates that the page has been scrolled + // down. + new ScrollListener(function (top) { + var $app = $('#app'); + var offset = $app.offset().top; + + $app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset); + }).start(); + // Initialize FastClick, which makes links and buttons much more responsive on // touch devices. $(function () { diff --git a/extensions/embed/js/forum/src/components/DiscussionPage.js b/extensions/embed/js/forum/src/components/DiscussionPage.js index ad2e910f0..e0e890ed3 100644 --- a/extensions/embed/js/forum/src/components/DiscussionPage.js +++ b/extensions/embed/js/forum/src/components/DiscussionPage.js @@ -1,5 +1,5 @@ import BaseDiscussionPage from 'flarum/components/DiscussionPage'; -import PostStream from 'flarum/components/PostStream'; +import LoadingIndicator from 'flarum/components/LoadingIndicator'; import listItems from 'flarum/helpers/listItems'; export default class DiscussionPage extends BaseDiscussionPage { @@ -14,12 +14,16 @@ export default class DiscussionPage extends BaseDiscussionPage {
- -
- {this.stream ? this.stream.render() : ''} -
+ {this.discussion ? [ + , +
+ {this.stream.render()} +
+ ] : ( + + )}
diff --git a/extensions/embed/js/forum/src/main.js b/extensions/embed/js/forum/src/main.js index 9087e5a98..ac5e32e3c 100644 --- a/extensions/embed/js/forum/src/main.js +++ b/extensions/embed/js/forum/src/main.js @@ -8,6 +8,7 @@ import PostMeta from 'flarum/components/PostMeta'; import mapRoutes from 'flarum/utils/mapRoutes'; import Pane from 'flarum/utils/Pane'; import Drawer from 'flarum/utils/Drawer'; +import ScrollListener from 'flarum/utils/ScrollListener'; import DiscussionPage from 'flarum/embed/components/DiscussionPage'; @@ -36,7 +37,7 @@ app.initializers.replace('boot', () => { return original(post).replace('/embed', '/d'); }); - app.pageInfo = m.prop(); + app.pageInfo = m.prop({}); const reposition = function() { const info = app.pageInfo(); @@ -89,6 +90,17 @@ app.initializers.replace('boot', () => { }); } + // Add a class to the body which indicates that the page has been scrolled + // down. + new ScrollListener(top => { + const $app = $('#app'); + const offset = $app.offset().top; + + $app + .toggleClass('affix', top >= offset) + .toggleClass('scrolled', top > offset); + }).start(); + // Initialize FastClick, which makes links and buttons much more responsive on // touch devices. $(() => { diff --git a/extensions/embed/less/forum/extension.less b/extensions/embed/less/forum/extension.less index 2644640af..2ed80328b 100644 --- a/extensions/embed/less/forum/extension.less +++ b/extensions/embed/less/forum/extension.less @@ -25,19 +25,22 @@ } > ul { - z-index: 100; - background: @body-bg; + .header-background(); + border-bottom: 0; + height: auto !important; list-style: none; padding: 15px 0; margin: 0; - border-bottom: 1px solid @control-bg; + @media @phone { + position: static; + } @media @tablet-up { - position: fixed; - left: 0; - right: 0; - top: 0; padding: 15px 15px; + + .scrolled & { + .box-shadow(0 2px 6px @shadow-color); + } } > li { diff --git a/extensions/embed/src/DiscussionController.php b/extensions/embed/src/DiscussionController.php deleted file mode 100644 index 15e3228fc..000000000 --- a/extensions/embed/src/DiscussionController.php +++ /dev/null @@ -1,44 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Flarum\Embed; - -use Flarum\Forum\Controller\DiscussionController as BaseDiscussionController; -use Psr\Http\Message\ServerRequestInterface; - -class DiscussionController extends BaseDiscussionController -{ - /** - * {@inheritdoc} - */ - public function render(ServerRequestInterface $request) - { - $view = parent::render($request); - - $view->addBootstrapper('flarum/embed/main'); - $view->setLayout(__DIR__.'/../views/embed.blade.php'); - - return $view; - } - - /** - * {@inheritdoc} - */ - protected function getAssets() - { - $assets = parent::getAssets(); - - $assets->addFile(__DIR__.'/../js/forum/dist/extension.js'); - $assets->addFile(__DIR__.'/../less/forum/extension.less'); - $assets->setFilename('embed'); - - return $assets; - } -} diff --git a/extensions/embed/src/EmbedWebApp.php b/extensions/embed/src/EmbedWebApp.php new file mode 100644 index 000000000..5d81ad958 --- /dev/null +++ b/extensions/embed/src/EmbedWebApp.php @@ -0,0 +1,40 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Flarum\Embed; + +use Flarum\Forum\WebApp; + +class EmbedWebApp extends WebApp +{ + /** + * {@inheritdoc} + */ + public function getView() + { + $view = parent::getView(); + + $view->getJs()->addFile(__DIR__.'/../js/forum/dist/extension.js'); + $view->getCss()->addFile(__DIR__.'/../less/forum/extension.less'); + + $view->loadModule('flarum/embed/main'); + $view->setLayout(__DIR__.'/../views/embed.blade.php'); + + return $view; + } + + /** + * {@inheritdoc} + */ + public function getAssets() + { + return $this->assets->make('embed'); + } +} diff --git a/extensions/embed/src/EmbeddedDiscussionController.php b/extensions/embed/src/EmbeddedDiscussionController.php new file mode 100644 index 000000000..fe578745b --- /dev/null +++ b/extensions/embed/src/EmbeddedDiscussionController.php @@ -0,0 +1,27 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Flarum\Embed; + +use Flarum\Api\Client; +use Flarum\Forum\Controller\DiscussionController; +use Flarum\Forum\UrlGenerator; +use Illuminate\Contracts\Events\Dispatcher; + +class EmbeddedDiscussionController extends DiscussionController +{ + /** + * {@inheritdoc} + */ + public function __construct(EmbedWebApp $webApp, Dispatcher $events, Client $api, UrlGenerator $url) + { + parent::__construct($webApp, $events, $api, $url); + } +} diff --git a/extensions/embed/src/Listener/AddEmbedRoute.php b/extensions/embed/src/Listener/AddEmbedRoute.php index 299c89819..da20d33ea 100644 --- a/extensions/embed/src/Listener/AddEmbedRoute.php +++ b/extensions/embed/src/Listener/AddEmbedRoute.php @@ -28,6 +28,6 @@ class AddEmbedRoute */ public function addEmbedRoute(ConfigureForumRoutes $event) { - $event->get('/embed/{id:\d+(?:-[^/]*)?}[/{near:[^/]*}]', 'embed.discussion', 'Flarum\Embed\DiscussionController'); + $event->get('/embed/{id:\d+(?:-[^/]*)?}[/{near:[^/]*}]', 'embed.discussion', 'Flarum\Embed\EmbeddedDiscussionController'); } } diff --git a/extensions/embed/src/Listener/FlushEmbedAssetsWhenSettingsAreChanged.php b/extensions/embed/src/Listener/FlushEmbedAssetsWhenSettingsAreChanged.php index acb06c5f8..5e0b9ffcf 100644 --- a/extensions/embed/src/Listener/FlushEmbedAssetsWhenSettingsAreChanged.php +++ b/extensions/embed/src/Listener/FlushEmbedAssetsWhenSettingsAreChanged.php @@ -11,6 +11,7 @@ namespace Flarum\Embed\Listener; use Flarum\Embed\DiscussionController; +use Flarum\Embed\EmbedWebApp; use Flarum\Event\ExtensionWasDisabled; use Flarum\Event\ExtensionWasEnabled; use Flarum\Event\SettingWasSet; @@ -21,14 +22,14 @@ class FlushEmbedAssetsWhenSettingsAreChanged /** * @var DiscussionController */ - protected $controller; + protected $webApp; /** - * @param DiscussionController $controller + * @param EmbedWebApp $webApp */ - public function __construct(DiscussionController $controller) + public function __construct(EmbedWebApp $webApp) { - $this->controller = $controller; + $this->webApp = $webApp; } /** @@ -47,12 +48,12 @@ class FlushEmbedAssetsWhenSettingsAreChanged public function flushCss(SettingWasSet $event) { if (preg_match('/^theme_|^custom_less$/i', $event->key)) { - $this->controller->flushCss(); + $this->webApp->getAssets()->flushCss(); } } public function flushAssets() { - $this->controller->flushAssets(); + $this->webApp->getAssets()->flush(); } }