eSolutions Group Hosted Libraries

SCM: (https://git.esolutionsgroup.ca/esolg/230002-icreate-javascriptlibraries)

The eSolutions Hosted Libraries is a content distribution network for the most popular JavaScript libraries used by eSolutions' web applications. To add a library to your site, simply use <script> tags to include the library, as explained below.

AngularJS
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/angularjs/1.2.14/angular.min.js"></script>
site: http://angularjs.org
stable versions: 1.0.8, 1.2.9, 1.2.14
unstable versions: 1.1.4, 1.2.0-rc.3
AngularJS-native version of Select2 and Selectize
JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/angular-ui-select/0.8.4-pre/dist/select.min"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/angular-ui-select/0.8.4-pre/dist/select.min.css" />
site: https://github.com/jlfama/ui-select
versions: 0.8.3, 0.8.4-pre (for IE), 0.9.3
Angular Table
JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/ng-table/0.3.0/ng-table.min.js"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/ng-table/0.3.0/resources/css/ng-table.min.css" />
site: https://github.com/esvit/ng-table/
versions: 0.3.0, 0.3.2
Bootstrap

[2.3.2, 3.0.2]

JavaScript snippet:
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/bootstrap/2.3.2/bootstrap.min.js"></script>
CSS snippet:
  • <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/bootstrap/2.3.2/resources/css/bootstrap.min.css" />
Other resources:
  • CSS Folder: https://js.esolutionsgroup.ca/js/libs/bootstrap/2.3.2/resources/css
  • Font Folder: https://js.esolutionsgroup.ca/js/libs/bootstrap/2.3.2/resources/fonts

[3.0.3, 3.1.1, 3.2.0]

JavaScript snippet:
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS snippet:
  • <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/bootstrap/3.2.0/css/bootstrap.min.css" />
Other resources:
  • CSS Folder: https://js.esolutionsgroup.ca/js/libs/bootstrap/3.2.0/css
  • Font Folder: https://js.esolutionsgroup.ca/js/libs/bootstrap/3.2.0/fonts
site: http://getbootstrap.com/
stable versions: 2.3.2, 3.0.3, 3.1.1, 3.2.0
unstable versions: 3.0.0, 3.0.2
chartjs

Plugin wrapping for settings object and Default token settings definitions for cloning

JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/ic/1.0.0/template_defaultEditorSettings.js"></script>
site: http://www.chartjs.org/
versions: 0.2.0
Chart.js.legend

An implementation of legend widget for Chart.js.

JavaScript snippet: <script src="https://js.esolutionsgroup.ca/js/libs/chartjs-legend/0.0.1/legend.js"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/chartjs-legend/0.0.1/css/legend.css" />
site: https://github.com/bebraw/Chart.js.legend
versions: 0.0.1
Converting between JSON and XML
JSON to XML snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jsonxml/0.9/json2xml.js"></script>
XML to JSON snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jsonxml/0.9/xml2json.js"></script>
site: http://goessner.net/download/prj/jsonxml/
versions: 0.9
Date

date manipulation.

snippet: <script src="https://js.esolutionsgroup.ca/js/libs/date/1.0.0/date.min.js"></script>
site: http://www.datejs.com/
versions: 1.0.0
Date - for iCreate

date formatting (non-conflicting subset of date.js).

snippet: <script src="https://js.esolutionsgroup.ca/js/libs/icreate-date/1.0.0/icrt-toDateTimeString.min.js"></script>
created by: Vinh Do
versions: 1.0.0
excanvas

HTML5 Canvas for Internet Explorer 8 and below

JavaScript snippet: <!--[if lte IE 8]><script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/excanvas/r3/excanvas.compiled.js"></script><![endif]-->
site: https://code.google.com/p/explorercanvas/
versions: r3
Feedback Form

These are used by the Feedback Form Module to style the way the feedback form will look.

Available Skins:
default
  • root path:https://js.esolutionsgroup.ca/js/libs/feedback-form/skins/default/2.1.8/
  • versions: 1.0.0, 2.1.0, 2.1.1, 2.1.2, 2.1.3, 2.1.4, 2.1.5, 2.1.6, 2.1.7, 2.1.8
  • For: iCreate Template (1.0.0 - template v3, 2.1.0+ - all versions)
  • Created by: Larry Stuart (lstuart@esolutionsgroup.ca)
Two Column Contact
  • root path:https://js.esolutionsgroup.ca/js/libs/feedback-form/skins/contact-two-columns/1.0.2/
  • versions: 1.0.0, 1.0.1, 1.0.2, 1.0.3
  • Created by: Larry Stuart (lstuart@esolutionsgroup.ca)

Plugin Parameters:
  • feedbackForm
    • useDefaultIfNoIdIsSet (bool) - if this is true, then the form will show on all pages. If false, then only on pages with a defined feedbackFormId
    • baseUrl (string) - the url to get to the base module
    • getUrl (string) - the site specific url sections for the default form (will be overridden if a feedbackFormId is set)
    • jsServerUrl (string) - the base url of our js server or wherever you want to pull the skin code from
    • previewMode (bool) - will not actually persist anything, but still allows you to go through the process
    • agreeTermsUrl (string) - the url to get to the agree terms confirmation message
    • showButton: (bool) - for preview mode. This will make the form open immediately without a feedback button
    • pageTitle: (string) - the title of the page that you are sending the feedback from
    • buttonText: (string) - if you have a custom feedback button, this will set the text inside
    • feedbackFormId: (guid)[>=2.1.0] - this is the value of the FeedbackFormId token
    • loadingText: (string)[>=2.1.0] - text to display while the form is loading
    • firstNameText: (string)[>=2.2.0] - label for the first name field
    • lastNameText: (string)[>=2.2.0] - label for the last name field
    • emailText: (string)[>=2.2.0] - label for the email field
    • firstNameLength: (int)[>=2.2.0] - character limit for the first name field
    • lastNameLength: (int)[>=2.2.0] - character limit for the last name field
    • emailLength: (int)[>=2.1.0] - character limit for the email field
    • suggestionLength: (int)[>=2.1.0] - character limit for the category feedback textarea field
    • closeText: (string)[>=2.1.0] - the text to the right of the send button in the feedback window
    • sendText: (string)[>=2.1.0] - the text inside the send button of the feedback window
    • closeThankYouText: (string)[>=2.1.0] - the text inside the close button for the thank you window
    • thankYouModalTitle: (string)[>=2.1.0] - title of thank you window
    • language: (string)[>=2.1.0] - not currently in use, for future dev. compatibility
    • thankYouModalWidth: (int)[>=2.2.6] - Modal window width for form window
    • formModalWidth: (int)[>=2.2.6] - Modal window width for thank you window
example:

to be added to the headCommon.asp - in document.ready

//$("#yourButtonId").feedbackForm({
$("body").feedbackForm({
	useDefaultIfNoIdIsSet: true,
	baseUrl: "http://icreate1.stage.esolutionsgroup.ca/feedback/api/1.0/",
	getUrl: "client/239000_97_201_iCreateTemplate/default-form/en",
	jsServerUrl: "https://js.esolutionsgroup.ca/js/libs/feedback-form/",
	previewMode: false,
	agreeTermsUrl: "Your xml file loaded path",
	showButton: true,
	pageTitle: "your page title here minus site title",
	buttonText: "",
	feedbackFormId: 'a23605da-88e7-481e-8100-15acb92e9f13',
	loadingText : "Please wait while this form loads...",
	firstNameLength: 63,
	lastNameLength: 63,
	emailLength: 255,
	suggestionLength: 255,
	firstNameText: "First Name:",
	lastNameText: "Last Name:",
	emailText: "Email:",
	closeText : "Or cancel",
	sendText : "Send Feedback",
	closeThankYouText : "Close",
	thankYouModalTitle: "Thank you for your feedback!",
	language:'en',
	thankYouModalWidth: 600,
	formModalWidth: 600
});

Preview Link: http://js.esolutionsgroup.ca/js/libs/feedback-form/skins/index.html?skin=default&version=2.1.8&baseUrl=//icreate1.stage.esolutionsgroup.ca/feedback/api/1.0&preview=true&formId=a23605da-88e7-481e-8100-15acb92e9f13&allowSkinSwitch=true
http://js.esolutionsgroup.ca/js/libs/feedback-form/skins/index.html?skin=[name-of-skin-seen-above]&version=[X.Y.Z]&baseUrl=[url-of-server]&preview=[bool]&formId=[guid]&allowSkinSwitch=[bool]
JS Snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/feedback-form/structure/2.4.1/feedbackStructure.min.js"></script>
versions: 2.0.0, 2.1.0, 2.1.1, 2.2.0, 2.2.1, 2.2.2, 2.2.3, 2.2.4, 2.2.5, 2.2.6, 2.2.7, 2.2.8, 2.2.9, 2.3.0, 2.3.1, 2.4.0, 2.4.1, 2.x, 2.4.2
Font Awesome

Font Awesome - CSS library for awesome fonts

site: http://fortawesome.github.io/Font-Awesome/
versions: 4.3.0
Google Analytics - Tracking

Tracks clicks of anchors

JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/google-analytics-tracking/1.0.0/gaTracking.min.js"></script>
requires javascript variable to be set first (iCreate: /en/inc/Google-Analytics.asp): <script>var _gaTrackingCode = "your google tracking code";</script>
versions: 1.0.0
Headroom

Give your page some headroom. Hide your header until you need it

JavaScript snippets: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/headroom/core/0.7.0/headroom.min.js"></script>
<script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/headroom/jquery/1.0.0/jquery.headroom.min.js"></script>
*requires jQuery if using the jQuery implementation*
core versions: 0.7.0
extend to jQuery versions: 1.0.0
site: http://wicky.nillia.ms/headroom.js
hoverIntent

hoverIntent is similar to jQuery's built-in "hover" method except that instead of firing the handlerIn function immediately, hoverIntent checks to see if the user's mouse has slowed down (beneath the sensitivity threshold) before firing the event. The handlerOut function is only called after a matching handlerIn.

 // basic usage ... just like .hover()
 .hoverIntent( handlerIn, handlerOut )
 .hoverIntent( handlerInOut )

 // basic usage ... with event delegation!
 .hoverIntent( handlerIn, handlerOut, selector )
 .hoverIntent( handlerInOut, selector )

 // using a basic configuration object
 .hoverIntent( config )

 @param  handlerIn   function OR configuration object
 @param  handlerOut  function OR selector for delegation OR undefined
 @param  selector    selector OR undefined
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/hover-intent/1.8.0/jquery.hoverIntent.min.js"></script>
site: http://cherne.net/brian/resources/jquery.hoverIntent.html
versions: 1.8.0
html5shiv

HTML5 IE enabling script

snippet: <!--[if lt IE 9]><script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/html5shiv/3.7.0/html5shiv.min.js"></script><![endif]-->
site: https://code.google.com/p/html5shiv/
stable versions: 3.7.0
unstable versions: 3.6.2pre
iCreate Base Stylesheet
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/icreate-base-style/1.0.0/base.css" />
versions: 1.0.0
ICreate - Table style context menu utilization

allows styling of tables in edit mode using context menu

Requires: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_contextmenu/1.7.0/jquery.ui-contextmenu.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery_contextmenu/skins/1.0.0/contextMenu.min.css" >
JS Snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-tablestyles/1.0.0/tableStyles.min.js"></script>
versions: 1.0.0
ICreate - TinyMCE Accordion Plugin - jQuery plugin

This plugin builds the html structure for the content saved in the token to displayed to the user

JS Snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-tinymce-accordion/1.0.4/jquery-icrtaccordion-clean.min.js"></script>
versions: 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4
iCreate TinyMCE Editor Default Settings

This is default TinyMCE Settings that will be used by the editor for each token in iCreate. Note that version 1.1.1 supports the revised template structure only.

JavaScript snippet: <script src="https://js.esolutionsgroup.ca/js/libs/icreate-tinymce-defaults/1.1.1/template_defaultEditorSettings.js"></script>
Developed In-House:
Larry Stuart
March 27, 2014
versions: 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.0.6, 1.0.7, 1.0.8, 1.1.0 (req. common folder structure), 1.1.1 (req. SASS styles)
example of how to use this to setup a token:
icrtEditorSettings =
    $.fn.tinyMCE_iCreate_object()
        .add("THIS IS MY TOKEN ID", "THIS IS THE SETTINGS NAME (SEE AVAILABLE DEFAULT TOKEN SCHEMAS)", { OVERRIDE DEFAULT ATTRIBUTES HERE })
		.add("TKHomeBannerSaveImage", "standardImageSettings", {
            height: '692',
            width: '1068'
        })
		//example of appending a custom css to the content_css:
		.addOneCSVTokenSetting("THIS IS MY TOKEN ID", "Name of specific setting", "value to append")
		.addOneCSVTokenSetting("TKInteriorMainContent", "content_css", "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700") 
		//example of removing the styleselect from the 3rd set of buttons:
		.removeOneCSVTokenSetting("THIS IS MY TOKEN ID", "Name of specific setting", "value to remove")
		.removeOneCSVTokenSetting("TKInteriorMainContent", "theme_advanced_buttons3", "styleselect") 
		//example of adding the styleselect to the 3rd set of buttons just before the "cite" item:
		.addOneCSVTokenSettingBefore("THIS IS MY TOKEN ID", "Name of specific setting", "value to place the new item before", "value to add in")
		.addOneCSVTokenSettingBefore("TKInteriorMainContent", "theme_advanced_buttons3", "cite", "styleselect") 
		//example of removing the second instance of the bar separator from the 3rd set of buttons just before the "cite" item:
		.removeBar("THIS IS MY TOKEN ID", "Name of specific setting", "index of bar")
		.removeBar("TKInteriorMainContent", "theme_advanced_buttons3", 2) 

		.add("TKHomeBannerSaveText", "standardTextAreaSettings")
		.settings;
		

Available Default Token Schemas:
standardTextAreaSettings = {
	body_id: 'printArea',
	body_class: ic_tinyMCE_bodyClass,
	theme_advanced_statusbar_location: "none",
	theme_advanced_toolbar_location: "external", // display the tool bar out of the content section
    plugins: 'inlinepopups,advimage,advlink,autolink,autosave,autoresize,contextmenu,directionality,-filemanager,icrtacheck,icrtdoublectrl,icrtemail,icrtfriendlyredirect,icrtlanguageselect,icrtlogin,icrtphotogallery,icrtsave,icrtsnippet,icrtspellchecker,icrtstyletable,icrtwrapper,icrtwqc,-imagemanager,insertdatetime,lists,media,paste,save,searchreplace,style,table,visualchars,xhtmlxtras,icrtsharedcontent,icrtaccordion,icrtpollmodule',
	autoresize_min_height: '30',
	width: "100%",
	theme: "advanced",
	theme_advanced_buttons1: "icrtsave,|,undo,redo,|,icrtspellchecker,|,removeformat,cut,copy,paste,pastetext,pasteword,|,search,replace,|,icrtsharedcontent,|,icrtpollmodule",
	theme_advanced_buttons2: "bold,italic,underline,sup,sub,|,formatselect,|,numlist,bullist,|,justifyleft,justifycenter,justifyright,|,indent,outdent,blockquote,hr",
	theme_advanced_buttons3: "icrtemail,anchor,link,unlink,|,styleselect,|,cite,abbr,acronym,|,charmap,insertdate,inserttime,|,image,media,icrtrelease,icrtphotogallery,icrtacheck,icrtacheckpopup,code",
	theme_advanced_buttons4: "tablecontrols,visualaid,|,icrtacc_insert,|,icrtacc_add_row,icrtacc_delete_row",
	icrtsection_cssClass: 'contentSection',
	content_css: iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css, "
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icrtaccordion.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreateeditor.css",
	plugin_insertdate_timeFormat: "%I:%M:%S %p",
	inline_styles: false,
	theme_advanced_blockformats: "p,h2,h3,div",
	formats: {
		alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Left' },
		aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Center' },
		alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Right' }
	}
}
simpleTextAreaSettings = {
		body_id: 'printArea',
		body_class: ic_tinyMCE_bodyClass,
		theme_advanced_statusbar_location: "none",
		theme_advanced_toolbar_location: "external", // display the tool bar out of the content section
		plugins: 'inlinepopups,advimage,advlink,autolink,autosave,autoresize,contextmenu,directionality,-filemanager,icrtacheck,icrtdoublectrl,icrtemail,icrtfriendlyredirect,icrtlanguageselect,icrtlogin,icrtsave,icrtsnippet,icrtspellchecker,icrtwrapper,icrtwqc,-imagemanager,insertdatetime,lists,paste,save,searchreplace,style,xhtmlxtras',
		autoresize_min_height: '30',
		width: "100%",
		theme: "advanced",
		theme_advanced_buttons1: "icrtsave,|,undo,redo,|,icrtspellchecker,|,removeformat,cut,copy,paste,pastetext,pasteword",
		theme_advanced_buttons2: "bold,italic,underline,sup,sub,|,formatselect,|,justifyleft,justifycenter,justifyright",
		theme_advanced_buttons3: "icrtemail,anchor,link,unlink,|,styleselect,|,code",
		theme_advanced_buttons4: "",
		icrtsection_cssClass: 'contentSection',
		content_css: iCreateObject.corpRoot + "/Common/styles/base.css,"
			+ iCreateObject.corpRoot + "/Common/styles/icreate.css,"
			+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css, "
			+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
			+ iCreateObject.corpRoot + "/Common/styles/icrtaccordion.css,"
			+ "/icreate/modules/pageeditor3/icrtEditor3-template.css,"
			+ iCreateObject.corpRoot + "/Common/styles/icreateeditor.css",
		plugin_insertdate_timeFormat: "%I:%M:%S %p",
		inline_styles: false,
		theme_advanced_blockformats: "p,h2,h3,div",
		formats: {
			alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Left' },
			aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Center' },
			alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Right' }
		}
},
standardImageSettings = {
	body_id: 'printArea',
	theme_advanced_statusbar_location: "none", // the :p bar
	theme_advanced_toolbar_location: "external", // display the tool bar out of the content section
	theme_advanced_resizing: false, // resize the box
	height: '250',
	width: '730',
	plugins: 'inlinepopups,advimage,advlink,autolink,directionality,-filemanager,icrtacheck,icrtdoublectrl,icrtlanguageselect,icrtlogin,icrtphotogallery,icrtsave,icrtspellchecker,-imagemanager,insertdatetime,lists,media,paste,save,searchreplace,style,table,visualchars,xhtmlxtras',
	theme_advanced_buttons1: "icrtsave,|,icrtphotogallery,image,link,unlink,icrthtmlsrc",
	content_css: iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css, "
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icrtaccordion.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreateeditor.css",
	formats: {
		alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Left' },
		aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Center' },
		alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Right' }
	}
}
		
standardHiddenSettings = {
	plugins: 'xhtmlxtras',
	content_css: iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css,"
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css",
	theme_advanced_resizing: false, // resize the box
	theme_advanced_statusbar_location: "none" // the :p
}
		
standardContactModuleSettings = {
	autoresize_min_height: '30',
	plugins: 'xhtmlxtras',
	content_css: iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css,"
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css",
}

standardBannerImageSettings : {
	body_id: 'printArea',
	theme_advanced_statusbar_location: "none", // the :p bar
	theme_advanced_toolbar_location: "external", // display the tool bar out of the content section
	theme_advanced_resizing: false, // resize the box
	height: '400',
	width: '100%',
	plugins: 'inlinepopups,advimage,advlink,autolink,directionality,-filemanager,icrtacheck,icrtdoublectrl,icrtlanguageselect,icrtlogin,icrtphotogallery,icrtspellchecker,-imagemanager,insertdatetime,lists,media,paste,save,searchreplace,style,table,visualchars,xhtmlxtras',
	theme_advanced_buttons1: "image,link,unlink,icrthtmlsrc",
	content_css: iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css, "
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icrtaccordion.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreateeditor.css",
	formats: {
		alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Left' },
		aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Center' },
		alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Right' }
	}
}

standardBannerTextSettings  : {
	body_id: 'printArea',
	body_class: ic_tinyMCE_bodyClass,
	theme_advanced_statusbar_location: "none",
	theme_advanced_toolbar_location: "external", // display the tool bar out of the content section
	plugins: 'inlinepopups,advimage,advlink,autolink,autoresize,contextmenu,directionality,-filemanager,icrtacheck,icrtdoublectrl,icrtemail,icrtfriendlyredirect,icrtlanguageselect,icrtlogin,icrtphotogallery,icrtsnippet,icrtspellchecker,icrtstyletable,icrtwrapper,icrtwqc,-imagemanager,insertdatetime,lists,media,paste,save,searchreplace,style,table,visualchars,xhtmlxtras',
	autoresize_min_height: '30',
	width: "600",
	theme: "advanced",
	theme_advanced_buttons1: "image,bold,italic,underline,|,icrtemail,anchor,link,unlink",
	theme_advanced_buttons2: "justifyleft,justifycenter,justifyright,|,formatselect,|,removeformat,cut,copy,paste,pastetext,pasteword,code",
	theme_advanced_buttons3: "",
	theme_advanced_buttons4: "",
	icrtsection_cssClass: 'contentSection',
	content_css: iCreateObject.corpRoot + "/Common/styles/base.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreate.css,"
		+ iCreateObject.corpRoot + "/Common/styles/sitecontent.css, "
		+ iCreateObject.corpRoot + "/Common/styles/structure.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icrtaccordion.css,"
		+ "/icreate/modules/pageeditor3/icrtEditor3-template.css,"
		+ iCreateObject.corpRoot + "/Common/styles/icreateeditor.css",
	plugin_insertdate_timeFormat: "%I:%M:%S %p",
	inline_styles: false,
	theme_advanced_blockformats: "p,h2,h3,div",
	formats: {
		alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Left' },
		aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Center' },
		alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'Right' }
	}
}

