“Finishing races is important, but racing is more important.”
— Dale Earnhardt
After tinkering around with various uses and locations for the Retina Icons that I came across the other day, I finally settled on decorating three of my form field types with action buttons:
For the email form field type, the button sends an email, for the tel form field type, the button calls the number, and for the url form field type, the button opens up a new browser and navigates the the URL. To make the magic happen, I added yet another static variable listing out the types for which I created support for actions.
var SPECIAL_TYPE = ['email', 'tel', 'url'];
Then I created a function to format the types listed in that array. The code is essentially the same for all three types, with the differences only being in the icon, the link, and the associated help text or title. I considered creating a JSON object instead of a simple array, and including the three unique values for each type, but to be completely honest, I really didn’t think of doing that until after I had already done it the other way and I was too lazy to go back and refactor everything. So for now, the array drives the decision to utilize the function, and the function contains a bunch of hard-coded if statements to sort out what is unique to each type.
One thing that I did not want to do was have the action buttons out there when there was no value in the field or when the value was not valid. To only show the buttons when there was something there that would actually work with the button code, I added an ng-show to the outer element preventing it from displaying unless the conditions were right.
Aside from the cool Retina Icons and hiding the buttons when not wanted, there isn’t too much else noteworthy about the code. It does work, which is always a good thing, but one day I can see myself going back in here and doing a little optimization here and there. But this is what the initial version looks like today:
function buildSpecialTypes(attrs, name, model, required, fullName) {
var title = '';
var href = '';
var icon = '';
if (type == 'email') {
title = 'Send an email to {{' + model + '}}';
href = 'mailto:{{' + model + '}}';
icon = 'mail';
}
if (type == 'tel') {
title = 'Call {{' + model + '}}';
href = 'tel:{{' + model + '}}';
icon = 'phone';
}
if (type == 'url') {
title = 'Open {{' + model + '}} in a new browser window';
href = '{{' + model + '}}" target="_blank';
icon = 'pop-out';
}
var htmlText = " <span class=\"input-group\" style=\"width: 100%;\">\n";
htmlText += " <input class=\"snh-form-control\" ng-model=\"" + model + "\" id=\"" + name + "\" name=\"" + name + "\" type=\"" + type + "\"" + passThroughAttributes(attrs) + (required?' required':'') + "/>\n";
htmlText += " <span class=\"input-group-btn\" ng-show=\"" + fullName + ".$valid && " + model + " > ''\">\n";
htmlText += " <a href=\"" + href + "\" class=\"btn-ref btn btn-default\" role=\"button\" title=\"" + title + "\" tabindex=\"-1\" data-original-title=\"" + title + "\">\n";
htmlText += " <span class=\"icon icon-" + icon + "\" aria-hidden=\"true\"></span>\n";
htmlText += " <span class=\"sr-only\">" + title + "</span>\n";
htmlText += " </a>\n";
htmlText += " </span>\n";
htmlText += " </span>\n";
return htmlText;
}
I still have my issues to deal with, but thanks to my pervasive skills at creative avoidance, we can put that off to a later installment, which will also be a good time to release an improved version of the Update Set for all of this.
