WIP on displaying images in lists in AndorsTrailEditor.

diff --git a/AndorsTrailEdit/AndorsTrailEditor.js b/AndorsTrailEdit/AndorsTrailEditor.js
index 494ac71b27e4e0e2541a6f1ee5931321b7157c5d..8c2489f9e0a543fd05594a1e809f2d93d99d4e69 100644 (file)
--- a/AndorsTrailEdit/AndorsTrailEditor.js
+++ b/AndorsTrailEdit/AndorsTrailEditor.js
@@ -17,6 +17,7 @@ IncludeJavascript("Editor_Conversation.js");
 IncludeJavascript("Editor_Monster.js");
 
 IncludeJavascript("inc/jquery.dynatree.min.js");
+IncludeJavascript("inc/mustache.js");
 
 
 var model;
@@ -36,7 +37,12 @@ function openTabForObject(obj, dataStore) {
 function bindObjectsToItemList(itemListDiv, dataStore) {
        itemListDiv.children().remove();
        var addToList = function(obj) { 
-               var item = $("<li>" + obj[dataStore.nameField] + "</li>");
+               //var item = $("<li>" + obj[dataStore.nameField] + "</li>");
+               var item = $( Mustache.to_html( $('#listitem').html(), { name: obj[dataStore.nameField] } ) );
+               if (dataStore.iconField) {
+                       var elem = $( 'img', item );
+                       imageSelector.setImage( elem , obj[dataStore.iconField] , 0.7);
+               }
                item.click(function() { openTabForObject(obj, dataStore); });
                itemListDiv.append(item);
                item.hide().fadeIn('slow');
@@ -110,6 +116,7 @@ function startEditor() {
                        )
                        ,idField: 'id'
                        ,nameField: 'name'
+                       ,iconField: 'iconID'
                })
                ,quests: new DataStore({
                        objectTypename: 'quest'
@@ -128,6 +135,7 @@ function startEditor() {
                        )
                        ,idField: 'id'
                        ,nameField: 'name'
+                       ,iconField: 'iconID'
                })
                ,droplists: new DataStore({
                        objectTypename: 'droplist'
@@ -149,12 +157,71 @@ function startEditor() {
                        )
                        ,idField: 'id'
                        ,nameField: 'name'
+                       ,iconField: 'iconID'
                })
        };
        
        addExampleModelItems(model);
 
        
