Merge pull request #114 from matthojo/Backbone-Widgets
Initial Backbone Widgets
This commit is contained in:
Hannah Wolfe
commit
c733a1ac62
43
core/admin/assets/js/models/widget.js
Normal file
43
core/admin/assets/js/models/widget.js
Normal file
@ -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
|
||||
});
|
||||
|
||||
}());
|
||||
@ -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();
|
||||
|
||||
@ -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({
|
||||
itemSelector: '.js-widget',
|
||||
gutter: 10,
|
||||
columnWidth: 340,
|
||||
rowHeight: 300
|
||||
// Base view
|
||||
// ----------
|
||||
Ghost.Views.Dashboard = Ghost.View.extend({
|
||||
initialize: function (options) {
|
||||
this.addSubview(new Widgets({ el: '.js-widget-container', collection: this.collection })).render();
|
||||
}
|
||||
});
|
||||
|
||||
$itemElems = $($widgetContainer.packery('getItemElements'));
|
||||
// make item elements draggable
|
||||
$itemElems.draggable();
|
||||
// bind Draggable events to Packery
|
||||
$widgetContainer.packery('bindUIDraggableEvents', $itemElems);
|
||||
// Widgets
|
||||
// ----------
|
||||
Widgets = Ghost.View.extend({
|
||||
initialize: function () {
|
||||
$widgetContainer = this.$el;
|
||||
},
|
||||
|
||||
// show item order after layout
|
||||
function orderItems() {
|
||||
// items are in order within the layout
|
||||
var $itemElems = $($widgetContainer.packery('getItemElements')), order = {};
|
||||
packeryInit: function () {
|
||||
var self = this;
|
||||
$widgetContainer.packery({
|
||||
itemSelector: '.js-widget',
|
||||
gutter: 10,
|
||||
columnWidth: 340,
|
||||
rowHeight: 300
|
||||
});
|
||||
|
||||
$.each($itemElems, function (index, key) {
|
||||
order[key.getAttribute("data-widget-id")] = index;
|
||||
});
|
||||
return order;
|
||||
}
|
||||
$itemElems = $($widgetContainer.packery('getItemElements'));
|
||||
|
||||
// On resize button click
|
||||
$(".js-widget-resizer").on("click", function () {
|
||||
var $parent = $(this).closest('.js-widget'), data = $(this).data('size');
|
||||
// make item elements draggable
|
||||
$itemElems.draggable();
|
||||
// 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") {
|
||||
$parent.addClass('widget-' + data);
|
||||
$widgetContainer.packery('fit', $parent.get(0));
|
||||
} else {
|
||||
$widgetContainer.packery();
|
||||
// Retrieve the object from storage with `JSON.parse(localStorage.getItem('widgetPositions'));`
|
||||
});
|
||||
},
|
||||
|
||||
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 () {
|
||||
var viewportSize = $(window).width();
|
||||
if (viewportSize <= 400) { // Mobile
|
||||
widgetPositions.mobile = orderItems();
|
||||
} else if (viewportSize > 400 && viewportSize <= 800) { // Tablet
|
||||
widgetPositions.tablet = orderItems();
|
||||
} else if (viewportSize > 800 && viewportSize <= 1000) { // Netbook
|
||||
widgetPositions.netbook = orderItems();
|
||||
} else if (viewportSize > 1000) {
|
||||
widgetPositions.desktop = orderItems();
|
||||
}
|
||||
localStorage.setItem('widgetPositions', JSON.stringify(widgetPositions));
|
||||
// Widget
|
||||
// ----------
|
||||
Widget = Ghost.View.extend({
|
||||
|
||||
tagName: 'article',
|
||||
attributes: function () {
|
||||
var size = (this.model.get('size'))
|
||||
? " widget-" + this.model.get('size')
|
||||
: "",
|
||||
settings = (this.model.attributes.settings.enabled)
|
||||
? " widget-settings"
|
||||
: "";
|
||||
|
||||
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'));`
|
||||
});
|
||||
|
||||
}());
|
||||
@ -81,6 +81,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ui-draggable-dragging {
|
||||
z-index: 9999; // Keep dragged Widget ontop
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Widget Sizes
|
||||
========================================================================== */
|
||||
|
||||
44
core/admin/assets/tmpl/content/widget.hbs
Normal file
44
core/admin/assets/tmpl/content/widget.hbs
Normal file
@ -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}}
|
||||
@ -0,0 +1 @@
|
||||
<img class="photo" src="{{content.data.image}}" />
|
||||
5
core/admin/assets/tmpl/content/widgets/custom/lastfm.hbs
Normal file
5
core/admin/assets/tmpl/content/widgets/custom/lastfm.hbs
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
8
core/admin/assets/tmpl/content/widgets/custom/time.hbs
Normal file
8
core/admin/assets/tmpl/content/widgets/custom/time.hbs
Normal file
@ -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>
|
||||
18
core/admin/assets/tmpl/content/widgets/custom/tweets.hbs
Normal file
18
core/admin/assets/tmpl/content/widgets/custom/tweets.hbs
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user