Merge pull request #11 from earthchie/zipped_version

merge branches
earthchie · Apr 18, 2017 · 4d6e5eb · 4d6e5eb
2 parents 88aed7f + 8eed3a1
commit 4d6e5eb
Show file tree

Hide file tree

Showing 14 changed files with 9,914 additions and 9,550 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
 # Demo
 [https://earthchie.github.io/jquery.Thailand.js/](https://earthchie.github.io/jquery.Thailand.js/)
 
-# jquery.Thailand.js
+## jquery.Thailand.js
 ตัวช่วยกรอกที่อยู่ที่ดีที่สุดในไทย ไม่ต้องใช้ Server Side!
 
 อ่านแนวคิด และที่มาที่ไปได้ที่นี่ [ระบบ Auto Complete ที่อยู่ไทย อย่างที่มันควรเป็น](https://medium.com/@earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a)
 
-### Server ไม่มี gzip?
-ใช้เวอร์ชันนี้แทนจะเหมาะกว่าครับ [zipped_version](https://github.com/earthchie/jquery.Thailand.js/tree/zipped_version)
+## Changelogs 1.4.x
+- รวม 2 branches เข้าด้วยกัน เพื่อความสะดวกในการ maintainance repo
+- ระบุ database เป็นไฟล์ json หรือ zip ก็ได้ ระบบจะแยกแยะจากนามสกุลไฟล์ให้เอง
+- ในกรณีที่ url ไปยัง database ไม่มีนามสกุลไฟล์ (ใช้ mod_rewrite) ให้ระบุประเภทไฟล์ผ่าน option ``database_type`` ว่าเป็น ``json`` หรือ ``zip`` แทน
+- สามารถอัพเดตจากเวอร์ชัน 1.3.x ได้ทันที ไม่ต้องแก้ใดๆ เพิ่มเติม
 
 ## Changelogs 1.3.x
 - เพิ่ม callback ``onDataFill()`` ตาม [request](https://github.com/earthchie/jquery.Thailand.js/issues/9)
@@ -22,21 +25,93 @@
 - [x] Clean up repo
 - [ ] Need help! with database https://github.com/earthchie/jquery.Thailand.js/issues/4
 
-## วิธีใช้
+# วิธีใช้
 
 1. ติดตั้ง Dependencies ให้ครบ
 
 ```html
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script type="text/javascript" src="./jquery.Thailand.js/dependencies/jszip.min.js"></script>
+<script type="text/javascript" src="./jquery.Thailand.js/dependencies/jszip-utils.min.js"></script>
 <script type="text/javascript" src="./jquery.Thailand.js/dependencies/JQL.min.js"></script>
 <script type="text/javascript" src="./jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
 ```
 
 2. ติดตั้ง jquery.Thailand.js
 
 ```html
-<link rel="stylesheet" href="./jquery.Thailand.js/dist/jquery.Thailand.min.css">
-<script type="text/javascript" src="./jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
+<link rel="stylesheet" href="./jquery.Thailand.js/jquery.Thailand.min.css">
+<script type="text/javascript" src="./jquery.Thailand.js/jquery.Thailand.min.js"></script>
+```
+
+3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
+
+```html
+<input type="text" id="district">
+<input type="text" id="amphoe">
+<input type="text" id="province">
+<input type="text" id="zipcode">
+```
+
+4. เรียกใช้ jquery.Thailand.js
+*วิธีใช้โดยละเอียด กรุณาอ่านหัวข้อถัดไป*
+
+```javascript
+
+$.Thailand({
+    database: './jquery.Thailand.js/database/db.json', // path หรือ url ไปยัง database
+    $district: $('[name="district"]'), // input ของตำบล
+    $amphoe: $('[name="amphoe"]'), // input ของอำเภอ
+    $province: $('[name="province"]'), // input ของจังหวัด
+    $zipcode: $('[name="zipcode"]'), // input ของรหัสไปรษณีย์
+});
+
+```
+
+## Documents
+
+เรามีทางเลือกของฐานข้อมูลให้อยู่ 2 ประเภท คือฐานข้อมูลแบบ json และแบบ zip 
+ในกรณีที่ Server ของคุณรองรับ gzip เราแนะนำเป็นอย่างยิ่งให้คุณใช้ฐานข้อมูลชนิด json
+
+แต่หากคุณไม่สามารถพิจารณาเปิดใช้งาน gzip บนเซิร์ฟเวอร์ได้ เราแนะนำให้คุณใช้ฐานข้อมูลแบบ zip แทนเนื่องจากมีขนาดที่เล็กกว่า
+
+### ขนาดของฐานข้อมูล
+
+ใน [v1.1.0](https://github.com/earthchie/jquery.Thailand.js/tree/fe302996ca72f156e1542048419399484431c391) เป็นต้นมามีการปรับเปลี่ยนโครงสร้างข้อมูล ภายใต้สมมุติฐานว่า Server รองรับ gzip รายละเอียดดังนี้
+
+| ไฟล์ | server ที่**ไม่**รองรับ gzip | server ที่รองรับ gzip |
+| --- | ---:| ---:|
+| data.json | 344.00 KB | **68.90 KB** |
+
+*ผลลัพธ์อ้างอิงจากระบบ gzip ของ github page*
+
+จะเห็นได้ว่าหากเปิด gzip เอาไว้ ขนาดข้อมูลจะเล็กลงมากๆ เราแนะนำให้คุณใช้ทางเลือกนี้เสมอหากเป็นไปได้
+แต่หากคุณไม่สามารถเปิดใช้ gzip ได้จริงๆ เราแนะนำให้ใช้ฐานข้อมูลแบบ zip แทน ซึ่งขนาดของฐานข้อมูลรวมตัวแกะ zip มีขนาดดังนี้
+
+| ไฟล์ | ขนาดไฟล์ |
+| --- | ---:|
+| jszip.min.js | 99.5 KB |
+| jszip-utils.min.js | 1.7 KB |
+| db.zip | 58.1 KB |
+| **รวม** | **152.3 KB** |
+
+ตอนนี้คุณน่าจะตอบคำถามตัวเองได้แล้วว่าจะใช้ฐานข้อมูลประเภทไหน ``json`` หรือ ``zip`` เรามาดูวิธีใช้งานทั้งสองแบบกัน
+
+## ฐานข้อมูลชนิด JSON
+
+1. ติดตั้ง Dependencies ให้ครบ
+
+```html
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/JQL.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
+```
+
+2. ติดตั้ง jquery.Thailand.js
+
+```html
+<link rel="stylesheet" href="jquery.Thailand.js/jquery.Thailand.min.css">
+<script type="text/javascript" src="jquery.Thailand.js/jquery.Thailand.min.js"></script>
 ```
 
 3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
@@ -53,45 +128,101 @@
 ```javascript
 
 $.Thailand({ 
-
-    database: './jquery.Thailand.js/dist/db.json', // path หรือ url ไปยัง zip
-    autocomplete_size: 10, // ขนาดของตัวเลือก ถ้าไม่ระบุ ค่า default คือ 20
+    database: './jquery.Thailand.js/database/db.json', // path หรือ url ไปยัง database
+    $district: $('#district'), // input ของตำบล
+    $amphoe: $('#amphoe'), // input ของอำเภอ
+    $province: $('#province'), // input ของจังหวัด
+    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
+});
+
+```
+
+## ฐานข้อมูลชนิด ZIP
+ใช้งานแทบจะเหมือนกับแบบ json ทุกประการ เว้นแต่ว่าต้องติดตั้ง dependencies เพิ่ม 2 ตัว ``jszip.min.js`` และ ``jszip-utils.min.js``
+
+1. ติดตั้ง Dependencies ให้ครบ
 
+```html
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/jszip.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/jszip-utils.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/JQL.min.js"></script>
+<script type="text/javascript" src="jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
+```
+
+2. ติดตั้ง jquery.Thailand.js
+
+```html
+<link rel="stylesheet" href="jquery.Thailand.js/jquery.Thailand.min.css">
+<script type="text/javascript" src="jquery.Thailand.js/jquery.Thailand.min.js"></script>
+```
+
+3. สร้าง input สำหรับกรอก ตำบล, อำเภอ, จังหวัด, รหัสไปรษณีย์
+
+```html
+<input type="text" id="district">
+<input type="text" id="amphoe">
+<input type="text" id="province">
+<input type="text" id="zipcode">
+```
+
+4. เรียกใช้ jquery.Thailand.js
+
+```javascript
+
+$.Thailand({ 
+    database: './jquery.Thailand.js/database/db.zip', // path หรือ url ไปยัง database
     $district: $('#district'), // input ของตำบล
     $amphoe: $('#amphoe'), // input ของอำเภอ
     $province: $('#province'), // input ของจังหวัด
     $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
+});
 
-    onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
-        console.info('Data Filled', data);
-    },
+```
 
-    onLoad: function(){ // callback เมื่อโหลดฐานข้อมูลเสร็จและระบบ Auto Complete พร้อมที่จะทำงาน
-        console.info('Autocomplete is ready!');
+## การใช้งานโหมดค้นหา
+
+![image](https://cloud.githubusercontent.com/assets/7013039/25127003/642fa330-245e-11e7-9f0b-ab1d3f6e3085.png)
+
+โหมดค้นหาเป็นโหมดที่เพิ่มเข้ามาใหม่ในเวอร์ชัน 1.3.x ลักษณะของมันคือช่องกรอกข้อมูลที่รับ input มาจาก user แล้วนำไปค้นที่อยู่ให้
+เมื่อ user ทำการเลือกที่อยู่แล้ว มันจะส่งข้อมูลทั้งหมดไปที่ callback ``onDataFill()`` ให้คุณนำไปจัดการต่อได้ตามสะดวก
+
+```javascript
+$.Thailand({ 
+    database: './jquery.Thailand.js/database/db.zip', // path หรือ url ไปยัง database
+    $search: $('#search'), // input ของช่องค้นหา
+    onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
+        console.info(data);
     }
 });
-
 ```
 
-## ขนาดของข้อมูล
+## คำอธิบาย options ทั้งหมด
 
-ใน [v1.1.0](https://github.com/earthchie/jquery.Thailand.js/tree/fe302996ca72f156e1542048419399484431c391) เป็นต้นมามีการปรับเปลี่ยนโครงสร้างข้อมูล ภายใต้สมมุติฐานว่า Server รองรับ gzip รายละเอียดดังนี้ 
+```javascript
 
-| ไฟล์ | ขนาดเมื่อถูก gzip |
-| --- | ---:|
-| db.json | 68.9 KB |
-| **รวม** | **68.9 KB** |
+$.Thailand({ 
+    
+    database: './jquery.Thailand.js/database/db.json', // path หรือ url ไปยัง database
+    database_type: 'auto', // auto, zip หรือ json; การใส่ auto ลงไป ระบบจะแยกแยะเอาเองตามนามสกุลของ database, ไม่ระบุก็ได้ ค่า default คือ auto
 
-*ผลลัพธ์อ้างอิงจากระบบ gzip ของ github page*
+    autocomplete_size: 20, // ขนาดของตัวเลือก ไม่ระบุก็ได้ ค่า default คือ 20
 
-แต่หากท่านใดที่ Server ไม่รองรับ gzip สามารถใช้ [zipped version](https://github.com/earthchie/jquery.Thailand.js/tree/zipped_version) แทนได้ โดยมีรายละเอียดดังนี้
+    $district: $('#district'), // input ของตำบล
+    $amphoe: $('#amphoe'), // input ของอำเภอ
+    $province: $('#province'), // input ของจังหวัด
+    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
+    $search: $('#search'), // input ของช่องค้นหา 
 
-| ไฟล์ | ขนาดไฟล์ |
-| --- | ---:|
-| jszip.min.js | 99.5 KB |
-| jszip-utils.min.js | 1.7 KB |
-| db.zip | 51.1 KB |
-| **รวม** | **152.3 KB** |
+    onDataFill: function(data){ // callback เมื่อเกิดการ auto complete ขึ้น
+        console.info('Data Filled', data);
+    },
+
+    onLoad: function(){ // callback เมื่อโหลดฐานข้อมูลเสร็จและระบบ Auto Complete พร้อมที่จะทำงาน
+        console.info('Autocomplete is ready!');
+    }
+});
+```
 
 ## Contributers
 [earthchie](https://github.com/earthchie/) - Project Owner
@@ -100,9 +231,6 @@ $.Thailand({
 
 [saknarak](https://github.com/saknarak) - First [PR](https://github.com/earthchie/jquery.Thailand.js/pull/1).
 
-## Fork
-- **Rungsikorn** [Reimplemented in React (jQuery free)](https://github.com/zapkub/react-thailand-address-typeahead), [Storybook Example](http://zapkub.github.io/react-thailand-address/)
-
 ## License
 WTFPL 2.0 http://www.wtfpl.net/
 
diff --git a/index.html b/index.html
@@ -4,13 +4,13 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    
     <title>jquery.Thailand.js</title>
-
+    
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/css/uikit.css">
     <link rel="stylesheet" href="./jquery.Thailand.js/dist/jquery.Thailand.min.css">
-
+    
     <style>
         a, h1, h2, .h2{
             font-family: 'Kanit', sans-serif !important;
@@ -73,7 +73,7 @@ <h2>ใหม่! โหมดค้นหา</h2>
             <div id="demo2-output" class="uk-margin"></div>
         </form>
         <!-- END DEMO 2 -->
-
+    
         <div uk-grid>
             <div class="uk-width-1-2@m">
                 <a href="https://medium.com/@earthchie/ระบบ-auto-complete-ที่อยู่ไทย-อย่างที่มันควรเป็น-27360185d86a" target="_blank">
@@ -97,23 +97,30 @@ <h2>ใหม่! โหมดค้นหา</h2>
                 </a>
             </div>
         </div>
-
     </div>
-
+    
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.20/js/uikit.min.js"></script>
+
+    <!-- dependencies for zip mode -->
+    <script type="text/javascript" src="./jquery.Thailand.js/dependencies/jszip.min.js"></script>
+    <script type="text/javascript" src="./jquery.Thailand.js/dependencies/jszip-utils.min.js"></script>
+    <!-- / dependencies for zip mode -->
+
     <script type="text/javascript" src="./jquery.Thailand.js/dependencies/JQL.min.js"></script>
     <script type="text/javascript" src="./jquery.Thailand.js/dependencies/typeahead.bundle.js"></script>
-
+    
     <script type="text/javascript" src="./jquery.Thailand.js/dist/jquery.Thailand.min.js"></script>
-
+    
     <script type="text/javascript">
-
         /******************\
          *     DEMO 1     *
         \******************/ 
+        // demo 1: load database from json. if your server is support gzip. we recommended to use this rather than zip.
+        // for more info check README.md
         $.Thailand({
-            database: './jquery.Thailand.js/dist/db.json',
+            database: './jquery.Thailand.js/database/db.json', 
 
             $district: $('#demo1 [name="district"]'),
             $amphoe: $('#demo1 [name="amphoe"]'),
@@ -145,13 +152,13 @@ <h2>ใหม่! โหมดค้นหา</h2>
             console.log('รหัสไปรษณีย์', this.value);
         });
 
-
         /******************\
          *     DEMO 2     *
         \******************/ 
-
+        // demo 2: load database from zip. for those who doesn't have server that supported gzip.
+        // for more info check README.md
         $.Thailand({
-            database: './jquery.Thailand.js/dist/db.json',
+            database: './jquery.Thailand.js/database/db.zip', 
             $search: $('#demo2 [name="search"]'),
 
             onDataFill: function(data){
@@ -160,8 +167,7 @@ <h2>ใหม่! โหมดค้นหา</h2>
             }
 
         });
-
     </script>
-
+    
 </body>
-</html>
+</html>