IOS Slider
Javascript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/ios_slider/structure/1.3.43/jquery.iosslider.min.js"></script>
JS Core Versions: 1.3.42, 1.3.43
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/ios_slider/skins/default/1.1.1/iosSlider.css" />
CSS Skin Versions: default: 1.0.0, 1.0.1, 1.0.2, 1.1.0, 1.1.1
site: https://iosscripts.com/iosslider/
versions: 1.3.42
jQuery
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery/1.11.2/jquery.min.js"></script>
site: http://jquery.com/
versions: 1.10.2, 1.11.1, 1.11.2, 2.1.1
jQuery UI
JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery-ui/1.10.4/jquery-ui.min.js"></script>
-OR-
<script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery-ui/1.11.2/jquery-ui.min.js"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery-ui/1.10.4/resources/themes/base/jquery-ui.min.css" />
-OR-
<link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery-ui/1.11.2/jquery-ui.min.css" />
site: http://jqueryui.com/
versions: 1.9.2, 1.10.3, 1.10.4, 1.11.1, 1.11.2
jQuery UI Extension - Timepicker
CSS snippet:
<link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery_ui_timepicker/0.3.3/jquery.ui.timepicker.css" />
JavaScript snippet:
<script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_ui_timepicker/0.3.3/jquery.ui.timepicker.min.js"></script>
localization css snippet:
<link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery_ui_timepicker/0.3.3/i18n/jquery.ui.timepicker-fr.js" >
HTML Element:
<input type="text" id="timepicker" value="" />
Javascript initialization:
$('#timepicker').timepicker({
	// Options
	timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
	showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10.
						 (default: true)
	showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
						 (default: true)
	showPeriod: false,            // Define whether or not to show AM/PM with selected time. (default: false)
	showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
	periodSeparator: ' ',         // The character to use to separate the time from the time period.
	altField: '#alternate_input', // Define an alternate input to parse selected time to
	defaultTime: '12:34',         // Used as default time when input field is empty or for inline timePicker
					  // (set to 'now' for the current time, '' for no highlighted time,
						 default value: now)
	// trigger options
	showOn: 'focus',              // Define when the timepicker is shown.
					  // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
					  // 'both': when the input gets focus and when the button is clicked.
	button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'
	// Localization
	hourText: 'Hour',             // Define the locale text for "Hours"
	minuteText: 'Minute',         // Define the locale text for "Minute"
	amPmText: ['AM', 'PM'],       // Define the locale text for periods
	// Position
	myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
	atPosition: 'left bottom',    // Corner of the input to position
	// Events
	beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
	onSelect: onSelectCallback,   // Define a callback function when an hour / minutes is selected.
	onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
	onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
	onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)
	// custom hours and minutes
	hours: {
		starts: 0,                // First displayed hour
		ends: 23                  // Last displayed hour
	},
	minutes: {
		starts: 0,                // First displayed minute
		ends: 55,                 // Last displayed minute
		interval: 5,              // Interval of displayed minutes
		manual: []                // Optional extra entries for minutes
	},
	rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
	showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
	showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog
	// Min and Max time
	minTime: {                    // Set the minimum time selectable by the user, disable hours and minutes
		hour: minHour,            // previous to min time
		minute: minMinute
	},
	maxTime: {                    // Set the minimum time selectable by the user, disable hours and minutes
		hour: maxHour,            // after max time
		minute: maxMinute
	},
	// buttons
	showCloseButton: false,       // shows an OK button to confirm the edit
	closeButtonText: 'Done',      // Text for the confirmation button (ok button)
	showNowButton: false,         // Shows the 'now' button
	nowButtonText: 'Now',         // Text for the now button
	showDeselectButton: false,    // Shows the deselect time button
	deselectButtonText: 'Deselect' // Text for the deselect button
});
site: https://fgelinas.com/code/timepicker/
versions: 0.3.3
jQuery Extension - Timers