+       
+       
+       imageSelector = new ImageSelector("../AndorsTrail/res/drawable/", $( "#dialog-images" ) );
+       imageSelector.add(new TilesetImage("actorconditions_1", {x:14, y:8}, undefined, [ 'conditions' ] ));
+       imageSelector.add(new TilesetImage("actorconditions_2", {x:3, y:1}, undefined, [ 'conditions' ] ));
+       imageSelector.add(new TilesetImage("items_armours", {x:14, y:3}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_armours_3", {x:10, y:4}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_armours_2", {x:7, y:1}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_weapons", {x:14, y:6}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_weapons_3", {x:13, y:5}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_weapons_2", {x:7, y:1}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_jewelry", {x:14, y:1}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_rings_1", {x:10, y:3}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_necklaces_1", {x:10, y:3}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_consumables", {x:14, y:5}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_books", {x:11, y:1}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_misc", {x:14, y:4}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_misc_2", {x:20, y:12}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_misc_3", {x:20, y:12}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("items_misc_4", {x:20, y:4}, undefined, [ 'items' ] ));
+       imageSelector.add(new TilesetImage("monsters_armor1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_demon1", {x: 1, y:1}, {x:64, y:64}, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_dogs", {x: 7, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_eye1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_eye2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_eye3", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_eye4", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_ghost1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_hydra1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_insects", {x: 6, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_liches", {x: 4, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_mage", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_mage2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_man1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_men", {x: 9, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_men2", {x: 10, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_misc", {x: 12, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_rats", {x: 5, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_rogue1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_skeleton1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_skeleton2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_snakes", {x: 6, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_cyclops", {x: 1, y:1}, {x:64, y:96}, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_warrior1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_wraiths", {x: 3, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_zombie1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_zombie2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_karvis1", {x: 2, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_karvis2", {x: 9, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_rltiles1", {x:20, y:8}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_rltiles2", {x:20, y:9}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_rltiles3", {x:10, y:3}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_redshrike1", {x:6, y:1}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_ld1", {x:20, y:12}, undefined, [ 'monsters' ] ));
+       imageSelector.add(new TilesetImage("monsters_ld2", {x:20, y:12}, undefined, [ 'monsters' ] ));
+       
+       
+       
        $( "#left #tools" ).accordion({ fillSpace: true });
        
        tabs = new EditorTabs( $( "#center #tabs" ) );
@@ -234,60 +301,5 @@ function startEditor() {
                        width: 350,
                        buttons: defaultButtons
                });
-       
-       imageSelector = new ImageSelector("../AndorsTrail/res/drawable/", $( "#dialog-images" ) );
-       imageSelector.add(new TilesetImage("actorconditions_1", {x:14, y:8}, undefined, [ 'conditions' ] ));
-       imageSelector.add(new TilesetImage("actorconditions_2", {x:3, y:1}, undefined, [ 'conditions' ] ));
-       imageSelector.add(new TilesetImage("items_armours", {x:14, y:3}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_armours_3", {x:10, y:4}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_armours_2", {x:7, y:1}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_weapons", {x:14, y:6}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_weapons_3", {x:13, y:5}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_weapons_2", {x:7, y:1}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_jewelry", {x:14, y:1}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_rings_1", {x:10, y:3}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_necklaces_1", {x:10, y:3}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_consumables", {x:14, y:5}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_books", {x:11, y:1}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_misc", {x:14, y:4}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_misc_2", {x:20, y:12}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_misc_3", {x:20, y:12}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("items_misc_4", {x:20, y:4}, undefined, [ 'items' ] ));
-       imageSelector.add(new TilesetImage("monsters_armor1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_demon1", {x: 1, y:1}, {x:64, y:64}, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_dogs", {x: 7, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_eye1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_eye2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_eye3", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_eye4", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_ghost1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_hydra1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_insects", {x: 6, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_liches", {x: 4, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_mage", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_mage2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_man1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_men", {x: 9, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_men2", {x: 10, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_misc", {x: 12, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_rats", {x: 5, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_rogue1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_skeleton1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_skeleton2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_snakes", {x: 6, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_cyclops", {x: 1, y:1}, {x:64, y:96}, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_warrior1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_wraiths", {x: 3, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_zombie1", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_zombie2", {x: 1, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_karvis1", {x: 2, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_karvis2", {x: 9, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_rltiles1", {x:20, y:8}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_rltiles2", {x:20, y:9}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_rltiles3", {x:10, y:3}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_redshrike1", {x:6, y:1}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_ld1", {x:20, y:12}, undefined, [ 'monsters' ] ));
-       imageSelector.add(new TilesetImage("monsters_ld2", {x:20, y:12}, undefined, [ 'monsters' ] ));
-       
 }
 

diff --git a/AndorsTrailEdit/DataStore.js b/AndorsTrailEdit/DataStore.js
index 9fbc8208a34b3b769f82a2568283a78dd68d60db..71cab395966f1bde228c05917034c0db555fff1d 100644 (file)
--- a/AndorsTrailEdit/DataStore.js
+++ b/AndorsTrailEdit/DataStore.js
@@ -27,6 +27,7 @@ function DataStore(input) {
        this.fieldList = input.fieldList;
        this.nameField = input.nameField ? input.nameField : 'name';
        this.idField = input.idField ? input.idField : 'id';
+       this.iconField = input.iconField;
        this.items = [];
        
        this.add = function(obj) { 

diff --git a/AndorsTrailEdit/ImageSelector.js b/AndorsTrailEdit/ImageSelector.js
index a4f5b0093db5af76a2ebdc702ffb7dc32970825d..b159c4bf623c3881ec8fa9c7e8ea973987b7543b 100644 (file)
--- a/AndorsTrailEdit/ImageSelector.js
+++ b/AndorsTrailEdit/ImageSelector.js
@@ -48,18 +48,26 @@ function ImageSelector(imagePath, dialog) {
                return name + ":" + localID;
        }
        
-       var updateImageFromFormField = function(image, formField) {
-               var img = parseImageID(formField.val());
+       this.setImage = function(imageElem, imageID, scale) {
+               if (!scale) scale = 1;
+               var img = parseImageID(imageID);
                var tilesetImage = get(img.name);
                if (!tilesetImage) { tilesetImage = get(""); }
                var c = tilesetImage.localIDToCoords(img.localID);
-               image.css({
+               imageElem.css({
                        "background-image": "url(" +img.path + img.name + ".png)", 
-                       "background-position": (-c.x)+"px " + (-c.y)+"px",
-                       "width": tilesetImage._tileSize.x + "px",
-                       "height": tilesetImage._tileSize.y + "px",
+                       "background-position": (-c.x)*scale+"px " + (-c.y)*scale+"px",
+                       "width": tilesetImage._tileSize.x * scale + "px",
+                       "height": tilesetImage._tileSize.y * scale + "px",
                        "cursor": "pointer"
                });
+               if (scale) {
+                       imageElem.css({
+                               "background-size": 
+                                       tilesetImage._tileSize.x * tilesetImage._numTiles.x * scale + "px "
+                                       + tilesetImage._tileSize.y * tilesetImage._numTiles.y * scale + "px "
+                       });
+               }
        }
        
        this.add = function(tileset) { 
@@ -85,14 +93,15 @@ function ImageSelector(imagePath, dialog) {
                });
        }
        
-       this.imageify = function(img, val, showTilesetTag) {
-               val.change(function() { updateImageFromFormField(img, val); });
+       this.imageify = function(img, elem, showTilesetTag) {
+               var setImage = this.setImage;
+               elem.change(function() { setImage(img, elem.val()); });
                img.click(function() {
-                       currentInput = val;
+                       currentInput = elem;
                        showImages(showTilesetTag);
                        dialog.dialog("open");
                });
-               val.change();
+               elem.change();
        }
        
        

diff --git a/AndorsTrailEdit/editor.html b/AndorsTrailEdit/editor.html
index f5a11c1c9f64e2278c9b7999fe79555d958d18a9..dfb1fecf53c7ed28a1786ecb5d1cd6d9a1aae657 100644 (file)
--- a/AndorsTrailEdit/editor.html
+++ b/AndorsTrailEdit/editor.html
@@ -28,6 +28,10 @@
        </div>\r
 </div>\r
 \r
+<script type="text/template" id="listitem">\r
+       <li><img />{{name}}</li>\r
+</script>\r
+\r
 <div id="left" class="workarea">\r
        <div id="tools">\r
                <h3><a href="#">Actor conditions</a></h3>\r

diff --git a/AndorsTrailEdit/styles2.css b/AndorsTrailEdit/styles2.css
index 60bd7a9e6173fb28bba2c5fc21415324cc07bd11..f8ac04314c49c49eaaf9bc99e55d6dd76887ef6e 100644 (file)
--- a/AndorsTrailEdit/styles2.css
+++ b/AndorsTrailEdit/styles2.css
@@ -24,7 +24,8 @@ html,body                                     { margin:0; padding:0; height: 100%; font-size: 0.9em; }
 
 #screen #left div                      { }
 .itemlist                                      { border: 1px #bbb solid; list-style: none; padding: 0px; margin: 0px; line-height: 1.3; margin-bottom: 2ex; }
-.itemlist li                           { cursor: pointer; padding: 0.5ex 1ex 0.5ex 2ex; }
+.itemlist li                           { cursor: pointer; padding: 0.5ex 1ex 0.5ex 1ex; }
+.itemlist li img                       { float: left; margin-right: 0.5ex; }
 .itemlist li:nth-child(odd)    { background-color: #eee; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; }
 .itemlist li:hover                     { background-color: #d7d7ff; }
 .importexport-header           { font-weight: bold; padding-top: 1ex; }