feat: remove jquery (resolve #16) (#41)

* feat: remove jquery (resolve #16) BREAKING CHANGE: It might cause other components to fail if they pass a jQuery object as a container. * chore: apply code review * chore: apply code review - 2 * docs: add v4 migration guide
nhn · Aug 2, 2019 · 1d2b6a1 · 1d2b6a1
1 parent 00c7c92
commit 1d2b6a1
Show file tree

Hide file tree

Showing 38 changed files with 1,862 additions and 1,606 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,7 +6,6 @@ module.exports = {
     "env": {
         "browser": true,
         "jasmine": true,
-        "jquery": true,
         "commonjs": true
     },
     "globals": {

diff --git a/README.md b/README.md
@@ -7,6 +7,31 @@
 [![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.project-name/labels/help%20wanted)
 [![code with hearth by NHN](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN-ff1414.svg)](https://github.com/nhn)
 
+## v4.0.0 Migration Guide
+In v4.0.0, jQuery is removed. It might cause other components to fail if they pass a jQuery object as a container.
+
+Previously, you can use a `jQuery` object to create an instance.
+```javascript
+// v3
+var instance = new tui.DatePicker($('#datepicker-wrapper'), {
+   // options
+});
+```
+
+Now, you have to use `selector` or `HTMLElement` as a container.
+```javascript
+// v4
+var instance = new tui.DatePicker('#datepicker-wrapper', {
+   // options
+});
+
+// or
+
+var container = document.getElementById('datepicker-wrapper');
+var instance = new tui.DatePicker(container, {
+    // options
+});
+```
 
 ## 🚩 Table of Contents
 * [Browser Support](#-browser-support)
@@ -226,8 +251,8 @@ You can also see the older versions of API page on the [releases page](https://g
 
 ## 🔩 Dependency
 * [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >=1.5.0
+* [tui-dom](https://github.com/nhn/tui.dom) >=3.0.0
 * [tui-time-picker](https://github.com/nhn/tui.time-picker) >=1.3.0
-* [jquery](https://jquery.com/) >=1.11.0
 
 
 ## 📜 License

diff --git a/bower.json b/bower.json
@@ -23,8 +23,8 @@
         "package-lock.json"
     ],
     "dependencies": {
-        "jquery": "^1.11.0",
         "tui-code-snippet": "^1.5.0",
+        "tui-dom": "^3.0.0",
         "tui-time-picker": "^1.3.0"
     }
 }
diff --git a/docs/README.md b/docs/README.md
@@ -1,11 +1,10 @@
 ## Tutorials
 
 - [Getting Started](getting-started.md)
-- [v3.0.0 Migration Guide](v3.0.0-migration-guide.md)
 
 ## Documents
 
-- [Code of Conducting](../CODE_OF_CONDUCTING.md)
+- [Code of Conducting](../CODE_OF_CONDUCT.md)
 - [Contributing Guide](../CONTRIBUTING.md)
 - [Commit Message Convention](COMMIT_MESSAGE_CONVENTION.md)
 - [API & Examples](https://nhn.github.io/tui.date-picker/latest)
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1,6 +1,33 @@
+## v4.0.0 Migration Guide
+In v4.0.0, jQuery is removed. It might cause other components to fail if they pass a jQuery object as a container.
+
+Previously, you can use a `jQuery` object to create an instance.
+```javascript
+// v3
+var instance = new tui.DatePicker($('#datepicker-wrapper'), {
+   // options
+});
+```
+
+Now, you have to use `selector` or `HTMLElement` as a container.
+```javascript
+// v4
+var instance = new tui.DatePicker('#datepicker-wrapper', {
+   // options
+});
+
+// or
+
+var container = document.getElementById('datepicker-wrapper');
+var instance = new tui.DatePicker(container, {
+    // options
+});
+```
+
 ## Load dependency files
-* Script - [jQuery](https://github.com/jquery/jquery) 1.11.0 or later
-* Script - [tui-code-snippet](https://github.com/nhn/tui.code-snippet) 1.2.5 or later
+* Script - [tui-code-snippet](https://github.com/nhn/tui.code-snippet) 1.5.0 or later
+* Script - [tui-dom](https://github.com/nhn/tui.dom) 3.0.0 or later
+    > If your project should support IE8, please use `tui-dom.js`, not `tui-dom.min.js`.
 
 ```html
 <html>
@@ -10,8 +37,8 @@
     </head>
     <body>
         ....
-        <script type="text/javascript" src="jquery.min.js"></script>
         <script type="text/javascript" src="tui-code-snippet.js"></script>
+        <script type="text/javascript" src="tui-dom.min.js"></script>
         <script type="text/javascript" src="tui-date-picker.js"></script>
         ....
     </body>
@@ -37,7 +64,7 @@ var instance = new tui.DatePicker('#datepicker-wrapper', {
 ### Datepicker
 * language (default 'en')
   * There are two supporting types by default - 'en' and 'ko'.
-  * For custom texts - See the [Datepicker.localeTexts](https://nhn.github.io/tui.date-picker/latest/DatePicker.html#.localeTexts)
+  * For custom texts - See the [Datepicker.localeTexts](https://nhn.github.io/tui.date-picker/latest/DatePicker#localeTexts)
   * If set both calendar-language and datepicker-language, will apply datepicker-language first.
 * showAlways (default false)
   * If true, the datepicker will not close until you call "close()".
@@ -51,7 +78,7 @@ var instance = new tui.DatePicker('#datepicker-wrapper', {
   * See the [Date-Time text format](#date-time-text-format)
 * type (default 'date')
   * Type of picker - 'date', 'month', year'
-  * See [examples](https://nhn.github.io/tui.date-picker/latest/tutorial-example05-picking-month.html) in API page
+  * See [examples](https://nhn.github.io/tui.date-picker/latest/tutorial-example05-picking-month) in API page
 * selectableRanges
   * Set selectable dates of datepicker
   * 2d-Array: `[[startDate1, endDate1], [startDate2, endDate2], ...]`

diff --git a/examples/example01-basic.html b/examples/example01-basic.html
@@ -15,8 +15,8 @@
         <div id="wrapper" style="margin-top: -1px;"></div>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script class="code-js">
         var datepicker = new tui.DatePicker('#wrapper', {

diff --git a/examples/example02-inline-style.html b/examples/example02-inline-style.html
@@ -15,8 +15,8 @@
         <div id="wrapper" style="margin-top: -1px;"></div>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script class="code-js">
         var datepicker = new tui.DatePicker('#wrapper', {

diff --git a/examples/example03-selectable-ranges.html b/examples/example03-selectable-ranges.html
@@ -24,8 +24,8 @@ <h3>Selectables</h3>
         </div>
         <div id="wrapper" style="margin-top: -1px;"></div>
     </div>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script class="code-js">
         var datepicker = new tui.DatePicker('#wrapper', {

diff --git a/examples/example04-having-timepicker.html b/examples/example04-having-timepicker.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>4. Having TimePicker</title>
     <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
-    <link href="https://cdn.rawgit.com/nhnent/tui.time-picker/v1.0.0/dist/tui-time-picker.css" rel="stylesheet">
+    <link href="https://uicdn.toast.com/tui.time-picker/v1.3.0/tui-time-picker.css" rel="stylesheet">
     <link href="../dist/tui-date-picker.css" rel="stylesheet">
 </head>
 <body>
@@ -41,6 +41,7 @@
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.time-picker/v1.3.0/tui-time-picker.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script class="code-js">
         var datepicker = new tui.DatePicker('#wrapper', {

diff --git a/examples/example05-picking-month.html b/examples/example05-picking-month.html
@@ -44,8 +44,8 @@
         </table>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script type="text/javascript" class="code-js">
         tui.DatePicker.localeTexts['Chinese character'] = {

diff --git a/examples/example06-picking-year.html b/examples/example06-picking-year.html
@@ -44,8 +44,8 @@
         </table>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script type="text/javascript" class="code-js">
         tui.DatePicker.localeTexts['Chinese character'] = {

diff --git a/examples/example07-calendar.html b/examples/example07-calendar.html
@@ -40,8 +40,8 @@
         </table>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+    <script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
     <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
     <script type="text/javascript" class="code-js">
         var DatePicker = tui.DatePicker;

diff --git a/examples/example08-daterangepicker.html b/examples/example08-daterangepicker.html
@@ -20,8 +20,8 @@
         <div id="endpicker-container" style="margin-left: -1px;"></div>
     </div>
 </div>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+<script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
 <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
 <script class="code-js">
     var today = new Date();

diff --git a/examples/example09-changing-type.html b/examples/example09-changing-type.html
@@ -22,10 +22,20 @@
     <input type="radio" id="year" name="datePickerType" value="year">
     <label for="year">year</label>
 </div>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
+<script type="text/javascript" src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
 <script type="text/javascript" src="../dist/tui-date-picker.js"></script>
 <script class="code-js">
+    var util = {
+        addEventListener: function(element, eventName, handler) {
+            if (element.addEventListener) {
+                element.addEventListener(eventName, handler, false);
+            } else {
+                element.attachEvent('on' + eventName, handler);
+            }
+        }
+    };
+
      var datepicker = new tui.DatePicker('#wrapper', {
          date: new Date(),
          input: {
@@ -35,9 +45,11 @@
          type: 'date'
     });
 
-    $('input[type=radio][name="datePickerType"]').change(function() {
-        datepicker.setType($(this).val());
-    });
+    var datePickerTypes = document.querySelector('.radio-set');
+    util.addEventListener(datePickerTypes, 'click', function(ev) {
+        var target = ev.target || ev.srcElement;
+        datepicker.setType(target.value);
+    })
 </script>
 </body>
 </html>