Office Addin web scripts complete, incl new workflow (review and adhoc only)

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5895 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Mike Hatfield
2007-06-08 15:48:16 +00:00
parent f3d67065bc
commit f95c3de04f
16 changed files with 826 additions and 151 deletions

View File

@@ -1,15 +1,12 @@
html, body {
height: 100%;
overflow: hidden;
body {
background: url("../images/office/view_bg.gif") top;
color: #0073e6;
font-family: tahoma, sans-serif;
font-size: 11px;
color: #0073e6;
background: url("../images/office/view_bg.gif") top;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
a {
@@ -40,6 +37,7 @@ a img {
display: inline;
margin: 0px;
padding: 0px;
height: 18px;
}
#tabBar a {
background: url("../images/office/tab_left.gif") no-repeat left top;
@@ -54,7 +52,6 @@ a img {
display: block;
float: none;
padding: 5px 15px 4px 6px;
height: 18px;
}
#tabBar a:hover span {
@@ -88,31 +85,41 @@ a img {
margin-top: -13px;
}
.listBig {
.containerBig {
clear: both;
float: left;
width: 282px;
height: 378px;
height: 373px;
overflow: auto;
border: 1px solid #cccccc;
margin: 0px 4px 0px 4px;
background: #fff;
}
.listMedium {
.containerMedium {
clear: both;
float: left;
width: 282px;
height: 204px;
height: 200px;
overflow: auto;
border: 1px solid #cccccc;
margin: 0px 4px 0px 4px;
background: #fff;
}
.containerSmall {
clear: both;
float: left;
width: 282px;
height: 76px;
overflow: auto;
border: 1px solid #cccccc;
margin: 0px 4px 0px 4px;
background: #fff;
}
.listMediumGrow {
.containerMediumGrow {
height: 354px !important;
}
.listMediumShrink {
.containerMediumShrink {
height: 54px !important;
}
@@ -146,7 +153,7 @@ TABLE, TR, TD {
ul {
margin: 0px;
list-style: none;
padding: 2px 0px 0px 4px;
padding: 2px 0px 0px 24px;
}
#documentActions {
@@ -158,6 +165,14 @@ ul {
height: 150px;
width: 282px;
}
#documentActions li a {
font-weight: bold;
margin: 0px 0px 0px -22px;
}
#documentActions li a img {
margin: 0px 0px -2px 0px;
padding: 0px 3px 0px 0px;
}
#documentActionsNavigation {
clear: both;
@@ -168,13 +183,17 @@ ul {
height: 106px;
width: 282px;
}
#nonStatusText {
min-height: 100%;
position: relative;
#documentActionsNavigation li a {
font-weight: bold;
margin: 0px 0px 0px -22px;
}
#documentActionsNavigation li a img {
margin: 0px 0px -2px 0px;
padding: 0px 3px 0px 0px;
}
#searchResultsList {
#nonStatusText {
min-height: 100%;
position: relative;
}
@@ -189,25 +208,36 @@ ul {
width: 278px;
}
#search {
clear: both;
.searchBox {
padding: 2px;
}
.searchParam {
float: left;
width: 282px;
border: 1px solid #cccccc;
margin: 0px 4px;
background: #fff;
padding: 2px;
}
#searchText {
font-family: tahoma, sans-serif;
font-size: 8pt;
padding: 1px 0px 1px 2px;
width: 160px;
}
#searchResultsList {
overflow: hidden;
}
input.button {
background-color: #cce6ff;
border: 1px solid #0073e6;
color: #0073e6;
font-size: 11px;
font-weight: bold;
background-color: #cce6ff;
border: 1px solid #0073e6;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#6fb7ff');
cursor: pointer;
margin-left: 6px;
padding: 1px 4px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#cce6ff');
}
#taskDetails {
@@ -230,16 +260,16 @@ input.button {
}
.taskAction {
background-color: #cce6ff;
border: 1px solid #0073e6;
color: #0073e6;
float: left;
font-size: 11px;
font-weight: bold;
background-color: #cce6ff;
border: 1px solid #0073e6;
cursor: pointer;
margin: 0px 0px 0px 2px;
padding: 4px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#6fb7ff');
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#cce6ff');
}
.taskParameters {
@@ -252,19 +282,24 @@ input.button {
.taskParam {
clear: both;
float: left;
padding: 2px 0px 0px 4px;
padding: 4px 4px 0px 0px;
text-align: right;
width: 64px;
}
.taskValue {
float: left;
padding: 2px 0px 0px 0px;
width: 164px;
width: 196px;
}
#ajxUser {
float: left;
margin: 2px;
.taskValue img {
margin: 0px 0px -2px -2px;
}
.taskValue select, .taskValue input, .taskValue textarea {
font-family: tahoma, sans-serif;
font-size: 8pt;
padding: 1px 0px 1px 2px;
width: 172px;
}
/* Autocomplete pop-up */
@@ -276,8 +311,6 @@ ul.autocompleter-choices
list-style: none;
border: 1px solid #ccc;
background-color: white;
border-right-color: #ddd;
border-bottom-color: #ddd;
text-align: left;
z-index: 50;
}
@@ -285,7 +318,7 @@ ul.autocompleter-choices
ul.autocompleter-choices li
{
position: relative;
padding: 0.1em 1.5em 0.1em 1em;
padding: 0.1em 0.5em 0.1em 1em;
cursor: pointer;
font-weight: normal;
font-size: 1em;
@@ -293,8 +326,8 @@ ul.autocompleter-choices li
ul.autocompleter-choices li.autocompleter-selected
{
background-color: #444;
color: #fff;
background-color: #eee;
border: 1px solid #ccc;
}
ul.autocompleter-choices span.autocompleter-queried
@@ -304,5 +337,99 @@ ul.autocompleter-choices span.autocompleter-queried
ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried
{
color: #9FCFFF;
color: #9FCFFF;
}
/* Date Picker */
#date-picker {
margin-top: 3px;
position: absolute;
top: -1000px;
left: 1000px;
visibility: hidden;
}
#date-wrapper {
font-weight: normal !important;
font-size: 11px !important;
margin: 0px 1px;
}
#date-wrapper .date-table {
padding: 0px;
margin: 0px;
border: 1px solid #666;
border-collapse: collapse;
}
#date-wrapper .date-table th, #date-wrapper .date-table td {
background-color: #fff;
padding: 3px 5px;
text-align: center;
border: 1px solid #c0c0c0;
}
#date-wrapper .date-table td {
background-color: #f8f8f8;
padding: 3px;
}
#date-wrapper .date-table td.date-monthswitch, #date-wrapper .date-table td.date-yearswitch {
cursor: pointer;
padding: 1px;
}
#date-wrapper .date-table td.date-monthandyear {
font-weight: bold;
}
#date-wrapper .date-table th {
background-color: #004080;
color: #fff;
padding: 2px 5px;
text-align: center;
}
#date-wrapper .date-table tr {
padding: 3px 5px;
}
#date-wrapper td.date-weekend {
font-weight: bold;
background-color: #ffc;
}
#date-wrapper td.date-workday {
font-weight: bold;
background-color: #fff;
}
#date-wrapper td.date-offmonth {
background-color: #fff;
color: #ccc;
}
#date-wrapper td.date-day {
cursor: pointer;
}
#date-wrapper td.date-todayfooter {
background-color: #f8f8f8;
cursor: pointer;
}
/* Date highlighting */
#date-wrapper td.date-today {
background-color: #ffe500;
}
#date-wrapper td.date-picked {
border: 2px solid #0073e6;
margin: -4px;
}
#date-wrapper td.date-tdover {
background-color: #0073e6;
color: #fff;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 B

