DragonPrime - LoGD Resource Community
Welcome Guest
  • Good morning, Guest.
    Please log in, or register.
  • May 28, 2017, 11:35:32 AM
Home Forums News Downloads Login Register Advanced Search
* * *
DragonPrime Menu
Login
 
 
Resource Pages
Search

Pages: [1] 2   Go Down
  Print  
Author Topic: Requesting assistance with modernization of a new template  (Read 1671 times)
0 Members and 1 Guest are viewing this topic.
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« on: February 18, 2017, 02:34:47 PM »

I'm creating a new template and I need the nav menu to be horizontal instead of vertical so I can transform it into a drop-down menu. The easiest way to achieve this without doing a complete overhaul of the nav html structure, as far as I can tell, would be to assign a unique ID to each of the navhead items and it's children and use some JS magic to work the drop-down functionality. I'm able to create the unique ID's right now by inserting id="{title}" into the containing <span> tag, but this doesn't work because the output includes spaces between words. So I have two requests for help here:

1) Is there a way I can strip spaces from the {title} output, on demand, so the format works for an HTML ID attribute?

2) How would I add a string to the end of sub-menu ID's? For example BladesBlvd > BladesBlvdSub > BladesBlvdSub > BladesBlvdSub > BladesBlvdSub. Then I could setup JS to "toggle" all ID's of BladesBlvdSub when the navhead BladesBlvd is clicked.

Hopefully I explained that so it's understandable. Any help getting me going in the right direction is much appreciated.
« Last Edit: February 25, 2017, 03:34:24 PM by GRRRilla Ninja » Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #1 on: February 19, 2017, 06:57:02 PM »

This is where I'm at currently -->

And this is where I'm trying to get -->

In addition to my previous question about horizontal navs, I also have a few more questions now

1) Is there a way I can control the placement of stats instead of being dynamic generated? For my new template I would like to re-arrange some stats and group others together into their own container.

2) I couldn't get the EquipmentShop module to work if my life depended on it. Is there an alternative, possibly easier way, to get weapon/armor pics in the stats output?
Logged
Eliwood
Member
Codemeister
****
Offline Offline

Posts: 267


View Profile WWW
« Reply #2 on: February 20, 2017, 12:33:19 AM »

This stuff is pure html/css/maybe a bit of javascript. Have a look at jade.htm in the template directory, for example.

The template is parted into fragments. Everything after <!--!popuphead--> belongs to the "popuphead" until the next comment starting with <!--!.

For navigation, the important stuff is here:

Code:
<!--!navhead-->
<span class="navhead">&#151;{title}&#151;</span><br clear='all'>
<!--!navhelp-->
<span class="navhelp">{text}</span><br clear='all'>
<!--!navitem-->
<a href="{link}"{accesskey}class='nav' {popup}>{text}</a><br clear='all'>

And, in the header section, it's here:

Code:
<div align="center">{nav}</div>

Instead of using autogenerated ID's, you can use simple hierarchy tricks to achieve what you want. Let's say you would like to have the following structure in the end:

Code:
<nav>
  <div class="nav-container">
    <span class="nav-head">{title}</span>
    <ul class="nav-items">
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
    </ul>
  </div>
  <div class="nav-container">
    <span class="nav-head">{title}</span>
    <ul class="nav-items">
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
       <li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>
    </ul>
  </div>
</nav>

The main issue is, that we don't have a "nav-title-open" portion and a "nav-title-close" portion. The most obvious part are the navigation items themself:
Code:
<!--!navhelp-->
<li class="nav-item">{text}</li>
<!--!navitem-->
<li class="nav-item"><a href="{link}" {accesskey}class='nav' {popup}>{text}</a></li>

The more difficult part is now navtitle. We need to put both the opening and the closing part into one navtitle:
Code:
<!--!navtitle-->
    </ul>
  </div>
  <div class="nav-container">
    <span class="nav-head">{title}</span>
    <ul class="nav-items">

This leaves us with 1 issue - the nav title closes a bunch of tags that where never opened, and opens some that are never closed. We can trick here with the part of <!--!header--> where we define {nav}:

Code:
<nav>
  <div class="nav-container">
    <ul class="nav-items">
    {nav}
    </ul>
  </div>
</nav>

To answer your second question - no, you can't. But you could write some javascript that searches for these parts and reads the values out. To ease this, you could also make modifications to the template (again, this is from jade.htm):

Code:
Instead, but a class to the row
<!--!statrow-->
<tr><td class='charinfo'><b>{title}</b></td><td class='charinfo'>{value}</td></tr>

By putting a class to the whole row (<tr class="stat-row"> ... </tr>), you can just select all elements with the stat-row-class with, let's say, jQuery, loop through them until the first part matches "Level", then take the value from the second part and write it in $level.
Logged

Daenerys LotGD-Remake using PHP7 and a modern, headless approach.
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #3 on: February 20, 2017, 12:54:13 AM »

