1
- DNN JavaScript Libraries
2
- ===============
1
+ # DNN JavaScript Libraries
3
2
4
3
Version 7.2 of the [ DNN Platform] ( http://www.dnnsoftware.com ) introduced the
5
- JavaScript Library extension type. This allows common JavaScript libraries to
6
- exist in a single place within a DNN site, instead of every module, skin, and
7
- piece of content that wants to include them using their own. DNN presently
8
- comes with libraries for jQuery, jQuery UI, jQuery Migrate, Knockout, and
4
+ JavaScript Library extension type. This allows common JavaScript libraries to
5
+ exist in a single place within a DNN site, instead of every module, skin, and
6
+ piece of content that wants to include them using their own. DNN presently
7
+ comes with libraries for jQuery, jQuery UI, jQuery Migrate, Knockout, and
9
8
Knockout Mapping.
10
9
11
- In addition to these built-in libraries, new libraries can be installed into
12
- DNN, and used by various components. DNN allows multiple versions of a
10
+ In addition to these built-in libraries, new libraries can be installed into
11
+ DNN, and used by various components. DNN allows multiple versions of a
13
12
JavaScript library to be used, so one module can request a particular version
14
13
of a script, while another requests another. So long as they aren't on the same
15
- page, they will get what they requested; otherwise, DNN will use the higher
14
+ page, they will get what they requested; otherwise, DNN will use the higher
16
15
version.
17
16
18
- Packages
19
- ===============
17
+ # How to add a new library
20
18
21
- The installable packages are included within this GitHub repository as
19
+ You'll need to install the dependencies (` yarn install ` ) and then use the ` new `
20
+ script, which will prompt you for the various pieces of information
21
+
22
+ ```
23
+ yarn install
24
+ yarn run new
25
+ ```
26
+
27
+ After that, if you want to ship any other files with the library (e.g. CSS
28
+ files), you'll want to add those into the ` dnn-library.json ` file. You can then
29
+ commit your changes and submit a pull request on GitHub.
30
+
31
+ # Packages
32
+
33
+ The installable packages are included within this GitHub repository as
22
34
[ releases] ( /EngageSoftware/DNN-JavaScript-Libraries/releases ) . They are also
23
35
published on the [ DNN Forge] ( http://www.dnnsoftware.com/forge ) .
24
36
25
-
26
- Goal
27
- ===============
37
+ # Goal
28
38
29
39
The main benefits in using JavaScript Libraries are realized when they are used
30
- by many separate components within a DNN site (i.e. when there is one common
31
- set of libraries and separate, unrelated DNN skins and modules use those
40
+ by many separate components within a DNN site (i.e. when there is one common
41
+ set of libraries and separate, unrelated DNN skins and modules use those
32
42
libraries instead of packaging scripts directly into the extension). In order
33
- to aid in that goal, we are attempting to create a central repository
43
+ to aid in that goal, we are attempting to create a central repository
34
44
of common JavaScript Libraries that can be used by many different DNN extension
35
- developers.
45
+ developers.
36
46
47
+ # Usage
37
48
38
- Usage
39
- ===============
49
+ ## Skins
40
50
41
- Skins
42
- ---------------
43
51
Starting in DNN 7.3, there is a skin object called ` JavaScriptLibraryInclude `
44
52
which can be used to request a JavaScript library (including jQuery, but also
45
53
any 3rd party library) from a skin. To do that, you need to register the skin
@@ -53,105 +61,85 @@ Then, in the body of the skin, use the skin object to request the library:
53
61
<dnn:JavaScriptLibraryInclude runat="server" Name="jQuery-UI" Version="1.10.3" />
54
62
<dnn:JavaScriptLibraryInclude runat="server" Name="jQuery-Migrate" Version="1.2.1" SpecificVersion="LatestMajor" />
55
63
56
- HTML Skins
57
- ---------------
58
- The skin object mentioned above can also be used from HTML skins. It would
64
+ ## HTML Skins
65
+
66
+ The skin object mentioned above can also be used from HTML skins. It would
59
67
look something like this:
60
68
61
69
<object codetype="dotnetnuke/server" codebase="JavaScriptLibraryInclude">
62
70
<param name="Name" value="jQuery" />
63
71
<param name="Version" value="1.9.1" />
64
72
</object>
65
-
66
- Code
67
- ---------------
68
- There is also an API to request JavaScript Libraries from code. This is needed
73
+
74
+ ## Code
75
+
76
+ There is also an API to request JavaScript Libraries from code. This is needed
69
77
in skins prior to DNN 7.3 and the introduction of the ` JavaScriptLibraryInclude `
70
- skin object, as well as from extension code (though extensions can also make use
71
- of the skin object, if desired). The primary entry point for the API is the
72
- ` RequestRegistration ` method of the ` JavaScript ` static class in the
73
- ` DotNetNuke.Framework.JavaScriptLibraries ` namespace. There are three overloads
78
+ skin object, as well as from extension code (though extensions can also make use
79
+ of the skin object, if desired). The primary entry point for the API is the
80
+ ` RequestRegistration ` method of the ` JavaScript ` static class in the
81
+ ` DotNetNuke.Framework.JavaScriptLibraries ` namespace. There are three overloads
74
82
to ` RequestRegistration ` :
75
83
76
84
JavaScript.RequestRegistration(String libraryName)
77
85
JavaScript.RequestRegistration(String libraryName, Version version)
78
86
JavaScript.RequestRegistration(String libraryName, Version version, SpecificVersion specificity)
79
87
80
88
The overload which doesn't specify a version will request the latest version of
81
- the library. In order to avoid your extensions breaking unexpectedly, it's
82
- probably best to always specify a version number. The second overload, which
89
+ the library. In order to avoid your extensions breaking unexpectedly, it's
90
+ probably best to always specify a version number. The second overload, which
83
91
includes the version number will request that specific version of the library.
84
- If that version isn't installed, it will instead display an error. The third
92
+ If that version isn't installed, it will instead display an error. The third
85
93
overload is probably the best to use for most scenarios. It allows you to pass
86
- a value indicating how specific the version is, as a value of the
87
- ` SpecificVersion ` enum. The possible values are ` Latest ` , ` LatestMajor ` ,
88
- ` LatestMinor ` , and ` Exact ` . ` Latest ` is the behavior of the overload with one
89
- argument, ` Exact ` is the behavior of the overload with two arguments, while the
90
- other two values allow you to get behavior that is in between strict and loose.
91
-
94
+ a value indicating how specific the version is, as a value of the
95
+ ` SpecificVersion ` enum. The possible values are ` Latest ` , ` LatestMajor ` ,
96
+ ` LatestMinor ` , and ` Exact ` . ` Latest ` is the behavior of the overload with one
97
+ argument, ` Exact ` is the behavior of the overload with two arguments, while the
98
+ other two values allow you to get behavior that is in between strict and loose.
92
99
93
- JavaScript Library Features
94
- ===============
100
+ # JavaScript Library Features
95
101
96
- When requesting that a JavaScript Library is registered, DNN ensures that
97
- both that library's JavaScript file and all of its dependencies' JavaScript
102
+ When requesting that a JavaScript Library is registered, DNN ensures that
103
+ both that library's JavaScript file and all of its dependencies' JavaScript
98
104
files, get included on the page. The JavaScript library itself will define the
99
- properties that determine how the file is included on the page. Specifically,
105
+ properties that determine how the file is included on the page. Specifically,
100
106
the library will indicate its preferred location (from page head, body top, and
101
- body bottom), and can provide a URL to the script on a
107
+ body bottom), and can provide a URL to the script on a
102
108
<abbr title =" Content Distribution Network " >CDN</abbr > (along with a JavaScript
103
109
expression to use to verify that the CDN loaded the script correctly, so that
104
110
DNN can fallback to the local version if the CDN is down). The host
105
- administrator can configure whether to use the CDN or not (it is off by
111
+ administrator can configure whether to use the CDN or not (it is off by
106
112
default).
107
113
108
114
The other main feature that JavaScript Libraries give you is de-duplication of
109
- scripts. This means that if your module and your skin both request the
115
+ scripts. This means that if your module and your skin both request the
110
116
[ html5shiv library] ( http://www.dnnsoftware.com/forge/html5shiv ) , it only gets
111
- included on the page once (rather than both components including their own
112
- version of the script). Likewise, if both components request different versions
117
+ included on the page once (rather than both components including their own
118
+ version of the script). Likewise, if both components request different versions
113
119
of the script, just the higher version will be included.
114
120
121
+ # Roadmap
115
122
116
- Roadmap
117
- ===============
118
-
119
- The obvious next step for this project is to add more libraries. There's a
123
+ The obvious next step for this project is to add more libraries. There's a
120
124
short list in [ the Issues list for this repo] ( /EngageSoftware/DNN-JavaScript-Libraries/issues ) ,
121
125
but we've started work on a [ PowerShell script] ( New-PackageFromBower.psm1 ) that integrates with a
122
126
script package manager, [ Bower] ( http://bower.io/ ) , so that with very
123
- little effort, we can get the latest version of a script, package it, and
127
+ little effort, we can get the latest version of a script, package it, and
124
128
publish it.
125
129
126
130
In addition, there are some enhancements to DNN itself that would help this be
127
131
an even more useful tool. The main enhancement is to provide a similar mechanism
128
132
for shared CSS components. For example, many jQuery plugins are going to include
129
133
basic styles to make them work. It would be nice if there was a way to get CSS
130
- that matched the requested JavaScript Library. Also, JavaScript libraries with
134
+ that matched the requested JavaScript Library. Also, JavaScript libraries with
131
135
multiple JavaScript files could be handled together more cleanly, rather than as
132
- a bunch of separate libraries. Finally, one of the big ways that would make
136
+ a bunch of separate libraries. Finally, one of the big ways that would make
133
137
this more of a no-brainer is if the extension installation process automatically
134
- found dependent packages on the [ DNN Forge] ( http://www.dnnsoftware.com/forge )
135
- rather than asking clients to install the JavaScript Library package(s) before
138
+ found dependent packages on the [ DNN Forge] ( http://www.dnnsoftware.com/forge )
139
+ rather than asking clients to install the JavaScript Library package(s) before
136
140
installing your component.
137
141
138
-
139
- License
140
- ===============
142
+ # License
141
143
142
- This code is released under the [ MIT license] ( LICENSE.md ) .
144
+ This code is released under the [ MIT license] ( LICENSE.md ) .
143
145
However, the individual libraries are licensed by their respective owners.
144
-
145
-
146
- How to Migrate a Library from Bower to npm
147
- ==========================================
148
- 1 . Find library on https://npms.io/
149
- 2 . Install with Yarn, e.g. ` yarn add routerjs `
150
- 3 . Remove old ` Resources.zip ` and JS files
151
- 4 . Add ` dnn-library.json ` file
152
- 5 . Find files to publish in ` node_modules ` folder
153
- 6 . Update paths in ` dnn-library.json ` file
154
- 7 . Optionally ensure version is correct
155
- 8 . Optionally add ` Resources.zip ` section to ` .dnn ` file
156
- 9 . Optionally update CDN URL
157
- 10 . Don't do any of this, because it's automated, hopefully :-)
0 commit comments