loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added data binding to <loot-plugin-card>.

Browse Source 
Started to use it. Individual data members will need their own
observers, just like was the case in the Plugin object.
This commit is contained in:
Oliver Hamlet
2014-11-14 16:07:19 +00:00
parent b6d4e49a80
commit 0d3eba01f4
4 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/html/loot-plugin-card.html
+42 -12
View File
@@ -24,7 +24,7 @@ loot-clear-metadata
<link rel="import" href="loot-plugin-editor.html">
<polymer-element name="loot-plugin-card">
<polymer-element name="loot-plugin-card" attributes="data">
<template>
<style>
/* Host and front/editor styling. */
@@ -153,15 +153,17 @@ loot-clear-metadata
<content select=".tag.remove"></content>
<content select="ul"></content>
</section>
<loot-plugin-editor id="editor">
<h1></h1>
<span class="version"></span>
<span class="crc"></span>
</loot-plugin-editor>
<loot-plugin-editor id="editor" data="{{data}}"></loot-plugin-editor>
</div>
</template>
<script>
Polymer({
data: undefined,
observe: {
'data.crc': 'onCrcChange',
},
attached: function() {
this.shadowRoot.getElementById('showOnlyConflicts').addEventListener('change', this.onShowOnlyConflicts, false);
this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onShowEditor, false);
@@ -189,6 +191,40 @@ loot-clear-metadata
this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
},
dataChanged: function(oldValue, newValue) {
/* Share the data with the editor. */
this.shadowRoot.getElementById('editor').data = this.data;
if (newValue != undefined) {
/* Also initialise the non-simple-string data. */
/* CRC */
this.getElementsByClassName('crc')[0].textContent = newValue.getCrcString();
/* Bash Tags */
var tags = newValue.getTagStrings();
this.getElementsByClassName('tag add')[0].textContent = tags.added;
this.getElementsByClassName('tag add')[0].classList.toggle('hidden', tags.added.length == 0);
this.getElementsByClassName('tag remove')[0].textContent = tags.removed;
this.getElementsByClassName('tag remove')[0].classList.toggle('hidden', tags.removed.length == 0);
/* Messages */
/* First clear any existing messages. */
var messageUL = this.getElementsByTagName('ul')[0];
while(messageUL.firstElementChild) {
messageUL.removeChild(messageUL.firstElementChild);
}
var messages = newValue.getUIMessages();
for (var i = 0; i < messages.length; ++i) {
messageUL.appendChild(messages[i]);
}
messageUL.classList.toggle('hidden', messages.length == 0);
}
},
onCrcChange: function(oldValue, newValue) {
this.getElementsByClassName('crc')[0].textContent = this.data.getCrcString();
},
getName: function() {
return this.getElementsByTagName('h1')[0].textContent;
},
@@ -196,12 +232,6 @@ loot-clear-metadata
onShowEditor: function(evt) {
var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentNode.host;
/* Fill in editor toolbar. */
var editor = card.shadowRoot.getElementById('editor');
editor.querySelector('h1').textContent = card.querySelector('h1').textContent;
editor.querySelector('.version').textContent = card.querySelector('.version').textContent;
editor.querySelector('.crc').textContent = card.querySelector('.crc').textContent;
/* Fire an open event, so that the UI can enter edit mode. */
card.dispatchEvent(new CustomEvent('loot-editor-open', {
bubbles: true,
resources/report/html/loot-plugin-editor.html
+12 -8
View File
@@ -20,7 +20,7 @@ loot-editor-close
<link rel="import" href="editable-table.html">
<polymer-element name="loot-plugin-editor">
<polymer-element name="loot-plugin-editor" attributes="{{data}}">
<template>
<style>
/* Icon styling. */
@@ -38,17 +38,21 @@ loot-editor-close
}
/* Content styling. */
::content .version, .version {
h1 {
font-weight: normal;
font-size: 1em;
}
.version {
display: inline-block;
margin-left: 1em;
color:#6394F8;
}
::content .crc, .crc {
.crc {
display: inline-block;
margin-left: 1em;
color:#BC8923;
}
::content .hidden, .hidden {
.hidden {
display: none;
}
@@ -121,9 +125,9 @@ loot-editor-close
<core-tooltip id="activeTick" label="Active Plugin">
<core-icon icon="check"></core-icon>
</core-tooltip>
<content select="h1"></content>
<content select=".version"></content>
<span flex><content select=".crc"></content></span>
<h1>{{data.name}}</h1>
<span class="version">{{data.version}}</span>
<span class="crc" flex>{{data.crc}}</span>
<core-tooltip id="dummyPlugin" label="Dummy Plugin">
<core-icon icon="visibility-off"></core-icon>
</core-tooltip>
@@ -139,7 +143,7 @@ loot-editor-close
<div horizontal layout center>
<div>Priority Value</div>
<paper-input-decorator>
<input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="0" preventInvalidInput>
<input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="{{data.modPriority}}" preventInvalidInput>
</paper-input-decorator>
</div>
<div id="tableTabs">
resources/report/js/plugin.js
+20 -38
View File
@@ -63,7 +63,7 @@ function Plugin(obj) {
return tag;
}
Plugin.prototype.updateCardTags = function() {
Plugin.prototype.getTagStrings = function() {
var tagsAdded = [];
var tagsRemoved = [];
@@ -88,18 +88,10 @@ function Plugin(obj) {
}
}
if (tagsAdded.length != 0) {
this.card.getElementsByClassName('tag add')[0].textContent = tagsAdded.join(', ');
this.card.getElementsByClassName('tag add')[0].classList.toggle('hidden', false);
} else {
this.card.getElementsByClassName('tag add')[0].classList.toggle('hidden', true);
}
if (tagsRemoved.length != 0) {
this.card.getElementsByClassName('tag remove')[0].textContent = tagsRemoved.join(', ');
this.card.getElementsByClassName('tag remove')[0].classList.toggle('hidden', false);
} else {
this.card.getElementsByClassName('tag remove')[0].classList.toggle('hidden', true);
}
return {
added: tagsAdded.join(', '),
removed: tagsRemoved.join(', ')
};
}
Plugin.prototype.getPriorityString = function() {
@@ -110,12 +102,16 @@ function Plugin(obj) {
}
}
Plugin.prototype.updateCardMessages = function() {
var messageUL = this.card.getElementsByTagName('ul')[0];
/* First clear any existing messages. */
while(messageUL.firstElementChild) {
messageUL.removeChild(messageUL.firstElementChild);
Plugin.prototype.getCrcString = function() {
if (this.crc == 0) {
return '';
} else {
return this.crc.toString(16).toUpperCase();
}
}
Plugin.prototype.getUIMessages = function() {
var uiMessages = [];
/* Now add the new messages. */
if (this.messages && this.messages.length != 0) {
this.messages.forEach(function(message) {
@@ -123,25 +119,18 @@ function Plugin(obj) {
messageLi.className = message.type;
// Use the Marked library for Markdown formatting support.
messageLi.innerHTML = marked(message.content[0].str);
messageUL.appendChild(messageLi);
uiMessages.push(messageLi);
});
this.card.getElementsByTagName('ul')[0].classList.toggle('hidden', false);
} else {
this.card.getElementsByTagName('ul')[0].classList.toggle('hidden', true);
}
return uiMessages;
}
Plugin.prototype.observer = function(changes) {
changes.forEach(function(change) {
if (change.name == 'userlist') {
change.object.card.setAttribute('data-edits', change.object[change.name] != undefined);
} else if (change.name == 'modPriority') {
change.object.card.shadowRoot.getElementById('priorityValue').value = change.object[change.name];
} else if (change.name == 'messages') {
change.object.updateCardMessages();
/* For messages, the card's messages need updating,
as do the message counts. */
if (change.name == 'messages') {
/* Update the message counts. */
var oldTotal = 0;
var newTotal = 0;
var oldWarns = 0;
@@ -176,20 +165,13 @@ function Plugin(obj) {
document.getElementById('totalMessageNo').textContent = parseInt(document.getElementById('totalMessageNo').textContent, 10) + newTotal - oldTotal;
document.getElementById('totalWarningNo').textContent = parseInt(document.getElementById('totalWarningNo').textContent, 10) + newWarns - oldWarns;
document.getElementById('totalErrorNo').textContent = parseInt(document.getElementById('totalErrorNo').textContent, 10) + newErrs - oldErrs;
} else if (change.name == 'tags') {
change.object.updateCardTags();
} else if (change.name == 'isDirty') {
/* Update dirty counts. */
if (change.object[change.name]) {
document.getElementById('dirtyPluginNo').textContent = ++parseInt(document.getElementById('dirtyPluginNo').textContent, 10);
} else {
document.getElementById('dirtyPluginNo').textContent = --parseInt(document.getElementById('dirtyPluginNo').textContent, 10);
}
} else if (change.name == 'crc') {
if (change.object[change.name] != 0) {
change.object.card.getElementsByClassName('crc')[0].textContent = change.object[change.name].toString(16).toUpperCase();
}
} else if (change.name == 'isDummy') {
change.object.card.setAttribute('data-dummy', change.object[change.name]);
}
});
}
resources/report/report.html
+1 -1
View File
@@ -201,7 +201,7 @@
</section>
<core-list>
<template>
<loot-plugin-card id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
<loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
<h1>{{model.name}}</h1>
<span class="version">{{model.version}}</span>
<span class="crc"></span>