We Keep Coding

Vue Vuetify v-tooltip: When doing window.open and adding content from initial page to the new window, tooltips are shown in original window

The window portal component template looks like this:
<template>
<div v-if="open">
<slot />
</div>
</template>
The window gets opened like this:
this.windowRef = window.open(
windowPath,
'_blank',
`width=${this.width},height=${this.height},screenX=${this.left},screenY=${this.top}`,
true
);
if (this.windowRef) {
this.windowRef.addEventListener('beforeunload', this.closePortal);
this.windowRef.addEventListener('load', () => {
this.windowLoaded = true;
// Clear any existing content
this.windowRef!!.document.body.innerHTML = '';
this.windowRef!!.document.title = document.title;
// Move the component into the window
const app = document.createElement('div');
app.id = 'window-portal';
app.appendChild(this.$el);
this.windowRef!!.document.body.appendChild(app);
All the tooltips are shown in the correct position but in the wrong window:
new window tooltip hover and tooltip position in old window
From analyzing the DOM the issue seems to be that the tooltip content is added on a higher level of the dom and thereby isn't copied by the window portal.

How to use vue to scroll the scroll to the position of the latest message when a new message is generated?

I hope that after I input a new message, the window can instantly move to the bottom of the blue block to see the latest message!
After trying for a long time, I haven't realized it. I would like to ask you what can you do to achieve this effect?
thank you all.
example

Put a template ref on the chat window:
<template>
<div class="chat" ref="chatWindow">
...
</div>
</template>
That lets you access the chat window in <script> with this.$refs.chatWindow.
In sendmessage(), set the chat window's scrollTop to scrollHeight in the next tick (after the new message is rendered in the chat list):
export default {
methods: {
sendmessage() {
this.paragraph.push({
content: this.message
})
this.message = ''
this.$nextTick(() => {
this.$refs.chatWindow.scrollTop = this.$refs.chatWindow.scrollHeight
})
}
}
}
demo

Admin template, avoid open sidebar on reload

I have installed sufee admin dashboard on my rails project. Template page is here. Demo is here
It works fine as in the demo.
This is the code for toggle:
$('#menuToggle').on('click', function(event) {
$('body').toggleClass('open');
});
You can notice that when navigating to new page the sidebar opens, even if it was collapsed. I would like it instead to persist the collapsed state. And same for open state, if it's open and I navigate to new page it should stay open. In other words sidebar state should change only when clicking the toggle. How can I achieve it?

You can try this:
$('#menuToggle').off('click').on('click', function(event) {
$('body').toggleClass('open');
});

Inspecting the site and seeing its behaviour, you have to add class="open" to the body tag, and that's all

If the default state of your sidebar is open, then on any non-dynamic page load, it will be open. You'll need to introduce some sort of persistent data storage to store the current state for the current user.
The most common choice here would be to set the cookie on the same click event. To prevent the sidebar from collapsing after the page has loaded, you could read the cookie server-side to determine whether to include the open body class or not to help prevent FOUC-type issues.
Something like this should get you started:
function setCookie(name, value){
var expires = new Date();
expires.setTime(expires.getTime() + 31536000000);
document.cookie = name + '=' + value + ';expires=' + expires.toUTCString();
}
var getCookie = function(name){
var pair = document.cookie.match(new RegExp(name + '=([^;]+)'));
return !!pair ? pair[1] : null;
};
$('#menuToggle').on('click', function(){
if( $('body').hasClass('open'){
// Menu Open: Collapse it, save Collapsed State
$('body').removeClass('open');
setCookie('menuState', 'collapsed');
} else {
// Menu Collapsed: Open it and save Open State
$('body').addClass('open');
setCookie('menuState', 'open');
}
});
Now if you need to read that cookie state in JS you can do something like the following (though this can lead to the FOUC I mentioned before, so you may want to read the cookie serverside - I'm unfamiliar with how to do that in Rails but it seems easy enough
var menuState = getCookie('menuState');
if( menuState == 'collapsed' ){
$('body').removeClass('open');
} else if( menuState == 'open' ){
$('body').addClass('open');
}

Maybe you can try this approach. just to get the idea, by the way the error on the snippet is normal, so better try it on a separate file first. you'll see it when you reload your browser.
$(document).ready(function(){
$('#menuToggle').click(function(){
if($('body').hasClass('open')){
sessionStorage.removeItem('body');
}else{
sessionStorage.setItem('body', 'open');
}
});
if(sessionStorage.getItem('body')){
$('body').addClass('open');
}else{
$('body').removeClass('open');
}
});
.sidebar{
width: 0;
background-color: #222;
height: 200px;
}
body.open .sidebar{
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button id="menuToggle">Toggle</button>
<div class="sidebar"></div>
</body>

dojo ListItem: display style changes on resize

I apologize, but I'm not able to provide a working jsFiddle snippet. I will update the question if I understand how to put the code below in it.
Using dojox/mobile I populate an EdgeToEdgeStoreList with custom ListItems. Some code:
html (jade)
div(data-dojo-type="dojox/mobile/View")
h1(data-dojo-type="dojox/mobile/Heading") Device List
div(data-dojo-type="dojox/mobile/ScrollablePane")
ul#list(data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" data-dojo-props="itemRenderer: DeviceListItem, select: 'single'")
js
var store;
var list = registry.byId("listDevices");
var devices = JSON.parse("a string received from server");
store = new Memory({data: devices, idProperty: "label"});
list.setStore(store);
DeviceListItem
define([
"dojox/mobile/ListItem",
"dijit/_TemplatedMixin",
"dojo/_base/declare"
], function (ListItem, TemplatedMixin, declare) {
var template =
"<div class='deviceDone${done}'>" +
" ${id} - <div style='display: inline-block;' data-dojo-attach-point='labelNode'></div>" +
" <div class='deviceCategory'>${category}</div>" +
"</div>";
TemplatedListItem = declare("DeviceListItem",
[ListItem, TemplatedMixin], {
id: "",
label: "",
category: "",
done: "false",
templateString: template
}
);
});
It works fine, that is I will see my custom ListItems.
But if I resize the window (on desktop browsers) or change orientation (on mobile ones) only the ${id} field remains visible. The others (label and category) disappear. The behavior is the same in all browsers (that I tried).
After debugging I discovered the following. Before any resize the actual html of a ListItem looks like this:
<div id="item1728" class="deviceDoneFalse mblListItem mblListItemUnchecked" tabindex="0" widgetid="item1728" aria-selected="false" role="option">
item1728 -
<div style="display: inline-block;" data-dojo-attach-point="labelNode">n.a.</div>
<div class="deviceCategory">General purpose</div>
</div>
and it's like the template string. After a resize the inner div becomes:
<div style="display: block;" data-dojo-attach-point="labelNode">n.a.</div>
without "inline" all the layout will mess-up and thus the fields "disappear" (actually go below, behind the next row).
I wonder why this happens - the display style is hardcoded into the template strings!
Furthermore, I inspected the CSS rules at runtime, and it's not due to them, it's the html that has changed - indeed.

ListItem (source in dojox/Mobile/ListItem.js) has the following function:
resize: function(){
if(this.variableHeight){
this.layoutVariableHeight();
}
// labelNode may not exist only when using a template (if not created by an attach point)
if(!this._templated || this.labelNode){
// If labelNode is empty, shrink it so as not to prevent user clicks.
this.labelNode.style.display = this.labelNode.firstChild ? "block" : "inline";
}
},
This function is called after a resize and as you can see sets the labelNode display style to "block".
You can replace this function when you define your DeviceListItem, keeping the original source as is but changing the display style.

Show commands' labels in AppBar with More button

So I've got myself an AppBar in my WinJS UWP app
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{ closedDisplayMode : 'compact', placement:'bottom'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'flyoutButton',
type:'flyout',
label:'Třída',
icon:'otheruser',
flyout:select('#classFlyout')}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'flyoutButton',
type:'flyout',
label:'Schovávání hodin',
icon:'calendarday',
flyout:select('#hidingFlyout')}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'moreButton',label:'More',icon:'more',section:'primary',tooltip:'Show more'}"></button>
</div>
It has two flyouts and a button. When I click the button, I want the the other commands' labels to be visible - as in the Win10 Weather app.
I've tried to create a function, that would change the appbar's closedDisplayMode to 'full'.
WinJS.UI.processAll().done(function () {
appBar = document.getElementById("appBar");
});
function addListeners() {
document.getElementById("moreButton").addEventListener("click", openCloseAppbar, false);
}
function openCloseAppbar() {
appBar.closedDisplayMode = 'full';
}
That, however, doesn't work. Is there an other way this is usually done that I'm missing? (Because for some reason I can't find any documentation on it.) Or am I just doing it wrong..?

The correct way to do it was apparently this:
appBar.winControl.closedDisplayMode = "full";
(Emphasis on .winControl.)