Hide

YetaWF Documentation

Display
Print

JavaScript Addons

JavaScript files are used throughout YetaWF for client-side processing in components, modules and pages. These files are typically part of a package. Skin-specific JavaScript files are part of the skin package. Component-specific JavaScript files are part of the package implementing the component. Module-specific JavaScript files are used to add functionality to modules. At run-time all the various JavaScript files are combined to render the resulting page.

When running a YetaWF debug build, each JavaScript file needed for a page is explicitly included in the page. Release builds bundle all required JavaScript files for a page into one file for more efficient downloads (excluding some large global addons, like jquery, etc.). This behavior can be changed using Admin > Settings > Site Settings, Pages tab. JavaScript files are automatically included if they are used by components, modules, skins or packages.

Modifications

Unless you are developing a module, component or skin, do not modify any of the JavaScript files that are part of YetaWF or its packages. Otherwise, the next time you're upgrading, all changes will be lost.

Locations

All paths shown are relative to the package's project folder (not the website folder). The website has symbolic links into each package so there are no duplicated files. The following can be used to locate a project folder within the website:

./Website/wwwroot/Addons/(company)/(product)/ is the location of the package (symlinked into the project), equivalent to the package folder ./(product)/Addons/. (company) represents the company that published the package. For example, the Feedback package which is published with YetaWF is located at ./Website/wwwroot/Addons/YetaWF/Feedback/Addons/ which links to the module project files at (solution)/YetaWF/Modules/Feedback/Addons/.

Package JavaScript Files

All JavaScript files used by a package are located in this package folder:

(package folder)/Addons/_Main/

This folder contains a filelistJS.txt file with directives defining what JavaScript files are included automatically, whenever this package is used (a component, module or view is rendered).

Module JavaScript Files

JavaScript files for individual modules are located in this package folder:

(package folder)/Addons/_Addons/moduleclassname/

The moduleclassname portion uses the module type name including the "Module" suffix. For example, the MenuEditModule module would have all its JavaScript files in the package's folder ./Addons/_Addons/MenuEditModule/.

Each module folder contains a filelistJS.txt file with directives defining what JavaScript files are included automatically, whenever this module is used (rendered).

When the module is used, the framework also automatically instantiates an instance of the JavaScript class for the object and the constructor is called with the module's HTML id as a parameter.

typeof areaname==='undefined'||!areaname.moduleclassname||new areaname.moduleclassname('moduleHtmlId');

areaname and moduleclassname are substituted with the package's area name and the module type name. For example, using the YetaWF Text module would generate the following whenever the Text module is used:

typeof YetaWF_Text==='undefined'||!YetaWF_Text.TextModule||new YetaWF_Text.YetaWF_Text.TextModule('id43');

Named Addon JavaScript Files

Named addons provide support to include JavaScript code by name (hence, "named addon"). This is typically done using the YetaWF.Core.Addons.AddOnManager.AddAddOnNamedAsync method.

JavaScript files for named addons are located in this package folder:

(package folder)/Addons/_Addons/(addonname)/

This is the same folder that is used for Module JavaScript Files, so care should be taken to avoid naming conflicts.

Each named addon folder contains a filelistJS.txt file with directives defining what JavaScript files are included, whenever this named addon is added to the page (YetaWF.Core.Addons.AddOnManager.AddAddOnNamedAsync).

Component JavaScript Files

JavaScript files for individual components are located in this package folder:

./Addons/_Templates/(component)/

Each component folder contains a filelistJS.txt file with directives defining what JavaScript files are included automatically, whenever this component is used (rendered).

The (component) name uses the short component name only, i.e., without company and product prefix, which are used in UIHint attributes. For example, the YetaWF_Blog_Category component used as UIHint("YetaWF_Blog_Category") would have its JavaScript files in the folder ./Addons/_Templates/Category/ (The company and product portion is omitted).

Skin JavaScript Files

./Addons/_Skins/(skin)/

Skin packages can contain multiple skins each. The (skin) portion of the path represents the actual skin name for which the JavaScript files are used.

Each skin folder contains a filelistJS.txt file with directives defining what JavaScript files are included automatically, whenever this skin is used.

filelistJS.txt

Explicit Files

In the folders shown above, the file filelistJS.txt lists all JavaScript files to be included. Each line contains one single file name (relative to the current folder, subfolders are allowed, but not wildcards) or a completely qualified reference to an external file (http://, https://, or //).

https://www.yetawf.com/external/sample.js
Local.small.js,nominify
sample1.js
sample2.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js,CDN
/lib/bootstrap/dist/js/bootstrap.min.js,noCDN

The following comma separated arguments are supported:

nominifyThe file is never minified. Local files only.
bundleThe file is bundled (this is used by Core components only, for global addons which should be bundled if JavaScript bundling is enabled). Local files only.
nobundleThe file is never bundled, even if it would normally be made part of a bundle (this is used by Core components only). Local files only.
lastThe file is added to the end of all JavaScript files.
editonlyThe file is included in site edit mode only.
asyncThe file is added with the <script async> option. Can't be used with bundle or last.
deferThe file is added with the <script defer> option. Can't be used with bundle or last.
cdnThe file is only added if "Use CDN (JavaScript Addons)" (Site Settings, CDN tab) is enabled, which means CDNs are used for all major JavaScript packages used by YetaWF.
nocdnThe file is only added if "Use CDN (JavaScript Addons)" (Site Settings, CDN tab) is not enabled, which means CDNs are not used for major JavaScript packages used by YetaWF.
allowCustomIf specified, the named file can be overridden with a custom file in the ./AddonsCustom folder. Local files only.

Uses Directive

A line can contain the Uses directive.

Uses {packagename},{namedaddon}
Uses YetaWF_Core,getbootstrap.com.bootstrap-less

The Uses directive allows another package's named addons to be included. Multiple Uses directives can be used. All included package named addons are included ahead of explicitly listed files, even if they appear before the Uses directive.