Modelviewer

* removed quality options (java .. holy crap!)
 * added animations menu

static/css/aowow.css

@@ -2534,36 +2534,9 @@ div.modelviewer-screen {
     margin: 0 auto;
 }
 
-div.modelviewer-quality {
-    margin: 10px 10px 5px 0;
-    line-height: 22px;
-    height: 22px;
-    display: block;
-    float: left;
-}
-
-div.modelviewer-quality var {
-    float: left;
-    height: 22px;
-    display: block;
-    color: #a0a0a0;
-    text-transform: uppercase;
-    text-decoration: none;
-    font-size: 15px;
-    font-style: normal;
-    margin-right: 10px;
-    font-family: Tahoma, sans-serif;
-}
-
-div.modelviewer-quality span {
-    float: left;
-    display: block;
-    line-height: 22px;
-}
-
 div.modelviewer-model {
-/*  clear: left;
+    clear: left;
-    padding: 5px 0 10px 0; */
+    padding: 5px 0 10px 0;
     padding: 10px 0;
 }
 
@@ -2586,13 +2559,16 @@ a.modelviewer-help {
     display: block;
     padding: 10px 0 10px 10px;
     margin-right: 10px;
+    margin-top:5px;
 }
 
 a.modelviewer-close {
     float: right;
     display: block;
     padding: 10px 0 10px 10px;
-}
+    clear:right;
+    margin-top:5px;
+ }
 
 /**********/
 /* LAYOUT */

static/css/locale_dede.css