View File

@@ -0,0 +1,383 @@
if (!$defined(Element.getText))
{
Element.extend(
{
getText: function()
{
return this.innerText || this.textContent || "";
}
});
}
var DatePicker = new Class(
{
options:
{
onShow: Class.empty,
onHide: Class.empty,
readOnly: true,
showToday: true,
dateFormat: "string",
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
monthNamesLong: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesLong: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
},
initialize: function(el, options)
{
this.element = el;
this.setOptions(options);
this.calendar = new Element("div", {"id": "date-picker"}).inject(document.body);
this.calendar.addEvent("mouseenter", this.onMouseEnter.bind(this));
this.calendar.addEvent("mouseleave", this.onMouseLeave.bind(this));
this.wrapper = new Element("div", {"id": "date-wrapper"}).inject(this.calendar);
this.currentDate = null;
this.isVisible = false;
this.hasMouse = false;
if (this.options.readOnly)
{
el.setProperty("readonly", "readonly");
}
el.addEvent("click", this.toggleCalendar.bind(this));
el.addEvent("blur", this.onBlur.bind(this));
},
position: function(el)
{
var pos = $(el).getPosition();
this.calendar.setStyles(
{
"left": pos.x,
"top": pos.y + $(el).getCoordinates().height
});
},
show: function()
{
this.isVisible = true;
this.calendar.setStyle("visibility", "visible");
this.fireEvent("onShow", [this.calendar]);
},
hide: function()
{
this.isVisible = false;
this.hasMouse = false;
this.calendar.setStyle("visibility", "hidden");
this.fireEvent("onHide", [this.calendar]);
},
onMouseEnter: function()
{
this.hasMouse = true;
},
onMouseLeave: function()
{
this.hasMouse = false;
this.onBlur.delay(500, this);
},
onBlur: function()
{
if (!this.hasMouse)
{
this.hide();
}
},
toggleCalendar: function()
{
if (this.isVisible)
{
// Hide the calendar
this.hide();
}
else
{
this.originalDate = this.convert(this.element.value.toString(), "date");
this.renderCalendar(this.element);
this.show();
}
},
/* Main calendar render function */
renderCalendar: function(el, dt)
{
this.currentDate = this.convert((($defined(dt)) ? dt : el.value), "date");
this.position(el);
/** Set up all the dates we need */
var lastMonth = new Date(this.currentDate).setMonth(this.currentDate.getMonth() - 1); // The previous month to the display date
var nextMonth = new Date(this.currentDate).setMonth(this.currentDate.getMonth() + 1); // The next month to the display date
var lastYear = new Date(this.currentDate).setFullYear(this.currentDate.getFullYear() - 1); // The previous year to the display date
var nextYear = new Date(this.currentDate).setFullYear(this.currentDate.getFullYear() + 1); // The next year to the display date
var firstDay = new Date(this.currentDate); // The first day of the month for the display date
firstDay.setDate(1);
if (firstDay.getDay() > 0)
{
firstDay.setDate(-firstDay.getDay() + 1);
}
var currentDay = new Date(firstDay);
var today = new Date(); // Todays date
/** Clear any previous dom and refill it*/
this.wrapper.empty();
/** Global vars and initial dom stuff */
var table, tbody, row, td, highlight;
table = new Element("table",
{
"id": "date-table",
"class": "date-table"
});
tbody = new Element("tbody").injectInside(table)
/** Build the skip month/date controls */
row = new Element("tr").injectInside(tbody);
new Element("td",
{
"class": "date-monthswitch",
"events":
{
"click" : this.renderCalendar.bind(this, [el, lastMonth])
}
}).appendText("<").injectInside(row);
new Element("td",
{
"colSpan": 5,
"rowSpan": 2,
"class" : "date-monthandyear"
}).appendText(this.options.monthNamesLong[this.currentDate.getMonth()] + " " + this.currentDate.getFullYear()).injectInside(row);
new Element("td",
{
"class": "date-monthswitch",
"events":
{
"click" : this.renderCalendar.bind(this, [el, nextMonth])
}
}).appendText(">").injectInside(row);
row = new Element("tr").injectInside(tbody);
new Element("td",
{
"class": "date-yearswitch",
"events":
{
"click" : this.renderCalendar.bind(this, [el, lastYear])
}
}).appendText("<<").injectInside(row);
new Element("td",
{
"class": "date-yearswitch",
"events":
{
"click" : this.renderCalendar.bind(this, [el, nextYear])
}
}).appendText(">>").injectInside(row);
/** Push out the day names */
row = new Element("tr").injectInside(tbody);
for (i = 0; i < 7; i++)
{
new Element("th").appendText(this.options.dayNamesShort[i].substr(0,2)).injectInside(row);
}
highlight = this.highlight.bind(this);
/* Populate the dates we can pick */
while (currentDay.getMonth() == this.currentDate.getMonth() || currentDay.getMonth() == firstDay.getMonth())
{
row = new Element("tr").injectInside(tbody);
for (i = 0; i < 7; i++)
{
td = new Element("td").appendText(currentDay.getDate()).injectInside(row);
td.addClass((currentDay.getDay() == 0 || currentDay.getDay() == 6) ? "date-weekend" : "date-workday");
if (currentDay.getMonth() != this.currentDate.getMonth())
{
td.addClass("date-offmonth");
}
else
{
td.addClass("date-day");
td.addEvents(
{
"click": this.selectValue.bindWithEvent(this),
"mouseenter": highlight,
"mouseleave": highlight
});
}
if (currentDay.getDate() == today.getDate() && currentDay.getMonth() == today.getMonth() && currentDay.getFullYear() == today.getFullYear())
{
td.addClass("date-today");
}
if (currentDay.getDate() == this.originalDate.getDate()
&& currentDay.getMonth() == this.originalDate.getMonth()
&& currentDay.getFullYear() == this.originalDate.getFullYear())
{
td.addClass("date-picked");
}
currentDay.setDate(currentDay.getDate() + 1);
}
}
/** Add the select today choice */
if (this.options.showToday)
{
row = new Element("tr").injectInside(tbody);
new Element("td",
{
"colSpan": 7,
"class" : "date-todayfooter",
"events":
{
"click" : this.renderCalendar.bind(this, [el, today])
}
}).appendText("Today: " + this.convert(today, "dd/MMM/yyyy")).injectInside(row);
}
table.injectInside(this.wrapper);
},
highlight: function (ev)
{
var e = new Event(ev);
e.target.toggleClass("date-tdover");
},
selectValue: function (ev)
{
var e = new Event(ev);
e.stopPropagation();
var o = $(e.target);
var pickedDate = this.currentDate.setDate(o.getText());
this.element.value = this.convert(pickedDate, this.options.dateFormat);
this.hide();
},
convert: function(o, format)
{
var d = new Date();
if (o.getFullYear)
{
d = o;
}
else if ($type(o) == "number")
{
d = new Date(o);
}
else if ($type(o) == "object")
{
d = new Date(o.year, o.month, o.date);
}
else if ($type(o) == "string")
{
d = new Date(o);
if ((d.toString() == "Invalid Date") || (d.toString() == "NaN"))
{
d = new Date();
}
}
if (format == "date")
{
return d;
}
else if (format == "object")
{
return(
{
date: d.getDate(),
month: d.getMonth(),
year: d.getFullYear()
});
}
else if (format == "number")
{
return d.getTime();
}
else if (format == "string")
{
return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
}
// Otherwise, assume we've been given a format string for formatDate
return this.formatDate(d, format);
},
formatDate: function(dt, format)
{
if (!dt.valueOf())
{
return '';
}
window.monthNamesLong = this.options.monthNamesLong;
window.monthNamesShort = this.options.monthNamesShort;
window.dayNamesLong = this.options.dayNamesLong;
window.dayNamesShort = this.options.dayNamesShort;
return format.replace(/(yyyy|yy|y|MMMM|MMM|MM|M|dddd|ddd|dd|d|HH|H|hh|h|mm|m|ss|s|t)/gi, function($1, $2, $3, $4, $5)
{
switch ($1)
{
case 'yyyy': return dt.getFullYear();
case 'yy': return ('0' + (dt.getFullYear()%100)).zeroFill(2);
case 'y': return (d.getFullYear()%100);
case 'MMMM': return window.monthNamesLong[dt.getMonth()];
case 'MMM': return window.monthNamesShort[dt.getMonth()];
case 'MM': return (dt.getMonth() + 1).zeroFill(2);
case 'M': return (dt.getMonth() + 1);
case 'dddd': return window.dayNamesLong[dt.getDay()];
case 'ddd': return window.dayNamesShort[dt.getDay()];
case 'dd': return dt.getDate().zeroFill(2);
case 'd': return dt.getDate();
case 'HH': return dt.getHours().zeroFill(2);
case 'H': return dt.getHours();
case 'hh': return ((h = dt.getHours() % 12) ? h : 12).zeroFill(2);
case 'h': return ((h = dt.getHours() % 12) ? h : 12);
case 'mm': return dt.getMinutes().zeroFill(2);
case 'm': return dt.getMinutes();
case 'ss': return dt.getSeconds().zeroFill(2);
case 's': return dt.getSeconds();
case 't': return dt.getHours() < 12 ? 'A.M.' : 'P.M.';
}
});
}
});
DatePicker.implement(new Events, new Options);
// Used by formatDate function */
String.prototype.zeroFill = function(l)
{
return '0'.repeat(l - this.length) + this;
}
String.prototype.repeat = function(l)
{
var s = '', i = 0;
while (i++ < l)
{
s += this;
}
return s;
}
Number.prototype.zeroFill = function(l)
{
return this.toString().zeroFill(l);
}

