How can I add html inside app div in flarum

1Dot

How can I add html inside app div in flarum
I am using below but it doesn't seems to be working!

import {extend} from 'flarum/common/extend';
import app from 'flarum/forum/app';

/* RameshDADA Ultra Premium */

app.initializers.add('ramesh-dada-premium-navigation', () => {
  
    extend(Application.prototype, 'mount', () => {
      
            const insert = m("nav", {"class":"RAMmenu","style":{"display":"none"}},
            [
              m("a", {"class":"menu-item gharkhel", onclick: () => gharchalo()}, 
                m("i", {"class":"fas fa-home rameshtab"})
              ),
              m("a", {"class":"menu-item", onclick: () => tagsde()}, 
                m("i", {"class":"fas fa-tags rameshtab"})
              ),
              m("a", {"class":"menu-item NayaShruKar", onclick: () => newDiscussRamesh()}, 
                m("i", {"class":"fas fa-plus rameshtab"})
              ),
              m("a", {"class":"menu-item hotelkhel", onclick: () => replykaro()}, 
                m("i", {"class":"fas fa-comment-dots rameshtab"})
              ),
              m("a", {"class":"menu-item", onclick: () => settingsWala()}, 
                m("i", {"class":"fas fa-user-shield rameshtab"})
              ),
              m("a", {"class":"menu-item", onclick: ()=> notifierM()}, 
                m("i", {"class":"fas fa-bell rameshtab"})
              )
            ]
          );

          if (app.session.user === user) {
            m.mount(document.querySelector('div#app').appendChild(insert));
          }

    });
    function newDiscussRamesh() {
      document.querySelector('.IndexPage-newDiscussion').click();
    }
    function gharchalo() {
      document.querySelector('#home-link').click();
    }
    function replykaro() {
      document.querySelector('.PostStream-item .ReplyPlaceholder').click();
    }
    function tagsde() {
      m.route.set(app.forum.attribute('home_page') + 'tags');
    }
    function notifierM() {
      m.route.set(app.forum.attribute('home_page') + 'notifications');
    }
    function settingsWala() {
      m.route.set(app.forum.attribute('home_page') + 'settings');
    }
});

clarkwinkelmann

1Dot you appear to have a mix of Mithril template and direct DOM manipulation. You will need to choose one or the other.

If you want to mount the template with Mithril, you will need to wrap it into a Mithril component, then pass that component name to m.mount(). appendChild isn't a Mithril function, and you likely can't mount to #app as that would override the Flarum application itself.

If you're trying to add a component to the Flarum header, it would be best to extend() the Flarum HeaderPrimary or HeaderSecondary and add the component there without adding any additional mounting point. An example of an extension that does that is the FriendsOfFlarum Links extension https://github.com/FriendsOfFlarum/links/blob/master/js/src/forum/index.js

1Dot

clarkwinkelmann Ok Thanks for letting me know I did very silly mistake. 😅

import { extend } from 'flarum/common/extend';
import app from 'flarum/forum/app';
import HeaderPrimary from 'flarum/components/HeaderPrimary'

/* RameshDADA Ultra Premium */

app.initializers.add('ramesh-dada-premium-navigation', () => {


  extend(HeaderPrimary.prototype, 'view', (component) => {

    if (app.session.user === user) {

      items.add(
        'newDiscussion',
        m("nav", { "class": "RAMmenu", "style": { "display": "none" } },
          [
            m("a", { "class": "menu-item gharkhel", onclick: () => gharchalo() },
              m("i", { "class": "fas fa-home rameshtab" })
            ),
            m("a", { "class": "menu-item", onclick: () => tagsde() },
              m("i", { "class": "fas fa-tags rameshtab" })
            ),
            m("a", { "class": "menu-item NayaShruKar", onclick: () => newDiscussRamesh() },
              m("i", { "class": "fas fa-plus rameshtab" })
            ),
            m("a", { "class": "menu-item hotelkhel", onclick: () => replykaro() },
              m("i", { "class": "fas fa-comment-dots rameshtab" })
            ),
            m("a", { "class": "menu-item", onclick: () => settingsWala() },
              m("i", { "class": "fas fa-user-shield rameshtab" })
            ),
            m("a", { "class": "menu-item", onclick: () => notifierM() },
              m("i", { "class": "fas fa-bell rameshtab" })
            )
          ]
        )
      );
    }
  });

  function newDiscussRamesh() {
    document.querySelector('.IndexPage-newDiscussion').click();
  }
  function gharchalo() {
    document.querySelector('#home-link').click();
  }
  function replykaro() {
    document.querySelector('.PostStream-item .ReplyPlaceholder').click();
  }
  function tagsde() {
    m.route.set(app.forum.attribute('home_page') + 'tags');
  }
  function notifierM() {
    m.route.set(app.forum.attribute('home_page') + 'notifications');
  }
  function settingsWala() {
    m.route.set(app.forum.attribute('home_page') + 'settings');
  }
});

Clark Brother but still it doesn't seems to work now! 😟 It also breaks Flarum!

clarkwinkelmann

1Dot please share the error message(s) you get. With the error message we might be able to help without having to try running the code ourselves.

I'm not able to test the code right now, but I see you use a variable named user on line 12 which doesn't appear to be defined anywhere.

1Dot

clarkwinkelmann

Also how to define user? (Sorry for such a silly question)

clarkwinkelmann

1Dot items is also not defined, and doesn't exist in the view function. You're probably intending to extend the items function, where the first parameter will be an ItemList that you can also name items.

For the user, what are you trying to compare against? If you just want to check if the user is logged in, you can use if (app.session.user) {}. user will be null if logged out, or be the model for the currently logged in user.

1Dot

clarkwinkelmann I would just like to show that tab for logged in users and hide it for logged out users and I am still unable to understand items please can you show me a example.

1Dot

Hello Clark Brother this is something different but nearby same so i would continue in this discussion, Bro I am using below as my index js to insert logo and search bar for mobile device but it doesn't seems to work and I am unable to see any errors in console and also no errors in storage/logs

import {extend} from 'flarum/common/extend';
import app from 'flarum/forum/app';
import Search from 'flarum/components/Search';
import HeaderPrimary from 'flarum/components/HeaderPrimary';
/* RameshDADA Ultra PREMIUM */

app.initializers.add('ramesh-dada-mobile-logo', () => {
extend(HeaderPrimary.prototype, 'viewItems', function (items) {
    items.add('mobilelogo', <a onclick={home()}><img src={app.forum.attribute('logoUrl')} alt={app.forum.attribute('forum_title')} /></a>, -100);
items.add('search', Search.component({
            state: app.search,
        }), -100);

    });
    function home() {
        document.querySelector('#home-link').click();
    }
});