projectmoon
/
msn-viewer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: projectmoon:3fb3ef927ab8b5d4fec5e95209642ce6ed795ff7
Branches Tags
projectmoon:master
...
compare: projectmoon:017a624c667bafa76fb8f225374a6d30bb4f97af
Branches Tags
projectmoon:master

2 Commits
3fb3ef927a ... 017a624c66

Author SHA1 Message Date
projectmoon 017a624c66 Disable load previous buttons when there are no saves 2023-01-04 12:22:06 +01:00
projectmoon 0daf5a8e52 Remove table-sm resizing, use clock icon in mobile UI, fix mobile UI jumping around when clicking a date/username. Fix line endings in xsl file. 2023-01-04 11:54:46 +01:00
5 changed files with 168 additions and 152 deletions
Show Stats Expand all files Collapse all files

3
src/index.html
View File

@ -167,7 +167,8 @@
information hidden to make reading
messages easier.
<ul>
<li>Tap on the pound sign to see the
<li>Tap on the <i class="bi
bi-clock"></i> clock to see the
date and time of the message.</li>
<li>Tap again to hide the popup.</li>
<li>Long chat messages are scrollable.

2
src/scss/index.scss
View File

@ -63,7 +63,7 @@ th, td {
}
.message-mobile-date-time {
width: 1em;
width: 2em;
}
.message-from-user {

37
src/ts/index.ts
View File

@ -103,7 +103,8 @@ function processFragment() {
async function saveToDatabase(filename: string, xml: string) {
db.entries
.put({ filename, backupData: xml })
.catch(err => displayFatalError('Saving Failed', err));
.then(_ => toggleLoadPrevious(true))
.catch(err => console.error('Saving Failed', err));
}
function displayBackup(xsltProcessor: XSLTProcessor, filename: string, xmlText: string): boolean {
@ -136,7 +137,29 @@ function displayBackup(xsltProcessor: XSLTProcessor, filename: string, xmlText:
}
}
function initEvents() {
function toggleLoadPrevious(toggle: boolean) {
ui.loadPreviousButtons.forEach(btn => {
if (toggle) {
btn.classList.remove('disabled');
} else {
btn.classList.add('disabled');
}
});
}
async function initEvents() {
db.entries.count()
.then(count => {
if (count < 1) {
toggleLoadPrevious(false);
}
})
.catch(err => {
//Something wrong with db access, disable buttons anyway.
console.error(err);
toggleLoadPrevious(false);
});
ui.loadPreviousButtons.forEach(button => button.addEventListener('click', async () => {
await populateSavedBackups();
}));
@ -190,15 +213,7 @@ async function populateSavedBackups() {
}
window.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('resize', () => {
if (window.innerWidth <= 500) {
ui.chatDisplay.querySelector('table')?.classList.add('table-sm');
} else {
ui.chatDisplay.querySelector('table')?.classList.remove('table-sm');
}
});
initEvents();
await initEvents();
showLoadingIndicator(false);
showApplication(true);
});

4
src/ts/ui.ts
View File

@ -8,9 +8,9 @@ export const chatDisplay: HTMLElement = document.getElementById('chat-display')!
export const fileSelector: HTMLInputElement = document.getElementById('backup-file')! as HTMLInputElement;
export const savedBackups: HTMLSelectElement = document.getElementById('saved-backups')! as HTMLSelectElement;
export const viewNewButtons =
document.querySelectorAll('#unloaded-view-new-button, #loaded-view-new-button');
<NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-view-new-button, #loaded-view-new-button');
export const loadPreviousButtons =
document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
<NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
export const previousBackupsList: HTMLDivElement = document.getElementById('previous-backups-list')! as HTMLDivElement;
export const noFileLoadedControls: HTMLDivElement = document.getElementById('no-file-loaded-controls')! as HTMLDivElement;
export const fileLoadedControls: HTMLDivElement = document.getElementById('file-loaded-controls')! as HTMLDivElement;

274
src/xsl/MessageLog.xsl
View File

@ -1,137 +1,137 @@
<?xml version="1.0"?>
<!--
This XSLT file is based on the default XSL stylesheet generated by MSN
Messenger, and unlike the rest of the application, is probably(?) not
covered under the AGPL.
The file was originally retrieved from this project:
https://github.com/jerecui/MSNChatHistoryCombiner
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- localized strings -->
<xsl:variable name='ColumnHeader_Date'>Date</xsl:variable>
<xsl:variable name='ColumnHeader_Time'>Time</xsl:variable>
<xsl:variable name='ColumnHeader_From'>From</xsl:variable>
<xsl:variable name='ColumnHeader_Message'>Message</xsl:variable>
<!-- variables -->
<xsl:variable name='UseZebraStripe'>1</xsl:variable>
<xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
<xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>
<xsl:template match="Log">
<table id='BodyTable' class="table">
<thead>
<tr>
<th class="d-lg-none message-mobile-date-time">
<!-- for mobile date/time -->
</th>
<th class="d-none d-lg-table-cell">
<xsl:value-of select="$ColumnHeader_Date"/>
</th>
<th class="d-none d-lg-table-cell">
<xsl:value-of select="$ColumnHeader_Time"/>
</th>
<th class="message-from-user">
<xsl:value-of select="$ColumnHeader_From"/>
</th>
<th>
<xsl:value-of select="$ColumnHeader_Message"/>
</th>
</tr>
</thead>
<tbody class="table-group-divider">
<xsl:choose>
<!-- newest session first -->
<xsl:when test="$MostRecentSessionFirst = 1">
<xsl:apply-templates>
<xsl:sort select='@SessionID' order='descending' data-type='number'/>
<xsl:sort select='@DateTime' order='ascending'/>
</xsl:apply-templates>
</xsl:when>
<!-- oldest session first -->
<xsl:otherwise>
<xsl:apply-templates>
<xsl:sort select='@SessionID' order='ascending' data-type='number'/>
<xsl:sort select='@DateTime' order='ascending'/>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
</tbody>
</table>
</xsl:template>
<xsl:template match="Message">
<tr>
<xsl:call-template name="CommonMessageProcessing" />
<td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
<td class="message-content">
<div class="overflow-auto">
<xsl:value-of select="Text"/>
</div>
</td>
</tr>
</xsl:template>
<xsl:template match="Invitation|InvitationResponse|Join|Leave">
<tr>
<xsl:call-template name="CommonMessageProcessing" />
<td>
<span>
<xsl:value-of select="Text"/>
</span>
</td>
</tr>
</xsl:template>
<xsl:template match="From/User">
<a class="info-popover" href="#" tabindex="0"
data-bs-trigger="focus"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="bottom" data-bs-title="Username">
<xsl:attribute name="data-bs-content">
<xsl:value-of select="@FriendlyName"/>
</xsl:attribute>
<xsl:value-of select="@FriendlyName"/>
</a>
</xsl:template>
<xsl:template name="CommonMessageProcessing">
<!-- zebra-stripe the sessions -->
<xsl:if test="$UseZebraStripe = 1">
<xsl:if test="(@SessionID mod 2) = 1">
<xsl:attribute name="style">
<xsl:value-of select="$ZebraStripeStyle"/>
</xsl:attribute>
</xsl:if>
</xsl:if>
<!-- mobile shows a popover span for date/time -->
<td class="d-lg-none message-mobile-date-time">
<a class="info-popover" href="#" tabindex="0"
data-bs-trigger="focus"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="right" data-bs-title="Date/Time">
<xsl:attribute name="data-bs-content">
<xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
</xsl:attribute>
#
</a>
</td>
<td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
<td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0"?>
<!--
This XSLT file is based on the default XSL stylesheet generated by MSN
Messenger, and unlike the rest of the application, is probably(?) not
covered under the AGPL.
The file was originally retrieved from this project:
https://github.com/jerecui/MSNChatHistoryCombiner
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- localized strings -->
<xsl:variable name='ColumnHeader_Date'>Date</xsl:variable>
<xsl:variable name='ColumnHeader_Time'>Time</xsl:variable>
<xsl:variable name='ColumnHeader_From'>From</xsl:variable>
<xsl:variable name='ColumnHeader_Message'>Message</xsl:variable>
<!-- variables -->
<xsl:variable name='UseZebraStripe'>1</xsl:variable>
<xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
<xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>
<xsl:template match="Log">
<table id='BodyTable' class="table">
<thead>
<tr>
<th class="d-lg-none message-mobile-date-time">
<!-- for mobile date/time -->
</th>
<th class="d-none d-lg-table-cell">
<xsl:value-of select="$ColumnHeader_Date"/>
</th>
<th class="d-none d-lg-table-cell">
<xsl:value-of select="$ColumnHeader_Time"/>
</th>
<th class="message-from-user">
<xsl:value-of select="$ColumnHeader_From"/>
</th>
<th>
<xsl:value-of select="$ColumnHeader_Message"/>
</th>
</tr>
</thead>
<tbody class="table-group-divider">
<xsl:choose>
<!-- newest session first -->
<xsl:when test="$MostRecentSessionFirst = 1">
<xsl:apply-templates>
<xsl:sort select='@SessionID' order='descending' data-type='number'/>
<xsl:sort select='@DateTime' order='ascending'/>
</xsl:apply-templates>
</xsl:when>
<!-- oldest session first -->
<xsl:otherwise>
<xsl:apply-templates>
<xsl:sort select='@SessionID' order='ascending' data-type='number'/>
<xsl:sort select='@DateTime' order='ascending'/>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
</tbody>
</table>
</xsl:template>
<xsl:template match="Message">
<tr>
<xsl:call-template name="CommonMessageProcessing" />
<td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
<td class="message-content">
<div class="overflow-auto">
<xsl:value-of select="Text"/>
</div>
</td>
</tr>
</xsl:template>
<xsl:template match="Invitation|InvitationResponse|Join|Leave">
<tr>
<xsl:call-template name="CommonMessageProcessing" />
<td>
<span>
<xsl:value-of select="Text"/>
</span>
</td>
</tr>
</xsl:template>
<xsl:template match="From/User">
<a class="info-popover" href="javascript:void(0);" tabindex="0"
data-bs-trigger="focus"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="bottom" data-bs-title="Username">
<xsl:attribute name="data-bs-content">
<xsl:value-of select="@FriendlyName"/>
</xsl:attribute>
<xsl:value-of select="@FriendlyName"/>
</a>
</xsl:template>
<xsl:template name="CommonMessageProcessing">
<!-- zebra-stripe the sessions -->
<xsl:if test="$UseZebraStripe = 1">
<xsl:if test="(@SessionID mod 2) = 1">
<xsl:attribute name="style">
<xsl:value-of select="$ZebraStripeStyle"/>
</xsl:attribute>
</xsl:if>
</xsl:if>
<!-- mobile shows a popover span for date/time -->
<td class="d-lg-none message-mobile-date-time">
<a class="info-popover" href="javascript:void(0);" tabindex="0"
data-bs-trigger="focus"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="right" data-bs-title="Date/Time">
<xsl:attribute name="data-bs-content">
<xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
</xsl:attribute>
<i class="bi bi-clock"></i>
</a>
</td>
<td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
<td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
</xsl:template>
</xsl:stylesheet>