Font Awesome with Text Widget

[Sondra Jones]

Hello! We are trying to create a font awesome with text widget.

We already have the font awesome widget implemented and now need to somehow have a text field with that image as optional. We want the font awesome to either be a stand alone widget or else to be able to have text associated with it.

We were able to do that, however, we need to be able to change the size, font, color etc to the image (font awesome icon) but not the text and vice versa.

Below is our code as of now:

JS files:
win-font-awesome.js:

Code: Select all

pui.widgets.add({
	name: "Font Awesome",
	newId: "fontAwesome",

	defaults: {
		"width":"13px",
		"height":"16px",
		/*"text align":"center",
		"cursor":"pointer",*/
		"description":" "
	},
	propertySetters: {
		"field type": function(params) {
			if (params.design) {
				params.properties["css class"] = '';
				params.dom.innerHTML = "<i class='fa fa-" + params.properties["font awesome type"] + "'>" + params.properties["description"] + "</i>";
				
			} else {
				params.dom.className = "fa fa-" + params.properties["font awesome type"];
				if (typeof params.properties.description === "undefined") {
					params.dom.innerText = " ";
				} else {
					params.dom.innerText = " " + params.properties.description;		
				}
				params.dom.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];	
				params.dom.setAttribute("win-customwidget","1"); 
				addEvent(params.dom, "click", function() {
					params.dom.setAttribute("win-clicked", "1");
				    pui.click();
			 });
			}
		},

		"font awesome type": function(params) {
			if (params.design) {
				params.dom.innerHTML = "<i class='fa fa-" + params.newValue + "'>" + params.properties["description"] + "</i>";
				params.dom.firstChild.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];		
			} else {
				params.dom.className = "fa fa-" + params.properties["font awesome type"];
				params.dom.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];			
			}
		},

		"height": function(params) {
			if (params.design) {
				params.dom.firstChild.style.fontSize = parseInt(params.value) < parseInt(params.properties["width"]) ? params.value : params.properties["width"];
			}
		},

		"width": function(params) {
			if (params.design) {
				params.dom.firstChild.style.fontSize = parseInt(params.value) < parseInt(params.properties["height"]) ? params.value : params.properties["height"]
			}
		},	
		
		"description": function(params) {
			if (params.design) {
				params.dom.innerHTML = "<i class='fa fa-" + params.properties["font awesome type"] + "'>" + params.newValue + "</i>";
				params.dom.firstChild.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];		
			}
		}
	}
});


//the Other... option in choices allows the users to pick a different option than what is listed
pui.addCustomProperty({
	name: "font awesome type",
	help: "sets the type of the font awesome widget",
	choices: [ 
			"adjust",
			"arrows",
			"arrow-right",
			"bars",
			"bell",
			"caret-down",
			"caret-up",
			"check",
			"check-circle-o",
			"chevron-left",
			"chevron-right",
			"circle-o",
			"clock-o",
			"cog",
			"ellipsis-v",
			"file-excel-o",
			"history",
			"minus-circle",
			"minus-square-o",
			"mobile",
			"pencil-square-o",
			"plus",
			"plus-square-o",
			"question-circle",
			"refresh",
			"search", 
			"sort", 
			"times",
			"times-circle-o",
			"truck",
			"user",
			"Other..."
			],
	controls: ["Font Awesome"],
	category: "Font Awesome"
});

if (typeof WinSupply === "undefined") WinSupply = {};

WinSupply.fontAwesomeSubmit = function(response) {
  var widgets = document.querySelectorAll("div[win-customwidget]");
  for( var i=0; i < widgets.length; i++){
    if (widgets[i].pui && widgets[i].pui.fieldName) {
       var idVar = widgets[i].pui.formatName + "." + widgets[i].pui.fieldName;
       var attr = widgets[i].getAttribute("win-clicked");
       if (attr && attr=="1") {
         response[idVar] = "1";
       }
	   else if (attr && attr=="2") {
		response[idVar] = "2";
	  }
	   else {
         response[idVar] = "0";
       }
    }
  }
  return true;
}

win-font-awesome-plus.js:

Code: Select all

pui.toolbox.add({
	category: "Font Awesome",
	widget: "Font Awesome",
	text: "Font Awesome Plus",

	proxyHeight: 16,
	proxyWidth: 250,

proxyHTML: '<i class="fa fa-plus"></i>',
	defaults: {
		"font awesome type":"plus",
	}
});

html file:

Code: Select all

    <span class="font-awesome">
        <i class="fa fa-plus"></i>
        <input type="text" value=""></label>
    </span>

There is no associated css code for this particular widget.

Do you have an insight for us on how to make this change?

Thanks,

Sondra

[Scott Klement]

Sondra,

Have you considered hiring Profound Logic's services department to write this for you on a consulting basis? I have already spent quite a bit of time with a colleague of yours from WinSupply on the "font awesome" widget, and now you are asking more. It seems like you are struggling a lot with this. Perhaps you could save a lot of time and effort by hiring someone who has done this before?

That said, I'm a bit confused about what you're asking.

• You mention changing the size/color/font of the icon without changing the size of the text. I don't understand why you're telling me that -- this is your code, you can write it however you like, why are you explaining this to me?
• You mention that "there is no associated css class", but yet your HTML code clearly shows class="font-awesome" and class="fa fa-plus", which are indeed CSS classes.
• You show an HTML example where you've added an <input> tag, which seems to be the main thing you're trying to accomplish. But, given that you know what the tag needs to be, I don't understand where you are stuck.