Hey thanks so much for your detailed help Eliwood! Jade is the template I'm currently modifying (what you see in the screenshot from my last post) but I was running into the problem you mentioned about the open/closing tags. I'll take your advice and see how much damage I can do Smiley I really appreciate your help thanks again!
Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #4 on: February 21, 2017, 10:09:47 AM »

Bazinga! Thanks again for your help Eliwood! Now let's see how long it takes me to screw up this JS lolz.
Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #5 on: February 23, 2017, 12:17:27 AM »

So, I'm working my way into the JS part of this and I have a question. If I add a class to the outside containing <tr></tr> and I use this JS

Code:
<script>
var s = $('.stat-row').text();
alert(s);
</script>

I get an alert which says
Code:
Admin GRRRillaNinjaLvl 1HP 10/10Turns 8Attack 4Defense 2Spirits Very LowRace HumanGold 0Gems 0XP 53Weapon SpadeArmor Fuzzy Slippers

If I change the script to search through the .charinfo classes instead I get an alert that says
Code:
Vital Info

 Admin GRRRillaNinja

Lvl 1

HP 10/10

Turns 8

Attack 4

Defense 2

Spirits Very Low

Race Human

Personal Info

Gold 0

Gems 0

XP 53

Equipment Info

Weapon Spade

Armor Fuzzy Slippers


        Buffs
       
            None
       
   

 Admin GRRRillaNinjaLvl 1HP 10/10Turns 8Attack 4Defense 2Spirits Very LowRace HumanGold 0Gems 0XP 53Weapon SpadeArmor Fuzzy Slippers

I assume I should use the .charinfo class because it breaks up the results nicely and makes easier to select the one I want, but it also includes the smashed together values at the bottom? Is that going to cause a problem when I finally make it to that stage where I want to extract values?

Logged
Eliwood
Member
Codemeister
****
Offline Offline

Posts: 267


View Profile WWW
« Reply #6 on: February 23, 2017, 06:18:43 AM »

This is because $('.stat-row').text() gives you the text of everything that .stat-row matches (So the joined text of an array containing every charstats row). Better (kinda pseudo-code, it was a long time since I last used jQuery, but the api should be something along those lines):

Code:
var level = null;
$('.stat-row').each(function(element) {
  if ($('.charinfo', element)[0].text() === "Level" and level !== null) {
    level = $('.charinfo', element)[1].text();
  }
});

Edit: I got the arguments of the callback for the each-function wrong, it's key, element. Thus, making a working example:

Code:
var level = null;
$(".char-row").each(function(key, element) {
cols = $(".char-col", element);
  console.log(cols);
if (cols[0].textContent == "Level") {
   level = cols[1].textContent;
  }
})

alert("Level is" + level);

For the HTML snippet:

Code:
<table>
  <tr class="char-row">
    <td class="char-col">Name</td>
    <td class="char-col">Eliwood</td>
  </tr>
  <tr class="char-row">
    <td class="char-col">Level</td>
    <td class="char-col">16</td>
  </tr>
</table>

The second argument of the $-function restricts your search for a certain element to the given argument. Without it, jQuery searches through document.

Btw - console.log() is much better at debugging than alert(). Console.log() prints the value of the argument to the webbrowser console (which you find in the developer tools, for Firefox it's Ctrl+Shift+I). If the argument is an object or an array, you'll get additional debug information about it.

Edit 2:
Interactive example at https://jsfiddle.net/L91u71bv/3/
« Last Edit: February 23, 2017, 08:54:41 AM by Eliwood » Logged

Daenerys LotGD-Remake using PHP7 and a modern, headless approach.
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #7 on: February 23, 2017, 08:39:10 PM »

Alright I've made it to the next step. I've got all my variables defined with stat values, but now I'm unsure how to approach the new stat layout. If I create a custom layout and replace the {stats} shortcode I'll always have the error message saying it's missing from the template. Also, is this the best way to insert the values where I want them?

Code:
document.getElementById('level').innerHTML='$level';

Is there an easier way to do that? This requires a unique ID to inject into, but the template layout won't allow me to insert individual id's unless I code the whole thing myself which leads back to the error message about missing template part.

Could I just build the whole custom stats area inside the <!--!statstart--> section and leave stathead/statrow blank? <------ Just thinking out loud, I can actually test this myself and see what the result is instead of asking. Everything above I am still unsure about.

One last thing. I've noticed in the game code the stats are output in a title/value format. Since the whole player name, including title/prefix, are output in the same {value} how do I add a new line between them? For example:

name {value} = Admin GRRRillaNinja

Should be displayed with the name under the title/prefix instead of on the same line. I've tried searching through pageparts and inserting `n where I would like it to happen, but none of the attempts gave any results. Even better, how would I give the title/prefix and the character name their own variables so they don't have to be shown together at all?
Logged
Eliwood
Member
Codemeister
****
Offline Offline

Posts: 267


View Profile WWW
« Reply #8 on: February 24, 2017, 12:27:12 AM »

JavaScript can only act on data you deliver to the browser. You *need* go have {stats} in your template, otherwise you can't extract any data anyway. So keep all stats part unmodified, otherwise you'll need to change your html - again. You can always hide the charstats with JavaScript (element.hide(), for example).

And yes, to insert the level where you would like to have it, you need to write-out the HTML part including self-defined levels by your own, which you then fill-in using JavaScript. And if you are using jQuery, it's much easier to write:

Code:
$('#level').html(level);

At this point, you should read up how JavaScript actually works and how it differs from PHP.
Logged

Daenerys LotGD-Remake using PHP7 and a modern, headless approach.
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #9 on: February 24, 2017, 05:48:04 AM »

Element.hide  Embarrassed Again, thanks for your help. I appreciate your patience with my noobish questions! If you have a paypal or a place where I can donate to your LoGD remake project, feel free to drop that here or in my inbox.
Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #10 on: February 25, 2017, 12:54:48 AM »

Level Up! I've got the layout done and all info is being displayed. Now my next questions are:

1) If I want to move the "Mail / MOTD / Petition" links and put them into one of the nav categories, how would I make that happen? If I add the link into an <a></a> element, it will open in a new tab and won't be wrapped in the template.

