448 lines
12 KiB
JavaScript
Executable File
448 lines
12 KiB
JavaScript
Executable File
|
|
Ox.ItfBoxCommented = function(options, self) {
|
|
var self = self || {};
|
|
var that = new Ox.Element(options, self)
|
|
.defaults({
|
|
'title': '',
|
|
'extraButtons': []
|
|
})
|
|
.options(options);
|
|
var title = self.options.title;
|
|
var $titlebar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: 18
|
|
})
|
|
// .dblclick(dblclickTitlebar)
|
|
.appendTo(that);
|
|
|
|
|
|
var $title = new Ox.Element()
|
|
.addClass('OxTitle')
|
|
.html(title/*.toUpperCase()*/)
|
|
.appendTo($titlebar);
|
|
|
|
|
|
var $search = new Ox.Input({
|
|
'placeholder': 'Search',
|
|
})
|
|
.css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'})
|
|
.appendTo(that)
|
|
.hide()
|
|
.bindEvent("submit", function(value) {
|
|
app.$ui[options.boxId].$loading.start();
|
|
$list.options("request", function(data, callback) {
|
|
app.$ui[options.boxId].$loading.stop();
|
|
return app.api.find(getQueryParams(data), callback);
|
|
});
|
|
});
|
|
|
|
|
|
that.search = function(word) {
|
|
$search.options("value", word);
|
|
$search.triggerEvent("submit");
|
|
}
|
|
|
|
var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '1px'});
|
|
|
|
|
|
|
|
var $additionalButtons = self.options.extraButtons;
|
|
if ($additionalButtons.length > 0) {
|
|
$additionalButtons.appendTo($buttons);
|
|
}
|
|
|
|
var $addBtn = new Ox.Button({
|
|
id: options.id + "AddItem",
|
|
style: 'symbol',
|
|
title: 'add',
|
|
type: 'image',
|
|
tooltip: 'Add'
|
|
})
|
|
.appendTo($buttons)
|
|
.bindEvent("click", function() {
|
|
app.$ui[options.boxId].$loading.start();
|
|
app.api.getAddItemForm({
|
|
'module': that.options("module"),
|
|
'model': that.options("model")
|
|
}, function(response) {
|
|
app.$ui[options.boxId].$loading.stop();
|
|
var form = response.data.form;
|
|
var $content = new Ox.Element();
|
|
var $items = [];
|
|
for (var i=0; i<form.length; i++) {
|
|
var field = form[i];
|
|
switch (field.widget) {
|
|
case 'select':
|
|
// alert(field.label);
|
|
var $input = new Ox.Select({
|
|
'items': field.choices,
|
|
'label': field.label,
|
|
'id': field.name,
|
|
'width': 256
|
|
});
|
|
//$items.push($input);
|
|
break;
|
|
|
|
case 'textarea':
|
|
var $input = new Ox.Input({
|
|
'type': field.widget,
|
|
'id': field.name,
|
|
'label': field.label,
|
|
'width': 384,
|
|
'height': 200,
|
|
'labelWidth': 128
|
|
});
|
|
$items.push($input);
|
|
break;
|
|
|
|
default:
|
|
// alert("default: " + field.label);
|
|
var $input = new Ox.Input({
|
|
'type': field.widget,
|
|
'id': field.name,
|
|
'label': field.label,
|
|
'labelWidth': 128,
|
|
'width': 384
|
|
});
|
|
$items.push($input);
|
|
}
|
|
// $items.push($input);
|
|
}
|
|
Ox.print("items", $items);
|
|
var $form = new Ox.Form({
|
|
'id': 'AddItem' + that.options("model"),
|
|
'items': $items,
|
|
'submit': function(data, callback) {
|
|
data['model'] = that.options("model");
|
|
data['module'] = that.options("module");
|
|
app.api.addItem(data, function(result) {
|
|
alert(JSON.stringify(result));
|
|
});
|
|
}
|
|
}).appendTo($content);
|
|
var d = new Ox.Dialog({
|
|
buttons: [
|
|
new Ox.Button({
|
|
'id': 'SubmitItem' + that.options("model"),
|
|
'size': 'medium',
|
|
'title': 'Submit'
|
|
}).bindEvent("click", function() { $form.submit(); }),
|
|
new Ox.Button({
|
|
'id': 'cancel',
|
|
'title': 'Cancel',
|
|
}).bindEvent("click", function() { d.close(); })
|
|
],
|
|
content: $content,
|
|
width: 600,
|
|
height: 500,
|
|
title: 'Add Best Practice'
|
|
}).open();
|
|
});
|
|
});
|
|
|
|
var $infoBtn = new Ox.Button({
|
|
id: options.id + "InfoBtn",
|
|
style: 'symbol',
|
|
title: 'info',
|
|
type: 'image',
|
|
tooltip: 'More info about ' + options.title
|
|
})
|
|
.appendTo($buttons)
|
|
.bindEvent("click", function() {
|
|
var info = options.info;
|
|
var d = new Ox.Dialog({
|
|
buttons: [
|
|
new Ox.Button({
|
|
id: 'cancel',
|
|
title: 'Close',
|
|
})
|
|
.bindEvent("click", function() { d.close(); })
|
|
],
|
|
content: new Ox.Element().html(info),
|
|
title: options.title
|
|
})
|
|
.open();
|
|
});
|
|
|
|
var $searchBtn = new Ox.Button({
|
|
id: options.id + 'SearchBtn',
|
|
style: 'symbol',
|
|
title: 'find',
|
|
type: 'image',
|
|
tooltip: 'Search'
|
|
})
|
|
.bindEvent("click", function() {
|
|
if ($search.is(":visible")) {
|
|
$search.slideUp();
|
|
} else {
|
|
$search.slideDown();
|
|
$search.focus();
|
|
}
|
|
})
|
|
.appendTo($buttons);
|
|
|
|
|
|
var $menuBtn = new Ox.Button({
|
|
id: options.id + 'MenuBtn',
|
|
style: 'symbol',
|
|
title: 'collapse',
|
|
type: 'image',
|
|
tooltip: 'Show Menu'
|
|
}).appendTo($buttons);
|
|
|
|
that.$loading = new Ox.LoadingIcon().appendTo($buttons);
|
|
|
|
var $menu = new Ox.Menu({
|
|
id: options.id + 'Menu',
|
|
element: $menuBtn,
|
|
items: [
|
|
{
|
|
id: 'SortBy',
|
|
title: 'Sort By',
|
|
items: [
|
|
{
|
|
'group': 'sortGroup',
|
|
'min': 1,
|
|
'max': 1,
|
|
items: [
|
|
{'id': 'sort_added_descending', title: 'Added (Descending)', checked: true},
|
|
{'id': 'sort_added_ascending', title: 'Added (Ascending)'},
|
|
{'id': 'sort_title_ascending', title: 'Title (Ascending)'},
|
|
{'id': 'sort_title_descending', title: 'Title (Descending)'},
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{id: 'Test2', title: 'Menu Item 2'}
|
|
]
|
|
})
|
|
.bindEvent("change", function(e, data) {
|
|
if (data.id === 'sortGroup') {
|
|
var checked = data.checked[0];
|
|
var checkedId = checked.id;
|
|
var checkedField = checkedId.split("_")[1];
|
|
var operator = checkedId.split("_")[2] == "ascending" ? "+" : "-";
|
|
$list.sortList(checkedField, operator);
|
|
}
|
|
});
|
|
|
|
// var $menu = new Ox.Menu({
|
|
// id: options.id + 'Menu',
|
|
// element: $menuBtn,
|
|
// items: [
|
|
// {
|
|
// 'group': 'sortGroup',
|
|
// 'min': 1,
|
|
// 'max': 1,
|
|
// items: [
|
|
// {'id': 'sortTitleAscending', title: 'Title (Ascending)', checked: true},
|
|
// {'id': 'sortTitleDescending', title: 'Title (Descending)'},
|
|
// {'id': 'sortTitleAscendingFoo', title: 'Title (Ascending)'},
|
|
// {'id': 'sortTitleDescendingFoo', title: 'Title (Descending)'},
|
|
// ]
|
|
// }
|
|
// ]
|
|
// },
|
|
// {id: 'Test2', title: 'Menu Item 2'}
|
|
// ]
|
|
// })
|
|
// .bindEvent("change", function() {
|
|
// alert("foo");
|
|
// });
|
|
|
|
//
|
|
|
|
$menuBtn.bindEvent("click", function() {
|
|
$menu.showMenu();
|
|
});
|
|
|
|
function getQueryParams(data) {
|
|
// Ox.print("SEARCHVAL", $search.val());
|
|
return $.extend(data, {
|
|
'search': $search.value() == 'Search' ? '' : $search.value(),
|
|
'model': options.model,
|
|
'module': options.module
|
|
});
|
|
}
|
|
|
|
var $listContainer = that.$listContainer = new Ox.Element()
|
|
.appendTo(that)
|
|
.css({position: 'relative', height: '90%'});
|
|
|
|
var listOptions = $.extend(options, {
|
|
'width': 256,
|
|
// 'itemHeight': 16,
|
|
// 'itemWidth': 250,
|
|
// 'orientation': 'horizontal',
|
|
'items': function(data, callback) {
|
|
return app.api.find(getQueryParams(data), callback)
|
|
},
|
|
'id': options.id + 'List',
|
|
'boxId': options.id,
|
|
|
|
|
|
/*
|
|
'construct': function(data) {
|
|
var $a = $('<a />').attr("href", "/" + options.module.toLowerCase() + "/" + data.id).text(data.title);
|
|
var $item = $('<div />').addClass('OxTarget').append($a);
|
|
return $item;
|
|
},
|
|
*/
|
|
'max': 1,
|
|
'columns': [
|
|
{
|
|
align: 'left',
|
|
id: 'title',
|
|
operator: '-',
|
|
unique: false,
|
|
visible: true,
|
|
width: 256
|
|
},
|
|
{
|
|
id: 'id',
|
|
visible: false,
|
|
unique: true
|
|
}
|
|
],
|
|
'sort': [
|
|
{
|
|
key: 'added',
|
|
operator: '-'
|
|
}
|
|
]
|
|
});
|
|
|
|
var $list = that.$list = new Ox.ItfList(listOptions)
|
|
.appendTo($listContainer);
|
|
|
|
return that;
|
|
}
|
|
|
|
|
|
/*
|
|
Ox.ItfList = function(options, self) {
|
|
var self = self || {};
|
|
var opts = $.extend({
|
|
'scrollbarVisible': true,
|
|
'hasComments': true
|
|
}, options);
|
|
var that = new Ox.TextList(opts, self);
|
|
that.bindEvent("select", function(e, data) {
|
|
if (data.ids.length === 0) {
|
|
app.$ui.previewBox.$content.html('');
|
|
return;
|
|
}
|
|
app.$ui[options.boxId].$loading.start();
|
|
// debugger;
|
|
app.api.preview({
|
|
model: opts.model,
|
|
module: opts.module,
|
|
id: data.ids[0]
|
|
}, function(response) {
|
|
// alert(JSON.stringify(response.data.data));
|
|
app.$ui[options.boxId].$loading.stop();
|
|
// var data = add_newlines(response['data']);
|
|
var html = $.tmpl(response['template'], response['data']);
|
|
app.$ui.previewBox.$content.html(html);
|
|
});
|
|
});
|
|
that.bindEvent("open", function(e, data) {
|
|
// alert(JSON.stringify(data));
|
|
app.$ui[opts.boxId].$loading.start();
|
|
app.api.info({
|
|
model: opts.model,
|
|
module: opts.module,
|
|
id: data.ids[0]
|
|
}, function(response) {
|
|
app.$ui[opts.boxId].$loading.stop();
|
|
var html = $.tmpl(response['template'], response['data']);
|
|
var content = new Ox.Element().append(html);
|
|
var commentForm = ITF.CommentForm(opts, response['commentForm']).appendTo(content);
|
|
var comments = _getComments(response['comments']).appendTo(content);
|
|
// alert(html);
|
|
var d = new Ox.Dialog({
|
|
buttons: [
|
|
new Ox.Button({
|
|
id: 'cancel',
|
|
title: 'Close',
|
|
})
|
|
.bindEvent("click", function() { d.close(); })
|
|
],
|
|
'content': content,
|
|
title: options.title + ": " + response.data.title,
|
|
width: 800,
|
|
height: 500
|
|
})
|
|
.open();
|
|
// alert(response);
|
|
});
|
|
});
|
|
return that;
|
|
}
|
|
*/
|
|
|
|
function _getComments(comments) {
|
|
var that = new Ox.Element().addClass("OxCommentsWrapper")
|
|
|
|
if (comments.length > 0) {
|
|
var title = new Ox.Element("h4").html("Comments:").appendTo(that);
|
|
for (var i=0; i<comments.length; i++) {
|
|
var comment = comments[i];
|
|
var $comment = new Ox.Element().addClass("OxCommentWrapper");
|
|
var $user = new Ox.Element().addClass("OxCommentsPostedBy").html("posted by " + comment.name).appendTo($comment);
|
|
var $commentBody = new Ox.Element().addClass("OxCommentBody").html("comment: " + comment.comment).appendTo($comment);
|
|
$comment.appendTo(that);
|
|
}
|
|
} else {
|
|
var $nocomments = new Ox.Element().addClass("OxNoComments").html("No comments on this yet..").appendTo(that);
|
|
}
|
|
return that;
|
|
}
|
|
|
|
Ox.ItfCalendar = function(options, self) {
|
|
var self = self || {};
|
|
var that = new Ox.Element(options, self);
|
|
var $titleBar = new Ox.Bar({
|
|
'size': 'small'
|
|
}).addClass('OxTitleBar').appendTo(that);
|
|
var $title = new Ox.Element().html("Calendar").appendTo($titleBar);
|
|
return that;
|
|
}
|
|
|
|
Ox.ItfPreview = function(options, self) {
|
|
var self = self || {};
|
|
var that = new Ox.Element(options, self);
|
|
that.$content = new Ox.Element().appendTo(that);
|
|
that.$loading = new Ox.LoadingIcon().appendTo(that);
|
|
return that;
|
|
}
|
|
|
|
ITF.CommentForm = function(options, formData) {
|
|
var that = new Ox.Element();
|
|
var title = new Ox.Element("h4").html("Add Comment:").appendTo(that);
|
|
var textarea = new Ox.Element("textarea")
|
|
.css({'width': '450px', 'height': '200px', 'display': 'block', 'marginBottom': '3px'})
|
|
.appendTo(that);
|
|
var submitBtn = new Ox.Button({
|
|
'id': 'commentFormSubmit',
|
|
'title': 'Submit',
|
|
'size': 'Large'
|
|
}).bindEvent("click", function() {
|
|
var data = $.extend({
|
|
'id': options.id,
|
|
'module': options.module,
|
|
'model': options.model,
|
|
'name': app.user.username,
|
|
'email': app.user.email,
|
|
'comment': textarea.val()
|
|
}, formData);
|
|
app.api.addComment(data, function(response) {
|
|
alert(JSON.stringify(response));
|
|
});
|
|
}).appendTo(that);
|
|
return that;
|
|
}
|
|
|
|
ITF.templates = {};
|
|
|