Adding Progress % to DIRECT 4 "Dev" SKIN using Unified Progress Bar

Follow



    Tags:



Print Friendly and PDF

This article will describe the steps necessary to modify the Unified Progress Bar in the Dev Skin

Add the progress text to the inside of the Progressbar

All you need to do in order to add the place holder for where the Progress % text will be displayed, is to add the downloadPercent class to the progressBarWrap element in the HTML. The progressBarWrap element in this case is only identified by its class rather than an id, but we can still make it work.

  1. Open mainwindow.html
  2. Find
    <div class="informationRow">
        <div class="progressBarWrap"><div class="progressBar"></div></div>
    </div>

3.    Replace with

    <div class="informationRow">
        <div class="progressBarWrap"><div class="progressBar downloadPercent"></div></div>
    </div>

Bind the .downloadComplete element to the ProgressView view in the UPB code.

Looking at other skins like the patcher_template_skin I realized there usually is a progressElement available in the ProgressView view. In the case of the dev skin it is not referenced. I made a wild assumption that it would not have been removed from the view.

In mainwindow.js find the following code (where the UPB is implemented)

    //Bo's Unified Progress Bar JS Snippet. Comment out line 131 above to make this work
    notificationCenter.addObserver("ProgressView", "Bind", function(task, view) {
        view.rootElement = $("#mainItem,#mainItemOptions");
        var root = (app.expandString("{SkinType}").toLowerCase() === "installer") ? $(window.document) : view.rootElement;
        view.progressBarElement = root.find(".progressBar,.progressBar-indefinite");
    });

now make it so the progressBar has the actual progress % value bound to the class we added to the progressbar in the HTML. You do that by adding this code.

        view.progressElement = view.rootElement.find(".downloadPercent");

The result will be...

    //Bo's Unified Progress Bar JS Snippet. Comment out line 131 above to make this work
    notificationCenter.addObserver("ProgressView", "Bind", function(task, view) {
        view.rootElement = $("#mainItem,#mainItemOptions");
        var root = (app.expandString("{SkinType}").toLowerCase() === "installer") ? $(window.document) : view.rootElement;
        view.progressBarElement = root.find(".progressBar,.progressBar-indefinite");
        view.progressElement = view.rootElement.find(".downloadPercent");
    });

 

Save your files and run the launcher.

Save your files and run the launcher.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk