How to add an icon to the PBN bar?

[temperateporcine]

Can anyone help? I'm going round in circles, I just want to add an icon that links to a custom page.

Thank you.

[Chris]

Feb 20, 2015 13:23:25 GMT -8 Tim Camara said:

The PBN bar can now be freely modified to your hearts content. Move it, add stuff, remove stuff, remove the entire thing. See if we even care

Since the pnb-bar is technically no longer guaranteed to be there (see announcement above) some have taken to creating their own bar rather than relying/testing if one already exists. And by "some" I mean Peter since I personally don't have a released code that takes advantage of the pbn-bar and I know of only two off the top of my head that do but I do have private bookmarklet codes that will add an icon there for easy out-of-the-way access.

My guess would be Peter has that functionality built into his yootil library which would be the easiest route for you although I can show you a snippet from one of my bookmarklets:

e(document).ready(function() {
	var i = e('<a href="javascript:void(0)" style="cursor: pointer; margin-top: 3px; display: inline-block; float: left; padding: 0px 3px;" title="Installed Plugins"><img src="//storage.proboards.com/forum/images/admin/sections/plugins.png" style="max-height:16px"></a>')
	  , t = e("#pbn-bar");
	jQuery.fn.reverse = jQuery.fn.reverse || Array.prototype.reverse,
	0 == t.length && (t = e('<div id="pbn-bar-wrapper" style="position: fixed; right: 0px; bottom: 0px; height: 22px; *height: 23px; display: block; text-align: right; z-index: 20;">').appendTo(e("#wrapper, body").eq(0))),
	t.css("width", "auto").append(i.css({
		display: "inline-block",
		"margin-right": "2px"
	})),
	a().appendTo(t).menu({
		button: i,
		position: {
			my: "left top",
			at: "right bottom",
			of: i,
			collision: "flipfit"
		},
		showOn: "click",
		click: function(a, i) {
			var t = e(i.item);
			if (t.hasClass("plugin-value")) {
				var s, n = t.attr("class").match(/plugin\-(setting|key|permission|image)\-id\-(\w+)/)[2], p = RegExp.$1, r = function(a) {
					return t.parentsUntil("." + n + "-" + p).filter("li:not(.more-plugins)").find(">a").reverse().map(function(i, t) {
						var s = e(this).text().split(":")[0];
						a = a[s] || a
					}),
					a
				}("setting" == p ? proboards.plugin._plugins[n].settings : "key" == p ? proboards.plugin.keys.data[n] : "image" == p ? proboards.plugin._plugins[n].images : proboards.plugin.keys.permissions[n]);
				switch (p) {
				case "permission":
					s = r[t.text().split(":")[0]],
					pb.window.dialog("display_plugin_value", {
						title: t.parent().parent().parent().find(">:contains(type:)").text().split(":")[1] + " ACCESS (" + t.text() + ")",
						html: "<pre>" + JSON.stringify({
							read: !!s[0],
							write: !!s[1]
						}, null, 2)
					});
					break;
				case "image":
					s = r[t.text().split(":")[0]],
					proboards.image_preview(s);
					break;
				default:
					pb.window.alert('<xmp style="max-height:500px;min-width:350px;overflow-y:auto;white-space:pre-wrap;">' + JSON.stringify(r[t.find(">a").text().split(":")[0]], null, 2) + "</xmp>")
				}
			}
		},
		clickHide: !0,
		width: 400,
		wrapperElement: '<div style="max-height:' + e(window).height() + 'px;padding:0 15px;overflow-y:auto;" />'
	})
})

SPOILER: Click to show

This is a self contained code to create an icon in the pbn bar which also detects and creates a pbn bar if not present. It is intended to be installed in the forum's GLOBAL HEADER