@@ -1,13 +1,4 @@
-div.modelviewer-quality div {
-    float: left;
-    width: 71px;
-    height: 22px;
-    margin-right: 10px;
-    background: url(../images/dede/modelviewer-picshures.gif) left center no-repeat;
-}
-
 div.modelviewer-model div {
-    margin-left: 25px;
     margin-right: 10px;
     float: left;
     width: 50px;

static/css/locale_enus.css

@@ -1,13 +1,4 @@
-div.modelviewer-quality div {
-    float: left;
-    width: 61px;
-    height: 22px;
-    margin-right: 10px;
-    background: url(../images/enus/modelviewer-picshures.gif) left center no-repeat;
-}
-
 div.modelviewer-model div {
-    margin-left: 40px;
     margin-right: 10px;
     float: left;
     width: 50px;

static/css/locale_eses.css

@@ -3,16 +3,7 @@
     width, left, background-position values may need adjustment!
 */
 
-div.modelviewer-quality div {
-    float: left;
-    width: 70px;
-    height: 22px;
-    margin-right: 10px;
-    background: url(../images/eses/modelviewer-picshures.gif) left center no-repeat;
-}
-
 div.modelviewer-model div {
-    margin-left: 40px;
     margin-right: 5px;
     float: left;
     width: 80px;

static/css/locale_frfr.css

@@ -1,13 +1,4 @@
-div.modelviewer-quality div {
-    float: left;
-    width: 61px;
-    height: 22px;
-    margin-right: 10px;
-    background: url(../images/frfr/modelviewer-picshures.gif) left center no-repeat;
-}
-
 div.modelviewer-model div {
-    margin-left: 25px;
     margin-right: 10px;
     float: left;
     width: 58px;

static/css/locale_ruru.css

@@ -1,13 +1,4 @@
-div.modelviewer-quality div {
-    float: left;
-    width: 76px;
-    height: 22px;
-    margin-right: 10px;
-    background: url(../images/ruru/modelviewer-picshures.gif) left center no-repeat;
-}
-
 div.modelviewer-model div {
-    margin-left: 40px;
     margin-right: 10px;
     float: left;
     width: 61px;

static/js/global.js

@@ -19886,9 +19886,6 @@ var ModelViewer = new function() {
         modelType,
         equipList = [],
         optBak,
-        _w,
-        _o,
-        _z,
         modelDiv,
         raceSel1,
         raceSel2,
@@ -19896,6 +19893,7 @@ var ModelViewer = new function() {
         oldHash,
         mode,
         readExtraPound,
+        animsLoaded = false,
 
     races = [
         {id: 10, name: g_chr_races[10], model: 'bloodelf' },
@@ -19915,25 +19913,19 @@ var ModelViewer = new function() {
         {id: 1, name: LANG.female, model: 'female' }
     ];
 
-    function clear() {
+    function clear() { }
-        _w.style.display = 'none';
-        _o.style.display = 'none';
-        _z.style.display = 'none';
-    }
 
     function getRaceSex() {
         var
             race,
             sex;
 
-        if (raceSel1.style.display == '') {
+        if (raceSel1.is(':visible'))
-            race = (raceSel1.selectedIndex >= 0 ? raceSel1.options[raceSel1.selectedIndex].value : '');
+            race = (raceSel1[0].selectedIndex >= 0 ? raceSel1.val() : '');
-        }
+        else
-        else {
+            race = (raceSel2[0].selectedIndex >= 0 ? raceSel2.val() : '');
-            race = (raceSel2.selectedIndex >= 0 ? raceSel2.options[raceSel2.selectedIndex].value : '');
-        }
 
-        sex = (sexSel.selectedIndex >= 0 ? sexSel.options[sexSel.selectedIndex].value : 0);
+        sex = (sexSel[0].selectedIndex >= 0 ? sexSel.val() : 0);
 
         return { r: race, s: sex };
     }
@@ -19945,28 +19937,6 @@ var ModelViewer = new function() {
     }
 
     function render() {
-        if (mode == 2 && !f()) {
-            mode = 0;
-        }
-        if (mode == 2) {
-            var G = '<object id="3dviewer-plugin" type="application/x-zam-wowmodel" width="600" height="400"><param name="model" value="' + model + '" /><param name="modelType" value="' + modelType + '" /><param name="contentPath" value="http://static.wowhead.com/modelviewer/" />';
-            if (modelType == 16 && equipList.length) {
-                G += '<param name="equipList" value="' + equipList.join(',') + '" />';
-            }
-            G += '<param name="bgColor" value="#181818" /></object>';
-            _z.innerHTML = G;
-            _z.style.display = '';
-        }
-        else if (mode == 1) {
-            var G = '<applet id="3dviewer-java" code="org.jdesktop.applet.util.JNLPAppletLauncher" width="600" height="400" archive="http://static.wowhead.com/modelviewer/applet-launcher.jar,http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jar,http://download.java.net/media/gluegen/webstart/gluegen-rt.jar,http://download.java.net/media/java3d/webstart/release/vecmath/latest/vecmath.jar,http://static.wowhead.com/modelviewer/ModelView510.jar"><param name="jnlp_href" value="http://static.wowhead.com/modelviewer/ModelView.jnlp"><param name="codebase_lookup" value="false"><param name="cache_option" value="no"><param name="subapplet.classname" value="modelview.ModelViewerApplet"><param name="subapplet.displayname" value="Model Viewer Applet"><param name="progressbar" value="true"><param name="jnlpNumExtensions" value="1"><param name="jnlpExtension1" value="http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jnlp"><param name="contentPath" value="http://static.wowhead.com/modelviewer/"><param name="model" value="' + model + '"><param name="modelType" value="' + modelType + '">';
-            if (modelType == 16 && equipList.length) {
-                G += '<param name="equipList" value="' + equipList.join(',') + '">';
-            }
-            G += '<param name="bgColor" value="#181818"></applet>';
-            _o.innerHTML = G;
-            _o.style.display = '';
-        }
-        else {
         var flashVars = {
             model: model,
             modelType: modelType,
@@ -19991,8 +19961,7 @@ var ModelViewer = new function() {
 
         // swfobject.embedSWF('http://static.wowhead.com/modelviewer/ZAMviewerfp11.swf', 'modelviewer-generic', '600', '400', "11.0.0", 'http://static.wowhead.com/modelviewer/expressInstall.swf', flashVars, params, attributes);
         swfobject.embedSWF(g_staticUrl + '/modelviewer/ZAMviewerfp11.swf', 'modelviewer-generic', '600', '400', "11.0.0", g_staticUrl + '/modelviewer/expressInstall.swf', flashVars, params, attributes);
-            _w.style.display = '';
+
-        }
         var
             foo  = getRaceSex(),
             race = foo.r,
@@ -20027,6 +19996,9 @@ var ModelViewer = new function() {
             if (optBak.extraPound != null) {
                 url += ':' + optBak.extraPound;
             }
+
+            animsLoaded = false,
+
             location.replace($WH.rtrim(url, ':'));
         }
     }
@@ -20038,11 +20010,10 @@ var ModelViewer = new function() {
             sex  = foo.s;
 
         if (!race) {
-            if (sexSel.style.display == 'none') {
+            if (!sexSel.is(':visible'))
                 return;
-            }
 
-            sexSel.style.display = 'none';
+            sexSel.hide();
 
             model = equipList[1];
             switch (optBak.slot) {
@@ -20057,13 +20028,10 @@ var ModelViewer = new function() {
             }
         }
         else {
-            if (sexSel.style.display == 'none') {
+            if (!sexSel.is(':visible'))
-                sexSel.style.display = '';
+                sexSel.show();
-            }
 
-            var foo = function(x) {
+            var foo = function(x) { return x.id; };
-                return x.id;
-            };
             var raceIndex = $WH.in_array(races, race, foo);
             var sexIndex = $WH.in_array(sexes, sex,   foo);
 
@@ -20079,25 +20047,50 @@ var ModelViewer = new function() {
         render();
     }
 
-    function j(newMode) {
+    function onAnimationChange() {
-        if (newMode == mode) {
+        var viewer = $('#modelviewer-generic');
+        if (viewer.length == 0)
+            return;
+        viewer = viewer[0];
+
+        var animList = $('select', animDiv);
+        if (animList.val() && viewer.isLoaded && viewer.isLoaded())
+            viewer.setAnimation(animList.val());
+    }
+
+    function onAnimationMouseover() {
+        if (animsLoaded)
+            return;
+
+        var viewer = $('#modelviewer-generic');
+        if (viewer.length == 0)
+            return;
+        viewer = viewer[0];
+
+        var animList = $('select', animDiv);
+        animList.empty();
+        if (!viewer.isLoaded || !viewer.isLoaded()) {
+            animList.append($('<option/>', { text: LANG.tooltip_loading, val: 0 }));
             return;
         }
 
-        g_setSelectedLink(this, 'modelviewer-mode');
+        var anims = {};
-
+        var numAnims = viewer.getNumAnimations();
-        clear();
+        for(var i = 0; i < numAnims; ++i) {
-
+            var a = viewer.getAnimation(i);
-        if (mode == null) {
+            if(a && a != 'EmoteUseStanding')
-            mode = newMode;
+                anims[a] = 1;
-            setTimeout(render, 50);
-        }
-        else {
-            mode = newMode;
-            $WH.sc('modelviewer_mode', 7, newMode, '/', location.hostname);
-            // $WH.sc('modelviewer_mode', 7, newMode, '/', '.wowhead.com');
-            render();
         }
+
+        var animArray = [];
+        for (var a in anims)
+            animArray.push(a);
+        animArray.sort();
+
+        for (var i = 0; i < animArray.length; ++i)
+            animList.append($('<option/>', { text: animArray[i], val: animArray[i] }));
+
+        animsLoaded = true;
     }
 
     function initRaceSex(allowNoRace, opt) {
@@ -20112,11 +20105,11 @@ var ModelViewer = new function() {
             race = opt.race;
             sex = opt.sex;
 
-            modelDiv.style.display = 'none';
+            modelDiv.hide();
             allowNoRace = 0;
         }
         else {
-            modelDiv.style.display = '';
+            modelDiv.show();
         }
 
         if (race == -1 && sex == -1) {
@@ -20126,7 +20119,7 @@ var ModelViewer = new function() {
                     if (isRaceSexValid(matches[1], matches[2])) {
                         race = matches[1];
                         sex  = matches[2];
-                        sexSel.style.display = '';
+                        sexSel.show();
                     }
                 }
             }
@@ -20136,12 +20129,11 @@ var ModelViewer = new function() {
             sel    = raceSel1;
             offset = 1;
 
-            raceSel1.style.display = '';
+            raceSel1.show();
-            raceSel1.selectedIndex = -1;
+            raceSel1[0].selectedIndex = -1;
-            raceSel2.style.display = 'none';
+            raceSel2.hide();
-            if (sex == -1) {
+            if (sex == -1)
-                sexSel.style.display = 'none';
+                sexSel.hide();
-            }
         }
         else {
             if (race == -1 && sex == -1) {
@@ -20181,20 +20173,17 @@ var ModelViewer = new function() {
             sel    = raceSel2;
             offset = 0;
 
-            raceSel1.style.display = 'none';
+            raceSel1.hide();
-            raceSel2.style.display = '';
+            raceSel2.show();
-            sexSel.style.display   = '';
+            sexSel.show();
         }
 
         if (sex != -1) {
-            sexSel.selectedIndex = sex;
+            sexSel[0].selectedIndex = sex;
         }
 
         if (race != -1 && sex != -1) {
-            var foo = function(x) {
+            var foo = function(x) { return x.id; };
-                return x.id;
-            };
-
             var raceIndex = $WH.in_array(races, race, foo);
             var sexIndex  = $WH.in_array(sexes, sex,  foo);
 
@@ -20204,23 +20193,12 @@ var ModelViewer = new function() {
 
                 raceIndex += offset;
 
-                sel.selectedIndex = raceIndex;
+                sel[0].selectedIndex = raceIndex;
-                sexSel.selectedIndex = sexIndex;
+                sexSel[0].selectedIndex = sexIndex;
             }
         }
     }
 
-    function f() {
-        var E = navigator.mimeTypes['application/x-zam-wowmodel'];
-        if (E) {
-            var D = E.enabledPlugin;
-            if (D) {
-                return true
-            }
-        }
-        return false
-    }
-
     function onHide() {
         if (!optBak.noPound) {
             if (!optBak.fromTag && oldHash && oldHash.indexOf('modelviewer') == -1) {
@@ -20251,109 +20229,87 @@ var ModelViewer = new function() {
         if (first) {
             dest.className = 'modelviewer';
             var screen = $WH.ce('div');
-            _w = $WH.ce('div');
-            _o = $WH.ce('div');
-            _z = $WH.ce('div');
             var flashDiv = $WH.ce('div');
             flashDiv.id = 'modelviewer-generic';
-            $WH.ae(_w, flashDiv);
+            $WH.ae(screen, flashDiv);
             screen.className = 'modelviewer-screen';
-            _w.style.display = _o.style.display = _z.style.display = 'none';
-            $WH.ae(screen, _w);
-            $WH.ae(screen, _o);
-            $WH.ae(screen, _z);
             var screenbg = $WH.ce('div');
             screenbg.style.backgroundColor = '#181818';
             screenbg.style.margin = '0';
             $WH.ae(screenbg, screen);
             $WH.ae(dest, screenbg);
-            G = $WH.ce('a'),
-            E = $WH.ce('a');
-            G.className = 'modelviewer-help';
-            G.href = '?help=modelviewer';
-            G.target = '_blank';
-            $WH.ae(G, $WH.ce('span'));
-            E.className = 'modelviewer-close';
-            E.href = 'javascript:;';
-            E.onclick = Lightbox.hide;
-            $WH.ae(E, $WH.ce('span'));
-            $WH.ae(dest, E);
-            $WH.ae(dest, G);
-            var N = $WH.ce('div'),
-            F = $WH.ce('span'),
-            G = $WH.ce('a'),
-            E = $WH.ce('a');
-            N.className = 'modelviewer-quality';
-            G.href = E.href = 'javascript:;';
-            $WH.ae(G, $WH.ct('Flash'));
-            $WH.ae(E, $WH.ct('Java'));
-            G.onclick = j.bind(G, 0);
-            E.onclick = j.bind(E, 1);
-            $WH.ae(F, G);
-            $WH.ae(F, $WH.ct(' ' + String.fromCharCode(160)));
-            $WH.ae(F, E);
-            if (f()) {
-                var D = $WH.ce('a');
-                D.href = 'javascript:;';
-                $WH.ae(D, $WH.ct('Plugin'));
-                D.onclick = j.bind(D, 2);
-                $WH.ae(F, $WH.ct(' ' + String.fromCharCode(160)));
-                $WH.ae(F, D)
-            }
-            $WH.ae(N, $WH.ce('div'));
-            $WH.ae(N, F);
-            $WH.ae(dest, N);
 
-            modelDiv = $WH.ce('div');
+            dest = $(dest);
-            modelDiv.className = 'modelviewer-model';
 
-            var foo = function(a, b) {
+            var leftDiv = $('<div/>', { css: { 'float': 'left' } });
-                return $WH.strcmp(a.name, b.name);
-            };
 
+            animDiv = $('<div/>', { 'class': 'modelviewer-animation' });
+            var v = $('<var/>', { text: LANG.animation });
+            animDiv.append(v);
+
+            var select = $('<select/>', { change: onAnimationChange, mouseenter: onAnimationMouseover });
+            select.append($('<option/>', { text: LANG.dialog_mouseovertoload }));
+            animDiv.append(select);
+
+            dest.append(animDiv);
+
+            var a1 = $('<a/>', { 'class': 'modelviewer-help', href: '?help=modelviewer', target: '_blank' }),
+                a2 = $('<a/>', { 'class': 'modelviewer-close', href: 'javascript:;', click: Lightbox.hide });
+
+            a1.append($('<span/>'));
+            a2.append($('<span/>'));
+
+            modelDiv = $('<div/>', { 'class': 'modelviewer-model' });
+
+            var foo = function(a, b) { return $WH.strcmp(a.name, b.name); };
             races.sort(foo);
             sexes.sort(foo);
 
-            raceSel1 = $WH.ce('select');
+            raceSel1 = $('<select/>', { change: onSelChange });
-            raceSel2 = $WH.ce('select');
+            raceSel2 = $('<select/>', { change: onSelChange });
-            sexSel   = $WH.ce('select');
+            sexSel   = $('<select/>', { change: onSelChange });
-            raceSel1.onchange = raceSel2.onchange = sexSel.onchange = onSelChange;
 
-            $WH.ae(raceSel1, $WH.ce('option'));
+            raceSel1.append($('<option/>'));
-            for (var i = 0, len = races.length; i < len; ++i) {
+            for(var i = 0, len = races.length; i < len; ++i)
-                var o = $WH.ce('option');
+            {
-                o.value = races[i].id;
+                var o = $('<option/>', { val: races[i].id, text: races[i].name });
-                $WH.ae(o, $WH.ct(races[i].name));
+                raceSel1.append(o);
-                $WH.ae(raceSel1, o);
+            }
+            for(var i = 0, len = races.length; i < len; ++i)
+            {
+                var o = $('<option/>', { val: races[i].id, text: races[i].name });
+                raceSel2.append(o);
             }
 
-            for (var i = 0, len = races.length; i < len; ++i) {
+            for(var i = 0, len = sexes.length; i < len; ++i)
-                var o = $WH.ce('option');
+            {
-                o.value = races[i].id;
+                var o = $('<option/>', { val: sexes[i].id, text: sexes[i].name });
-                $WH.ae(o, $WH.ct(races[i].name));
+                sexSel.append(o);
-                $WH.ae(raceSel2, o);
             }
+            sexSel.hide();
 
-            for (var i = 0, len = sexes.length; i < len; ++i) {
+            modelDiv.append($('<div/>'));
-                var o = $WH.ce('option');
+            modelDiv.append(raceSel1);
-                o.value = sexes[i].id;
+            modelDiv.append(raceSel2);
-                $WH.ae(o, $WH.ct(sexes[i].name));
+            modelDiv.append(sexSel);
-                $WH.ae(sexSel, o);
+
-            }
+            leftDiv.append(modelDiv);
-            sexSel.style.display = 'none';
+
-            $WH.ae(modelDiv, $WH.ce('div'));
+            var sp = $('<span/>');
-            $WH.ae(modelDiv, raceSel1);
+            sp.append('<small>Drag to rotate<br />Control (Windows) / Cmd (Mac) + drag to pan</small>');
-            $WH.ae(modelDiv, raceSel2);
+            leftDiv.append(sp);
-            $WH.ae(modelDiv, sexSel);
+
-            $WH.ae(dest, modelDiv);
+            dest.append(leftDiv);
-            d = $WH.ce('div');
+            dest.append(a2);
-            d.className = 'clear';
+            dest.append(a1);
-            $WH.ae(dest, d);
+
+            d = $('<div/>', { 'class': 'clear' });
+            dest.append(d);
         }
 
         switch (opt.type) {
             case 1: // NPC
-            modelDiv.style.display = 'none';
+                modelDiv.hide();
                 if (opt.humanoid) {
                     modelType = 32; // Humanoid NPC
                 }
@@ -20363,7 +20319,7 @@ var ModelViewer = new function() {
                 model = opt.displayId;
                 break;
             case 2: // Object
-            modelDiv.style.display = 'none';
+                modelDiv.hide();
                 modelType = 64; // Object
                 model = opt.displayId;
                 break;
@@ -20394,22 +20350,8 @@ var ModelViewer = new function() {
                 initRaceSex(0, opt)
         }
 
-        if (first) {
-            if ($WH.gc('modelviewer_mode') == '2' && f()) {
-                D.onclick()
-            } else {
-                if ($WH.gc('modelviewer_mode') == '1') {
-                    E.onclick()
-                } else {
-                    G.onclick()
-                }
-            }
-        }
-        else {
-
         clear();
         setTimeout(render, 1);
-        }
 
         var trackCode = '';
         if (opt.fromTag)