Adds additional functionality to jQuery pertaining to timers

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_timers/1.2.0/jquery.timers.min.js"></script>
site: https://drupal.org/files/issues/jquery.timers-1.2.js_.txt
versions: 1.2.0
jquery methods:

everyTime: function(interval, label, fn, times)
oneTime: function(interval, label, fn)
stopTime: function(label, fn)

jquery timer methods:

timeParse: function(value)
add: function(element, interval, label, fn, times)
remove: function(element, label, fn)

jquery timer parameters:

global: []
guid: 1
powers: { 'ms': 1, 'cs': 10, 'ds': 100, 's': 1000, 'das': 10000, 'hs': 100000, 'ks': 1000000 }
increment : "1"
direction : "vertical"

jQuery Extension - Context Menu (depricated - needs feature detection instead of browser detection)

Adds additional functionality to jQuery pertaining to context menus

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_contextmenu/1.7.0/jquery.ui-contextmenu.min.js"></script>
skins: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery_contextmenu/skins/1.0.0/contextMenu.min.css" >
site: 1.0.0:http://abeautifulsite.net/
1.7.0:http://plugins.jquery.com/ui-contextmenu/
versions: 1.0.0 (file name is jquery.contextMenu.min.js), 1.7.0
skin versions: 1.0.0 (for V1.0.0)
jquery methods:

