Github issues and Color Preview plugins

Today I like to blog about some new plugins from another very productive plugin author. All of them were created by junichi11, who created more than 15 plugins, which all are freely available at the NetBeans plugin portal. Many of them are PHP-related, so if you are a PHP developer you are certainly using one of his plugins already.

a) Github issues plugin

https://github.com/junichi11/netbeans-github-issues-plugin

This plugin integrates issues from your github repositories into the tasks view of NetBeans. From within NB you can view, edit and create issues. And much more…

2015-04-09_21h02_07

BTW if you are using Backlog for tracking your issues, then you can also use https://github.com/junichi11/netbeans-backlog-plugin

b) Color preview plugin

https://github.com/junichi11/netbeans-color-codes-preview

This plugin shows color for hexadecimal encoded colors (f.e. #FF0045) in the left sidebar of the editor. This feature is not new to IDEs, but it is now finally available for NetBeans. Enable this feature via “View->Show Colors” and the colors in CSS files will be visualized. It is configurable and thus not limited to CSS.

2015-04-09_21h08_26

The plugins are signed and this way they can be installed directly from your IDE (Tools->Plugins->Available Plugins). You can also download them from their github pages or from http://plugins.netbeans.org and install them manually

Do not hesitate to post feedback or file issues at the respective github pages of the plugins. junichi11 is a friendly one and very responsive! Thank you for the good work junichi11!

min-width/max-width with JS/jQuery

Sometimes there are special requirements for the width restrictions of a website. For example the width of the panel has to be at least 100px, but should not exceed 800px.

The first approach is to use the CSS attributes min-width/max-width. But these will not work in MS Internet Explorer. There are several IE6-workarounds like using Javascript-based CSS-expression, but i think those are ugly.

The following approach uses easy Javascript scripting: Calculate the width using jQuery, compare it to the reference width and set it to the min-/max-value if needed.

Simple usage:

setMinMaxWidth(100,800, 'myDivID');

This code also can easily be adapted for min-/max-height.

Note: You cannot get the width of an invisible element. So you have to make the element visible before invoking the methods.


Sources:

/**
 * Utility method to help jQuery work with JSF clientIds.
 * http://cagataycivici.wordpress.com/2009/05/14/jquery-and-jsf-ids/
 */
function escapeClientId(id) {
	return "#" + id.replace(/:/g,"\\:");
}

/**
 * Set the max-width of the element.
 * @param maxWidth max-width in pixels
 * @param element element
 */
function setMaxWidth(maxWidth, element){
   var item=jQuery(escapeClientId(element));
   if (null==item){
	   return;
   }
   var width=item.width();

   if (null==width || 0==width){
	 //element not found or not visible
	 return;   
   }
   
   //if content-width>max-width then resize to the max-width
   if (width>maxWidth){
     item.width(maxWidth);
   }
} 

/**
 * Set the min-width of the element.
 * @param minWidth min-width in pixels
 * @param element element
 */
function setMinWidth(minWidth, element){
   var item=jQuery(escapeClientId(element));
   if (null==item){
	   return;
   }
   var width=item.width();
   if (null==width || 0==width){
		 //element not found or not visible
		 return;   
   }

   //if content-width<min-width then resize to the min-width
   if (width<minWidth){
     item.width(minWidth);
   }
}

/**
 * Set the width within the range of min..max of the element.
 * @param minWidth min-width in pixels
 * @param maxWidth max-width in pixels
 * @param id id of the element to resize
 */
function setMinMaxWidth(minWidth, maxWidth, id){
	setMinWidth(minWidth, ''+id);
	setMaxWidth(maxWidth, ''+id);
}