65 |
75 |
66 |
67 | Console
68 |
69 |
70 |
74 |
71 |
72 |
73 | | Name | <%= name %> |
| Role | <%= role %> |
| ID | <%=id%> |
'),
15 |
16 |
17 | init: function(data) {
18 | Dashboard.Utils.emit('widget|init|' + this.name);
19 |
20 | if (data) {
21 | this.setData(data);
22 | }
23 |
24 | this.shell = Dashboard.TEMPLATES.widget({
25 | name: this.name,
26 | title: this.title,
27 | size: this.size,
28 | hideLink: this.hideLink,
29 | hideRefresh: this.hideRefresh,
30 | customButtons: this.customButtons,
31 | details: true
32 | });
33 |
34 | this.initialized = true;
35 |
36 | Dashboard.Utils.emit('widget|ready|' + this.name);
37 |
38 | this.ready();
39 |
40 | Dashboard.Utils.emit('widget|render|' + this.name);
41 |
42 | this.subscribe();
43 | },
44 |
45 | render: function() {
46 | Dashboard.render.widget(this.name, this.shell.tpl);
47 |
48 | this.fetch();
49 |
50 | $('#widget-' + this.shell.id).css({
51 | 'height': '240px',
52 | 'margin-bottom': '10px',
53 | 'overflow-x': 'hidden',
54 | 'width': '100%'
55 | }).html( this.template({
56 | name: this.data.name,
57 | role: this.data.role,
58 | id: this.data.id
59 | }) );
60 |
61 | this.postRender();
62 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
63 | },
64 | };
65 |
66 | var widget = _.extend({}, widgetRoot, extended);
67 |
68 | // register presence with screen manager
69 | Dashboard.addWidget(widget);
70 | };
71 |
--------------------------------------------------------------------------------
/samples/cakeshop/js/widgets/user.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = function(id) {
3 | var extended = {
4 | title: 'Users',
5 | size: 'small',
6 | widgetId: id,
7 |
8 | hideLink: true,
9 |
10 | template: _.template(' ' +
11 | '
| Name | <%= name %> |
| Role | <%= role %> |
| ID | <%=id%> |
'),
15 |
16 |
17 | init: function(data) {
18 | Dashboard.Utils.emit('widget|init|' + this.name);
19 |
20 | if (data) {
21 | this.setData(data);
22 | }
23 |
24 | this.shell = Dashboard.TEMPLATES.widget({
25 | name: this.name,
26 | title: this.title,
27 | size: this.size,
28 | hideLink: this.hideLink,
29 | hideRefresh: this.hideRefresh,
30 | customButtons: this.customButtons,
31 | details: true
32 | });
33 |
34 | this.initialized = true;
35 |
36 | Dashboard.Utils.emit('widget|ready|' + this.name);
37 |
38 | this.ready();
39 |
40 | Dashboard.Utils.emit('widget|render|' + this.name);
41 |
42 | this.subscribe();
43 | },
44 |
45 | render: function() {
46 | Dashboard.render.widget(this.name, this.shell.tpl);
47 |
48 | this.fetch();
49 |
50 | $('#widget-' + this.shell.id).css({
51 | 'height': '240px',
52 | 'margin-bottom': '10px',
53 | 'overflow-x': 'hidden',
54 | 'width': '100%'
55 | }).html( this.template({
56 | name: this.data.name,
57 | role: this.data.role,
58 | id: this.data.id
59 | }) );
60 |
61 | this.postRender();
62 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
63 | },
64 | };
65 |
66 | var widget = _.extend({}, widgetRoot, extended);
67 |
68 | // register presence with screen manager
69 | Dashboard.addWidget(widget);
70 | };
71 |
--------------------------------------------------------------------------------
/docs/demo/js/widgets/info.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = function(id) {
3 | var extended = {
4 | name: 'info',
5 | title: 'Info',
6 | size: 'medium',
7 | widgetId: id, //needed for dashboard
8 |
9 | hideLink: true,
10 |
11 | template: _.template(' ' +
12 | '
| App Name | <%= app %> |
| # of Users | <%= numUser %> |
| URL | <%= url %> |
| Description | <%=desc%> |
'),
17 |
18 | init: function(data) {
19 | Dashboard.Utils.emit('widget|init|' + this.name);
20 |
21 | if (data) {
22 | this.setData(data);
23 | }
24 |
25 | this.shell = Dashboard.TEMPLATES.widget({
26 | name: this.name,
27 | title: this.title,
28 | size: this.size,
29 | hideLink: this.hideLink,
30 | hideRefresh: this.hideRefresh,
31 | customButtons: this.customButtons,
32 | details: true
33 | });
34 |
35 | this.initialized = true;
36 |
37 | Dashboard.Utils.emit('widget|ready|' + this.name);
38 |
39 | this.ready();
40 |
41 | Dashboard.Utils.emit('widget|render|' + this.name);
42 |
43 | this.subscribe();
44 | },
45 |
46 |
47 | render: function() {
48 | Dashboard.render.widget(this.name, this.shell.tpl);
49 | this.fetch();
50 |
51 | $('#widget-' + this.shell.id).css({
52 | 'height': '240px',
53 | 'margin-bottom': '10px',
54 | 'overflow-x': 'hidden',
55 | 'width': '100%'
56 | }).html( this.template({
57 | app: this.data.appName,
58 | desc: this.data.description,
59 | numUser: this.data.numUser,
60 | url: this.data.url
61 | }) );
62 |
63 | this.postRender();
64 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
65 | },
66 | };
67 |
68 |
69 | var widget = _.extend({}, widgetRoot, extended);
70 |
71 | // register presence with screen manager
72 | Dashboard.addWidget(widget);
73 | };
74 |
--------------------------------------------------------------------------------
/samples/cakeshop/js/widgets/info.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = function(id) {
3 | var extended = {
4 | name: 'info',
5 | title: 'Info',
6 | size: 'medium',
7 | widgetId: id, //needed for dashboard
8 |
9 | hideLink: true,
10 |
11 | template: _.template(' ' +
12 | '
| App Name | <%= app %> |
| # of Users | <%= numUser %> |
| URL | <%= url %> |
| Description | <%=desc%> |
'),
17 |
18 | init: function(data) {
19 | Dashboard.Utils.emit('widget|init|' + this.name);
20 |
21 | if (data) {
22 | this.setData(data);
23 | }
24 |
25 | this.shell = Dashboard.TEMPLATES.widget({
26 | name: this.name,
27 | title: this.title,
28 | size: this.size,
29 | hideLink: this.hideLink,
30 | hideRefresh: this.hideRefresh,
31 | customButtons: this.customButtons,
32 | details: true
33 | });
34 |
35 | this.initialized = true;
36 |
37 | Dashboard.Utils.emit('widget|ready|' + this.name);
38 |
39 | this.ready();
40 |
41 | Dashboard.Utils.emit('widget|render|' + this.name);
42 |
43 | this.subscribe();
44 | },
45 |
46 |
47 | render: function() {
48 | Dashboard.render.widget(this.name, this.shell.tpl);
49 | this.fetch();
50 |
51 | $('#widget-' + this.shell.id).css({
52 | 'height': '240px',
53 | 'margin-bottom': '10px',
54 | 'overflow-x': 'hidden',
55 | 'width': '100%'
56 | }).html( this.template({
57 | app: this.data.appName,
58 | desc: this.data.description,
59 | numUser: this.data.numUser,
60 | url: this.data.url
61 | }) );
62 |
63 | this.postRender();
64 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
65 | },
66 | };
67 |
68 |
69 | var widget = _.extend({}, widgetRoot, extended);
70 |
71 | // register presence with screen manager
72 | Dashboard.addWidget(widget);
73 | };
74 |
--------------------------------------------------------------------------------
/docs/demo/js/widgets/widget-root.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Widget template.
3 | *
4 | * Loading flow:
5 | * 1. Register in a section for displaying
6 | * 2. Widget is pulled down
7 | * 3. addWidget called on screenManager
8 | * 4. screenManager calls widget.init
9 | * 5. widget.setData is called by widget.init
10 | * 6. widget.initialized is toggled
11 | * 7. widget.ready is called by widget.init
12 | * 8. widget.render is called by widget.init
13 | * 9. widget.fetch is called by widget.render
14 | * 10. widget.postRender is called by widget.render
15 | * 11. widget.subscribe is called by widget.init
16 | */
17 |
18 | window.widgetRoot = {
19 | hideLink: false,
20 | hideRefresh: false,
21 |
22 | initialized: false,
23 |
24 | ready: function() {
25 | this.render();
26 | },
27 |
28 | setData: function(data) {
29 | this.data = data;
30 | },
31 |
32 | fetch: function() {
33 | this.postFetch();
34 | },
35 |
36 | postFetch: function() { },
37 |
38 | subscribe: function() { },
39 |
40 | init: function(data) {
41 | Dashboard.Utils.emit('widget|init|' + this.name);
42 |
43 | if (data) {
44 | this.setData(data);
45 | }
46 |
47 | this.shell = Dashboard.TEMPLATES.widget({
48 | name: this.name,
49 | title: this.title,
50 | size: this.size,
51 | hideLink: this.hideLink,
52 | hideRefresh: this.hideRefresh,
53 | customButtons: this.customButtons
54 | });
55 |
56 | this.initialized = true;
57 |
58 | Dashboard.Utils.emit('widget|ready|' + this.name);
59 |
60 | this.ready();
61 |
62 | Dashboard.Utils.emit('widget|render|' + this.name);
63 |
64 | this.subscribe();
65 | },
66 |
67 | render: function() {
68 | Dashboard.render.widget(this.name, this.shell.tpl);
69 |
70 | this.fetch();
71 |
72 | $('#widget-' + this.shell.id).css({
73 | 'height': '240px',
74 | 'margin-bottom': '10px',
75 | 'overflow-x': 'hidden',
76 | 'width': '100%'
77 | });
78 |
79 | this.postRender();
80 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
81 | },
82 |
83 | refresh: function() {
84 |
85 | },
86 |
87 | postRender: function() { },
88 | };
89 |
--------------------------------------------------------------------------------
/samples/cakeshop/js/widgets/widget-root.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Widget template.
3 | *
4 | * Loading flow:
5 | * 1. Register in a section for displaying
6 | * 2. Widget is pulled down
7 | * 3. addWidget called on screenManager
8 | * 4. screenManager calls widget.init
9 | * 5. widget.setData is called by widget.init
10 | * 6. widget.initialized is toggled
11 | * 7. widget.ready is called by widget.init
12 | * 8. widget.render is called by widget.init
13 | * 9. widget.fetch is called by widget.render
14 | * 10. widget.postRender is called by widget.render
15 | * 11. widget.subscribe is called by widget.init
16 | */
17 |
18 | window.widgetRoot = {
19 | hideLink: false,
20 | hideRefresh: false,
21 |
22 | initialized: false,
23 |
24 | ready: function() {
25 | this.render();
26 | },
27 |
28 | setData: function(data) {
29 | this.data = data;
30 | },
31 |
32 | fetch: function() {
33 | this.postFetch();
34 | },
35 |
36 | postFetch: function() { },
37 |
38 | subscribe: function() { },
39 |
40 | init: function(data) {
41 | Dashboard.Utils.emit('widget|init|' + this.name);
42 |
43 | if (data) {
44 | this.setData(data);
45 | }
46 |
47 | this.shell = Dashboard.TEMPLATES.widget({
48 | name: this.name,
49 | title: this.title,
50 | size: this.size,
51 | hideLink: this.hideLink,
52 | hideRefresh: this.hideRefresh,
53 | customButtons: this.customButtons
54 | });
55 |
56 | this.initialized = true;
57 |
58 | Dashboard.Utils.emit('widget|ready|' + this.name);
59 |
60 | this.ready();
61 |
62 | Dashboard.Utils.emit('widget|render|' + this.name);
63 |
64 | this.subscribe();
65 | },
66 |
67 | render: function() {
68 | Dashboard.render.widget(this.name, this.shell.tpl);
69 |
70 | this.fetch();
71 |
72 | $('#widget-' + this.shell.id).css({
73 | 'height': '240px',
74 | 'margin-bottom': '10px',
75 | 'overflow-x': 'hidden',
76 | 'width': '100%'
77 | });
78 |
79 | this.postRender();
80 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
81 | },
82 |
83 | refresh: function() {
84 |
85 | },
86 |
87 | postRender: function() { },
88 | };
89 |
--------------------------------------------------------------------------------
/samples/widget-template.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | widget = function() {
4 | var extended = {
5 | name: 'widget-id',
6 | title: 'Widget Name That Appears on it',
7 | size: 'small', // 'small', 'medium', 'large', 'third'
8 |
9 | url: 'api/block/test',
10 | topic: '/topic/block',
11 |
12 | hideLink: true,
13 | hideRefresh: true,
14 |
15 | initialized: false,
16 |
17 | template: _.template(''),
23 |
24 | ready: function() {
25 | this.render();
26 | },
27 |
28 | setData: function(data) {
29 | this.data = data;
30 | },
31 |
32 | fetch: function() {
33 | this.postFetch();
34 | },
35 |
36 | postFetch: function() { },
37 |
38 | subscribe: function() { },
39 |
40 | init: function(data) {
41 | Dashboard.Utils.emit('widget|init|' + this.name);
42 |
43 | if (data) {
44 | this.setData(data);
45 | }
46 |
47 | this.shell = Dashboard.TEMPLATES.widget({
48 | name: this.name,
49 | title: this.title,
50 | size: this.size,
51 | hideLink: this.hideLink,
52 | hideRefresh: this.hideRefresh,
53 | customButtons: this.customButtons
54 | });
55 |
56 | this.initialized = true;
57 |
58 | Dashboard.Utils.emit('widget|ready|' + this.name);
59 |
60 | this.ready();
61 |
62 | Dashboard.Utils.emit('widget|render|' + this.name);
63 |
64 | this.subscribe();
65 | },
66 |
67 | render: function() {
68 | Dashboard.render.widget(this.name, this.shell.tpl);
69 |
70 | this.fetch();
71 |
72 | $('#widget-' + this.shell.id).css({
73 | 'height': '240px',
74 | 'margin-bottom': '10px',
75 | 'overflow-x': 'hidden',
76 | 'width': '100%'
77 | });
78 |
79 | this.postRender();
80 | $(document).trigger("WidgetInternalEvent", ["widget|rendered|" + this.name]);
81 | },
82 |
83 | postRender: function() { // executed when placing on screen
84 | $('#widget-' + this.shell.id).html(this.template({}));
85 | $('#widget-' + this.shell.id + ' button').click(this._handler);
86 | },
87 |
88 | };
89 |
90 |
91 | var widget = _.extend({}, widgetRoot, extended);
92 |
93 | // register presence with screen manager
94 | Dashboard.addWidget(widget);
95 | };
96 |
--------------------------------------------------------------------------------
/jif-landing-page/css/prism.css:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
2 | /**
3 | * okaidia theme for JavaScript, CSS and HTML
4 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/
5 | * @author ocodia
6 | */
7 |
8 | code[class*="language-"],
9 | pre[class*="language-"] {
10 | color: #f8f8f2;
11 | background: none;
12 | text-shadow: 0 1px rgba(0, 0, 0, 0.3);
13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 |
21 | -moz-tab-size: 4;
22 | -o-tab-size: 4;
23 | tab-size: 4;
24 |
25 | -webkit-hyphens: none;
26 | -moz-hyphens: none;
27 | -ms-hyphens: none;
28 | hyphens: none;
29 | }
30 |
31 | /* Code blocks */
32 | pre[class*="language-"] {
33 | padding: 1em;
34 | margin: .5em 0;
35 | overflow: auto;
36 | border-radius: 0.3em;
37 | }
38 |
39 | :not(pre) > code[class*="language-"],
40 | pre[class*="language-"] {
41 | background: #272822;
42 | }
43 |
44 | /* Inline code */
45 | :not(pre) > code[class*="language-"] {
46 | padding: .1em;
47 | border-radius: .3em;
48 | white-space: normal;
49 | }
50 |
51 | .token.comment,
52 | .token.prolog,
53 | .token.doctype,
54 | .token.cdata {
55 | color: slategray;
56 | }
57 |
58 | .token.punctuation {
59 | color: #f8f8f2;
60 | }
61 |
62 | .namespace {
63 | opacity: .7;
64 | }
65 |
66 | .token.property,
67 | .token.tag,
68 | .token.constant,
69 | .token.symbol,
70 | .token.deleted {
71 | color: #f92672;
72 | }
73 |
74 | .token.boolean,
75 | .token.number {
76 | color: #ae81ff;
77 | }
78 |
79 | .token.selector,
80 | .token.attr-name,
81 | .token.string,
82 | .token.char,
83 | .token.builtin,
84 | .token.inserted {
85 | color: #a6e22e;
86 | }
87 |
88 | .token.operator,
89 | .token.entity,
90 | .token.url,
91 | .language-css .token.string,
92 | .style .token.string,
93 | .token.variable {
94 | color: #f8f8f2;
95 | }
96 |
97 | .token.atrule,
98 | .token.attr-value,
99 | .token.function {
100 | color: #e6db74;
101 | }
102 |
103 | .token.keyword {
104 | color: #66d9ef;
105 | }
106 |
107 | .token.regex,
108 | .token.important {
109 | color: #fd971f;
110 | }
111 |
112 | .token.important,
113 | .token.bold {
114 | font-weight: bold;
115 | }
116 | .token.italic {
117 | font-style: italic;
118 | }
119 |
120 | .token.entity {
121 | cursor: help;
122 | }
123 |
124 |
--------------------------------------------------------------------------------
/widget-root.js:
--------------------------------------------------------------------------------
1 | /*
2 | Loading Flow
3 | ------------
4 | 1. Add widget to a section for displaying
5 | 2. Widget is registered
6 | 3. addWidget in dashboard-core is called from the widget
7 | 4. Dashboard calls widget.init
8 | 5. widget.setData is called by widget.init
9 | 6. widget.ready is called by widget.init
10 | 7. widget.render is called by widget.init
11 | 8. widget.fetch is called by widget.render
12 | 9. widget.postRender is called by widget.render
13 | 10. widget.subscribe is called by widget.init
14 | */
15 |
16 | window.widgetRoot = {
17 | hideLink: false,
18 | hideRefresh: false,
19 | refreshOnStart: false,
20 |
21 | initialized: false,
22 |
23 | ready: function() {
24 | this.render();
25 | },
26 |
27 | setData: function(data) {
28 | this.data = data;
29 | },
30 |
31 | fetch: function() {
32 | this.postFetch();
33 | },
34 |
35 | postFetch: function() { },
36 |
37 | subscribe: function() { },
38 |
39 | init: function(data) {
40 | Dashboard.Utils.emit('widget|init|' + this.name);
41 |
42 | if (data) {
43 | this.setData(data);
44 | }
45 |
46 | this.shell = Dashboard.TEMPLATES.widget({
47 | name: this.name,
48 | title: this.title,
49 | size: this.size,
50 | hideLink: this.hideLink,
51 | hideRefresh: this.hideRefresh,
52 | customButtons: this.customButtons
53 | });
54 |
55 | this.initialized = true;
56 |
57 | Dashboard.Utils.emit('widget|ready|' + this.name);
58 |
59 | this.ready();
60 |
61 | Dashboard.Utils.emit('widget|render|' + this.name);
62 |
63 | this.subscribe();
64 |
65 | // Tag the widget with appropriate service
66 | if(data.service) {
67 | $('#widget-shell-' + this.shell.id).data('service', data.service);
68 | } else {
69 | $('#widget-shell-' + this.shell.id).data('service', '_common');
70 | }
71 | },
72 |
73 | render: function() {
74 | Dashboard.render.widget(this.name, this.shell.tpl);
75 |
76 | this.fetch();
77 |
78 | $('#widget-' + this.shell.id).css({
79 | 'height': '240px',
80 | 'margin-bottom': '10px',
81 | 'overflow-x': 'hidden',
82 | 'width': '100%'
83 | });
84 |
85 | this.postRender();
86 | $(document).trigger('WidgetInternalEvent', ['widget|rendered|' + this.name]);
87 | },
88 |
89 | _$: function(id) {
90 | if (id !== undefined) {
91 | return $('#widget-' + this.shell.id).find(id);
92 | } else {
93 | return $('#widget-' + this.shell.id);
94 | }
95 | },
96 |
97 | postRender: function() { },
98 |
99 | refresh: _.debounce(function() {
100 | this.fetch();
101 | }, 100),
102 | };
103 |
--------------------------------------------------------------------------------
/docs/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Sample // Dashboard
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
40 |
41 |
42 |
43 |
61 |
62 |
63 |
64 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/samples/cakeshop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Sample // Dashboard
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
40 |
41 |
42 |
43 |
61 |
62 |
63 |
64 |
77 |
78 |
79 |
80 | Cakeshop // Dashboard
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
41 |
42 |
43 |
44 |
98 |
99 |
100 |
101 |
102 |
103 |
159 |
160 |
161 |
162 | JIF Dashboard
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
35 |
60 |
61 |
62 |
63 |
69 |
70 |
71 |
72 |
73 |
85 |
86 |
87 |
88 |
113 |
114 |
115 |
116 |
140 |
141 |
142 |
143 |
144 |
181 |
182 |
183 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
259 |
260 |
261 |
--------------------------------------------------------------------------------
/jif-landing-page/js/prism.js:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,A=m,P=y,x=r.length;x>A&&_>P;++A)P+=r[A].length,w>=P&&(++m,y=P);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,P),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,O=v.slice(0,w),S=v.slice(_),j=[m,k];O&&j.push(O);var N=new a(l,g?n.tokenize(b,g):b,d,b,h);j.push(N),S&&j.push(S),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JIF Dashboard
2 | A dashboard framework to quickly build widget-based dashboards with.
3 |
4 | Supports sections built out of widgets using a packery grid. Check out the `Samples` folder for a starting template.
5 |
6 | ## Demo
7 | [See live demo here](https://jpmorganchase.github.io/jif-dashboard/demo/)
8 |
9 | ## Quickstart
10 | Using npm and webpack
11 |
12 | ### npm
13 | Add jif-dashboard and dependencies to the `package.json` file:
14 |
15 | ```JSON
16 | "dependencies": {
17 | "jquery": "^3.0.0",
18 | "jquery-ui-dist": "^1.12.1",
19 | "jif-dashboard": "^1.0.0",
20 | }
21 | ```
22 |
23 | ### Webpack
24 | Import the files into CSS and JS files:
25 |
26 | For example, in `index.js`
27 | ```javascript
28 | // must have css loader
29 | import 'jif-dashboard/dashboard.css'
30 |
31 | import 'jif-dashboard/dashboard-core'
32 | import 'jif-dashboard/dashboard-util'
33 | import 'jif-dashboard/dashboard-template'
34 | ```
35 |
36 | If you would like to use a loader such as babel, include jif-dashboard in `webpack.config.js`. Add appropriate dependencies in `package.json`.
37 |
38 | module:{
39 | loaders:[
40 | {
41 | ...
42 | include: [
43 | path.resolve(__dirname, "node_modules/jif-dashboard")
44 | ],
45 | loader: 'babel',
46 | ...
47 | }
48 | ]
49 | }
50 |
51 | JIF has several front styling dependencies:
52 |
53 | ```HTML
54 |
55 |
56 |
57 | ```
58 |
59 | ## How to Use
60 |
61 | ### General Flow
62 |
63 | #### Initialize the grid
64 | Set [Options](#options) and initialize the Dashboard grid with a call to `Dashboard.init()`. This creates the grid that makes up the core of the Dashboard.
65 |
66 | #### Add a widget
67 | Create a widget and pre-register any widgets you want with `Dashboard.preregisterWidgets()`. Further details on widget creation and registration are provided in the [Widgets](#widgets) section.
68 |
69 | #### Create a section
70 | Make a new section and add widgets to it. A more detailed overview is in [Sections](#sections).
71 |
72 | ### Widgets
73 | Widgets hold the content of the dashboard. They have various sizes and have the option of being draggable and resizable. They also have various controls: links, refresh, close, and minimize.
74 |
75 | #### `widget-root.js`
76 | It is highly recommended that your widgets extend `widget-root.js`. As seen in the sample app, it is very helpful in helping widgets load smoothly. It provides a structure to your widgets, and any of its methods can be overridden. Place it in the same directory as your widgets.
77 |
78 | #### Creating a Widget
79 | Make a new directory called `widgets` to hold your widgets. The path should be `js/widgets/`. If you need to use a different path, override the Dashboard.registerWidget function.
80 |
81 | Create a widget using `widget-template.js` in `/samples` for reference. The widget filename should be the same as `widgetId`. For example, a widget with an id of widget1 should be in a file named `widget1.js`. There is also another reference id `name`. If this value is not set in widgets, then it will be set to `widgetId`. This represents the internals of the widget - such as tables, charts, input fields, or anything else that represents your data.
82 |
83 | The outer shell of widgets is created by `dashboard-template.js` and accessed through the `init()` function in each widget. Options are passed with `Dashboard.TEMPLATES.widget()`, such as name, title, and size. The `widget-shell-id`, a randomly generated id number for internal widget handling. The template can be overridden with a custom template by creating a new file and setting `Dashboard.TEMPLATES = require('custom-template.js');`.
84 |
85 | You may explicitly register the widgets or leave it to be dynamically loaded by [section](#sections).
86 |
87 | **To register the widget yourself**:
88 |
89 | ```javascript
90 | // a file such as index.js
91 |
92 | Dashboard.preregisterWidgets({
93 | 'widget1' : require('./widgets/widget1'),
94 | 'widget2' : require('./widgets/widget2'),
95 | 'widget3' : require('./widgets/widget3'),
96 | // etc
97 | });
98 | ```
99 |
100 | #### Widget Options
101 |
102 | **title**: (string) The title to be displayed for the widget.
103 |
104 | **size**: (string) In order of increasing size - 'small', 'third', 'medium', or 'large'. The default is small.
105 |
106 | **customButtons**: (string html) Use this to add custom html buttons to the header of the widget. The default is an empty string.
107 |
108 | **hideLink**: (boolean) Whether or not a link icon will show up on the header of the widget. Clicking the link icon will copy a link to the widget to the clipboard. The default is false.
109 |
110 | **hideRefresh**: (boolean) Whether a refresh icon will show up on the widget header. Clicking the icon will cause the widget to refresh by fetching. The default is false.
111 |
112 | **refreshOnStart**: (boolean) Whether the widget will refresh after it is loaded. This option is helpful if resize and storage are on and you have something in the widget body whose size depends on the widget, as it will ensure that everything is sized correctly.
113 |
114 | **name**: (string) This is used internally and must be unique.
115 |
116 | **widgetId**: (string) If you do not set a name, then you must have a widgetId. This can be set or passed through when registering widgets.
117 |
118 | ```javascript
119 | // widget1.js
120 |
121 | module.exports = function(id) {
122 | var extended = {
123 | widgetId: id, // id is passed from registering widget
124 | name: 'mywidget',
125 | title: 'My Widget',
126 | size: 'medium',
127 | hideLink: true,
128 | hidRefresh: false,
129 | customButtons: '
65 |
76 |
66 |
67 | Console
68 |
69 |
70 |
75 |
71 |
72 |
73 |
74 | 81 | 82 | 83 |
84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /dashboard.css: -------------------------------------------------------------------------------- 1 | /*@import url('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'); 2 | @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 3 | @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');*/ 4 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 5 | 6 | .panel { 7 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 8 | border-radius: 0 !important; 9 | position: relative; 10 | /*-webkit-transition: all .2s linear;*/ 11 | } 12 | 13 | .panel-close { 14 | -webkit-transform: scale3d(0, 0, 0); 15 | transform: scale3d(0, 0, 0); 16 | } 17 | 18 | .panel-body { 19 | position: relative; 20 | height: 250px; 21 | } 22 | 23 | .panel-heading { 24 | background: white !important; 25 | border-radius: 0; 26 | padding: 15px; 27 | border-bottom: 0 !important; 28 | } 29 | 30 | .panel-heading .panel-title { 31 | font-family: 'Roboto Condensed', "Helvetica Neue", Helvetica, Arial, sans-serif; 32 | text-transform: uppercase; 33 | font-weight: 600; 34 | font-size: 13px; 35 | color: #515d6e; 36 | 37 | width: 85%; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | overflow: hidden; 41 | } 42 | 43 | .overlay { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | right: 0; 48 | bottom: 0; 49 | z-index: 1001; 50 | background: rgba(255, 255, 255, 0.75); 51 | text-align: center; 52 | } 53 | 54 | .overlay:before { 55 | content: ""; 56 | height: 100%; 57 | vertical-align: middle; 58 | width: 1px; 59 | display: inline-block; 60 | margin-left: -5px; 61 | } 62 | 63 | .overlay .overlay-content { 64 | display: inline-block; 65 | vertical-align: middle; 66 | } 67 | 68 | .overlay i { 69 | display: block; 70 | position: inline-block; 71 | vertical-align: middle; 72 | color: black; 73 | } 74 | 75 | .panel-action { 76 | list-style: none; 77 | display: inline-block; 78 | float: right; 79 | font-size: 13px; 80 | margin-top: -15px; 81 | } 82 | 83 | .panel-action li { 84 | display: inline-block; 85 | color: #515d6e; 86 | margin: 0 5px; 87 | cursor: pointer; 88 | } 89 | 90 | .is-dragging, .is-positioning-post-drag { 91 | z-index: 200; /* keep dragged item on top */ 92 | } 93 | 94 | .packery-drop-placeholder { 95 | z-index: 0; 96 | outline: 3px dashed #CCC; 97 | outline-offset: -15px; 98 | transition: transform 0.2s; 99 | } 100 | 101 | .ui-draggable-dragging { 102 | z-index: 2; 103 | } 104 | 105 | 106 | .ui-resizable-handle { 107 | right: 12px; 108 | z-index: 90; 109 | bottom: 17px; 110 | opacity: 0.1; 111 | } 112 | 113 | .ui-resizable-handle:hover { 114 | opacity: 1; 115 | } 116 | 117 | .widget-collapse { 118 | height: 45px !important; 119 | margin-bottom: 18px; 120 | } 121 | 122 | .back-panel-collapse { 123 | height: 45px !important; 124 | margin-bottom: 18px; 125 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; 126 | overflow: hidden; 127 | } 128 | -------------------------------------------------------------------------------- /docs/demo/js/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap'; 2 | import 'd3'; 3 | import 'jquery-ui'; 4 | import moment from 'moment'; 5 | 6 | 7 | import 'jif-dashboard/dashboard.css'; 8 | 9 | import 'jif-dashboard/dashboard-core'; 10 | import 'jif-dashboard/dashboard-util'; 11 | import 'jif-dashboard/dashboard-template'; 12 | 13 | // import this first because it sets a global all the rest of the widgets need 14 | import './widgets/widget-root'; 15 | 16 | 17 | window.Tower = { 18 | ready: false, 19 | current: null, 20 | status: {}, 21 | 22 | // Tower Control becomes ready only after the first status is received from the server 23 | isReady: function() { 24 | Tower.ready = true; 25 | 26 | // let everyone listening in know 27 | Dashboard.Utils.emit('tower-control|ready|true'); 28 | 29 | return true; 30 | }, 31 | 32 | 33 | init: function() { 34 | //set options for the Dashboard 35 | Dashboard.setOptions({ 36 | 'appName': 'sample-dashboard' 37 | }); 38 | 39 | //initialize the Dashboard, set up widget container 40 | Dashboard.init() 41 | 42 | Dashboard.preregisterWidgets({ 43 | 'info': require('./widgets/info'), 44 | 'form': require('./widgets/form'), 45 | 'misc': require('./widgets/misc'), 46 | 'date': require('./widgets/date'), 47 | 'controls': require('./widgets/controls'), 48 | 'weather': require('./widgets/weather') 49 | }); 50 | 51 | //open first section - console 52 | Tower.section['console'](); 53 | }, 54 | 55 | //define the sections 56 | section: { 57 | 'console': function() { 58 | // data that the widgets will use 59 | var data = { 60 | 'numUser': 4, 61 | 'appName': 'sample app', 62 | 'url': 'hello.com', 63 | 'description': 'this is a description of the app.' 64 | } 65 | 66 | // the array of widgets that belong to the section, 67 | // these were preregistered in init() because they are unique 68 | var widgets = [ 69 | { widgetId: 'date' }, 70 | { widgetId: 'controls' }, 71 | { widgetId: 'weather' }, 72 | { widgetId: 'info' , data: data}, //data can be passed in 73 | { widgetId: 'form' }, 74 | { widgetId: 'misc' }, 75 | ]; 76 | 77 | // opens the section and pass in the widgets that it needs 78 | Dashboard.showSection('console', widgets); 79 | }, 80 | 81 | // a section using same widget template for multiple widgets 82 | 'users': function() { 83 | // define the data 84 | var userlist = { 85 | 'user1': { 86 | 'name' : 'Admin', 87 | 'role' : 'admin', 88 | 'id' : 123 89 | }, 90 | 'user2': { 91 | 'name' : 'Developer', 92 | 'role' : 'developer', 93 | 'id' : 456 94 | }, 95 | 'user3': { 96 | 'name' : 'Data Scientist', 97 | 'role' : 'data scientist', 98 | 'id' : 789 99 | }, 100 | 'user4': { 101 | 'name' : 'QA', 102 | 'role' : 'qa', 103 | 'id' : 101 104 | } 105 | } 106 | 107 | var widgets = []; 108 | // iterate over the data, creating a new widget for each item 109 | _.each(userlist, function(user, key) { 110 | var widget = {}; 111 | widget[key + '-user'] = require('./widgets/user.js'); 112 | Dashboard.preregisterWidgets(widget); 113 | 114 | widgets = widgets.concat([{ 115 | widgetId: key + '-user', 116 | data: user 117 | }]) 118 | }) 119 | 120 | Dashboard.showSection('users', widgets); 121 | } 122 | } 123 | }; 124 | 125 | 126 | 127 | $(function() { 128 | $(window).on('scroll', function(e) { 129 | if ($(window).scrollTop() > 50) { 130 | $('body').addClass('sticky'); 131 | } else { 132 | $('body').removeClass('sticky'); 133 | } 134 | }); 135 | 136 | // Resetting dashboard 137 | $('#reset').on('click', function() { 138 | Dashboard.reset(); 139 | }) 140 | 141 | // Navigation menu handler 142 | $('.tower-sidebar li').click(function(e) { 143 | var id = $(this).attr('id'); 144 | 145 | e.preventDefault(); 146 | 147 | Tower.current = id; 148 | 149 | $('.tower-sidebar li').removeClass('active'); 150 | $(this).addClass('active'); 151 | 152 | Tower.section[Tower.current](); 153 | 154 | $('.tower-page-title').html( $('', { html: $(this).find('.tower-sidebar-item').html() }) ); 155 | }); 156 | 157 | // ---------- INIT ----------- 158 | Tower.init(); 159 | 160 | // Setting 'Console' as first section 161 | $('.tower-sidebar li').first().click(); 162 | }); 163 | -------------------------------------------------------------------------------- /samples/cakeshop/js/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap'; 2 | import 'd3'; 3 | import 'jquery-ui'; 4 | import moment from 'moment'; 5 | 6 | import 'dashboard-framework/dashboard-core'; 7 | import 'dashboard-framework/dashboard-util'; 8 | import 'dashboard-framework/dashboard-template'; 9 | 10 | // import this first because it sets a global all the rest of the widgets need 11 | import './widgets/widget-root'; 12 | 13 | window.Tower = { 14 | ready: false, 15 | current: null, 16 | status: {}, 17 | 18 | // Tower Control becomes ready only after the first status is received from the server 19 | isReady: function() { 20 | Tower.ready = true; 21 | 22 | // let everyone listening in know 23 | Dashboard.Utils.emit('tower-control|ready|true'); 24 | 25 | return true; 26 | }, 27 | 28 | 29 | init: function() { 30 | //set options for the Dashboard 31 | Dashboard.setOptions({ 32 | 'appName': 'sample-dashboard' 33 | }); 34 | 35 | //initialize the Dashboard, set up widget container 36 | Dashboard.init() 37 | 38 | Dashboard.preregisterWidgets({ 39 | 'info' : require('./widgets/info'), 40 | 'form' : require('./widgets/form'), 41 | 'misc' : require('./widgets/misc'), 42 | 'date' : require('./widgets/date'), 43 | 'controls' : require('./widgets/controls'), 44 | 'weather' : require('./widgets/weather') 45 | }); 46 | 47 | //open first section - console 48 | Tower.section['console'](); 49 | }, 50 | 51 | //define the sections 52 | section: { 53 | 'console': function() { 54 | // data that the widgets will use 55 | var data = { 56 | 'numUser': 4, 57 | 'appName': 'sample app', 58 | 'url': 'hello.com', 59 | 'description': 'this is a description of the app.' 60 | } 61 | 62 | // the array of widgets that belong to the section, 63 | // these were preregistered in init() because they are unique 64 | var widgets = [ 65 | { widgetId: 'date' }, 66 | { widgetId: 'controls' }, 67 | { widgetId: 'weather' }, 68 | { widgetId: 'info' , data: data}, //data can be passed in 69 | { widgetId: 'form' }, 70 | { widgetId: 'misc' }, 71 | ]; 72 | 73 | // opens the section and pass in the widgets that it needs 74 | Dashboard.showSection('console', widgets); 75 | }, 76 | 77 | // a section using same widget template for multiple widgets 78 | 'users': function() { 79 | 80 | // define the data 81 | var userlist = { 82 | 'user1': { 83 | 'name' : 'Admin', 84 | 'role' : 'admin', 85 | 'id' : 123 86 | }, 87 | 'user2': { 88 | 'name' : 'Developer', 89 | 'role' : 'developer', 90 | 'id' : 456 91 | }, 92 | 'user3': { 93 | 'name' : 'Data Scientist', 94 | 'role' : 'data scientist', 95 | 'id' : 789 96 | }, 97 | 'user4': { 98 | 'name' : 'QA', 99 | 'role' : 'qa', 100 | 'id' : 101 101 | } 102 | } 103 | 104 | var widgets = []; 105 | //iterate over the data, creating a new widget for each item 106 | _.each(userlist, function(user, key) { 107 | var widget = {}; 108 | widget[key + '-user'] = require('./widgets/user.js'); 109 | Dashboard.preregisterWidgets(widget); 110 | 111 | widgets = widgets.concat([{ 112 | widgetId: key + '-user', 113 | data: user 114 | }]) 115 | }) 116 | 117 | Dashboard.showSection('users', widgets); 118 | } 119 | }, 120 | 121 | 122 | debug: function(message) { 123 | var _ref; 124 | return typeof window !== 'undefined' && window !== null ? (_ref = window.console) !== null ? _ref.log(message) : void 0 : void 0; 125 | } 126 | }; 127 | 128 | 129 | 130 | $(function() { 131 | $(window).on('scroll', function(e) { 132 | if ($(window).scrollTop() > 50) { 133 | $('body').addClass('sticky'); 134 | } else { 135 | $('body').removeClass('sticky'); 136 | } 137 | }); 138 | 139 | // logo handler 140 | $("a.tower-logo").click(function(e) { 141 | e.preventDefault(); 142 | $("#console").click(); 143 | }); 144 | 145 | // Menu (burger) handler 146 | $('.tower-toggle-btn').on('click', function() { 147 | $('.tower-logo-container').toggleClass('tower-nav-min'); 148 | $('.tower-sidebar').toggleClass('tower-nav-min'); 149 | $('.tower-body-wrapper').toggleClass('tower-nav-min'); 150 | }); 151 | 152 | $('#reset').on('click', function() { 153 | Dashboard.reset(); 154 | }) 155 | 156 | // Navigation menu handler 157 | $('.tower-sidebar li').click(function(e) { 158 | var id = $(this).attr('id'); 159 | 160 | e.preventDefault(); 161 | 162 | Tower.current = id; 163 | 164 | $('.tower-sidebar li').removeClass('active'); 165 | $(this).addClass('active'); 166 | 167 | Tower.section[Tower.current](); 168 | 169 | $('.tower-page-title').html( $('', { html: $(this).find('.tower-sidebar-item').html() }) ); 170 | 171 | }); 172 | 173 | // ---------- INIT ----------- 174 | Tower.init(); 175 | 176 | // Setting 'Console' as first section 177 | $('.tower-sidebar li').first().click(); 178 | }); 179 | -------------------------------------------------------------------------------- /samples/cakeshop/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
104 |
158 |
105 |
106 | Console
107 |
108 |
109 |
157 |
110 |
151 |
152 |
111 |
119 |
120 |
112 |
113 | Node Status
114 |
115 | Refreshing
116 |
117 |
118 |
121 |
129 |
130 |
122 |
123 | Peers
124 |
125 | -
126 |
127 |
128 |
131 |
139 |
140 |
132 |
133 | Blocks
134 |
135 | -
136 |
137 |
138 |
141 |
149 |
150 |
142 |
143 | Queued Transactions
144 |
145 | -
146 |
147 |
148 |
153 |
154 |
155 |
156 | 163 | 164 | 165 |
166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /jif-landing-page/css/stylesheet.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Stylish Portfolio (http://startbootstrap.com/) 3 | * Copyright 2013-2016 Start Bootstrap 4 | * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) 5 | */ 6 | 7 | /* Global Styles */ 8 | 9 | html, 10 | body { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | 15 | body { 16 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; 17 | } 18 | 19 | p { 20 | font-size: 20px; 21 | } 22 | 23 | hr { 24 | width: 100px; 25 | } 26 | 27 | .text-vertical-center { 28 | display: table-cell; 29 | text-align: center; 30 | vertical-align: middle; 31 | } 32 | 33 | .text-vertical-center h1 { 34 | margin: 0; 35 | padding: 0; 36 | font-size: 9.5em; 37 | font-weight: 600; 38 | } 39 | 40 | .text-center h1 { 41 | margin: 0; 42 | padding: 0; 43 | font-size: 4.5em; 44 | font-weight: 600; 45 | } 46 | 47 | .docs-container h2 { 48 | margin: 0; 49 | padding: 0; 50 | font-size: 3.5em; 51 | font-weight: 500; 52 | margin-bottom: 15px; 53 | } 54 | 55 | .info-section { 56 | display: table; 57 | width: 100%; 58 | height: 400px; 59 | color: #fff; 60 | /*background: url(../img/callout.jpg) no-repeat center center scroll;*/ 61 | -webkit-background-size: cover; 62 | -moz-background-size: cover; 63 | background-size: cover; 64 | -o-background-size: cover; 65 | padding-top: 25px; 66 | padding-bottom: 25px; 67 | } 68 | 69 | .info-section h1 { 70 | margin: 0; 71 | padding: 0; 72 | font-size: 4.5em; 73 | font-weight: 600; 74 | } 75 | 76 | /* Custom Button Styles */ 77 | 78 | .btn-dark { 79 | border-radius: 0; 80 | color: #fff; 81 | background-color: rgba(0,0,0,0.4); 82 | } 83 | 84 | .btn-dark:hover, 85 | .btn-dark:focus, 86 | .btn-dark:active { 87 | color: #fff; 88 | background-color: rgba(0,0,0,0.7); 89 | } 90 | 91 | .btn-light { 92 | border-radius: 0; 93 | color: #333; 94 | background-color: rgb(255,255,255); 95 | } 96 | 97 | .btn-light:hover, 98 | .btn-light:focus, 99 | .btn-light:active { 100 | color: #333; 101 | background-color: rgba(255,255,255,0.8); 102 | } 103 | 104 | /* Custom Horizontal Rule */ 105 | 106 | hr.small { 107 | max-width: 100px; 108 | } 109 | 110 | .toggle { 111 | margin: 5px 5px 0 0; 112 | } 113 | 114 | /* Header */ 115 | 116 | .header { 117 | display: table; 118 | position: relative; 119 | width: 100%; 120 | height: 100%; 121 | /*background: url(../img/bg.jpg) no-repeat center center scroll;*/ 122 | background-color: #1b435b; 123 | color: white; 124 | -webkit-background-size: cover; 125 | -moz-background-size: cover; 126 | background-size: cover; 127 | -o-background-size: cover; 128 | } 129 | 130 | /* About */ 131 | 132 | .about { 133 | padding: 50px 0; 134 | } 135 | 136 | /* Services */ 137 | 138 | .services { 139 | padding: 50px 0; 140 | } 141 | 142 | .service-item { 143 | margin-bottom: 30px; 144 | } 145 | 146 | /* Callout */ 147 | 148 | #quickstart { 149 | display: table; 150 | width: 100%; 151 | height: 400px; 152 | color: #fff; 153 | background-color: #7d6969; 154 | /*background: url(../img/callout.jpg) no-repeat center center scroll;*/ 155 | -webkit-background-size: cover; 156 | -moz-background-size: cover; 157 | background-size: cover; 158 | -o-background-size: cover; 159 | padding-top: 25px; 160 | padding-bottom: 25px; 161 | } 162 | 163 | /* Portfolio */ 164 | 165 | #portfolio { 166 | background-color: #c6ccc7; 167 | } 168 | 169 | .portfolio { 170 | padding: 50px 0; 171 | } 172 | 173 | .portfolio-item { 174 | margin-bottom: 30px; 175 | } 176 | 177 | .img-portfolio { 178 | margin: 0 auto; 179 | } 180 | 181 | .img-portfolio:hover { 182 | opacity: 0.8; 183 | } 184 | 185 | /* Call to Action */ 186 | 187 | .call-to-action { 188 | padding: 50px 0; 189 | } 190 | 191 | .call-to-action .btn { 192 | margin: 10px; 193 | } 194 | 195 | /* Footer */ 196 | 197 | footer { 198 | padding: 100px 0; 199 | } 200 | 201 | #to-top { 202 | display: none; 203 | position: fixed; 204 | bottom: 5px; 205 | right: 5px; 206 | border-radius: 25px; 207 | } 208 | 209 | /* Code blocks */ 210 | pre { 211 | width: 100%; 212 | } 213 | 214 | code[class*="language-"], pre[class*="language-"] { 215 | tab-size: 1; 216 | } 217 | 218 | .center-code { 219 | margin: 0px 28%; 220 | } 221 | 222 | #getting-started { 223 | display: table; 224 | width: 100%; 225 | height: 400px; 226 | color: #fff; 227 | background: url(../img/callout.jpg) no-repeat center center scroll; 228 | -webkit-background-size: cover; 229 | -moz-background-size: cover; 230 | background-size: cover; 231 | -o-background-size: cover; 232 | padding-top: 25px; 233 | padding-bottom: 25px; 234 | } 235 | 236 | .docs-container { 237 | padding-left: 15%; 238 | padding-right: 15%; 239 | } 240 | 241 | .docs-container .center-code { 242 | margin: 0px 18%; 243 | } 244 | 245 | #docs-label { 246 | display: table; 247 | width: 100%; 248 | height: 200px; 249 | color: black; 250 | background-color: #fff; 251 | } 252 | 253 | .navbar-default { 254 | opacity: .5; 255 | transition: opacity .3s ease; 256 | } 257 | 258 | .navbar-default:hover { 259 | opacity: .8; 260 | transition: opacity .3s ease; 261 | } 262 | 263 | .navbar-inverse { 264 | background-color: #321b0f; 265 | } 266 | 267 | p code { 268 | background-color: rgba(249, 242, 244, 0.64); 269 | } 270 | #html-docs { 271 | background-color: #9898ce 272 | } 273 | 274 | #widget { 275 | background-color: #b7475b; 276 | } 277 | 278 | #section-docs { 279 | background-color: #8c9e87; 280 | } 281 | 282 | #options { 283 | background-color: #e8aeae; 284 | } 285 | 286 | #utils { 287 | background-color: #479889; 288 | } 289 | 290 | #links a { 291 | color: white; 292 | } 293 | 294 | .logo { 295 | height: 50px; 296 | } 297 | -------------------------------------------------------------------------------- /jif-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
74 |
83 |
84 |
75 |
81 |
82 |
76 |
78 |
80 | JIF is a dashboard framework to quickly build widget-based dashboards.
77 |78 |
It supports sections built out of widgets using a packery grid.
79 |
89 |
92 |
102 | 103 |
111 |
112 | Quickstart
90 |It's easy to get started with JIF through npm.
91 |92 |
Add dashboard-framework to your project's package.json file:
94 |
95 | "dependencies": {
96 | ...
97 | "jif-dashboard": "^1.0.0",
98 | ...
99 | }
100 |
101 | 102 | 103 |
Then import or require the JIF Dashboard files. For example, in index.js,
105 |
106 | import 'jif-dashboard/dashboard-core'
107 | import 'jif-dashboard/dashboard-util'
108 | import 'jif-dashboard/dashboard-template'
109 |
110 | 111 |
117 |
138 |
139 |
118 |
136 |
137 |
119 |
121 |
134 |
135 | Built with JIF Dashboard
120 |121 |
122 |
133 |
123 |
127 |
124 | 
125 |
126 |
125 |
128 |
132 |
129 | 
130 |
131 |
130 |
145 |
179 |
180 |
146 |
177 |
178 |
147 |
149 |
175 |
176 | Links
148 |149 |
150 |
173 |
174 |
151 |
161 |
152 |
153 |
154 |
155 |
156 |
160 | 157 | Documentation 158 |
159 |
162 |
172 |
163 |
164 |
165 |
166 |
167 |
171 |