contextMenu: function(o, callback)
[o.menu : object, o.inSpeed : 150, o.outSpeed = 75]

jQuery Plugin - Auto Scroll

Used for banner image scrolling

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_autoscroll/1.0.0/jquery-auto-scroll.min.js"></script>
Developed in-house: vdo@esolutionsgroup.ca
versions: 1.0.0
parameters:

height : "100px"
width : "100px"
delay : "1000"
increment : "1"
direction : "vertical"

jQuery Plugin - cookie
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_cookie/1.4.0/jquery.cookie.min.js"></script>
site: http://plugins.jquery.com/cookie/
versions: 1.4.0
jQuery Plugin - DataTables

A grid plug-in for the jQuery Javascript library.

JavaScript snippet:
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/datatables/1.9.4/jquery.dataTables.js"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/datatables/1.9.4/css/jquery.dataTables.css" />
Other resources:
  • css folder: https://js.esolutionsgroup.ca/js/libs/datatables/1.9.4/css
  • images folder: https://js.esolutionsgroup.ca/js/libs/datatables/1.9.4/images
site: http://datatables.net/
versions: 1.9.4
jQuery Plugin - Gallery

A photo gallery plug-in for the jQuery Javascript library. (Used for the iCreate Gallery)

JavaScript snippet:
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_gallery/1.2.4/jquery.gallery.min.js"></script>
  • <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_gallery/1.2.4/jquery.gallery.js"></script>
site: http://coffeescripter.com/code/ad-gallery/
versions: 1.2.4
parameters:

start_at_index: 0,
description_wrapper: false,
thumb_opacity: 0.7,
animate_first_image: false,
animation_speed: 400,
width: false,
height: false,
display_next_and_prev: true,
display_back_and_forward: true,
scroll_jump: 0, // If 0, it jumps the width of the container
slideshow: {
     enable: true,
     autostart: false,
     speed: 5000,
     start_label: 'Start',
     stop_label: 'Stop',
     stop_on_scroll: true,
     countdown_prefix: '(',
     countdown_sufix: ')',
     onStart: false,
onStop: false
},
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
enable_keyboard_move: true,
cycle: true,
callbacks: {
     init: false,
     afterImageVisible: false,
     beforeImageVisible: false
}

jQuery Plugin - iCreate Rotating Banner (1.0 - 2.1.6)

Rotating banner tool for iCreate

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_rotatingbanner/2.1.5/jquery.rotatingbanners.min.js"></script>
Developed in-house: original (1.0.0): vdo@esolutionsgroup.ca
responsive (2.0.0+): lstuart@esolutionsgroup.ca
versions: 1.0.0, 2.0.0 (requires isSiteinICreateMode() function), 2.0.1 (requires iCreateObject), 2.0.2, 2.0.3, 2.0.4, 2.0.5 (Utilizes icAlert function), 2.0.6, 2.1.0(removes iCreateObject Requirement), 2.1.1, 2.1.2, 2.1.3, 2.1.4, 2.1.5
parameters:

timerLength : 8000,
enableTimer : true,
transitionLength : 1000,
transitionType : "fade" (or "slide"),
bannerClass : "banner",
tokenClasses : ["bannerImage", "bannerTextContent", "bannerCaption"],
navButtonClass : "navButton",
navButtonsOnly : false,
navArrowsOnly : false,
alternativeNav : {},
editElement : $(this).attr("id") + "Edit",
icreateTokenClass : "iCreateToken",
maxBanners : 5,
alertMsg,
fitImages : false,
--This will fit the banner to the full width of the window and will resize the banners when the window size is changed. It must be placed outside of uber. (depricated with 2.0.0 for responsive).
ratio : 0,
--used with _fitImages. sets the height ratio of the image compared to the height of the window.
windowBufferHeight : 0
--used with _fitImages. sets the height of the image to full height minus this value.
enableSort : true,
enablePause : false,
isSiteInEditMode : false,
--added in with V2.1.0 you must pass iCreateObject.isSiteInICreateMode to this field from iCreate.
enableCustomStyling : false,
--added in with V2.1.0, enables the styling context menu for text content tokens
customStyles :
[
{
name: "Position",
options:
[
{ name: "Left", cssClass: "btLeft"},
{ name: "Middle", cssClass: "btMiddle"},
{ name: "Right", cssClass: "btRight"}
]
},
{
name: "Contrast",
options:
[
{ name: "Dark", cssClass: "btDark" },
{ name: "Light", cssClass: "btLight" }
]
}
],
--added in with V2.1.0 This will structure the styling context menu. Simply adds classes to the token's container. They work like option groups. ie. only one from position and one from contrast can be selected at a time
--changed classes in 2.1.3 imageOverlayClasses : [],
--added in with V2.1.2 This will apply title and links to overlay objects, this is an array of strings that should be the classes of the overlay objects. eg. ["bannerOverlay","landingBannerOverlay","someOtherOverlayObject"]

jQuery Plugin - iCreate Content Manager

Plugin that will generate complex HTML based on data entered into a configurable wizard.

Example
Visit http://basesite.icreate2.qa.esolutionsgroup.ca for a working example.
Javascript Snippet
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_contentmanager/structure/1.0.0/jquery.contentmanager.min.js"></script>
Plugin Settings
Settings:
{
        skin: "basic",
        skinVersion: "1.0.0",
        baseUrl: "https://js.esolutionsgroup.ca/js/libs/jquery_icreate_contentmanager",
        tokenID: "TKBannerContent",
        tokenType: "html", //html or json
        manageButtonText: "Manage Content", //Text to display on the button in iCreate.
        wrapperHTMLStructure: "<div id=\"ic-gal-slider-home\" class=\"slider-container ic-fade\"> <div class=\"ic-slider visible\"><div id=\"rotatingBanners\" class=\"slider\"></div></div><a class=\"prev\" href=\"#\" title=\"Previous Slide\" style=\"cursor: pointer;\">Previous</a><a class=\"next\" title=\"Next Slide\" href=\"#\" style=\"cursor: pointer;\">Next</a><div class=\"ic-slider-controls visible\"><a class=\"pause\" title=\"Pause Slideshow\" href=\"#\">Pause</a></div></div>",
        innerHTMLStructures: [
            {
                innerStructure: "<div class=\"slide\"><div class=\"bannerImage\" title=\"{title}\" data-image-title=\"{title}\" data-image-alt=\"{altText}\" onclick=\"{onclickEvent}\" style=\"background-image: url({imageURL});\"></div><div class\"bannerGradient\"></div><div class=\"ic-slider-content ic-slider-text {bannerTextAlign} {bannerTextContrast}\"><div class=\"ic-container-fluid\"><div class=\"ic-slider-content-foreground\">{bannerText}</div></div></div></div>",
                wrapperTarget: "rotatingBanners",
                targetType: "element", //element or attribute
                delimiterStructure:"<br/>",
                delimitAfterEvery: 3
            },
            {
                innerStructure: "<div class=\"slide\"><div class=\"bannerImage\" title=\"{title}\" data-image-title=\"{title}\" data-image-alt=\"{altText}\" onclick=\"{onclickEvent}\" style=\"background-image: url({imageURL});\"></div><div class\"bannerGradient\"></div><div class=\"ic-slider-content ic-slider-text {bannerTextAlign} {bannerTextContrast}\"><div class=\"ic-container-fluid\"><div class=\"ic-slider-content-foreground\">{bannerText}</div></div></div></div>",
                wrapperTarget: "rotatingBanners",
                targetType: "attribute", //element or attribute
                targetAttribute: "class",
                attributeDelimiter:" ",
                firstElementPrefix: "", //Text to add before the first element in the list.
				lastElementSuffix: "" //Text to add after the last element in the list.
            }
        ],            
        maxItems: 5,
        sortableFieldBinding: "", //Determines which field to bind to the sortable square
        sortableFieldType: "image", //image or text, determines whether to render the text or an image for the sortable square
        alertMessages: {
            "maxAllowableItemsReach": "You've reached the maximum allowable items.",
            "maxAllowableItemsReachTitle": "Max items reached.",
            "confirmItemDeletion": "Please confirm you want to delete this item.",
            "confirmItemDeletionTitle": "Delete Item?",
            "errorMessage": "An error occurred saving your items.",
            "errorMessageTitle": "An error occurred...",
            "cancelMessage": "Please confirm you want to cancel all changes.",
            "cancelMessageTitle": "Cancel changes?",
            "initErrorMessage": "A network error has prevented the content from loading. Please refresh the page and try again",
            "initErrorMessageTitle": "Network error occurred.",
            "loadingMessage": "Please wait while the images load. If you have recently cleared your browser cache this may take a few moments."
        },
        fields: [
            {
                type: "TextField",
                id: "textField",
                name: "Simple Text Field",
                required: true,
                invalidMessage: "Simple Text Field is a required field"
            },
            {
                type: "RichTextField",
                id: "richTextField",
                name: "TinyMCE Rich Text Field"
            },
            {
                type: "ImageField",
                id: "imageField",
                name: "Image Selection Field"
            },
            {
                type: "FileField",
                id: "fileField",
                name: "File Selection Field"
            },
            {
                type: "OptionList",
                id: "optionList",
                name: "Radio Button List",
                optionName: "optionList",
                options: [
                            {
                                id: "option1",
                                name: "Option 1",
                                optionValue: "btLeft"
                            },
                            {
                                id: "rbAlignCentre",
                                name: "Center",
                                optionValue: "btCentre"
                            },
                            {
                                id: "rbAlignRight",
                                name: "Right",
                                optionValue: "btRight"
                            }
                ]
            },

        ],
        editorSettings: DefaultEditorSettings
    }										
										
