From 118b7d4c5a531b3e9a2b468e43444fb8d8e0911d Mon Sep 17 00:00:00 2001
From: t1m0n <t1m0n.tr@gmail.com>
Date: Sat, 26 Sep 2015 20:00:01 +0300
Subject: [PATCH] add datepicker.body base html rendering

---
 .bowerrc                    |   3 +
 .gitignore                  |   1 +
 bower.json                  |   6 ++
 dist/js/datepicker.js       | 111 ++++++++++++++++++++++++++++++++++--
 gulpfile.js                 |   2 +-
 index.html                  |   4 +-
 js/datepicker/body.js       |  47 +++++++++++++++
 js/datepicker/datepicker.js |  62 ++++++++++++++++++--
 8 files changed, 223 insertions(+), 13 deletions(-)
 create mode 100644 .bowerrc
 create mode 100644 bower.json
 create mode 100644 js/datepicker/body.js

diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..4dece5f
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "vendor"
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 11022e1..73b8c8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /.idea
 node_modules
+vendor
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..f28bb77
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,6 @@
+{
+  "name": "datepicker",
+  "dependencies": {
+    "jquery": "~2.1.4"
+  }
+}
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index 77f8dfe..bba0307 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -1,12 +1,64 @@
-;(function () {
-    var pluginName = 'datepicker';
+var Datepicker;
 
-    function Datepicker () {
+(function (window, $, undefined) {
+    var pluginName = 'datepicker',
+        $body, $datepickersContainer,
+        baseTemplate = '' +
+            '<div class="datepicker">' +
+            '<header class="datepicker--header"></header>' +
+            '<div class="datepicker--content"></div>' +
+            '</div>',
+        defaults = {
+            inline: true,
+            start: '',
+            format: 'dd.mm.yyyy'
+        };
 
-    }
+    Datepicker  = function (el, options) {
+        this.$el = typeof el == 'string' ? $(el) : el;
+
+        this.opts = $.extend({}, defaults, options);
+
+        if (!this.opts.start) {
+            this.opts.start = new Date();
+        }
+        if (this.containerBuilt && !this.opts.inline) {
+            this._buildDatepickersContainer();
+        }
+
+        if ($body == undefined) {
+            $body = $('body');
+        }
+
+        this.init()
+    };
 
     Datepicker.prototype = {
+        containerBuilt: false,
         init: function () {
+            this._buildBaseHtml();
+
+            this.days = new Datepicker.Body(this, 'days', this.opts)
+
+        },
+
+        _buildDatepickersContainer: function () {
+            this.containerBuilt = true;
+            $body.append('<div class="datepickers-container" id="datepickers-container"></div>')
+            $datepickersContainer = $('#datepickers-container');
+        },
+
+        _buildBaseHtml: function () {
+            var $appendTarget = this.$el;
+            if(!this.opts.inline) {
+                $appendTarget = $datepickersContainer;
+            }
+            this.$datepicker = $(baseTemplate).appendTo($appendTarget);
+            this.$content = $('.datepicker--content', this.$datepicker);
+            this.$header = $('.datepicker--header', this.$datepicker);
+        },
+
+        _defineDOM: function () {
 
         }
     };
@@ -30,7 +82,54 @@
         }
     };
 
-})();
+})(window, jQuery, '');
 Datepicker.Cell = function () {
 
-};
\ No newline at end of file
+};
+;(function () {
+    var templates = {
+        days:'' +
+        '<div class="datepicker--days">' +
+        '<div class="datepicker--days--names"></div>' +
+        '<div class="datepicker--days--cells"></div>' +
+        '</div>'
+    };
+
+    Datepicker.Body = function (d, type, opts) {
+        this.d = d;
+        this.type = type;
+        this.opts = opts;
+
+        this.viewDate = opts.start;
+
+        this.init();
+    };
+
+    Datepicker.Body.prototype = {
+        init: function () {
+            this._render();
+        },
+
+        _getCellsNumber: function () {
+            var d = this.viewDate;
+
+            return {
+                days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
+                months: 12,
+                years: 10
+            }
+        },
+
+        _buildBaseHtml: function () {
+            this.$el = $(templates[this.type]).appendTo(this.d.$content);
+            this.$names = $('.datepicker--days--names', this.$el);
+            this.$cells = $('.datepicker--days--cells', this.$el);
+        },
+
+        _render: function () {
+            var cells = this._getCellsNumber();
+
+            this._buildBaseHtml();
+        }
+    };
+})();
diff --git a/gulpfile.js b/gulpfile.js
index dd7dafd..b6e26da 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,7 +6,7 @@ var gulp = require('gulp'),
     concat = require('gulp-concat');
 
 gulp.task('js', function () {
-    gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/cell.js'])
+    gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/cell.js', 'js/datepicker/body.js'])
         .pipe(concat('datepicker.js'))
         .pipe(gulp.dest('dist/js/'))
         .pipe(livereload())
diff --git a/index.html b/index.html
index 296a452..fce917f 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,13 @@
         <title>Datepicker</title>
         <link rel="stylesheet" href="css/style.css"/>
         <link rel="stylesheet" href="dist/css/datepicker.css"/>
-        <script type="text/javascript" src="dist/js/datepicker.js"></script>
+        <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
     </head>
     <body>
         <div class="calendar"></div>
 
+
+        <script type="text/javascript" src="dist/js/datepicker.js"></script>
         <script type="text/javascript">
             $('.calendar').datepicker();
         </script>
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
new file mode 100644
index 0000000..161ff44
--- /dev/null
+++ b/js/datepicker/body.js
@@ -0,0 +1,47 @@
+;(function () {
+    var templates = {
+        days:'' +
+        '<div class="datepicker--days">' +
+        '<div class="datepicker--days--names"></div>' +
+        '<div class="datepicker--days--cells"></div>' +
+        '</div>'
+    };
+
+    Datepicker.Body = function (d, type, opts) {
+        this.d = d;
+        this.type = type;
+        this.opts = opts;
+
+        this.viewDate = opts.start;
+
+        this.init();
+    };
+
+    Datepicker.Body.prototype = {
+        init: function () {
+            this._render();
+        },
+
+        _getCellsNumber: function () {
+            var d = this.viewDate;
+
+            return {
+                days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
+                months: 12,
+                years: 10
+            }
+        },
+
+        _buildBaseHtml: function () {
+            this.$el = $(templates[this.type]).appendTo(this.d.$content);
+            this.$names = $('.datepicker--days--names', this.$el);
+            this.$cells = $('.datepicker--days--cells', this.$el);
+        },
+
+        _render: function () {
+            var cells = this._getCellsNumber();
+
+            this._buildBaseHtml();
+        }
+    };
+})();
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index af4a212..ac1f32e 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -1,12 +1,64 @@
-;(function () {
-    var pluginName = 'datepicker';
+var Datepicker;
 
-    function Datepicker () {
+(function (window, $, undefined) {
+    var pluginName = 'datepicker',
+        $body, $datepickersContainer,
+        baseTemplate = '' +
+            '<div class="datepicker">' +
+            '<header class="datepicker--header"></header>' +
+            '<div class="datepicker--content"></div>' +
+            '</div>',
+        defaults = {
+            inline: true,
+            start: '',
+            format: 'dd.mm.yyyy'
+        };
 
-    }
+    Datepicker  = function (el, options) {
+        this.$el = typeof el == 'string' ? $(el) : el;
+
+        this.opts = $.extend({}, defaults, options);
+
+        if (!this.opts.start) {
+            this.opts.start = new Date();
+        }
+        if (this.containerBuilt && !this.opts.inline) {
+            this._buildDatepickersContainer();
+        }
+
+        if ($body == undefined) {
+            $body = $('body');
+        }
+
+        this.init()
+    };
 
     Datepicker.prototype = {
+        containerBuilt: false,
         init: function () {
+            this._buildBaseHtml();
+
+            this.days = new Datepicker.Body(this, 'days', this.opts)
+
+        },
+
+        _buildDatepickersContainer: function () {
+            this.containerBuilt = true;
+            $body.append('<div class="datepickers-container" id="datepickers-container"></div>')
+            $datepickersContainer = $('#datepickers-container');
+        },
+
+        _buildBaseHtml: function () {
+            var $appendTarget = this.$el;
+            if(!this.opts.inline) {
+                $appendTarget = $datepickersContainer;
+            }
+            this.$datepicker = $(baseTemplate).appendTo($appendTarget);
+            this.$content = $('.datepicker--content', this.$datepicker);
+            this.$header = $('.datepicker--header', this.$datepicker);
+        },
+
+        _defineDOM: function () {
 
         }
     };
@@ -30,4 +82,4 @@
         }
     };
 
-})();
\ No newline at end of file
+})(window, jQuery, '');
\ No newline at end of file