View File

@@ -37,7 +37,7 @@ var OfficeMyAlfresco =
// register 'click' event for each task
task.addEvent('click', function(e)
{
window.location.href = window.contextPath + "/service/office/myTasks?p=" + window.queryObject.p + "&t=" + task.id;
window.location.href = window.serviceContextPath + "/office/myTasks?p=" + window.queryObject.p + "&t=" + task.id;
});
});

View File

@@ -14,11 +14,14 @@ var OfficeMyTasks =
OfficeMyTasks.openTask(window.queryObject.t);
}
if ($('wrkUser'))
if ($('wrkAssignTo'))
{
var autoUser = new Autocompleter.Ajax.Json($('wrkUser'), window.contextPath + '/service/office/getUsers',
var autoAssignTo = new Autocompleter.Ajax.Json($('wrkAssignTo'), window.serviceContextPath + '/office/getUsers',
{
postVar: 's',
minLength: 2,
useSelection: false,
markQuery: false,
ajaxOptions:
{
method: 'get',
@@ -26,14 +29,23 @@ var OfficeMyTasks =
},
onRequest: function(el)
{
$('ajxUser').setStyle('display', '');
$('ajxAssignTo').setStyle('display', '');
},
onComplete: function(el)
{
$('ajxUser').setStyle('display', 'none');
$('ajxAssignTo').setStyle('display', 'none');
}
});
}
});
}
if ($('wrkDueDate'))
{
var dueDate = new DatePicker($('wrkDueDate'),
{
readOnly: false,
dateFormat: "dd MMMM yyyy"
});
}
},
setupEventHandlers: function()
@@ -89,7 +101,7 @@ var OfficeMyTasks =
OfficeAddin.showStatusText("Loading task...", "ajax_anim.gif", false);
// ajax call to load task details
var actionURL = window.contextPath + "/service/office/myTasksDetail?t=" + task.id;
var actionURL = window.serviceContextPath + "/office/myTasksDetail?t=" + task.id;
var myAjax = new Ajax(actionURL, {
method: 'get',
headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
@@ -149,14 +161,13 @@ var OfficeMyTasks =
var href = window.location.href.replace("#", "")
// Remove any previous "&st=" string
href = href.replace(/[?&]st=([^&$]+)/g, "");
// Remove any previous "&t=" string
href = href.replace(/[?&]t=([^&$]+)/g, "");
// Remove any previous "&w=" string
href = href.replace(/[?&]w=([^&$]+)/g, "");
// Optionally add a status string
if (successMessage != "")
{
var json = "{\"statusString\":\"" + successMessage + "\",\"statusCode\":true}";
href += "&st=" + encodeURI(json);
href += "&t=" + taskId;
}
window.location.href = href;
},
@@ -166,6 +177,53 @@ var OfficeMyTasks =
}
});
myAjax.request();
},
startWorkflow: function(useTemplate, Doc)
{
// OfficeAddin.runAction('${doc_actions}','makepdf','${d.id}', '');"
var wrkType=$('wrkType').value;
// wrkAssignTo should be "First Last (Username)"
var wrkAssignTo=$('wrkAssignTo').value;
if (wrkAssignTo.test(/(?:\(([^\)]+)\))/))
{
// Extract the Username
wrkAssignTo=wrkAssignTo.match(/(?:\(([^\)]+)\))/)[1];
}
var wrkDueDate = $('wrkDueDate').value;;
var wrkDescription=$('wrkDescription').value;
OfficeAddin.showStatusText("Starting workflow...", "ajax_anim.gif", false);
var actionURL = useTemplate + "?a=workflow&d=" + Doc;
actionURL += "&wt=" + wrkType;
actionURL += "&at=" + wrkAssignTo;
// Date supplied?
if (wrkDueDate != "")
{
actionURL += "&dd=" + wrkDueDate;
}
actionURL += "&desc=" + wrkDescription;
var myAjax = new Ajax(actionURL, {
method: 'get',
headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
onComplete: function(textResponse, xmlResponse)
{
// Remove any trailing hash
var href = window.location.href.replace("#", "")
// Remove any previous "&st=" strings
href = href.replace(/[?&]st=([^&$]+)/g, "");
// Remove any previous "&w=" strings
href = href.replace(/[?&]w=([^&$]+)/g, "");
// Optionally add a status string
if (textResponse != "")
{
href += "&st=" + encodeURI(textResponse);
}
window.location.href = href;
}
});
myAjax.request();
}
};

View File

@@ -11,6 +11,7 @@ var OfficeAddin =
{
window.queryObject = OfficeAddin.toQueryObject(document.location.search);
window.contextPath = OfficeAddin.getContextPath();
window.serviceContextPath = window.contextPath + "/wcservice";
/* Update needed after page load? */
if(this.queryObject.st)

View File

@@ -11,7 +11,7 @@ var OfficeSearch =
event = new Event(event);
if (event.key == 'enter')
{
$("simpleSearchButton").click();
$("simpleSearchButton").onclick();
}
});
},