Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-08 15:05:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

new composer window template (WIP!)

Browse Source
This commit is contained in:
Julian Lam
2013-12-17 23:42:02 -05:00
parent d86aefb518
commit f2d631e42d
3 changed files with 194 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/src/modules/composer.js
View File

@@ -112,32 +112,9 @@ define(['taskbar'], function(taskbar) {
composer.init = function() {
if (!composer.initialized) {
var taskbar = document.getElementById('taskbar');
composer.postContainer = document.createElement('div');
composer.postContainer.className = 'post-window row';
composer.postContainer.innerHTML = '<div class="col-md-5">' +
'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
'<div class="btn-toolbar formatting-bar">' +
'<div class="btn-group">' +
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>' +
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>' +
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
'</div>' +
'</div>' +
'<textarea tabIndex="2"></textarea>' +
'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
'<div class="btn-toolbar action-bar">' +
'<div class="btn-group" style="float: right; margin-right: -8px">' +
'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
'<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
'<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
'</div>' +
'</div>' +
'</div>';
document.body.insertBefore(composer.postContainer, taskbar);
templates.preload_template('composer', function() {
$(document.body).append(templates['composer'].parse({}));
composer.postContainer = $('.composer')[0];
if(config.imgurClientIDSet) {
initializeFileReader();
@@ -269,6 +246,33 @@ define(['taskbar'], function(taskbar) {
});
composer.initialized = true;
});
// var taskbar = document.getElementById('taskbar');
// composer.postContainer = document.createElement('div');
// composer.postContainer.className = 'post-window row';
// composer.postContainer.innerHTML = '<div class="col-md-5">' +
// '<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
// '<div class="btn-toolbar formatting-bar">' +
// '<div class="btn-group">' +
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>' +
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>' +
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
// '</div>' +
// '</div>' +
// '<textarea tabIndex="2"></textarea>' +
// '<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
// '<div class="btn-toolbar action-bar">' +
// '<div class="btn-group" style="float: right; margin-right: -8px">' +
// '<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
// '<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
// '<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
// '</div>' +
// '</div>' +
// '</div>';
// document.body.insertBefore(composer.postContainer, taskbar);
}
}

35
public/src/templates.js
View File

@@ -122,6 +122,27 @@
return '';
}
templates.preload_template = function(tpl_name, callback) {
// TODO: This should be "load_template", and the current load_template
// should be named something else
// TODO: The "Date.now()" in the line below is only there for development purposes.
// It should be removed at some point.
jQuery.get(RELATIVE_PATH + '/templates/' + tpl_name + '.tpl?v=' + Date.now(), function (html) {
var template = function () {
this.toString = function () {
return this.html;
};
}
template.prototype.parse = parse;
template.prototype.html = String(html);
template.prototype.blocks = {};
templates[tpl_name] = new template;
callback();
});
}
templates.load_template = function (callback, url, template) {
var location = document.location || window.location,
@@ -137,19 +158,7 @@
var timestamp = new Date().getTime(); //debug
if (!templates[tpl_url]) {
jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function (html) {
var template = function () {
this.toString = function () {
return this.html;
};
}
template.prototype.parse = parse;
template.prototype.html = String(html);
template.prototype.blocks = {};
templates[tpl_url] = new template;
templates.preload_template(tpl_url, function() {
parse_template();
});
} else {

22
public/templates/composer.tpl Normal file
View File

@@ -0,0 +1,22 @@
<div class="composer">
<input class="title" type="text" tabIndex="1" placeholder="Enter your topic title here..." />
<div class="btn-toolbar formatting-bar">
<div class="btn-group">
<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-italic"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>
<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>
</div>
<div class="btn btn-link pull-right">Preview</div>
</div>
<textarea tabIndex="2"></textarea>
<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
<div class="btn-toolbar action-bar">
<div class="btn-group pull-right">
<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>
<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
</div>
</div>
<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
</div>