Etikett: Programmering

A cli­ent of mine wan­ted to add PinIt sup­port for parts of their web site, main­ly their user com­mu­ni­ty image gal­le­ri­es.

I made a quick solu­tion for them, copi­ed here in case some­o­ne else needs somet­hing simi­la­re, or just wants to com­plain about my pro­gram­ming tech­ni­ques 🙂 Or pre­fe­rably make sug­ges­tions for impro­ve­ments…

To use it, regis­ter the name­spa­ce in eit­her your web.config, in /configuration/system.web/pages/controls:

<add tagPrefix="Controls" namespace="Paddy.Web.UI.HtmlControls" assembly="name-of-you-dll-file" />

Or, you can regis­ter it at the top of your .aspx file, as follows:

<%@Register TagPrefix="Controls" Namespace="Paddy.Web.UI.HtmlControls" %>

Then use it on the page like this:

<Controls:PinIt ID="ctlPinIt" runat="server" CountLayout="Horizontal" Url="Complete url" Media="Complete url to the image" Description="Optional description" />

Ple­a­se note that the con­tents of the Url and Media pro­per­ti­es needs to be ful­ly qua­li­fi­ed!

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace Paddy.Web.UI.HtmlControls
{
	public class PinIt : HtmlControl
	{
		private const string PinItscriptinclude = "PinItScriptInclude";

		#region Properties

		public CountLayouts CountLayout { get; set; }
		public string Description { get; set; }
		public string Url { get; set; }
		public string Media { get; set; }

		#endregion

		public PinIt()
			: base("a")
		{
			CountLayout = CountLayouts.Horizontal;
		}

		protected override void Render(HtmlTextWriter writer)
		{
			if (string.IsNullOrWhiteSpace(Url) || string.IsNullOrWhiteSpace(Media))
			{
				return;
			}

			// Register the Pinterest script
			var type = GetType();
			if (!Page.ClientScript.IsStartupScriptRegistered(type, PinItscriptinclude))
			{
				Page.ClientScript.RegisterStartupScript(type, PinItscriptinclude,
					@"<script type=""text/javascript"" src=""//assets.pinterest.com/js/pinit.js""></script>", false);
			}

			// Build the tag.
			writer.WriteBeginTag(base.TagName);
			RenderAttributes(writer);
			writer.Write(HtmlTextWriter.TagRightChar);

			// Render the image
			writer.WriteBeginTag("img");
			writer.WriteAttribute("src", "//assets.pinterest.com/images/PinExt.png");
			writer.WriteAttribute("alt", "Pin it");
			writer.WriteAttribute("title", "Pin it");
			writer.WriteAttribute("border", "0");
			writer.Write(HtmlTextWriter.SelfClosingTagEnd);

			writer.WriteEndTag(base.TagName);
		}

		protected override void RenderAttributes(HtmlTextWriter writer)
		{
			var parameters = new Dictionary<string, string> { { "url", Url }, { "media", Media } };
			if (!string.IsNullOrWhiteSpace(Description))
			{
				parameters.Add("description", Description);
			}

			Attributes.Add("href", "http://pinterest.com/pin/create/button/" + ToQueryString(parameters));
			Attributes.Add("class", "pin-it-button");
			Attributes.Add("count-layout", CountLayout.ToString().ToLower());

			base.RenderAttributes(writer);
		}

		private static string ToQueryString(IEnumerable<KeyValuePair<string, string>> dictionary)
		{
			var result = dictionary.Aggregate(
				new StringBuilder("?"),
				(builder, pair) => builder.AppendFormat("{0}={1}&", pair.Key, HttpUtility.UrlEncode(pair.Value)),
				builder => builder.ToString());

			return result.Substring(0, result.Length - 1);
		}

		public enum CountLayouts
		{
			Horizontal,
			None,
			Vertical
		}
	}
}