Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11

Thread: Drag-n-Drop Inventories -- add an intuitive visual drag-n-drop interface for any item

  1. #1
    Senior Member zarqon's Avatar
    Join Date
    Nov 2007
    Location
    Seoul, Korea
    Posts
    3,618

    Lightbulb Drag-n-Drop Inventories -- add an intuitive visual drag-n-drop interface for any item

    Drag-n-Drop Inventories

    Drag-n-Drop Inventories is a handy bit of code you can import to add a visual drag-n-drop interface for any item. You can see at a glance how many are in your inventory, your closet, Hagnk's, and your display case, and easily drag-n-drop items between inventories without leaving the page.

    As a sample, I've included a handy shop.php override (attached below, not on SVN, to prevent confusion) that adds drag-n-drop inventories for each item available in the shop, like so:

    screen-dndinv.png

    To check out this example (or just to enjoy having Drag-n-Drop Inventories in all your shops) download shop.ash from this post to your relay folder.

    What Does It Do?

    As you can see in the screenshot above, it adds a compact interface showing you the amount you have in:

    • Inventory. Navy. To avoid possible confusion, this number includes equipped items.
    • Closet. Green, like KoL uses.
    • Hagnk's. Yellow. This will not appear if you have none of this item in storage, since you cannot add items back into storage once removed.
    • Display. Purple. This will not appear if you lack a display case.
    • Stash. Light blue. To guard against unintentional abuse, this will not appear unless you enable it by changing the dndinv_includestash setting to true (using, for example, Prefref Plus). This script makes no effort to know whether you have sufficient clan karma or permissions to take the items, so withdrawals from your clan stash may fail. Use this feature at your own risk!

    So right off the bat, it's already extremely handy just to see how many of the item you have in each place.

    Then we get to the fun part! For any inventory where you have items that can be accessed, the container will be draggable. Inaccessible containers (display case in Hardcore, Hagnk's with no pulls available) will be dimmed out. When you grab a valid container with your mouse, valid target inventories will flash to indicate you can move items there. Dropping the container on a valid target container will prompt you for how many items to move (you can just hit Enter if it's all of them), and then move the specified amount.

    Pro tips:

    • If there's only 1 item, it will skip the (unnecessary) prompt.
    • You can also skip the prompt by holding down CTRL while dropping. This will move only 1 item.

    After moving items, the inventory amounts will update to reflect the change, without leaving the page.

    One more nifty feature: for tradeable items, there's a little + button at the end. If you have enough meat (mousing over will show you how much), the button will be clickable to purchase one of the item in question (at which point the inventories will update to reflect your new total). Cool!


    How to Add It to Your Relay Script

    So, you'd like to add Drag-n-Drop Inventories to a script you're writing? No problem! You will need to do two things: 1) import dndinv.ash to your ASH script, and b) import jQuery and dndinv.js in the HTML that you are outputting.

    To import dndinv.ash to your ASH script, simply add import "dndinv.ash"; to the top of the script. You can now use the function dndinv(item i), which takes a single item as a parameter and returns a string containing an HTML div (class: dndinv) for a drag-n-drop inventory for that item.

    That will add the drag-n-drop inventory to your page, but it won't work without the accompanying jQuery. To import jQuery and dndinv.js to a brand new page:

    PHP Code:
       buffer page;
       
    page.append("<!DOCTYPE html><html><head>\n<title>My Relay Script</title>\n");
       
    page.append("<script src=\"jquery1.10.1.min.js\"></script>\n<script src='dndinv.js'></script>\n");  // <-- the money line
       
    page.append("</head><body>");
       
    page.append("seal-clubbing club<br>" dndinv($item[seal-clubbing club]));   // <-- this adds a drag-n-drop inventory for seal-clubbing clubs
       
    page.append("</body></html>");
       
    page.write(); 
    To import them into an existing page that you are overriding (as in the provided shop.php sample):

    PHP Code:
       page.append(visit_url());
       
    page.replace_string("</head>""<script src='jquery1.10.1.min.js'></script>\n<script src='dndinv.js'></script>\n</head>"); 
    It should be possible to add drag-n-drop inventories to every single item in inventory.php using this, but I've been afraid to try it!


    Installation

    Type this in your CLI:
    Code:
    svn checkout https://svn.code.sf.net/p/drag-n-drop-inventories/code
    Enjoy!
    Attached Files
    Last edited by zarqon; 08-12-2018 at 03:32 PM.
    Sig by JakAtk
    My scripts: Prefref Plus | Skillref Plus | One-Click Wossna | Om*****st (??) | Psychose-a-Matic | RandBot
    Combat suite: Best Between Battle | Mercenary Mood | SmartStasis | BatMan | BatMan RE
    For script authors: ASH Wiki | ZLib | BatBrain | CLI Links | Drag-n-Drop Inventories | CanAdv | Script Registry | Map Manager
    If you appreciate my work, help me become BAT KING OF THE WORLD! Thanks to all donators!

  2. #2
    Senior Member Erich's Avatar
    Join Date
    Jul 2010
    Posts
    388

    Default

    This looks ridiculously awesome, thanks zarqon! I'll play with it in a few hours when I get back home and tell you my thoughts

  3. #3
    Senior Member zarqon's Avatar
    Join Date
    Nov 2007
    Location
    Seoul, Korea
    Posts
    3,618

    Default

    Thanks Erich! I developed this as part of a super-inventory relay script I have in the works, but realized it had quite a few uses outside that script so I made it importable. It feels a little silly to put 6KB of code up on Sourceforge as its own project, but like CLI Links which basically ALL my relay scripts use, I foresee quite a few of my scripts (and now, possibly others) using it, so there you are. My newest script, Skillref Plus, is already using it!
    Last edited by zarqon; 07-19-2018 at 07:00 AM.
    Sig by JakAtk
    My scripts: Prefref Plus | Skillref Plus | One-Click Wossna | Om*****st (??) | Psychose-a-Matic | RandBot
    Combat suite: Best Between Battle | Mercenary Mood | SmartStasis | BatMan | BatMan RE
    For script authors: ASH Wiki | ZLib | BatBrain | CLI Links | Drag-n-Drop Inventories | CanAdv | Script Registry | Map Manager
    If you appreciate my work, help me become BAT KING OF THE WORLD! Thanks to all donators!

  4. #4
    Senior Member Crowther's Avatar
    Join Date
    Nov 2006
    Posts
    1,417

    Default

    I'm a CLI guy, but that's really cool.

  5. #5
    Senior Member
    Join Date
    Apr 2018
    Posts
    133

    Default

    Itd be great if you could add support for Clan Stash interaction. I often find myself buying items I could trade in karma for instead.

    For instance, if you can spend 70 more Clan Karma before rollover, and your clan has 5 fortune cookies in the stash, itd show that there are 3 fortune cookies in the stash.
    Last edited by Saklad5; 07-21-2018 at 07:55 PM.

  6. #6
    Senior Member zarqon's Avatar
    Join Date
    Nov 2007
    Location
    Seoul, Korea
    Posts
    3,618

    Default

    Not a bad idea, but the amount of Clan Karma an item costs (and the amount you have, for that matter) is not accessible in ASH without server hits. So here's what I've done. I added a ZLib setting dndinv_includestash (false by default), which if you set to true -- using Prefref Plus, for instance -- will include your clan stash as a possible inventory container. Mousing over the clan stash container will also display a warning that taking stuff from your clan stash may fail if you lack the proper karma/permission. Hopefully those two forms of protection will prevent confusion or abuse.

    So that's our r3 update! While I was at it, I also fixed the dimmed-out things not actually being dimmed-out, and added a Buy button: a little + that appears after the inventories for tradeable items. If you have mall access and enough meat, the link will be activated to purchase one of the item, after which the inventories will update to reflect the new total.
    Sig by JakAtk
    My scripts: Prefref Plus | Skillref Plus | One-Click Wossna | Om*****st (??) | Psychose-a-Matic | RandBot
    Combat suite: Best Between Battle | Mercenary Mood | SmartStasis | BatMan | BatMan RE
    For script authors: ASH Wiki | ZLib | BatBrain | CLI Links | Drag-n-Drop Inventories | CanAdv | Script Registry | Map Manager
    If you appreciate my work, help me become BAT KING OF THE WORLD! Thanks to all donators!

  7. #7
    Junior Member
    Join Date
    May 2018
    Posts
    1

    Default

    This is an awesome script! I may have noticed a bug though: when I went to the Black Market to buy the Red Zeppelin ticket, the Drag-n-Drop script duplicated itself on the Red Zeppelin tickets. So each one had two lines for Drag-n-Drop. I assume because it is the same item, just being sold for a different cost... or something like that.

  8. #8
    Developer fronobulax's Avatar
    Join Date
    Feb 2009
    Location
    Central Virginia, USA
    Posts
    4,204

    Default

    So, I have this because of PrefRefPlus but took none of the suggested actions to enable it. I was somewhat surprised to see that when I equipped the FantasyRealm G.E.M. and went to spend Rubees the store was annotated. This is not a problem (although it did force the store to be scrollable because of the bizarre window sizes I am using) but I don't think it is the expected behavior.

  9. #9
    Senior Member zarqon's Avatar
    Join Date
    Nov 2007
    Location
    Seoul, Korea
    Posts
    3,618

    Default

    The inclusion of shop.ash in the relay folder is just an example of how to add Drag-n-Drop Inventories to an existing page. I could make it toggle-able somehow but that would compromise the efficacy of the example.

    Probably a better solution to help avoid others' having similar confusion is to remove shop.ash from the relay folder and include it here as an attachment.

    ETA: And r6 deletes shop.ash from the repository. Since DnDInv is something to include in other scripts, the example should be optional rather than part of the install. So I have instead added it to the first post, where people can download it if they choose.
    Last edited by zarqon; 07-25-2018 at 02:04 PM.
    Sig by JakAtk
    My scripts: Prefref Plus | Skillref Plus | One-Click Wossna | Om*****st (??) | Psychose-a-Matic | RandBot
    Combat suite: Best Between Battle | Mercenary Mood | SmartStasis | BatMan | BatMan RE
    For script authors: ASH Wiki | ZLib | BatBrain | CLI Links | Drag-n-Drop Inventories | CanAdv | Script Registry | Map Manager
    If you appreciate my work, help me become BAT KING OF THE WORLD! Thanks to all donators!

  10. #10
    Senior Member zarqon's Avatar
    Join Date
    Nov 2007
    Location
    Seoul, Korea
    Posts
    3,618

    Default

    @Six Ferrets: I encountered the error you mentioned today and fixed shop.ash to only add inventories once per item. Re-download in the first post.
    Sig by JakAtk
    My scripts: Prefref Plus | Skillref Plus | One-Click Wossna | Om*****st (??) | Psychose-a-Matic | RandBot
    Combat suite: Best Between Battle | Mercenary Mood | SmartStasis | BatMan | BatMan RE
    For script authors: ASH Wiki | ZLib | BatBrain | CLI Links | Drag-n-Drop Inventories | CanAdv | Script Registry | Map Manager
    If you appreciate my work, help me become BAT KING OF THE WORLD! Thanks to all donators!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •