Friday, November 14, 2014

0.3 Milestone Completed for the Price of Potentially Digging My Own Grave

Link to the PR: https://github.com/mozilla-appmaker/appmaker/pull/2362

As stated earlier, landing on this issue was a bit of a fluke. Well, since most of the bugs are kind of flukey in nature, this might more of a fluke of a fluke. As mentioned previously, Mozillian Scott Downe was away this week to assist me in a bug of his that I initially wanted to work on, so within my time constraints I needed to quickly switch over to something reasonable, which ended up being this issue.

If you take a peek at the conversation about this, this is a realization of my iterative approach to providing this problem an elegant solution. Currently, I added a menu item to the top right initialization context bar that opens a new window to the user that directs them to the app template gallery to remix an app, on a click event.

Implementing logic for this was fairly simple and streamlined, since I had the original 'New App' menu item logic to follow and parrot the data flow to a great extent. The Appmaker convention herein seems to prescribe to an approach that involves an event listener attached to a JQuery connected ID field in the html, whose logic is embedded in the same file. The parent init function exposes the scope of an object in a file both called 'application', that exports a whole bunch of functionality - most importantly of which was the functionality of the menu item that I was trying to emulate:

// application.js, line 36:
    
    newApp: function(){
      var app = document.querySelector("ceci-app");
      var parent = app.parentNode;
      parent.removeChild(app);
      parent.appendChild(document.createElement('ceci-app'));
      // TODO https://github.com/mozilla-appmaker/appmaker/issues/897
      // we have to decouple appidChanged and initFirebase
      app.setAttribute("appid", "ceci-app-"+uuid());
      history.pushState({}, "", location.origin);
    }

I didn't need all this fancy functionality yet either; so far, the intent was just to give the user a link to the template gallery. So a simple window.open on an href should (and did) do the trick:

  templateApp: function(){
    // Open the link in a new tab so as to not interrupt the current instance's workflow
    window.open(
      'https://webmaker.org/en-US/gallery/list/53fe24bc21d4817b6c000aad',
      '_blank'
    );
  }

The module.export already takes this entire function list wholesale as part of the application scope, so simply adding this function to the list was enough to be able to invoke it on my event listener back in the html file.

The first and last part was essentially to just add the element to the dom, which for the most part was just duplicating the code used for the initial menu item. Funny enough though, the most convoluted part of this was adding the text label to my new menu item. Appmaker uses what I believe to be some sort of angular.js localization directive - l10n - which I didn't know worked in a key-value pair fashion. This is where parroting code unfortunately stopped being helpful ;)

The directive is appended to your element like so: {{'your label here' | l10}}

If your 'label' pair isn't listed in the msg.json file in the language locale directory, it doesn't simply slap the string onto the element, it actually doesn't do anything with it, and therefore your label doesn't show up at all. Documentation and examples on the web were hard to come by for me, so some last minute pointing in the right direction from David Humphrey (current professor, former project lead) cleared this issue up in a hurry.

The title for this post alludes to the hope that I don't bury myself under the weight of my own ambition for this bugfix for the final course's milestone. The stage is officially set for my last hurrah and the opportunity to call it my Appmaker's "Magnum Opus" addition.

No comments:

Post a Comment