"use strict";void function () {
	void function (j) {
		j.extend((window.pbn = {}), {
			bar : {
				add : function (surl, simg, {
					url = "",
					img1 = "//storage.proboards.com/forum/images/admin/themes/images/edit.png",
					img = "//storage.proboards.com/forum/images/icon-search-filters.png",
					alt = "",
					target = "_blank"
				} = {}) {
					"string" == typeof surl && (url = surl)
					"string" == typeof simg && (img = simg)
					if (j.isPlainObject(surl)) {
						surl.url && (url = surl.url),
						surl.img && (img = surl.img),
						surl.alt && (alt = surl.alt),
						surl.target && (target = surl.target)
					}
					if (j.isPlainObject(simg)) {
						simg.img && (img = simg.img),
						simg.alt && (alt = simg.alt),
						simg.target && (target = simg.target)
					}

					var a = j('<a>', {
							href : (/\/\//.test(url) ? url : "//" + url),
							title : alt,
							target : target
						});
					var i = j('<img>', {
							src : (/\/\//.test(img) ? img : "//" + img),
							alt : alt
						}).css({
							maxHeight : '16px'
						}).appendTo(a);
					var p = j('#pbn-bar');
					if (p.length === 0) {
						var pw = j('<div id="pbn-bar-wrapper" style="position: fixed; right: 0px; bottom: 0px; height: 22px; *height: 23px; display: block; text-align: right; z-index: 20;">')
							.appendTo(j("#wrapper, body").eq(0))
							var c = j('<img>', {
								src : proboards.image_path() + "/button_expand.png",
								alt : ">"
							})
							.css({
								display : 'inline-block',
								'float' : 'right'
							})
							.click(function (e) {
								var t = $("#pbn-bar");
								t.toggle(),
								t.is(":visible") ? (t.css("display", "inline-block"),
									$(this).attr("src", proboards.image_path() + "/button_collapse.png"),
									$(this).attr("alt", ">")) : ($(this).attr("src", proboards.image_path() + "/button_expand.png"),
									$(this).attr("alt", "<")),
								null !== proboards.data("user") && proboards.data("user").is_logged_in && proboards.ajax({
									url : proboards.route("pbn_bar_hide"),
									type : "post",
									data : {
										minimized : t.is(":visible") ? 0 : 1
									}
								})
							})
							.appendTo(pw)
							p = j('<div />', {
								id : "pbn-bar"
							}).css({
								"display" : "inline-block",
								"float" : "right",
								height : "23px",
								width : "68px",
								"background-color" : "#F0F0F0",
								"border-width" : "1px 0px 0px 1px",
								"border-style" : "solid",
								"border-color" : "#B0B0B0"
							}).appendTo(pw)
					}
					p.css("width", "auto").append(a.css({
							display : "inline-block",
							"margin-right" : "2px",
							"margin-top" : "3px",
							"float" : "left",
							"padding" : "0 3px"
						}));
					return a;
				}
			}
		})
	}
	(jQuery)
}
()

Once the above code is installed in GLOBAL HEADER you can then issue a call from your plugin or from another script providing it with at least an url for it to add an icon. If an icon image is omitted it uses one it keeps in its pocket. The created icon is returned as a jquery array for further chained processing. Here are a few examples of adding an icon

/* Add a google link to the pbn bar with the default image for the icon */
pbn.bar.add('google.com');

/* Add a yahoo link and specify my own image for the icon */
pbn.bar.add({
	url : 'yahoo.com',
	img : 'http://dev.prbrds.com/d/c/fa1KgQBAZe.png'
})

/* Add a proboards dashboard link */
pbn.bar.add({
	url : 'proboards.com',
	img : 'http://dev.prbrds.com/d/c/fa1KgQBAZe.png',
	target: '_self',
	alt: 'Proboards Dashboard'
}).click(function(e){
	
	pb.window.alert('y\'all come back now, ya hear!')
})

[Peter]

Yeah, there is a plugin bar in Yootil that does that. I rewrite it a little for v2 but it will likely be dropped in v6, maybe.

github.com/PopThosePringles/ProBoards-Yootil/blob/version-2/src/bar.js

yootil.bar.add({url: "http://proboards.com", img: "http://example.com/someimage.png", alt: "Hello World"});

[Chris]

There ya go temperateporcine , install the yootil plugin if not already then you can make use of its API call to build and place the pbn icon for you in your code.

As an aside, it just occurred to me that you may not be looking for help with your code but instead wishing to have a header&footer code created for you (a common mistake in this code help board) so please clarify.

Peter , thanks

[temperateporcine]

Sept 27, 2017 12:16:54 GMT -8 Chris said:

As an aside, it just occurred to me that you may not be looking for help with your code but instead wishing to have a header&footer code created for you (a common mistake in this code help board) so please clarify.

That's correct Chris, I don't think I need anything so elaborate, I may have posted on the wrong board, I merely wish to add an icon that links to a custom page I assumed this was the place to ask, sorry for the confusion.