2) How would I make the mail link viewable only when a player is logged in?

3) How can I set a div to "Display:none" if there is no content inside? For example, removing the custom stat layout for the login page. I have this figured out for the most part, but at login screen there are still several stat divs with text of "undefined" which keeps me from hiding that div with a CSS :empty pseudo-selector.

Logged In:


Not Logged In:
« Last Edit: February 26, 2017, 02:33:13 PM by GRRRilla Ninja » Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #11 on: February 26, 2017, 02:13:14 PM »

I think moving the "Mail / MOTD / Petition" links are going to be the final hurdle to clear before I can actually start styling things and making it pleasing to look at! It's all downhill from there! And I have to say, using a horizontal dropdown nav menu is so very handy when I'm in the superuser grotto doing things.

« Last Edit: February 26, 2017, 02:15:10 PM by GRRRilla Ninja » Logged
GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #12 on: February 26, 2017, 07:46:06 PM »

Ok so I got the mail link moved, can't believe I didn't see how simple that one was! Now I'm stuck on how to get the MOTD, Petition, and Preferences links moved. These aren't as simple becuase I want the Prefs link to be it's own main-level button on the navigation menu instead of a sub-item, and I want the MOTD/Petition links to become sub-items in a nav dropdown and still keep the popup window function.

I'm able to get the motd/petition links where I want them without a problem, but they just don't open in the popup like they should. And the Preferences link keeps giving me a badnav unless it is placed inside the village.php addnav structure.
« Last Edit: February 26, 2017, 08:39:50 PM by GRRRilla Ninja » Logged
Aeolus
Mod God
*****
Offline Offline

Posts: 1744


You're welcome.


View Profile WWW
« Reply #13 on: February 26, 2017, 08:51:46 PM »

Ok so I got the mail link moved, can't believe I didn't see how simple that one was! Now I'm stuck on how to get the MOTD, Petition, and Preferences links moved. These aren't as simple becuase I want the Prefs link to be it's own main-level button on the navigation menu instead of a sub-item, and I want the MOTD/Petition links to become sub-items in a nav dropdown.

Can't give you an exact answer since I'm not testing it out myself... But how about removing the MotD/Mail/Petition placeholders in the template's HTML, and add them through popup addnav()'s instead?
Logged

GRRRilla Ninja
Codemeister
****
Offline Offline

Posts: 321


View Profile
« Reply #14 on: February 26, 2017, 09:29:01 PM »

I've already tried adding the {motd} and {petition} into an addnav inside village.php and it didn't work. What is PHP doing to the link that I can't replicate? Is there a part of the core code that forces the link to be called inside the addnav structure for security reasons? I've also tried without the shortcodes like below. Links will open in a new tab, but not the popup window like the mail link does.

Code:
Translator::tlschema($schemas['infonav']);
OutputClass::addnav($texts['infonav']);
Translator::tlschema();
OutputClass::addnav("??F.A.Q. (newbies start here)", "petition.php?op=faq",false,true);
OutputClass::addnav("N?Daily News","news.php");
OutputClass::addnav("M?MOTD","motd.php",false,true);
OutputClass::addnav("o?Hall o' Fame","hof.php");
OutputClass::addnav("L?List Warriors","list.php");
OutputClass::addnav("P?Petition For Help", "petition.php", false,true);

Also, any feedback based on this short template demo video is very welcomed from all.
http://www.youtube.com/watch?v=E8bpIJR7b6A

I realize this template doesn't give a lot of room for expansion with some types of modules that may add new stats areas and such. It's meant to be a basic template for a vanilla-ish game setup.
« Last Edit: February 27, 2017, 05:10:48 AM by GRRRilla Ninja » Logged
Pages: [1] 2   Go Up
  Print  
 
Jump to:  


*
DragonPrime Notices
Welcome to DragonPrime - The LoGD Resource Community!

Support Us
No funds raised yet this year
Your help is greatly appreciated!
Recent Topics
DragonPrime LoGD
Who's Online
21 Guests, 0 Users
Home Forums News Downloads Login Register Advanced Search