[Megan]

Hello Sondra,

In reviewing the code you provided, you have an tag "</label>" in your HTML. Additionally, please make sure that Awesome Fonts is properly imported so that your html has access to the classes "fa fa-plus". Font Awesome is CSS supported and the CSS is required to use it. Font Awesome can be imported using the following line to your HTML:

Code: Select all

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

or the following to your JS:

Code: Select all

document.head.innerHTML += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'

In order to get the customization you are looking for regarding the the optional elements. I would suggest a different approach to your widget design.

Firstly, you do not need a template, you can add and remove elements as needed depending on settings. You can add the "tag" keyword to your widget to create a span container and you can use custom properties to determine what elements should be added. The following is an example of the start of the add function:

Code: Select all

pui.widgets.add({
   name: "Font Awesome",
   newId: "fontAwesome",
   tag: "span",

   defaults: {
      "width":"13px",
      "height":"16px",
      /*"text align":"center",
      "cursor":"pointer",*/
      "description":" ",
      "css class": "font-awesome"
   },
   propertySetters: ...

Example properties used to define additional elements:

Code: Select all

pui.addCustomProperty({

    name: "fa icon",
    type: "",
    help: "Default is 'plus'. 'Other...' can be selected to specify an icon not listed in the choices. This property determines the displayed Font Awesome icon.",
    controls: ["Font Awesome"],
    category: "Field Settings",
    choices: ["plus","cog","Other..."]
    
});
pui.addCustomProperty({

    name: "fa icon css class",
    type: "long",
    help: "This property determines the class used to customize Font Awesome icon.",
    controls: ["Font Awesome"],
    category: "Field Settings"
    
});
pui.addCustomProperty({

    name: "fa icon attach to",
    type: "list",
    help: "This property determines comma delimited the elements attached to the Font Awesome icon.",
    controls: ["Font Awesome"],
    category: "Field Settings",
    choices: ["textbox", "icon", "label", "radio button", "none", "Other..."]
    
});
pui.addCustomProperty({

    name: "fa icon attached classes",
    type: "list",
    help: "This property determines comma delimited list of the classes of the elements attached to the Font Awesome icon. Classes will be applied to attached elements in the order the elements were listed.",
    controls: ["Font Awesome"],
    category: "Field Settings",
    choices: ["textbox", "icon", "label", "radio button", "Other..."]
    
});
Please refer to the help text in each for reference on what each property would be used for. 

In a general sense, you can use parms.dom.innerHTML to add the new elements. A psuedo-code-ish example:
[code]
// start by creating the icon inside the <span>
parms.dom.innerHTML = "<i class='fa " + parms.evalProperty("fa icon") + " " + parms.evalProperty("fa icon css classes") + "'></i>";
// Check if there are elements to attach
if (parms.evalProperty("fa icon attach to").length > 0) {
	// Get the list of elements to attach
	var list = parms.evalProperty("fa icon attach to");
	while ( // not end of list // ) {
		// Cases or if/else statements to add specified element
		// ex: parms.dom.innerHTML += "<lable>example element</label>";
		// Or this can get as complex as you'd like if you add additional properties.
	}
}

These is all general, overview examples, and have not been tested. Please refer to Scott's reply if you require further assistance.

[Scott Klement]

Megan,

I don't think this is right:

Code: Select all

document.head.innerHTML += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'

This will replace the contents of the existing <head> tag in the document with this one link tag -- you could potentially wipe out all sorts of things this way. To include font awesome in your project, you should either be placing it in the userdata/custom area of the IFS, or should be adding it to the start.html file.

[Megan]

Megan,

I don't think this is right:

Code: Select all

document.head.innerHTML += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'

This will replace the contents of the existing <head> tag in the document with this one link tag -- you could potentially wipe out all sorts of things this way. To include font awesome in your project, you should either be placing it in the userdata/custom area of the IFS, or should be adding it to the start.html file.

I actually do this with my widget sets that I'm working on. I'm using "+=" so as to append the line to the end of the head tag's innerHTML, not wipe it out. I double checked my widgets and this is the behavior I seeing. You can see the Google Fonts I included this way at the bottom of the head tag pictured below.

htmlAppendedHead.png (38.15 KiB) Viewed 1486 times

[Scott Klement]

Megan,

Apologies, I missed that it said +=. I originally read it as just =.

Using += makes sense, though I haven't tried it myself.

[Sondra Jones]

Megan,

Sorry I misspoke about the CSS. We do have a folder within our CSS folder for font awesome.

We actively have the font awesome working with and with out text associated to it. The problem I am trying to address is that I need to be able to control the font awesome icon and the text differently, almost like they are 2 different widgets but in reality they are one widget. I am going to review what you and Scott have said to see if your answers have any impact on what we are trying to accomplish.

Am I making since on what we are trying to do? If not, I can try to better explain it with an example.

Thanks,

Sondra

[Sondra Jones]

Megan,

Did you get a chance to see my last reply?

Thanks,

Sondra

[Megan]

Hello Sondra,

Yes, I got your last reply. I was waiting for you to review my previous post and get back to me with any additional questions that you had. Do you have some additional questions?