Converted static Widgets to Backbone.

Moved static HTML Widgets to Backbone.

Might need to move Widget data else where to keep it clean.
Will need to also implement API for future use.

core/admin/assets/js/models/widget.js

@@ -0,0 +1,43 @@
+/*global window, document, Ghost, $, Backbone, _ */
+(function () {
+    "use strict";
+
+    Ghost.Models.Widget = Backbone.Model.extend({
+
+        defaults: {
+            title: "",
+            name: "",
+            author: "",
+            applicationID: "",
+            size: "",
+            content: {
+                template: '',
+                data: {
+                    number: {
+                        count: 0,
+                        sub: {
+                            value: 0,
+                            dir: "", // "up" or "down"
+                            item: "",
+                            period: ""
+                        }
+                    }
+                }
+            },
+            settings: {
+                settingsPane: false,
+                enabled: false,
+                options: [{
+                    title: "ERROR",
+                    value: "Widget options not set"
+                }]
+            }
+        }
+    });
+
+    Ghost.Collections.Widgets = Backbone.Collection.extend({
+        // url: Ghost.settings.apiRoot + '/widgets', // What will this be?
+        model: Ghost.Models.Widget
+    });
+
+}());

core/admin/assets/js/router.js

@@ -6,11 +6,426 @@
     Ghost.Router = Backbone.Router.extend({
 
         routes: {
+            '': 'dashboard',
             'content/': 'blog',
             'editor': 'editor',
             'editor/': 'editor',
             'editor/:id': 'editor'
         },
+        dashboard: function () {
+            var widgets = new Ghost.Collections.Widgets();
+
+            widgets.add({
+                title: "LINZ, AUSTRIA",
+                name: "time",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.time",
+                content: {
+                    template: 'custom/time',
+                    data: {
+                        day: "Today",
+                        weather: "12",
+                        time: "12:42PM",
+                        date: "Monday / March 5 / 2013"
+                    }
+                },
+                settings: {
+                    settingsPane: true,
+                    options: [{
+                        title: "Timezone",
+                        value: "GMT"
+                    }]
+                }
+            });
+
+            widgets.add({
+                title: "Ghost",
+                name: "image",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.image",
+                size: "2x1",
+                content: {
+                    template: 'default/blank'
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Upcoming Posts",
+                name: "posts",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.posts",
+                content: {
+                    template: 'custom/upcoming-posts',
+                    data: {
+                        ready: 9,
+                        pending: 4,
+                        draft: 1
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Unique Visitors (7 days)",
+                name: "stats",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.stats",
+                size: "2x2",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "293,051",
+                            sub: {
+                                value: "+14%",
+                                dir: "up",
+                                item: "",
+                                period: "in the last 7 days"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Facebook Likes",
+                name: "facebook",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.facebook",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "12,329",
+                            sub: {
+                                value: "-3",
+                                dir: "down",
+                                item: "likes",
+                                period: "today"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Google Plus",
+                name: "gplus",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.gplus",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "4,103",
+                            sub: {
+                                item: "have you in circles"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Twitter",
+                name: "twitter",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.twitter",
+                content: {
+                    template: 'default/blank'
+                },
+                settings: {
+                    settingsPane: true,
+                    enabled: true,
+                    options: [
+                        {
+                            title: "Account",
+                            value: "@JohnONolan"
+                        },
+                        {
+                            title: "Display",
+                            value: "Last Tweets"
+                        },
+                        {
+                            title: "Quantity",
+                            value: 6
+                        }
+                    ]
+                }
+            });
+
+            widgets.add({
+                title: "Campaign Monitor",
+                name: "campaignmonitor",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.campaignmonitor",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "5,693",
+                            sub: {
+                                value: "+63",
+                                dir: "up",
+                                item: "subscribers",
+                                period: "this week"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Most Popular Posts",
+                name: "popular",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.popular",
+                size: "1x2",
+                content: {
+                    template: 'custom/popular-posts',
+                    data: {
+                        posts: [
+                            {
+                                title: "The Night of The Headless Horseman Part II",
+                                time: "Yesterday",
+                                count: "3,128"
+                            },
+                            {
+                                title: "Latin Script & Why it's Particularly Boring to Read",
+                                time: "Wednesday",
+                                count: "1,345"
+                            },
+                            {
+                                title: "59 Signs Your Cat and/or Dog Might be Planning To Kill You",
+                                time: "Tuesday",
+                                count: "824"
+                            },
+                            {
+                                title: "A Love Letter to Emma Stone",
+                                time: "Today",
+                                count: "293"
+                            },
+                            {
+                                title: "Lorem Ipsum Dolor Sit Amet & Other Funny Moments",
+                                time: "Yesterday",
+                                count: "124"
+                            },
+                            {
+                                title: "Matt Does Git",
+                                time: "Thursday",
+                                count: "100"
+                            }
+                        ]
+                    }
+                }
+            });
+
+            widgets.add({
+                title: "Posts This Week (Out Of 20)",
+                name: "postsWeek",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.postsWeek",
+                content: {
+                    template: 'default/blank'
+                }
+            });
+
+            widgets.add({
+                title: "Your RSS News Feed",
+                name: "rss",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.rss",
+                size: "2x2",
+                content: {
+                    template: 'default/blank'
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Instagram",
+                name: "instagram",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.instagram",
+                content: {
+                    template: 'custom/instagram',
+                    data: {
+                        image: "http://f.cl.ly/items/303f3y1n3I2L1F10343E/instagram.jpg"
+                    }
+                },
+                settings: {
+                    settingsPane: true,
+                    options: [{
+                        title: "Account",
+                        value: "@JohnONolan"
+                    }]
+                }
+            });
+
+            widgets.add({
+                title: "Klout",
+                name: "klout",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.klout",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "64.23",
+                            sub: {
+                                value: "-0.42",
+                                dir: "down",
+                                item: "",
+                                period: "in the last 30 days"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Bounce Rate",
+                name: "bounce",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.bounce",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "40.21%",
+                            sub: {
+                                value: "-2.53%",
+                                dir: "up",
+                                item: "",
+                                period: "in the last month"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Average Time On Site",
+                name: "avgTime",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.avgTime",
+                content: {
+                    template: 'default/number',
+                    data: {
+                        number: {
+                            count: "2m 16s",
+                            sub: {
+                                value: "+31.4%",
+                                dir: "up",
+                                item: "",
+                                period: "in the last month"
+                            }
+                        }
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Last.fm",
+                name: "lastfm",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.lastfm",
+                content: {
+                    template: 'custom/lastfm',
+                    data: {
+                        cover: "http://f.cl.ly/items/0p0r3T3v3M0R0H1k1p0S/imagine_dragons.png",
+                        artist: "Imagine Dragons",
+                        title: "On Top of The World"
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Post Ideas",
+                name: "ideas",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.ideas",
+                size: "2x1",
+                content: {
+                    template: 'custom/post-ideas'
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Twitter",
+                name: "tweets",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.tweets",
+                content: {
+                    template: 'custom/tweets',
+                    data: {
+                        avatar: "http://f.cl.ly/items/1A1S0D3T3p1g1B2Z3J0u/ghost_twitter.jpeg",
+                        name: "Ghost",
+                        handle: "@TryGhost",
+                        tweet: "If you're exploring the <a href='#'>@twitterapi</a>, be sure and bring the new field guide along. <a href='#'>dev.twitter.com/blog/...</a>",
+                        time: "3 May 12"
+                    }
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+            widgets.add({
+                title: "Backups",
+                name: "backups",
+                author: "Matthew Harrison-Jones",
+                applicationID: "com.ghost.backups",
+                content: {
+                    template: 'default/blank'
+                },
+                settings: {
+                    settingsPane: true
+                }
+            });
+
+
+
+
+
+            //widgets.fetch().then(function () {
+            Ghost.currentView = new Ghost.Views.Dashboard({ el: '#main', collection: widgets });
+            //});
+        },
 
         blog: function () {
             var posts = new Ghost.Collections.Posts();

core/admin/assets/js/views/dashboard.js

@@ -1,8 +1,13 @@
-/*global window, document, localStorage, Ghost, Backbone, $, _ */
+/*global window, document, localStorage, Ghost, Backbone, confirm, JST, $, _ */
 (function () {
     "use strict";
 
-    var $widgetContainer = $('.js-widget-container'), $itemElems, widgetPositions;
+    var Widgets,
+        Widget,
+        WidgetContent,
+        $widgetContainer,
+        $itemElems,
+        widgetPositions;
 
     widgetPositions = {
         mobile: {},
@@ -11,62 +16,155 @@
         desktop: {}
     };
 
-    $widgetContainer.packery({
+    // Base view
-        itemSelector: '.js-widget',
+    // ----------
-        gutter: 10,
+    Ghost.Views.Dashboard = Ghost.View.extend({
-        columnWidth: 340,
+        initialize: function (options) {
-        rowHeight: 300
+            this.addSubview(new Widgets({ el: '.js-widget-container', collection: this.collection })).render();
+        }
     });
 
-    $itemElems = $($widgetContainer.packery('getItemElements'));
+    // Widgets
-    // make item elements draggable
+    // ----------
-    $itemElems.draggable();
+    Widgets = Ghost.View.extend({
-    // bind Draggable events to Packery
+        initialize: function () {
-    $widgetContainer.packery('bindUIDraggableEvents', $itemElems);
+            $widgetContainer = this.$el;
+        },
 
-    // show item order after layout
+        packeryInit: function () {
-    function orderItems() {
+            var self = this;
-        // items are in order within the layout
+            $widgetContainer.packery({
-        var $itemElems = $($widgetContainer.packery('getItemElements')), order = {};
+                itemSelector: '.js-widget',
+                gutter: 10,
+                columnWidth: 340,
+                rowHeight: 300
+            });
 
-        $.each($itemElems, function (index, key) {
+            $itemElems = $($widgetContainer.packery('getItemElements'));
-            order[key.getAttribute("data-widget-id")] = index;
-        });
-        return order;
-    }
 
-    // On resize button click
+            // make item elements draggable
-    $(".js-widget-resizer").on("click", function () {
+            $itemElems.draggable();
-        var $parent = $(this).closest('.js-widget'), data = $(this).data('size');
+            // bind Draggable events to Packery
+            $widgetContainer.packery('bindUIDraggableEvents', $itemElems);
 
-        $parent.removeClass("widget-1x2 widget-2x1 widget-2x2");
+            $widgetContainer.packery('on', 'dragItemPositioned', function () {
+                var viewportSize = $(window).width();
+                if (viewportSize <= 400) { // Mobile
+                    widgetPositions.mobile = self.getWidgetOrder($itemElems);
+                } else if (viewportSize > 400 && viewportSize <= 800) { // Tablet
+                    widgetPositions.tablet = self.getWidgetOrder($itemElems);
+                } else if (viewportSize > 800 && viewportSize <= 1000) { // Netbook
+                    widgetPositions.netbook = self.getWidgetOrder($itemElems);
+                } else if (viewportSize > 1000) {
+                    widgetPositions.desktop = self.getWidgetOrder($itemElems);
+                }
+                localStorage.setItem('widgetPositions', JSON.stringify(widgetPositions));
 
-        if (data !== "1x1") {
+                // Retrieve the object from storage with `JSON.parse(localStorage.getItem('widgetPositions'));`
-            $parent.addClass('widget-' + data);
+            });
-            $widgetContainer.packery('fit', $parent.get(0));
+        },
-        } else {
+
-            $widgetContainer.packery();
+        getWidgetOrder: function (itemElems) {
+            // items are in order within the layout
+            var order = {};
+
+            _.each(itemElems, function (widget, index) {
+                order[widget.getAttribute("data-widget-id")] = index;
+            });
+            return order;
+        },
+
+        render: function () {
+            this.collection.each(function (model) {
+                this.$el.append(this.addSubview(new Widget({model: model})).render().el);
+            }, this);
+            this.packeryInit();
         }
 
-        $(this).siblings('.active').removeClass('active');
-        $(this).addClass('active');
-
     });
 
-    $widgetContainer.packery('on', 'dragItemPositioned', function () {
+    // Widget
-        var viewportSize = $(window).width();
+    // ----------
-        if (viewportSize <= 400) { // Mobile
+    Widget = Ghost.View.extend({
-            widgetPositions.mobile = orderItems();
+
-        } else if (viewportSize > 400 && viewportSize <= 800) { // Tablet
+        tagName: 'article',
-            widgetPositions.tablet = orderItems();
+        attributes: function () {
-        } else if (viewportSize > 800 && viewportSize <= 1000) {  // Netbook
+            var size = (this.model.get('size'))
-            widgetPositions.netbook = orderItems();
+                ? " widget-" + this.model.get('size')
-        } else if (viewportSize > 1000) {
+                : "",
-            widgetPositions.desktop = orderItems();
+                settings = (this.model.attributes.settings.enabled)
-        }
+                ? " widget-settings"
-        localStorage.setItem('widgetPositions', JSON.stringify(widgetPositions));
+                : "";
+
+            return {
+                class: 'widget-' + this.model.get('name') + size + settings + ' js-widget',
+                'data-widget-id': this.model.get('applicationID')
+            };
+        },
+
+        events: {
+            'click .js-widget-resizer': 'resizeWidget',
+            'click .js-view-settings': 'showSettings',
+            'click .js-view-widget': 'showWidget'
+        },
+
+        resizeWidget: function (e) {
+            e.preventDefault();
+            var data = $(e.currentTarget).data('size');
+
+            this.$el.removeClass("widget-1x2 widget-2x1 widget-2x2");
+
+            if (data !== "1x1") {
+                this.$el.addClass('widget-' + data);
+                $widgetContainer.packery('fit', this.el);
+            } else {
+                $widgetContainer.packery();
+            }
+
+            $(e.currentTarget).siblings('.active').removeClass('active');
+            $(e.currentTarget).addClass('active');
+        },
+
+        showSettings: function (e) {
+            e.preventDefault();
+            this.model.attributes.settings.enabled = true;
+            this.$el.addClass("widget-settings");
+            this.render();
+        },
+
+        showWidget: function (e) {
+            e.preventDefault();
+            this.model.attributes.settings.enabled = false;
+            this.$el.removeClass("widget-settings");
+            this.render();
+        },
+
+        template: JST['content/widget'],
+
+        render: function () {
+            this.$el.html(this.template(this.model.toJSON()));
+            if (!this.model.attributes.settings.enabled) {
+                this.$(".widget-content").html(this.addSubview(new WidgetContent({model: this.model})).render().el);
+            }
+            return this;
+        }
+
+    });
+
+    // Widget Content
+    // ----------
+    WidgetContent = Ghost.View.extend({
+
+        getTemplate: function () {
+            return JST['content/widgets/' + this.model.attributes.content.template];
+        },
+
+        render: function () {
+            this.template =  this.getTemplate();
+            this.$el.html(this.template(this.model.toJSON()));
+            return this;
+        }
 
-        // Retrieve the object from storage with `JSON.parse(localStorage.getItem('widgetPositions'));`
     });
 
 }());

core/admin/assets/sass/layouts/dashboard.scss

@@ -81,6 +81,10 @@
   }
 }
 
+.ui-draggable-dragging {
+  z-index: 9999; // Keep dragged Widget ontop
+}
+
 /* ==========================================================================
    Widget Sizes
    ========================================================================== */

core/admin/assets/tmpl/content/widget.hbs

@@ -0,0 +1,44 @@
+{{#if settings.enabled}}
+        <header class="widget-header">
+            <span class="widget-title">{{Title}} Settings</span>
+            <div class="widget-settings-toggle close js-view-widget"></div>
+        </header>
+        <section class="widget-content">
+            {{#each settings.options}}
+            <label>
+               <span class="title">{{this.title}}</span> <input type="text" value="{{this.value}}"/>
+            </label>
+            {{/each}}
+       </section>
+       <footer class="widget-footer">
+           <div class="widget-size-options">
+               <div class="size-options-container active js-widget-resizer" data-size="1x1">
+                   <span class="mini-widget size-1x1 active"></span>
+                   <span class="mini-widget size-1x1"></span>
+                   <span class="mini-widget size-1x1"></span>
+                   <span class="mini-widget size-1x1"></span>
+               </div>
+               <div class="size-options-container js-widget-resizer" data-size="2x1">
+                   <span class="mini-widget size-2x1 active"></span>
+                   <span class="mini-widget size-1x1"></span>
+                   <span class="mini-widget size-1x1"></span>
+               </div>
+               <div class="size-options-container js-widget-resizer" data-size="1x2">
+                   <span class="mini-widget size-1x2 active"></span>
+                   <span class="mini-widget size-1x1"></span>
+                   <span class="mini-widget size-1x1"></span>
+               </div>
+               <div class="size-options-container js-widget-resizer" data-size="2x2">
+                   <span class="mini-widget size-2x2 active"></span>
+               </div>
+           </div>
+           <div class="widget-settings-toggle done js-submit-changes"></div>
+        </footer>
+{{else}}
+    <section class="widget-content">
+    </section>
+    <footer class="widget-footer">
+        <span class="widget-title">{{title}}</span>
+        {{#if settings.settingsPane}}<div class="widget-settings-toggle js-view-settings"></div>{{/if}}
+    </footer>
+{{/if}}

core/admin/assets/tmpl/content/widgets/custom/instagram.hbs

@@ -0,0 +1 @@
+<img class="photo" src="{{content.data.image}}" />

core/admin/assets/tmpl/content/widgets/custom/lastfm.hbs

@@ -0,0 +1,5 @@
+<img class="cover" src="{{content.data.cover}}" />
+<section class="banner">
+    <span class="song-artist">{{content.data.artist}}</span>
+    <span class="song-title">{{oontent.data.title}}</span>
+</section>

core/admin/assets/tmpl/content/widgets/custom/popular-posts.hbs

@@ -0,0 +1,15 @@
+<ul class="nav clearfix">
+    <li class="tab active"><a href="#">This Week</a></li>
+    <li class="tab"><a href="#">Month</a></li>
+    <li class="tab"><a href="#">Year</a></li>
+    <li class="tab"><a href="#">Ever</a></li>
+</ul>
+<ul class="post-list nav">
+    {{#each content.data.posts}}
+        <li class="post-item">
+            <h1 class="post-title">{{this.title}}</h1>
+            <span class="post-date"> {{this.time}}</span>
+            <span class="post-count"> {{this.count}}</span>
+        </li>
+    {{/each}}
+</ul>

core/admin/assets/tmpl/content/widgets/custom/post-ideas.hbs

@@ -0,0 +1,2 @@
+<input type="text" class="idea-title" placeholder="Enter the title of your post idea...." />
+<textarea class="idea-content" placeholder="This is a brief synopsis of the idea here with your key points. Paste in any relevant links to your reference material. Markdown is fully supported. Hit enter when your done."></textarea>

core/admin/assets/tmpl/content/widgets/custom/time.hbs

@@ -0,0 +1,8 @@
+<header class="summary clearfix">
+    <span class="day">{{content.data.day}}</span>
+    <span class="weather">{{content.data.weather}}°</span>
+</header>
+<time>
+    <span class="clock">{{content.data.time}}</span>
+    <span class="date">{{content.data.date}}</span>
+</time>

core/admin/assets/tmpl/content/widgets/custom/tweets.hbs

@@ -0,0 +1,18 @@
+<header>
+    <div class="twitter-display-image">
+        <img src="{{content.data.avatar}}" />
+    </div>
+    <span class="twitter-name">{{content.data.name}}</span>
+    <span class="twitter-handle">{{contnet.data.handle}}</span>
+</header>
+<article class="latest-tweet">
+{{{content.data.tweet}}}
+</article>
+<footer>
+    <time class="tweet-time">{{content.data.time}}</time>
+    <div class="twitter-functions">
+        <a href="#"><i class="reply"></i></a>
+        <a href="#"><i class="retweet"></i></a>
+        <a href="#"><i class="favourite"></i></a>
+    </div>
+</footer>

core/admin/assets/tmpl/content/widgets/custom/upcoming-posts.hbs

@@ -0,0 +1,9 @@
+<div class="chart">
+    <canvas id="poststats" width="250" height="250"></canvas>
+    <div class="sheen"></div>
+    <ul class="data">
+        <li><span class="ready">{{content.data.ready}}</span> Ready</li>
+        <li><span class="pending">{{content.data.pending}}</span> Pending</li>
+        <li><span class="draft">{{content.data.draft}}</span> Draft</li>
+    </ul>
+</div>

core/admin/assets/tmpl/content/widgets/default/number.hbs

@@ -0,0 +1,4 @@
+<div class="info">
+    <span class="count">{{content.data.number.count}}</span>
+    <span class="sub"><mark class="{{content.data.number.sub.dir}}">{{content.data.number.sub.value}}</mark> {{content.data.number.sub.item}} {{content.data.number.sub.period}}</span>
+</div>

core/admin/views/dashboard.hbs

@@ -1,12 +1,7 @@
 {{#contentFor 'bodyScripts'}}
-    <script src="/core/admin/assets/lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
-    <script src="/core/admin/assets/lib/packery.pkgd.min.js"></script>
     <script src="/core/admin/assets/lib/chart.min.js"></script>
-    <script src="/core/admin/assets/js/views/dashboard.js"></script>
     <script>
     $(document).ready(function(){
-        $('.widget-posts').fadeIn(900, function(){
-
           var ctx = $("#poststats").get(0).getContext("2d");
           var data = [
             {
@@ -28,330 +23,10 @@
             segmentStrokeColor : "#efefef"
           };
           var poststats = new Chart(ctx).Doughnut(data, options);
-
-        });
     });
     </script>
 {{/contentFor}}
 
 {{!< default}}
 <section class="js-widget-container">
-    <article class="widget-time js-widget" data-widget-id="com.ghost.time">
-        <section class="widget-content">
-            <header class="summary clearfix">
-                <span class="day">Today</span>
-                <span class="weather">12°</span>
-            </header>
-            <time>
-                <span class="clock">12:42pm</span>
-                <span class="date">Monday / March 5 / 2013</span>
-            </time>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Linz, Austria</span>
-            <div class="widget-settings-toggle cog"></div>
-        </footer>
-    </article>
-
-    <div class="widget-image widget-2x1 js-widget" data-widget-id="com.ghost.image">
-        <section class="widget-content">
-
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Ghost</span>
-            <div class="widget-settings-toggle cog"></div>
-        </footer>
-    </div>
-
-    <div class="widget-posts js-widget" data-widget-id="com.ghost.posts">
-        <section class="widget-content">
-            <div class="chart">
-                <canvas id="poststats" width="250" height="250"></canvas>
-                <div class="sheen"></div>
-                <ul class="data">
-                    <li><span class="ready">9</span> Ready</li>
-                    <li><span class="pending">4</span> Pending</li>
-                    <li><span class="draft">1</span> Draft</li>
-                </ul>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Upcoming Posts</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-stats widget-2x2 js-widget" data-widget-id="com.ghost.stats">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">293,051</span>
-                <span class="sub"><mark class="up">+14%</mark> in the last 7 days</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Unique Visitors (7 days)</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-facebook js-widget" data-widget-id="com.ghost.facebook">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">12,329</span>
-                <span class="sub"><mark class="down">-3</mark> likes today</span>
-                <span class="faces"></span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Facebook Likes</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-gplus js-widget" data-widget-id="com.ghost.gplus">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">4,103</span>
-                <span class="sub">have you in circles</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Google Plus</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-twitter widget-settings js-widget" data-widget-id="com.ghost.twitter">
-        <header class="widget-header">
-            <span class="widget-title">Twitter Settings</span>
-            <div class="widget-settings-toggle close"></div>
-        </header>
-        <section class="widget-content">
-            <label>
-                <span class="title">Account</span> <input type="text" value="@JohnONolan"/>
-            </label>
-            <label>
-                <span class="title">Display</span> <input type="text" value="Latest Tweets"/>
-            </label>
-            <label>
-                <span class="title">Quantity</span> <input type="text" value="6"/>
-            </label>
-        </section>
-        <footer class="widget-footer">
-            <div class="widget-size-options">
-                <div class="size-options-container active js-widget-resizer" data-size="1x1">
-                    <span class="mini-widget size-1x1 active"></span>
-                    <span class="mini-widget size-1x1"></span>
-                    <span class="mini-widget size-1x1"></span>
-                    <span class="mini-widget size-1x1"></span>
-                </div>
-                <div class="size-options-container js-widget-resizer" data-size="2x1">
-                    <span class="mini-widget size-2x1 active"></span>
-                    <span class="mini-widget size-1x1"></span>
-                    <span class="mini-widget size-1x1"></span>
-                </div>
-                <div class="size-options-container js-widget-resizer" data-size="1x2">
-                    <span class="mini-widget size-1x2 active"></span>
-                    <span class="mini-widget size-1x1"></span>
-                    <span class="mini-widget size-1x1"></span>
-                </div>
-                <div class="size-options-container js-widget-resizer" data-size="2x2">
-                    <span class="mini-widget size-2x2 active"></span>
-                </div>
-            </div>
-            <div class="widget-settings-toggle done"></div>
-        </footer>
-    </div>
-
-    <div class="widget-campaignmonitor js-widget" data-widget-id="com.ghost.campaignmonitor">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">5,693</span>
-                <span class="sub"><mark class="up">+63</mark> subscribers this week</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Campaign Monitor</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-popular widget-1x2 js-widget" data-widget-id="com.ghost.popular">
-        <section class="widget-content">
-            <ul class="nav clearfix">
-                <li class="tab active"><a href="#">This Week</a></li>
-                <li class="tab"><a href="#">Month</a></li>
-                <li class="tab"><a href="#">Year</a></li>
-                <li class="tab"><a href="#">Ever</a></li>
-            </ul>
-            <ul class="post-list nav">
-                <li class="post-item">
-                    <h1 class="post-title">The Night of The Headless Horseman Part II</h1>
-                    <span class="post-date"> Yesterday</span>
-                    <span class="post-count"> 3,128</span>
-                </li>
-                <li class="post-item">
-                    <h4 class="post-title">Latin Script & Why it's Particularly Boring to Read</h4>
-                    <span class="post-date"> Wednesday</span>
-                    <span class="post-count"> 1,345</span>
-                </li>
-                <li class="post-item">
-                    <h4 class="post-title">59 Signs Your Cat and/or Dog Might be Planning To Kill You</h4>
-                    <span class="post-date"> Tuesday</span>
-                    <span class="post-count"> 824</span>
-                </li>
-                <li class="post-item">
-                    <h4 class="post-title">A Love Letter to Emma Stone</h4>
-                    <span class="post-date"> Today</span>
-                    <span class="post-count"> 293</span>
-                </li>
-                <li class="post-item">
-                    <h4 class="post-title">Lorem Ipsum Dolor Sit Amet & Other Funny Moments</h4>
-                    <span class="post-date"> Yesterday</span>
-                    <span class="post-count"> 124</span>
-                </li>
-                <li class="post-item">
-                    <h4 class="post-title">Matt Does Git</h4>
-                    <span class="post-date"> Thursday</span>
-                    <span class="post-count"> 100</span>
-                </li>
-            </ul>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Most Popular Posts</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-postsWeek js-widget" data-widget-id="com.ghost.postsWeek">
-        <section class="widget-content">
-
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Posts This Week (Out Of 20)</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-
-    <div class="widget-rss widget-2x2 js-widget" data-widget-id="com.ghost.rss">
-        <section class="widget-content">
-
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Your RSS News Feed</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-instagram js-widget" data-widget-id="com.ghost.instagram">
-        <section class="widget-content">
-            <img class="photo" src="http://f.cl.ly/items/303f3y1n3I2L1F10343E/instagram.jpg" />
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Instagram</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-klout js-widget" data-widget-id="com.ghost.klout">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">64.23</span>
-                <span class="sub"><mark class="down">-0.42</mark> in the last 30 days</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Klout</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-bounce js-widget" data-widget-id="com.ghost.bounce">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">40.21%</span>
-                <span class="sub"><mark class="up">-2.53%</mark> in the last month</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Bounce Rate</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-avgTime js-widget" data-widget-id="com.ghost.avgTime">
-        <section class="widget-content">
-            <div class="info">
-                <span class="count">2m 16s</span>
-                <span class="sub"><mark class="up">+31.4%</mark> in the last month</span>
-            </div>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Average Time On Site</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-lastfm js-widget" data-widget-id="com.ghost.lastfm">
-        <section class="widget-content">
-            <img class="cover" src="http://f.cl.ly/items/0p0r3T3v3M0R0H1k1p0S/imagine_dragons.png" />
-            <section class="banner">
-                <span class="song-artist">Imagine Dragons</span>
-                <span class="song-title">On Top of The World</span>
-            </section>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Last.fm</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-ideas widget-2x1 js-widget" data-widget-id="com.ghost.ideas">
-        <section class="widget-content">
-            <input type="text" class="idea-title" placeholder="Enter the title of your post idea...." />
-            <textarea class="idea-content" placeholder="This is a brief synopsis of the idea here with your key points. Paste in any relevant links to your reference material. Markdown is fully supported. Hit enter when your done."></textarea>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Post Ideas</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-tweets js-widget" data-widget-id="com.ghost.tweets">
-        <section class="widget-content">
-            <header>
-                <div class="twitter-display-image">
-                    <img src="http://f.cl.ly/items/1A1S0D3T3p1g1B2Z3J0u/ghost_twitter.jpeg" />
-                </div>
-                <span class="twitter-name">Ghost</span>
-                <span class="twitter-handle">@tryghost</span>
-            </header>
-            <article class="latest-tweet">
-                If you're exploring the <a href="#">@twitterapi</a>, be sure and bring the new field guide along. <a href="#">dev.twitter.com/blog/...</a>
-            </article>
-            <footer>
-                <time class="tweet-time">3 May 12</time>
-                <div class="twitter-functions">
-                    <a href="#"><i class="reply"></i></a>
-                    <a href="#"><i class="retweet"></i></a>
-                    <a href="#"><i class="favourite"></i></a>
-                </div>
-            </footer>
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Twitter</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
-
-    <div class="widget-backups js-widget" data-widget-id="com.ghost.backups">
-        <section class="widget-content">
-
-        </section>
-        <footer class="widget-footer">
-            <span class="widget-title">Backups</span>
-            <div class="widget-settings-toggle"></div>
-        </footer>
-    </div>
 </section>

core/admin/views/default.hbs

@@ -45,6 +45,8 @@
         <script src="/core/admin/assets/lib/showdown/extensions/ghostdown.js"></script>
         <script src="/core/admin/assets/lib/shortcuts.js"></script>
         <script src="/core/admin/assets/lib/countable.js"></script>
+        <script src="/core/admin/assets/lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
+        <script src="/core/admin/assets/lib/packery.pkgd.min.js"></script>
 
         <script src="/core/admin/assets/js/init.js"></script>
         <script src="/core/admin/assets/tmpl/hbs-tmpl.js"></script>
@@ -55,7 +57,9 @@
 
         <!-- // require '/core/admin/assets/js/models/*' -->
         <script src="/core/admin/assets/js/models/post.js"></script>
+        <script src="/core/admin/assets/js/models/widget.js"></script>
         <!-- // require '/core/admin/assets/js/views/*' -->
+        <script src="/core/admin/assets/js/views/dashboard.js"></script>
         <script src="/core/admin/assets/js/views/blog.js"></script>
         <script src="/core/admin/assets/js/views/editor.js"></script>
         <script src="/core/admin/assets/js/router.js"></script>