Integrate MooTools FrameWork With SharePoint 2010
Here i’m talking about integrating MooTools FraweWork with Sharepoint 2010 , firstly let me describe and define what is Mootools FraweWork ??
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
The Stats
| MooTools Core | |
| Library Size | 64.3K |
| Features | |
| License | MIT |
| DOM Utilites | yes |
| Animation | yes |
| Event Handling | yes |
| CSS3 Selectors | yes (a subset) |
| Ajax | yes |
| Native Extensions (excluding Element) | about six dozen for Array, Object, String, Function, and Number |
| Inheritance | Provided with Class constructor |
| Other Considerations | |
| plug-ins | Roughly 4 dozen official plug-ins available at mootools.net/more. Unofficial plugin directory at mootools.net/plugins. |
| Official UI library | no |
so we can do nice tasks with MooTools FrameWork, here going to display Create SharePoint 2010 web part using MooToolsEditable, The SharePoint 2010 web part should allow a user to add the web part to a page where a small html editor will appear.
The editor should be like the one on this page:
http://cheeaun.github.io/mooeditable/
but integrating SharePoint with Mootools framework will raise many issues, especially with Out of the Box Javascriopt files , Script Manager on MasterPage, and Microsoft Ajax .
one of the exception which you may face is ” sys.res.enumreservedname’ is null or not an object” , this is error occuered becuase of a conflict between ScriptManager in Sharepoint Master Page and MooTools Javascript files.
Through my research i found 2 steps i should to do in MooTools.Js to override all of the issues, as as the following
1- Everything is based on Type Class, Replace “Type” in JS File with “mooType”. don’t forget to rename the “this.Type” to “this.mooType” too, then do a search for “new Type(” and replace with “new mooType(“, then do a search for “Type.” and replace with “mooType.” .
2- Function.implement “hide: function(){” renamed to “hide2: function(){” and global replace “hide()” to “hide2()”
Attached here, updated Version 1.3 of MooTools.js File after above steps.
Next Article, will be an example with MooTools FrameWork
mootools-core.js (After Downloading The file, change the extension from JPG to JS)
References:
https://mootools.lighthouseapp.com/projects/2706/tickets/1045-asp-net-bug
ahmedmadany 