add datepicker.body base html rendering

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "vendor"
+}

.gitignore

@@ -1,2 +1,3 @@
 /.idea
 node_modules
+vendor

bower.json

@@ -0,0 +1,6 @@
+{
+  "name": "datepicker",
+  "dependencies": {
+    "jquery": "~2.1.4"
+  }
+}

dist/js/datepicker.js

@@ -1,12 +1,64 @@
-;(function () {
+var Datepicker;
-    var pluginName = '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 () {
 
-};
+};
+;(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();
+        }
+    };
+})();

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())

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>

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();
+        }
+    };
+})();

js/datepicker/datepicker.js

@@ -1,12 +1,64 @@
-;(function () {
+var Datepicker;
-    var pluginName = '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 @@
         }
     };
 
-})();
+})(window, jQuery, '');