Implementation Instructions
Instructions
  1. In the template file, include references to the JS file: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_contentmanager/structure/1.0.0/jquery.contentmanager.min.js"></script>
  2. Call the content manager plugin on the element where the button will display, passing in the configuration and token where the HTML structure will be inserted. This can either be a standard token, or a nested token when used as part of the Layout Manager tool. This function takes the format: $([selector]).content_manager(Object OverrideValues, Object iCreateObject); Where OverrideValues is a Javascript object in the format specified under the "Plugin Settings" section.
  3. The OverrideValues parameter will be merged with the default. Note that any EditorSettings values are merged with the default settings. Any updates to values will override the existing value for that key.
Developed in-house: Initial Version (1.0.0): rjjones@esolutionsgroup.ca
versions: 1.0.0
jQuery Plugin - iCreate Layout Manager

Plugin that will allow a complex HTML structure to be created, including defining nested tokens, that can be injected into an iCreate token area. This plugin requires iCreate 2.18 or later.

Example
Visit http://basesite.icreate2.qa.esolutionsgroup.ca for a working example.
Javascript Snippet
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_layoutmanager/structure/1.0.0/jquery.layoutmanager.min.js"></script>
Plugin Settings
Settings:
{
        skin: "basic",
        skinVersion: "1.0.0",
        baseUrl: "https://js.esolutionsgroup.ca/js/libs/jquery_icreate_layoutmanager",
        enableRemoteLibrary: true, //Look for a remote library of elements
        componentLibraryUrl: "https://js.esolutionsgroup.ca/js/libs/jquery_icreate_layoutmanager/structure/1.0.0/layoutmanager.componentlibrary.json", //Path to a remote JSON file containing the component definitions.
        tokenID: "TKInteriorMainContent", //Token area where the layout will be injected.
        components: { 
            "oneColumnRow":{
		        "name": "Single Column Row",
		        "wrapper": "<div class=\"iCreateDynaToken\" data-lm-tokenId=\"singleTokenAreaTK1\" data-icrt-tk-cfg=\"PlainContent\"></div>",
		        "icon": "icon-one-col.svg"
	        },
	        "twoColumnRow":{
		        "name": "Two Column Row",
		        "wrapper": "<div class=\"ic-container-fluid\"><div class=\"ic-col-sm-6\"><div class=\"iCreateDynaToken\" data-lm-tokenId=\"doubleTokenAreaTK1\" data-icrt-tk-cfg=\"PlainContent\"></div></div><div class=\"ic-col-sm-6\"><div class=\"iCreateDynaToken\" data-lm-tokenId=\"doubleTokenAreaTK2\" data-icrt-tk-cfg=\"PlainContent\"></div></div></<div>",
		        "icon": "icon-two-col.svg"
	        }
        },
        availableComponents: [
            "oneColumnRow",
            "twoColumnRow"
        ],
        defaultLayout: [
            "oneColumnRow"
        ],
        content: {
            deleteTitle: "Confirm Delete...",
            deleteMessage: "<p>Are you sure you want to delete this component? Any content associated with this component will be lost.</p>",
            deleteOK: "Delete",
            deleteCancel: "Cancel",
            cancelDialogTitle: "Confirm Cancel...",
            cancelDialogMessage: "<p>Please confirm you want to cancel all changes.</p>",
            cancelDialogOK: "Confirm",
            cancelDialogCancel: "Close",
            updateTitleDialogTitle: "Update Component Title...",
            updateTitleDialogMessage: "Title: ",
            updateTitleDialogOK: "Confirm",
            updateTitleDialogCancel: "Close"
        }
    }									
										
Implementation Instructions
Instructions
  1. In the template file, include references to the JS file: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_layoutmanager/structure/1.0.0/jquery.layoutmanager.min.js"></script>
  2. Add a container token to your template:
    [[containerToken.def({
    	name: 'TKMainContent', 
    	title: 'Main Content'
    })]]
                                                    
  3. Call the content manager plugin on the element where the "Manage Layout" button will display, passing in the configuration and token where the HTML structure will be inserted. This function takes the format: $([selector]).content_manager(Object OverrideValues, Object iCreateObject); Where OverrideValues is a Javascript object in the format specified under the "Plugin Settings" section. Key parameters are:
    • enableRemoteLibrary - When true the plugin will retrieve the remote JSON file specified in componentLibraryUrl. These components will be merged with any locally defined in components
    • componentLibraryUrl - Remote URL to a JSON file containing the definition of the components available.
    • components - Object definition of a "component" that can be added to the layout using the tool.
      Each component is a named value of the components object, with an object defining the layout
      { 
          "oneColumnRow":{
      		"name": "Single Column Row",
      		"wrapper": "<div class=\"iCreateDynaToken\" data-lm-tokenId=\"singleTokenAreaTK1\" data-icrt-tk-cfg=\"PlainContent\"></div>",
      		"icon": "icon-one-col.svg"
      	}
      }
                                                              

      The "name" attribute of hte component determines the friendly display name the end user will see when using the tool.

      "wrapper" defines the HTML structure that will be inserted into the layout Note: the layout must begin with a top level containing div (or other structure). This is where the component data is stored, if there are multiple elements at the top level it will cause multiple components to be interpreted.

      To add a dynamic token to the layout add one of the following:

      • <div class=\"iCreateDynaToken\" data-lm-tokenId=\"singleTokenAreaTK1\" data-icrt-tk-cfg=\"PlainContent\">
        This adds a dynamic token that will render TinyMCE when entered. Note that data-lm-tokenId must be unique with the component. The data-icrt-tk-cfg defines the editor settings loaded into iCreate to use for this editor.
      • <div class="iCreateNoneditableToken" data-lm-tokenid="TKShowcaseBanner" data-icrt-tk-cfg="PlainContent"></div>
        This adds a dynamic token that will not render TinyMCE. This token can be used to show HTML the user is not intended to edit (e.g. content inserted by the content manager tool). Note that data-lm-tokenId must be unique with the component.

    • availableComponents - A list of the components that should be made available through the layout manager. This allows for filtering out components in the library that are not required.
    • defaultLayout - A list of components that should be added to the layout by default if no others have been added. This will only add components from the available components list.
  4. The OverrideValues parameter will be merged with the default. Note that any EditorSettings values are merged with the default settings. Any updates to values will override the existing value for that key.
Developed in-house: Initial Version (1.0.0): rjjones@esolutionsgroup.ca
versions: 1.0.0
jQuery Plugin - iCreate Rotating Banner (3.0 +)

Rotating banner tool for iCreate

Example
Visit http://basesite.icreate2.qa.esolutionsgroup.ca for a working example.
Javascript Snippet
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_rotatingbanner/structure/3.1.3/jquery.rotatingbanners.min.js"></script>
Plugin Settings
Settings:
{		
	tokenID: "TKBannerContent",
    targetBannerId: "", //Used for EditOnly mode to render out the DIV ID
    settingsUrl: "", //Path to the local settings file, used for EditOnly mode to setup the banners in edit mode.
    mode: "Normal", // Normal (render slides and button), EditOnly (no render, generate as TinyMCE popup), DisplayOnly (no button, render only)
    dialogWidth: 650, //Determines the size of the popup when rendering in EditOnly mode
	wrapperHTMLStructure: "<div id="ic-gal-slider-home" class="slider-container ic-fade"> <div class="ic-slider visible"><div id="rotatingBanners" class="slider"></div></div><a class="prev" href="#" title="Previous Slide" style="cursor: pointer;">Previous</a><a class="next" title="Next Slide" href="#" style="cursor: pointer;">Next</a><div class="ic-slider-controls visible"><a class="pause paused" title="Pause Slideshow" href="#">Pause</a></div></div>",
	slideHTMLStructure: "<div class="slide"><div class="bannerImage" title="{title}" data-image-title="{title}" data-image-alt="{altText}" onclick="{onclickEvent}" style="background-image: url({imageURL});"></div><div class"bannerGradient"></div><div class="ic-slider-content ic-slider-text {bannerTextAlign} {bannerTextContrast}"><div class="ic-container-fluid"><div class="ic-slider-content-foreground">{bannerText}<hr>{bannerText2}</div></div></div></div>",
	wrapperTargetDiv: "rotatingBanners",
	maxSlides: 5,
	skin: "basic",
	skinVersion: "1.0.0",
	baseUrl: "https://js.esolutionsgroup.ca/js/libs/jquery_icreate_rotatingbanner/",
	bannerSizeText: "Free form text",
    alertMessages: {
            "maxAllowableBannersReach": "You've reached the maximum allowable banners.",
            "bannerSuccessfullyDeleted": "Banner successfully deleted.",
            "confirmBannerDeletion": "Please confirm you want to delete this banner.",
            "errorMessage": "An error occurred saving your banners.",
            "cancelMessage": "Please confirm you want to cancel all changes.",
            "initErrorMessage": "A network error has prevented the rotating banner from loading. Please refresh the page and try again",
            "loadingMessage": "Please wait while the images load. If you have recently cleared your browser cache this may take a few moments."
    },
	textAreas: [
		{
			id: "bannerText",
			name: "Banner Text 1"
		},
		{
			id: "bannerText2",
			name: "Banner Text 2"
		}
	],
    customFields: [ 
        {
			id: "field1",
			name: "Field 1"
		},
		{
			id: "field2",
			name: "Field 2"
		}
    ],
	enableCustomStyles: true,
	customStyles: [
		{
			id: "bannerTextAlign",
			title: "Banner Text Alignment",
			optionName: "align",
			options:[
						{
							id: "rbAlignLeft",
							name: "Left",
							cssclass: "btLeft"
						},
						{
							id: "rbAlignCentre",
							name: "Center",
							cssclass: "btCentre"
						},
						{
							id: "rbAlignRight",
							name: "Right",
							cssclass: "btRight"
						}
					]
		},
		{
			id: "bannerTextContrast",
			title: "Banner Text Contrast",
			optionName: "contrast",
			options:[
						{
							id: "rbLightContrast",
							name: "Light",
							cssclass: "btLight"
						},
						{
							id: "rbDarkContrast",
							name: "Dark",
							cssclass: "btDark"
						}
					]
		}
	],
	editorSettings: DefaultEditorSettings
}										
										
Implementation Instructions
Instructions
  1. In the template file, include references to the JS file: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_rotatingbanner/structure/3.1.3/jquery.rotatingbanners.min.js"></script>
  2. In the template, add a token which will store the banner data structure. <input type="hidden" name="TKBannerContent" id="TKBannerContent" value="[[jsonToken.def({ name: 'TKBannerContent', title: 'Rotating Banner Data', htmlEscape: true, jsEscape: false })]]" />
    Note that if you change the ID of the Token, you will need to override the "TokenID" setting to match.
  3. Update sliderInit.js to call the plugin before the call to initialize the banner: $(window).load(function () { $("#rotatingBanner").rotating_banners( "IOSSlider", {}, iCreateObject ); }); This function takes the format: $([selector]).rotating_banners(string DefaultSetting, Object OverrideValues, Object iCreateObject); Where DefaultSetting is "IOSSlider", or "", and OverrideValues is a Javascript object in the format specified under the "Plugin Settings" section.
  4. The first parameter will instruct the plugin to load predefined settings. If this is empty, the parameters object passed in the second parameter will be used. If a default is provided the object in the second parameter will override the default values.
Developed in-house: generic wizard (3.0.0+): rjjones@esolutionsgroup.ca
versions: 3.0.0 (implemented as a generic wizard to create slides, requires iCreate 2.16), 3.0.1, 3.0.2, 3.1.0 (includes support for TinyMCE plugin), 3.1.1, 3.1.2, 3.1.3
jQuery Plugin - iCreate Google Maps

Google Maps for iCreate

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_icreate_googlemaps/1.0.0/jquery.googlemaps.min.js"></script>
Developed in-house: vdo@esolutionsgroup.ca
requires: <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<key goes here>" type="text/javascript"></script>
versions: 1.0.0
parameters:

width : 655
height : 500
searchText : "Get Directions"
toAddress : "620 Davenport Road, Waterloo, Ontario, Canada"
toAddressReadonly : true

required structure:

div #SearchContainer
div #ErrorContainer
div #MapContainer
div #DirectionContainer
input #From
input #To
input #SearchButton

jQuery Plugin - image swap

This will turn a div containing an img tag and optionally an anchor, and turn it into a responsive div tag and visa versa

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_imageswap/1.0.1/jquery.imageswap.min.js"></script>
test page: http://js.esolutionsgroup.ca/js/libs/jquery_imageswap/test.html
parameters:

publicMode : true (determines which way to convert public = img to div, and not public = div to img)

Developed by: Larry Stuart
versions: 1.0.0, 1.0.1
jQuery Plugin - jqGrid
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/jquery_jqgrid/4.5.4/css/ui.jqgrid.css" />
Localization JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_jqgrid/4.5.4/js/i18n/grid.locale-en.js"></script>
Core JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_jqgrid/4.5.4/js/jquery.jqGrid.min.js"></script>
site: http://www.trirand.com/blog/
versions: 4.5.4
jQuery Plugin - linkify

will take an element's content and convert all recognised links in its string into anchors.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_linkify/1.1.6/jquery.linkify.min.js"></script>
site: http://soapbox.github.io/jQuery-linkify/
versions: 1.1.6
jQuery Plugin - select2

A jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/select2/3.4.5/select2.min.js"></script>
site: http://ivaynberg.github.io/select2/
versions: 3.4.2, 3.4.5
jQuery Plugin - selectize

Selectize is the hybrid of a textbox and ≶select> box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/selectize/0.8.5/js/selectize.js"></script>
site: https://github.com/brianreavis/selectize.js
versions: 0.8.5
jQuery Plugin - Superfish

adds usability enhancements to multi-level drop-down menus. Fully supports touch devices and keyboard interaction.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/jquery_superfish/1.7.4/superfish.min.js"></script>
site: http://plugins.jquery.com/superfish/
versions: 1.7.4
json3

A modern JSON implementation compatible with a variety of JavaScript platforms, including Internet Explorer 6, Opera 7, Safari 2, and Netscape 6.

Production snippet: <!--[if lte IE 8]><script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/json3/3.2.5/json3.min.js"></script><![endif]-->
Development snippet: <!--[if lte IE 8]><script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/json3/3.2.5/json3.js"></script><![endif]-->
site: http://bestiejs.github.io/json3/
versions: 3.2.5
Lo-Dash

A utility library delivering consistency, customization, performance, & extras.

Production snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/lodash/2.2.1/lodash.min.js"></script>
Development snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/lodash/2.2.1/lodash.js"></script>
site: http://lodash.com/
versions: 2.2.1
Modernizr

Detects the availability of native implementations for next-generation web technologies.

JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/modernizr/2.8.3/modernizr.min.js"></script>
site: http://modernizr.com/
versions: 2.7.1, 2.8.3
NoBot

Make sure a bot isn't submitting a form within 3 seconds of loading the page.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/nobot/1.0.0/NoBot.min.js"></script>
Developed in-house: jdobson@esolutionsgroup.ca
versions: 1.0.0
PDF Builder Module

A module that saves page url from the website into a cookie, then builds a pdf report with a custom cover and back of all the selected pages.

Available Skins:
default

Parameters:
pbDefaultSettings = {
    webAPIBaseURL: "https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/",
    jsServerUrl: "https://js.esolutionsgroup.ca/js/libs/icreate-pdfbuilder",
    skin: "default",
    skinVersion: "1.2.1",
    containerClass: "icrt_PDFBuilder",
    cookieName: "pb_urls",
	cookieDomain: "",
    clientId: "",
    printContainerId: "printArea",
    printContainerWidth: "890px",
    elementsToNotPrint: ["header", "footer"],
    classesToNotPrint: [],
    idsToNotPrint: [],
	parsePageLinkContainerId : "icrt_dynIncLink", //New for v1.2.2
    estimatedSecondsPerPage : 15, //New for v1.2.0
    languageContent:
    {
        en: {
            logoImageSrc: "/en/images/structure/logo.png", //New for v1.1.0 - requires default skin v1.1.0
            logoImageAlt: "Logo Image", //New for v1.1.0 - requires default skin v1.1.0
            addButton: "Add to Report",
            addButtonTitle: "Click to add this page to the report",
            addModalTitle: "Added page to My Report",
            modalCloseTopText: " ", //New for v1.1.0 - requires default skin v1.1.0
            addModalMessage: "You have successfully added the page to My Report.",
            addModalCloseButtonText: "Return to Site",
            addModalPrintButtonText: "Print my Report",
            printButton: "Print to Report",
            printButtonTitle: "Click to review and print this report",
            generateButtonTitle: "Click to add this page to the report", 
            generateModalTitle: "My Report",
            generateTableItemHeading: "Item",  //Removed as of 1.2.0
            generateTableTitleHeading: "Title",
            generateModalCloseButtonText: "Close",
            generateModalGenerateButtonText: "Generate Report",
            generateTableNoItemsMessage: "No pages have been added to the report",
            loadingText:"Building PDF, Please wait...",
            loadingTimeText: "This may take up to {time} seconds", //New for v1.2.0
            errors: {
                serverTimeout: "The server is not responding"
            }
        },
        fr: {
            logoImageSrc: "/fr/images/structure/logo.png", //New for v1.1.0 - requires default skin v1.1.0
            logoImageAlt: "Logo Image(fr)", //New for v1.1.0 - requires default skin v1.1.0
            addButton: "Add to Report(fr)",
            addButtonTitle: "Click to add this page to the report(fr)",
            addModalTitle: "Added page to My Report(fr)",
            modalCloseTopText: " ", //New for v1.1.0 - requires default skin v1.1.0
            addModalMessage: "You have successfully added the page to My Report.(fr)",
            addModalCloseButtonText: "Return to Site(fr)",
            addModalPrintButtonText: "Print my Report(fr)",
            printButton: "Print to Report(fr)",
            printButtonTitle: "Click to review and print this report(fr)",
            generateButtonTitle: "Click to add this page to the report(fr)",
            generateModalTitle: "My Report(fr)",
            generateTableItemHeading: "Item(fr)", //Removed as of 1.2.0
            generateTableTitleHeading: "Title(fr)",
            generateModalCloseButtonText: "Close(fr)",
            generateModalGenerateButtonText: "Generate Report(fr)",
            generateTableNoItemsMessage: "No pages have been added to the report(fr)",
            loadingText:"Building PDF, Please wait...(fr)",
            loadingTimeText: "This may take up to {time} seconds(fr)", //New for v1.2.0
            errors: {
                serverTimeout: "The server is not responding"
            }
        }
    },
    showRelativeDates: true,
    windows: {
        printDialog: {
            width: 1024,
            height: 768,
            status: "yes",
            menubar: "no",
            location: "no",
            resizable: "yes"
        },
        itemAddedDialog:
        {
            width: 500,
            height: 300,
            status: "yes",
            menubar: "no",
            location: "no",
            resizable: "yes"
        }
    },
    iCreateObject: {
        lang: "en",
        corpRoot: "",
        corpId: -1,
        isSiteInICreateMode: false,
        isSiteInPreviewMode: false,
        isSiteInLocalDevelopment: true
    }                       
                                
Example:

to be added to the headCommon.asp - in document.ready

$("#yourContainerId").icrtPDFBuilder({
    webAPIBaseURL: "https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/",
    iCreateObject: iCreateObject,
    skin: "default",
    skinVersion: "1.2.1",
    clientId: "2510296e-b690-4b1e-9829-854861a0ecd2"
});
Implementation Instructions:
For adding to a new server
  1. Restore the database to the local sql server from the following file (get latest version if this is not it):
  2. https://svn.cra.int/svn/230002_iCreate_PDFBuilderModule_V1/tags/v1_0_0_InitialSetup/db/V1.0.0/230002_iCreate_PDFBuilderModule_InitialBak_201507141204.bak
  3. Create a new user and hook it up to the database with the following details:
    • username: 230002_iCreate_PDFBuilderModule_User
    • password: Add a unique one here and save it for the connection string in step 5
  4. Deploy all files/folders from the following link to the iCreate root in a folder named 230002_iCreate_PDFBuilderModule_V1:
  5. https://svn.cra.int/svn/230002_iCreate_PDFBuilderModule_V1/tags/v1_0_0_InitialSetup/PDFBuilder/
  6. Setup the module in IIS as a .Net 4.0 (64bit) module under iCreate by creating a 230002_iCreate_PDFBuilderModule_V1 app pool and turning the folder in the icreate site into an application pointing to that app pool.
  7. Change the following items in the web.config to match your server (the liscence stays the same)
  8. <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="server=(local);database=230002_iCreate_PDFBuilderModule;uid=230002_iCreate_PDFBuilderModule_User;pwd=Your password here" />
    </connectionStrings>
    <appSettings>
    <add key="PDFAssetFilePath" value="E:\***path to the module root --> 230002_iCreate_PDFBuilderModule_V1**\PDFBuilder\Uploads\" />
    <add key="PDFConverterLiscenceKey" value="***JUST LEAVE THIS AS WHAT IT IS IN THE FILE***" />
  9. Grant network service and iis_iusrs permissions to the upload folder to allow writing
For implementing a site
  1. Navigate to your backend by going to a similar link to the following (except, your server and virtual directory name):
  2. https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/
  3. Add your Client and pdf files
  4. Copy down the id by editing that new entry and copying it from the url (https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/Home/Edit/2510296e-b690-4b1e-9829-854861a0ecd2)
  5. Add the js reference to your head file after the other jquery references
  6. <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-pdfbuilder/structure/1.2.3/pdfBuilder.js"></script>
  7. In a document.ready function, call your plugin and target the container element where you want your controls to generate.
  8. $("#pb_Wrapper").icrtPDFBuilder({ --CHANGE TO TARGET YOUR ELEMENT
    webAPIBaseURL: "https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/", --CHANGE TO TARGET YOUR SERVER
    iCreateObject: iCreateObject,
    skin: "default",
    skinVersion: "1.2.1",
    clientId: "2510296e-b690-4b1e-9829-854861a0ecd2" --THIS IS THE GUID THAT YOU SAVED FROM A FEW STEPS AGO
    });
  9. Make sure there is a logo.png in the /en/images/structure/ folder that will look nice in this window.
  10. Set the styles up to print nicely
    • Go to your site and open the developer tools. go to the head and change any <link ... media"print" /> to be media"screen". Change the css file until it looks nice, as well as the ctrl+p print preview.
    • If it looks nice when you change the print.css to be screen instead of print, but you still want to hide other elements that should print on their with ctrl+p but not show in the pdf, then you can alter the code from step 5 with the following settings:
    • elementsToNotPrint: ["header", "footer", "button"],
      classesToNotPrint: ["myClassToHide1","myClassToHide1"],
      idsToNotPrint: ["myIDToHide1","myIDToHide2"],

Test Backend: https://icreate1.stage.esolutionsgroup.ca/230002_iCreate_PDFBuilderModule_V1/
JS snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-pdfbuilder/structure/1.2.2/pdfBuilder.min.js"></script>
Developed in-house: lstuart@esolutionsgroup.ca
versions: 1.0.0 (July 10, 2015), 1.1.0 (Aug 4, 2015), 1.2.0 (Aug 10, 2015), 1.2.1 (Sept 9, 2015), 1.2.2 (Nov 11, 2015)
Requirements: jQuery 1.7+, jQueryUI 1.10.0+ (previous versions still work, but the x button looks messed up)
PIE

CSS3 rendering for IE.

JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/pie/1.0.0/pie.min.js"></script>
site: http://css3pie.com/
versions: 1.0.0
RequireJS

JavaScript file and module loader.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/requirejs/2.1.9/require.min.js"></script>
site: http://requirejs.org/
versions: 2.1.5, 2.1.9
Require CSS

A RequireJS CSS loader plugin to allow CSS requires and optimization.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/require-css/0.0.8/css.js"></script>
site: https://github.com/guybedford/require-css
versions: 0.0.8
Require IS

A conditional loading plugin for Require-JS that works with optimizer builds and build layers.

snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/require-is/0.0.1/is.js"></script>
site: https://github.com/guybedford/require-is
versions: 0.0.1
respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

snippet: <!--[if lt IE 9]><script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/respond/1.3.0/respond.min.js"></script><![endif]-->
site: https://github.com/scottjehl/Respond
versions: 1.1.0, 1.3.0
Slick

the last carousel you'll ever need

CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/slick/1.3.7/slick.css" />
Javascript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/slick/1.3.7/slick.min.js"></script>
site: https://github.com/kenwheeler/slick
versions: 1.3.7
Social Media

Social Media Module for iCreate - an graphical interface to the various social media feed keys saved to a specific iCreate token

Available Skins:
basic
tabs

Javascript snippet:
<script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-socialmedia/structure/4.0.2/socialMedia.min.js"></script>
Plugin settings
{
	enabledFeeds: [], //acceptable inputs are "twitter", "facebook", "youtube", "instagram"
	keyTokenID: "TKSocialMediaConfiguration",
	externalHandlerBaseURL: "", //I used this for testing. to point to a site's root url to get the handler. it is a relative path otherwise.
	authenticatorBaseURL: "https://icreate-stg.esolutionsgroup.ca/social-auth/",
	languageContent: //not yet implemented, just there for base structure
	{
		en: {
			facebookRelativeDate: "ABOUT {hours} hours {minutes} minutes ago",
			errors: {
				serverTimeout: "The server is not responding"
			}
		},
		fr: {
			facebookRelativeDate: "ABOUT {hours} hours {minutes} minutes ago",
			errors: {
				serverTimeout: "The server is not responding"
			}
		}
	},
	showRelativeDates: true, //not implemented yet
	feedSettings:
	{
		facebook: {
			dateFormat: "MMMM d, h:mtt",
			feedWrapperHtmlStructure: "<div class=\"SMItem\"><div class=\"SMLink\"><a href=\"#\"><span class='facebookLogo'> </span></a></div><div class=\"SMDropdown\"><div class=\"SMDropdownInner facebookFeed cf\"></div></div></div>",
			feedItemHtmlStructure: ">div class=\"sMItem\"><span><a target='_blank' title='{linkTitle} Facebook page' href='{linkHref}'>{linkText}</a><p class=\"fbPostDate\">{postDate}</p></span><p class=\"fbPost\">{postContent}</p></div>",
			characterLimit: 220,
			elementClass: "facebookFeed"
		},
		twitter: {
			dateFormat: "MMMM d, yyyy",
			feedWrapperHtmlStructure: "<div class=\"SMItem\"><div class=\"SMLink\"><a href=\"#\"><span class='twitterLogo'> </span></a></div><div class=\"SMDropdown\"><div class=\"SMDropdownInner twitterFeed cf\"></div></div></div>",
			feedItemHtmlStructure: "<div class=\"sMItem\"><span><strong>{title}</strong> <a target='_blank' title='{linkTitle} Twitter page' href='https://twitter.com/{linkText}'>@{linkText}</a> • {postDate}</span>{postContent}</div>",
			characterLimit: 220,
			elementClass: "twitterFeed"
		},
        youtube: {
            dateFormat: "MMMM d, yyyy",
            feedWrapperHtmlStructure: "<div class=\"SMItem\"><div class=\"SMLink\"><a href=\"#\"><span class='youtubeLogo'> </span></a></div><div class=\"SMDropdown\"><div class=\"SMDropdownInner youtubefeed cf\"></div></div></div>",
            feedItemHtmlStructure: "<div class=\"sMItem\"><a target='_blank' title='{Title} YouTube page' href='{linkURL}'><img src=\"{imageSrc}\" class=\"ic-img-responsive\" max-width=\"{imgMaxWidth}\" max-height=\"{imgMaxHeight}\" alt=\"YouTube image\" /></a><span class=\"postedTitle\"><a href=\"{linkURL}\">{Title}</a></span><span class=\"postedDate\">Posted: {postDate}</span></div>
                </div>",
                characterLimit: 220,
                elementClass: "youtubeFeed"
        },
        instagram: {  //New as of v3.0.0
            dateFormat: "MMMM d, yyyy",
            feedWrapperHtmlStructure: "<div class=\"SMItem\"><div class=\"SMLink\"><a href=\"#\"><span class='instagramLogo'> </span></a></div><div class=\"SMDropdown\"><div class=\"SMDropdownInner instagramFeed cf\"></div></div></div>",
            feedItemHtmlStructure: "<div class=\"sMItem\"><a target='_blank' title='{Title} Instagram page' href='{linkURL}''><img src=\"{imageSrc}\" class=\"ic-img-responsive\" max-width=\"{imgMaxWidth}\" max-height=\"{imgMaxHeight}\" alt=\"Instagram Image\"/></a><span class=\"postedTitle\"><a href=\"{linkURL}\">{Title}</a></span><span class=\"postedDate\">Posted: {postDate}</span></div>
             </div>",
            characterLimit: 220,
            elementClass: "instagramFeed"
      }
    },
	feedColumnClass: "SMDropdown", //New as of V2.0.4
    windows: {
        AddSocialMedia: {
        width: 1024,
        height: 768,
        status: "yes",
        menubar: "no",
        location: "no",
        resizable: "yes"
        }
    },
    iCreateObject: { //just pass in the iCreate object from your iCreate site.  
        lang: "en",
        corpRoot: "",
        corpId: -1,
        isSiteInICreateMode: false,
        isSiteInPreviewMode: false,
        isSiteInLocalDevelopment: true
    }
Implementation Instructions:
Setting up on a VM or New Server
  1. Alter the code in the following file to match your server, then send a db request to update the app settings
  2. This assumes that this server has the esolutions app framework already installed.
    example found at: https://svn.cra.int/svn/230002_SocialMediaAuthenticator/trunk/db/appSettings - Prod.sql
  3. Add your clean database using the following script:
  4. example found at: https://svn.cra.int/svn/230002_SocialMediaAuthenticator/tags/1.1.0/db/230002_SocialAuthendicator_CreateDB_V1_1_0.sql
  5. Under the installation directory, create a folder named Web. Deploy all files/folders from the following link to the site:
  6. https://svn.cra.int/svn/230002_SocialMediaAuthenticator/tags/1.1.0/src/230002_SocialMediaAuthenticator/
  7. Created another folder in the installation directory named Services and deploy all files from the following folder to the directory.
  8. https://svn.cra.int/svn/230002_SocialMediaAuthenticator/tags/1.1.0/SocialMediaFeedRefreshScheduler/SocialMediaFeedRefreshScheduler/bin/Debug
  9. Setup the module in IIS as a .Net 4.0 (32bit enabled) module under iCreate.
  10. Create a new Scheduled task, to run every 30 minutes indefinitely, pointing to: SocialMediaFeedRefeshScheduler.exe
Setting up a site
  1. When you get a new site, you need to add that site's corp id to the database with this script (on .49 for internal prod sites):
  2. example found at: https://svn.cra.int/svn/230002_SocialMediaAuthenticator/trunk/db/addNewCorp.sql
  3. Add the following script reference in the head (probably headHomepage.asp if you only use it on the homepage) after all the jquery references:
  4. <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/icreate-socialmedia/structure/4.0.2/socialMedia.min.js"></script>
  5. In the template file that you display the social media module, you need to add a token with id TKSocialMediaConfiguration, or whatever you want, it just has to match up later with your call parameter :
  6. <% if isSiteInLocalDevelopment then %>
    <input type="hidden" name="SocialMediaKeys" id="TKSocialMediaConfiguration" value="youtube:00000000-0000-0000-0000-000000000000,twitter:deeb4883-1597-4fb2-97a6-b3bd3ccb605f,facebook:2fac1950-dc45-4a66-ab2d-c4e97fb8f3b0", instagram:A747F47F-EBDC-4835-8CB7-E03E0DB18AFB"/>
    <% else %>
    <input type="hidden" name="SocialMediaKeys" id="TKSocialMediaConfiguration" value="[[htmlSrcToken.def({ name: 'TKSocialMediaConfiguration', title: 'Social Media Keys', htmlEscape: true, jsEscape: false })]]" />
    <% end if %>
  7. Assuming you already have an element to target as the container for this feed, call the plugin after the element, or in the head file and encapsulated in a document.ready:
  8. $("#SMWrapper").icrtSocialMedia({ --MAKE THIS TARGET YOUR ELEMENT
    iCreateObject: iCreateObject,
    keyTokenID: "TKSocialMediaConfiguration", --THIS MUST MATCH YOUR TOKEN ID
    authenticatorBaseURL: "https://icreate1.stage.esolutionsgroup.ca/social-auth/", --CHANGE THIS TO YOUR SERVER WHEN YOU ARE READY
    skin: "tabs",
    skinVersion: "3.0.0",
    enabledFeeds: ["youtube", "twitter", "facebook", "instagram"],
    feedColumnClass: "socialColumn"
    });
  9. Go to the iCreate side of the page you are editing. You should see your control. hover over each social media area to select a feed or manage your feeds. Add some, and link them up.
  10. Release the page to see your fancy new social media items

Created by: Larry Stuart (lstuart@esolutionsgroup.ca)
versions: 2.0.0, 2.0.1, 2.0.2, 2.0.3, 2.0.4, 3.0.0, 4.0.0, 4.0.1, 4.0.2
TinyMCE

html formatted text editing

Javascript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/tinymce/4.1.7/tinymce.min.js"></script>
site: http://www.tinymce.com/
versions: 4.1.7
typeahead

A fast and fully-featured autocomplete library.

JavaScript snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/typeahead/0.9.3/typeahead.min.js"></script>
CSS snippet: <link rel="stylesheet" type="text/css" href="https://js.esolutionsgroup.ca/js/libs/typeahead/0.9.3/resources/css/typeahead.js-bootstrap.css" />
site: http://twitter.github.com/typeahead.js/
versions: 0.9.3
UI Bootstrap
snippet: <script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/ui-bootstrap/0.6.0/ui-bootstrap.js"></script>
site: http://angular-ui.github.io/bootstrap/
versions: 0.6.0
Video player - html5
snippet: <link href="https://js.esolutionsgroup.ca/js/libs/media-element/2.13.2/mediaelementplayer.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://js.esolutionsgroup.ca/js/libs/media-element/2.13.2/mediaelement-and-player.min.js"></script>
Requires: jQuery
site: http://mediaelementjs.com/
versions: 2.13.2
required html structure:

<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

javascript to enable player:

jQuery('video,audio').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause', 'progress', 'current', 'duration', 'tracks', 'volume', 'fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: []
});