mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-22 06:07:57 +01:00
Add fist version of notifier. More work pending ...
This commit is contained in:
Paulo Veiga
parent
2441b78684
commit
3eeb9e32b9
@ -188,6 +188,7 @@
|
||||
files="collaboration/framework/brix/BrixCollaborativeModelFactory.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
files="collaboration/framework/brix/BrixFramework.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarNotifier.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarPaneItem.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
|
||||
|
||||
@ -239,7 +239,7 @@ mindplot.Designer = new Class({
|
||||
this._workspace.setZoom(scale);
|
||||
}
|
||||
else {
|
||||
core.Monitor.getInstance().logMessage('Sorry, no more zoom can be applied. \n Why do you need more?');
|
||||
$notify('No more zoom can be applied');
|
||||
}
|
||||
|
||||
},
|
||||
@ -256,7 +256,7 @@ mindplot.Designer = new Class({
|
||||
this._workspace.setZoom(scale);
|
||||
}
|
||||
else {
|
||||
core.Monitor.getInstance().logMessage('Sorry, no more zoom can be applied. \n Why do you need more?');
|
||||
$notify('No more zoom can be applied');
|
||||
}
|
||||
},
|
||||
|
||||
@ -269,14 +269,14 @@ mindplot.Designer = new Class({
|
||||
var nodes = this.getModel().filterSelectedTopics();
|
||||
if (nodes.length <= 0) {
|
||||
// If there are more than one node selected,
|
||||
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
|
||||
$notify('Could not create a topic. Only one node must be selected.');
|
||||
return;
|
||||
|
||||
}
|
||||
if (nodes.length != 1) {
|
||||
|
||||
// If there are more than one node selected,
|
||||
core.Monitor.getInstance().logMessage('Could not create a topic. One topic must be selected.');
|
||||
$notify('Could not create a topic. One topic must be selected.');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -294,13 +294,13 @@ mindplot.Designer = new Class({
|
||||
var nodes = this.getModel().filterSelectedTopics();
|
||||
if (nodes.length <= 0) {
|
||||
// If there are more than one node selected,
|
||||
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
|
||||
$notify('Could not create a topic. Only one node must be selected.');
|
||||
return;
|
||||
|
||||
}
|
||||
if (nodes.length > 1) {
|
||||
// If there are more than one node selected,
|
||||
core.Monitor.getInstance().logMessage('Could not create a topic. One topic must be selected.');
|
||||
$notify('Could not create a topic. One topic must be selected.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -103,7 +103,7 @@ mindplot.DesignerModel = new Class({
|
||||
if (isValid) {
|
||||
result.push(selectedNode.getId());
|
||||
} else {
|
||||
core.Monitor.getInstance().logMessage(errorMsg);
|
||||
$notify(errorMsg);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
@ -124,7 +124,7 @@ mindplot.DesignerModel = new Class({
|
||||
if (isValid) {
|
||||
result.push(selectedLine.getId());
|
||||
} else {
|
||||
core.Monitor.getInstance().logMessage(errorMsg);
|
||||
$notify(errorMsg);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
@ -46,7 +46,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa
|
||||
}
|
||||
},
|
||||
errorHandler:function(message) {
|
||||
var monitor = core.Monitor.getInstance();
|
||||
var monitor = core.ToolbarNotifier.getInstance();
|
||||
monitor.logError("Save could not be completed. Please,try again in a couple of minutes.");
|
||||
// wLogger.error(message);
|
||||
},
|
||||
@ -75,7 +75,7 @@ mindplot.PersistanceManager.load = function(mapId) {
|
||||
} else {
|
||||
// Handle error message ...
|
||||
var msg = response.msgDetails;
|
||||
var monitor = core.Monitor.getInstance();
|
||||
var monitor = core.ToolbarNotifier.getInstance();
|
||||
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
|
||||
// wLogger.error(msg);
|
||||
}
|
||||
@ -83,7 +83,7 @@ mindplot.PersistanceManager.load = function(mapId) {
|
||||
verb:"GET",
|
||||
async: false,
|
||||
errorHandler:function(msg) {
|
||||
var monitor = core.Monitor.getInstance();
|
||||
var monitor = core.ToolbarNotifier.getInstance();
|
||||
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
|
||||
// wLogger.error(msg);
|
||||
}
|
||||
|
||||
@ -17,32 +17,49 @@
|
||||
*/
|
||||
|
||||
mindplot.widget.ToolbarNotifier = new Class({
|
||||
initialize : function() {
|
||||
},
|
||||
|
||||
_showMsg : function(msg, msgKind) {
|
||||
if (msgKind == core.ToolbarNotifier.MsgKind.ERROR) {
|
||||
msg = "<div id='small_error_icon'>" + msg + "</div>";
|
||||
}
|
||||
this._msgElem.innerHTML = msg;
|
||||
initialize : function() {
|
||||
this._container = $('headerNotifier');
|
||||
this._effect = new Fx.Elements(this._container, {
|
||||
onComplete: function() {
|
||||
this._container.setStyle('display', 'none');
|
||||
}.bind(this),
|
||||
link:'cancel',
|
||||
duration:8000,
|
||||
transition: Fx.Transitions.Expo.easeInOut
|
||||
});
|
||||
},
|
||||
|
||||
logError : function(userMsg) {
|
||||
this.logMessage(userMsg, core.ToolbarNotifier.MsgKind.ERROR);
|
||||
this.logMessage(userMsg, mindplot.widget.ToolbarNotifier.MsgKind.ERROR);
|
||||
},
|
||||
|
||||
logMessage : function(msg, msgKind) {
|
||||
console.log(msg);
|
||||
},
|
||||
logMessage : function(msg) {
|
||||
$assert(msg, 'msg can not be null');
|
||||
this._container.set('text', msg);
|
||||
this._container.setStyle('display', 'block');
|
||||
|
||||
this._effect.start({
|
||||
0: {
|
||||
opacity: [1,0]
|
||||
}
|
||||
});
|
||||
this._container.position({
|
||||
relativeTo: $('header'),
|
||||
position: 'upperCenter',
|
||||
edge: 'centerTop'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
core.ToolbarNotifier.MsgKind = {
|
||||
mindplot.widget.ToolbarNotifier.MsgKind = {
|
||||
INFO:1,
|
||||
WARNING:2,
|
||||
ERROR:3,
|
||||
FATAL:4
|
||||
};
|
||||
|
||||
$notifier = new mindplot.widget.ToolbarNotifier();
|
||||
var toolbarNotifier = new mindplot.widget.ToolbarNotifier();
|
||||
$notify = toolbarNotifier.logMessage.bind(toolbarNotifier);
|
||||
@ -22,7 +22,7 @@ TestCase("Mindplot test",{
|
||||
{
|
||||
designer.save(function()
|
||||
{
|
||||
// var monitor = core.Monitor.getInstance();
|
||||
// var monitor = core.ToolbarNotifier.getInstance();
|
||||
}, false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,787 +0,0 @@
|
||||
@import "/mindplot/src/main/javascript/widget/lightbox.css";
|
||||
@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
|
||||
|
||||
@header-height : 75px;
|
||||
@header-toolbar-height : 35px;
|
||||
@header-info-height : @header-height - @header-toolbar-height;
|
||||
|
||||
/* Common Default Style */
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
fieldset, img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
address, caption, cite, code, dfn, em, strong, th, var {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
caption, th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Percents could work for IE, but for backCompat purposes, we are using keywords.
|
||||
* x-small is for IE6/7 quirks mode.
|
||||
*
|
||||
*/
|
||||
body {
|
||||
font: 13px arial, helvetica, clean, sans-serif;
|
||||
font-size: small;
|
||||
font: x-small;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: inherit;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* 99% for safari; 100% is too large
|
||||
*/
|
||||
select, input, textarea {
|
||||
font: 99% arial, helvetica, clean, sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bump up !IE to get to 13px equivalent
|
||||
*/
|
||||
pre, code {
|
||||
font: 115% monospace;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default line-height based on font-size rather than "computed-value"
|
||||
* see: http://www.w3.org/TR/CSS21/visudet.html#line-height
|
||||
*/
|
||||
|
||||
body * {
|
||||
line-height: 1.22em;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font: normal 80% "trebuchet ms", verdana, arial, helvetica, sans-serif;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
font: bold 100%;
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
font: bold 100%;
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 160%;
|
||||
color: #8e9181;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-size: 180%;
|
||||
color: white;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
/* use as subhead on main body */
|
||||
clear: left;
|
||||
font-style: normal;
|
||||
font-size: 130%;
|
||||
color: #6b6f5b;
|
||||
}
|
||||
|
||||
h4 {
|
||||
/* use as headers in footer */
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
border-bottom: 1px solid #8e9181;
|
||||
color: #e2e3dd;
|
||||
padding-bottom: 10px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
/**********************************************************/
|
||||
/* End: Common Default Style */
|
||||
/**********************************************************/
|
||||
|
||||
/**********************************************************/
|
||||
/* Error Dialog ... */
|
||||
/**********************************************************/
|
||||
|
||||
#waitDialog {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#waitingContainer, #errorContainer {
|
||||
position: relative;
|
||||
top: 80px;
|
||||
height: 120px; /*background: whitesmoke;*/
|
||||
background: #FEFEFE;
|
||||
opacity: .99;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
border-color: #a9a9a9;
|
||||
|
||||
}
|
||||
|
||||
#errorContainer {
|
||||
width: 400px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#waitingContainer .loadingText {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
margin-top: -35px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
vertical-align: text-bottom;
|
||||
height: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#errorContainer .loadingText {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
margin-top: -80px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
vertical-align: text-bottom;
|
||||
height: 30px;
|
||||
float: right;
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
#waitingContainer .loadingIcon {
|
||||
position: relative;
|
||||
background: url(../images/loadingIcon.gif) no-repeat;
|
||||
top: 50%;
|
||||
margin-top: -65px;
|
||||
height: 100px;
|
||||
width: 121px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#errorContainer .loadingIcon {
|
||||
position: relative;
|
||||
background: url(../images/errorIcon.png) no-repeat;
|
||||
top: 50%;
|
||||
margin-top: -65px;
|
||||
height: 100px;
|
||||
width: 121px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/********************************************************************************/
|
||||
/* Toolbar Styles */
|
||||
/********************************************************************************/
|
||||
|
||||
div#header {
|
||||
width: 100%;
|
||||
height: @header-height;
|
||||
background: #393939; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
|
||||
}
|
||||
|
||||
div#headerLogo {
|
||||
background: url(../images/logo-small.png) no-repeat center top;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div#headerInfo {
|
||||
width: 100%;
|
||||
height: @header-info-height;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div#headerActions {
|
||||
text-align: right;
|
||||
margin-top: 13px;
|
||||
padding-right: 10px;
|
||||
color: white;
|
||||
float: right;
|
||||
}
|
||||
|
||||
div#headerActions span {
|
||||
border-bottom: 3px solid rgb(247, 201, 49);
|
||||
}
|
||||
|
||||
div#headerActions a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div#headerMapTitle {
|
||||
width: 200px;
|
||||
height:(@header-info-height ) - 13;
|
||||
text-align: left;
|
||||
padding-top: 13px;
|
||||
padding-left: 50px;
|
||||
color: white;
|
||||
float: left;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div#headerMapTitle span {
|
||||
padding: 4px 50px;
|
||||
border: 1px solid rgb(90, 90, 90);
|
||||
background-color: rgb(45, 45, 45);
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
div#toolbar {
|
||||
width: 100%;
|
||||
height: @header-toolbar-height;
|
||||
background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
|
||||
background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
|
||||
background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
|
||||
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
|
||||
border-bottom: 3px double rgb(190, 190, 190);
|
||||
border-top: 1px solid rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
div#toolbar .buttonContainer {
|
||||
height: @header-toolbar-height;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/******************************************************************************************/
|
||||
/* Buttons*/
|
||||
/******************************************************************************************/
|
||||
|
||||
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
margin-top: 3px;
|
||||
padding-top: 2px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
div#toolbar .buttonOn:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
background: url(../images/btn-bg-hover.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#toolbar .buttonOn {
|
||||
opacity: 0.8;
|
||||
background: url(../images/btn-bg-normal.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#toolbar .buttonOff {
|
||||
opacity: 0.4;
|
||||
background: url(../images/btn-bg-normal.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#exportAnchor {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
float: left;
|
||||
text-align: left;
|
||||
z-index: 4;
|
||||
margin-top: 3px;
|
||||
padding-top: 2px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOn:hover {
|
||||
opacity: 1;
|
||||
background: url(../images/btne-bg-hover.png) no-repeat center top;
|
||||
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtActive {
|
||||
opacity: 1;
|
||||
background: url(../images/btne-bg-selected.png) no-repeat center top;
|
||||
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOn {
|
||||
opacity: 0.8;
|
||||
background: url(../images/btne-bg-normal.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOff {
|
||||
opacity: 0.4;
|
||||
background: url(../images/btne-bg-normal.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#exportAnchor {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*div#saveButton {*/
|
||||
/*background: url(../images/save.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#undoEdition {*/
|
||||
/*background: url(../images/undo.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#redoEdition {*/
|
||||
/*background: url(../images/redo.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#export {*/
|
||||
/*background: url(../images/export.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#zoomIn {*/
|
||||
/*background: url(../images/zoom-in.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#zoomOut {*/
|
||||
/*background: url(../images/zoom-out.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#addTopic {*/
|
||||
/*background: url(../images/topic-add.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#deleteTopic {*/
|
||||
/*background: url(../images/topic-delete.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicColor {*/
|
||||
/*background: url(../images/topic-color.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicIcon {*/
|
||||
/*background: url(../images/topic-icon.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicNote {*/
|
||||
/*background: url(../images/note.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicNote {*/
|
||||
/*background: url(../images/topic-icon.png) no-repeat center top;*/
|
||||
/*z-index: 4;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicLink {*/
|
||||
/*background: url(../images/topic-link.png) no-repeat center top;*/
|
||||
/*z-index: 4;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicNote {*/
|
||||
/*background-image: url(../images/note.png);*/
|
||||
/*z-index: 4;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicBorder {*/
|
||||
/*background: url(../images/topic-border.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#fontFamily {*/
|
||||
/*background: url(../images/font-type.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#topicShape {*/
|
||||
/*background: url(../images/topic-shape.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#fontBold {*/
|
||||
/*background: url(../images/font-bold.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#fontItalic {*/
|
||||
/*background: url(../images/font-italic.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#fontColor {*/
|
||||
/*background: url(../images/font-color.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#fontSize {*/
|
||||
/*background: url(../images/font-size.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#shareIt {*/
|
||||
/*background: url(../images/share.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#publishIt {*/
|
||||
/*background: url(../images/publish.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
/*div#tagIt {*/
|
||||
/*background: url(../images/tag.png) no-repeat center top;*/
|
||||
/*}*/
|
||||
|
||||
div#topicRelation {
|
||||
width: 56px;
|
||||
background: url(../images/topic-relation.png) no-repeat center top;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
div#colorPalette {
|
||||
border: 1px solid #bbb4d6;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
width: 160px;
|
||||
top: 89px;
|
||||
}
|
||||
|
||||
/*.toolbarPanel {*/
|
||||
/*z-index: 4;*/
|
||||
/*top: @header-height;*/
|
||||
/*-moz-transition: opacity 0.218s ease 0s;*/
|
||||
/*background: none repeat scroll 0 0 #FFFFFF;*/
|
||||
/*border: 1px solid rgba(0, 0, 0, 0.2);*/
|
||||
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
|
||||
/*cursor: default;*/
|
||||
/*font-size: 13px;*/
|
||||
/*margin: 0;*/
|
||||
/*outline: medium none;*/
|
||||
/*padding: 0 0 6px;*/
|
||||
/*position: absolute;*/
|
||||
/*}*/
|
||||
|
||||
div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
margin: 1px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
|
||||
cursor: pointer;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
div#mindplot {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div#workspaceContainer {
|
||||
/*background: url(../images/grid.gif) bottom left repeat !important;*/
|
||||
}
|
||||
|
||||
div#small_error_icon {
|
||||
padding-left: 18px;
|
||||
min-height: 16px;
|
||||
background: url(../images/error_icon.png) bottom left no-repeat !important;
|
||||
}
|
||||
|
||||
.notesTip {
|
||||
background-color: #dfcf3c;
|
||||
padding: 5px 15px;
|
||||
color: #666666;
|
||||
/*font-weight: bold;*/
|
||||
/*width: 100px;*/
|
||||
font-size: 13px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.linkTip {
|
||||
background-color: #dfcf3c;
|
||||
padding: 5px 15px;
|
||||
color: #666666;
|
||||
/*font-weight: bold;*/
|
||||
/*width: 100px;*/
|
||||
font-size: 13px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbarPaneTip {
|
||||
background-color: rgb(228, 226, 210);
|
||||
padding: 5px 5px;
|
||||
color: #f5f5f5;
|
||||
/*font-weight: bold;*/
|
||||
/*width: 100px;*/
|
||||
font-size: 11px;
|
||||
-moz-border-radius: 60px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
border: 3px double rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
.toolbarTip {
|
||||
background-color: #000000;
|
||||
padding: 5px 5px;
|
||||
color: #f5f5f5;
|
||||
/*font-weight: bold;*/
|
||||
/*width: 100px;*/
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.btn-primary {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
-ms-transition: 0.1s linear all;
|
||||
-o-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
color: #ffffff;
|
||||
background-color: #0064cd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
|
||||
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
|
||||
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
|
||||
background-image: linear-gradient(top, #049cdb, #0064cd);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #0064cd #0064cd #003f81;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-position: 0 -15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background-color: #e6e6e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
line-height: normal;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
-ms-transition: 0.1s linear all;
|
||||
-o-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-position: 0 -15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/** */
|
||||
/* Modal dialogs definitions */
|
||||
|
||||
.tagItModalDialog, .historyModalDialog, .shareItModalDialog, .exportModalDialog, .publishModalDialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11000;
|
||||
width: 400px;
|
||||
margin: -250px 0 0 -250px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid #999;
|
||||
/* IE6-7 */
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.shareItModalDialog {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.publishModalDialog {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.tagItModalDialog .title, .historyModalDialog .title, .shareItModalDialog .title, .exportModalDialog .title, .publishModalDialog .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid #a1aec5;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 0 #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 5px 30px;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.tagItModalDialog .content {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.historyModalDialog .content {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.shareItModalDialog .content {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.exportItModalDialog .content {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.publishModalDialog .content {
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
.modalDialog h1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modalDialog h2 {
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
td.formLabel {
|
||||
text-align: right;
|
||||
padding: 2px 10px;
|
||||
font-weight: bolder;
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -7,9 +7,8 @@
|
||||
<!--[if lt IE 9]>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<![endif]-->
|
||||
<!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
|
||||
<script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
|
||||
<link rel="stylesheet/less" type="text/css" href="../css/editor2.css"/>
|
||||
<link rel="stylesheet/less" type="text/css" href="../css/editor.less"/>
|
||||
|
||||
<script type='text/javascript'
|
||||
src='/mindplot/src/main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
|
||||
@ -80,13 +79,11 @@
|
||||
});
|
||||
// @Todo: Hack for testing save ...
|
||||
window.MapEditorService = {};
|
||||
window.MapEditorService.saveMap = function(mapId, xmlMapStr, pref, saveHistory){
|
||||
console.log(xmlMapStr);
|
||||
window.MapEditorService.saveMap = function(mapId, xmlMapStr, pref, saveHistory) {
|
||||
console.log(xmlMapStr);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
|
||||
@ -132,6 +129,7 @@
|
||||
|
||||
|
||||
<div id="header">
|
||||
|
||||
<div id="headerInfo">
|
||||
<div id="headerActions">
|
||||
<span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
|
||||
@ -146,7 +144,7 @@
|
||||
<img src="../images/save.png"/>
|
||||
</div>
|
||||
<div id="discart" class="buttonOn" title="Discard">
|
||||
<img src="../images/discart.png"/>
|
||||
<img src="../images/discard.png"/>
|
||||
</div>
|
||||
<div id="print" class="buttonOn" title="Print">
|
||||
<img src="../images/print.png"/>
|
||||
@ -234,6 +232,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="headerNotifier">
|
||||
Algo de texto
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mindplot"></div>
|
||||
|
||||
@ -131,4 +131,5 @@ div#mapDetails .title {
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
margin-right: 3px;
|
||||
|
||||
}
|
||||
@ -62,3 +62,19 @@ div#headerMapTitle span {
|
||||
border-radius: 3px;
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
div#headerNotifier {
|
||||
border: 1px solid rgb(241,163,39);
|
||||
background-color: rgb(252,235,192);
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
padding: 5px 9px;
|
||||
color:back;
|
||||
white-space:nowrap;
|
||||
margin-top:5px;
|
||||
/*margin-top:-34px;*/
|
||||
display:none;
|
||||
/*right: 5px;*/
|
||||
}
|
||||
BIN
wise-webapp/src/main/webapp/images/ajax-loader.gif
Normal file
BIN
wise-webapp/src/main/webapp/images/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
@ -16,399 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/******************************************************************/
|
||||
/* MOOdalBox 1.3.b4 */
|
||||
/* A modal box (inline popup), used to display remote content */
|
||||
/* loaded using AJAX, written for the mootools framework */
|
||||
/* by Razvan Brates, razvan [at] e-magine.ro */
|
||||
/******************************************************************/
|
||||
/* http://www.e-magine.ro/moodalbox */
|
||||
/******************************************************************/
|
||||
/* */
|
||||
/* MIT style license: */
|
||||
/* http://en.wikipedia.org/wiki/MIT_License */
|
||||
/* */
|
||||
/* mootools found at: */
|
||||
/* http://mootools.net/ */
|
||||
/* */
|
||||
/* Original code based on "Slimbox", by Christophe Beyls: */
|
||||
/* http://www.digitalia.be/software/slimbox */
|
||||
/******************************************************************/
|
||||
|
||||
// Constants defined here can be changed for easy config / translation
|
||||
// (defined as vars, because of MSIE's lack of support for const)
|
||||
|
||||
var _ERROR_MESSAGE = "Oops.. there was a problem with your request.<br /><br />" +
|
||||
"Please try again.<br /><br />" +
|
||||
"<em>Click anywhere to close.</em>";
|
||||
// the error message displayed when the request has a problem
|
||||
var _RESIZE_DURATION = 400;
|
||||
// Duration of height and width resizing (ms)
|
||||
var _INITIAL_WIDTH = 250;
|
||||
// Initial width of the box (px)
|
||||
var _INITIAL_HEIGHT = 250;
|
||||
// Initial height of the box (px)
|
||||
var _CONTENTS_WIDTH = 500;
|
||||
// Actual width of the box (px)
|
||||
var _CONTENTS_HEIGHT = 400;
|
||||
// Actual height of the box (px)
|
||||
var _DEF_CONTENTS_WIDTH = 500;
|
||||
// Default width of the box (px) - used for resetting when a different setting was used
|
||||
var _DEF_CONTENTS_HEIGHT = 400;
|
||||
// Default height of the box (px) - used for resetting when a different setting was used
|
||||
var _DEF_FULLSCREEN_WIDTH = 0.95;
|
||||
// Default fullscreen width (%)
|
||||
var _DEF_FULLSCREEN_HEIGHT = 0.8;
|
||||
// Default fullscreen height (%)
|
||||
var _ANIMATE_CAPTION = true;
|
||||
// Enable/Disable caption animation
|
||||
var _EVAL_SCRIPTS = true;
|
||||
// Option to evaluate scripts in the response text
|
||||
var _EVAL_RESPONSE = false;
|
||||
// Option to evaluate the whole response text
|
||||
|
||||
// The MOOdalBox object in its beauty
|
||||
var MOOdalBox = {
|
||||
|
||||
// init the MOOdalBox
|
||||
init: function (options) {
|
||||
|
||||
// init default options
|
||||
this.options = Object.extend({
|
||||
resizeDuration: _RESIZE_DURATION,
|
||||
initialWidth: _INITIAL_WIDTH,
|
||||
initialHeight: _INITIAL_HEIGHT,
|
||||
contentsWidth: _CONTENTS_WIDTH,
|
||||
contentsHeight: _CONTENTS_HEIGHT,
|
||||
defContentsWidth: _DEF_CONTENTS_WIDTH,
|
||||
defContentsHeight: _DEF_CONTENTS_HEIGHT,
|
||||
defFullscreenWidth: _DEF_FULLSCREEN_WIDTH,
|
||||
defFullscreenHeight:_DEF_FULLSCREEN_HEIGHT,
|
||||
animateCaption: _ANIMATE_CAPTION,
|
||||
evalScripts: _EVAL_SCRIPTS,
|
||||
evalResponse: _EVAL_RESPONSE
|
||||
}, options || {});
|
||||
|
||||
// scan anchors for those opening a MOOdalBox
|
||||
this.anchors = [];
|
||||
this.scanAnchors(document.body, false);
|
||||
// scan forms for those opening a MOOdalBox
|
||||
this.forms = [];
|
||||
this.scanForms(document.body, false);
|
||||
// add event listeners
|
||||
|
||||
// @Todo: Deprecated method ...
|
||||
// this.eventKeyDown = this.keyboardListener.bindWithEvent(this);
|
||||
|
||||
|
||||
this.eventPosition = this.position.bind(this);
|
||||
|
||||
// init the HTML elements
|
||||
// the overlay (clickable to close)
|
||||
this.overlay = new Element('div').setProperty('id', 'mb_overlay').inject(document.body);
|
||||
|
||||
this.overlayDiv = new Element('div').setOpacity(0).setStyles({position: 'absolute', border: 0, width: '100%', backgroundColor: "black", zIndex: 98}).inject(document.body);
|
||||
// the center element
|
||||
this.center = new Element('div').setProperty('id', 'mb_center').setStyles({width: this.options.initialWidth + 'px', height: this.options.initialHeight + 'px', marginLeft: '-' + (this.options.initialWidth / 2) + 'px', display: 'none'}).inject(document.body);
|
||||
// the actual page contents
|
||||
this.contents = new Element('div').setProperty('id', 'mb_contents').inject(this.center);
|
||||
|
||||
// the bottom part (caption / close)
|
||||
this.bottom = new Element('div').setProperty('id', 'mb_bottom').setStyle('display', 'none').inject(document.body);
|
||||
this.closelink = new Element('a').setProperties({id: 'mb_close_link', href: '#'}).inject(this.bottom);
|
||||
this.caption = new Element('div').setProperty('id', 'mb_caption').inject(this.bottom);
|
||||
new Element('div').setStyle('clear', 'both').inject(this.bottom);
|
||||
|
||||
this.error = new Element('div').setProperty('id', 'mb_error').innerHTML = _ERROR_MESSAGE;
|
||||
|
||||
// attach the close event to the close button / the overlay
|
||||
this.closelink.onclick = this.overlay.onclick = this.close.bind(this);
|
||||
|
||||
// init the effects
|
||||
var nextEffect = this.nextEffect.bind(this);
|
||||
this.fx = {
|
||||
overlay: new Fx.Morph(this.overlay).set({'opacity':0, duration: 500 }).hide(),
|
||||
resize: this.center.effects({ onComplete: nextEffect }),
|
||||
contents: this.contents.effect('opacity', { duration: 500, onComplete: nextEffect }),
|
||||
bottom: this.bottom.effects({ duration: 400, onComplete: nextEffect })
|
||||
};
|
||||
|
||||
// AJAX related options
|
||||
var ajaxFailure = this.ajaxFailure.bind(this);
|
||||
this.ajaxOptions = {
|
||||
update: this.contents,
|
||||
evalScripts: this.options.evalScripts,
|
||||
evalResponse: this.options.evalResponse,
|
||||
onComplete: nextEffect,
|
||||
onFailure: ajaxFailure,
|
||||
encoding: 'utf-8'
|
||||
};
|
||||
|
||||
this.ajaxRequest = Class.empty;
|
||||
|
||||
},
|
||||
|
||||
click: function(link) {
|
||||
return this.open(link.href, link.title, link.rel, false);
|
||||
},
|
||||
|
||||
open: function(sLinkHref, sLinkTitle, sLinkRel, oForm) {
|
||||
//Remove window key event listeners.
|
||||
this.eventContainer = new Element('div');
|
||||
this.eventContainer.cloneEvents($(document), 'keydown');
|
||||
$(document).removeEvents('keydown');
|
||||
|
||||
this.href = sLinkHref;
|
||||
this.title = sLinkTitle;
|
||||
this.rel = sLinkRel;
|
||||
|
||||
if (oForm) {
|
||||
if (oForm.method == 'get') {
|
||||
this.href += "?" + oForm.toQueryString();
|
||||
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'get', postBody: ''});
|
||||
} else {
|
||||
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'post', postBody: oForm});
|
||||
}
|
||||
} else {
|
||||
this.ajaxOptions = Object.extend(this.ajaxOptions, {method: 'get', postBody: ''});
|
||||
}
|
||||
this.ajaxOptions.encoding = 'utf-8';
|
||||
|
||||
this.position();
|
||||
this.setup(true);
|
||||
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
|
||||
this.center.setStyles({top: this.top + 'px', display: ''});
|
||||
this.fx.overlay.custom(0.8);
|
||||
return this.loadContents(sLinkHref);
|
||||
},
|
||||
|
||||
position: function() {
|
||||
this.overlay.setStyles({top: Window.getScrollTop() + 'px', height: Window.getHeight() + 'px'});
|
||||
this.overlayDiv.setStyles({top: Window.getScrollTop() + 'px', height: Window.getHeight() + 'px'});
|
||||
},
|
||||
|
||||
scanAnchors: function(oWhere, bForce) {
|
||||
|
||||
// scan anchors for those opening a MOOdalBox
|
||||
$$($(oWhere).getElements('a')).each(function(el) {
|
||||
// we use a regexp to check for links that
|
||||
// have a rel attribute starting with "moodalbox"
|
||||
if (el.href && ((el.rel && el.rel.test('^moodalbox', 'i')) || (bForce && !el.onclick))) {
|
||||
if (bForce && !el.rel) {
|
||||
// if we're forcing links to open in a moodalbox, we're keeping the current size
|
||||
el.rel = "moodalbox " + this.options.contentsWidth + "px " + this.options.contentsHeight + "px";
|
||||
if (this.wizardMode) el.rel += " wizard";
|
||||
}
|
||||
el.onclick = this.click.pass(el, this);
|
||||
this.anchors.push(el);
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
scanForms: function (oWhere, bForce) {
|
||||
// scan forms for those opening a MOOdalBox
|
||||
$$($(oWhere).getElements('form')).each(function(el) {
|
||||
// we use a regexp to check for links that
|
||||
// have a rel attribute starting with "moodalbox"
|
||||
el.rel = el.getProperty('rel');
|
||||
if ((el.rel && el.rel.test('^moodalbox', 'i')) || bForce) {
|
||||
if (bForce && !el.rel) {
|
||||
// if we're forcing links to open in a moodalbox, we're keeping the current size
|
||||
el.rel = "moodalbox " + this.options.contentsWidth + "px " + this.options.contentsHeight + "px";
|
||||
if (this.wizardMode) el.rel += " wizard";
|
||||
}
|
||||
el.onsubmit = this.open.pass([el.action, el.title, el.rel, el], this);
|
||||
this.forms.push(el);
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
setup: function(open) {
|
||||
//var elements = $A($$('object'));
|
||||
//elements.extend($$(window.ActiveXObject ? 'select' : 'embed'));
|
||||
//elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
|
||||
|
||||
// use an iframe to show under everything
|
||||
|
||||
var fn = open ? 'addEvent' : 'removeEvent';
|
||||
window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
|
||||
document[fn]('keydown', this.eventKeyDown);
|
||||
this.step = 0;
|
||||
},
|
||||
|
||||
loadContents: function() {
|
||||
|
||||
if (this.step) return false;
|
||||
this.step = 1;
|
||||
|
||||
// check to see if there are specified dimensions
|
||||
// if not, fall back to default values
|
||||
|
||||
// fullscreen switch concept originally by Lennart Pilon (http://ljpilon.nl/)
|
||||
|
||||
// we check for a "fullscreen" switch
|
||||
if (this.rel.test("fullscreen")) {
|
||||
|
||||
this.options.contentsWidth = this.options.defFullscreenWidth * window.getWidth();
|
||||
this.options.contentsHeight = this.options.defFullscreenHeight * window.getHeight();
|
||||
|
||||
} else { // we check for other specified dimensions (px or %)
|
||||
|
||||
var aDim = this.rel.match(/[0-9.]+(px|%)/g);
|
||||
|
||||
if (aDim && aDim[0]) { //first dimension is interpreted as width
|
||||
|
||||
var w = aDim[0].toInt();
|
||||
|
||||
if (aDim[0].test("%")) {
|
||||
this.options.contentsWidth = (w > 0) ? 0.01 * w * window.getWidth() : this.options.defFullscreenWidth * window.getWidth();
|
||||
} else {
|
||||
this.options.contentsWidth = (w > 0) ? w : this.options.defContentsWidth;
|
||||
}
|
||||
} else { // we switch to defaults if there aren't any dimensions specified
|
||||
this.options.contentsWidth = this.options.defContentsWidth;
|
||||
this.options.contentsHeight = this.options.defContentsHeight;
|
||||
}
|
||||
|
||||
if (aDim && aDim[1]) { // we have a second dimension specified, which we'll interpret as height
|
||||
|
||||
var h = aDim[1].toInt();
|
||||
|
||||
if (aDim[1].test("%")) {
|
||||
this.options.contentsHeight = (h > 0) ? 0.01 * h * window.getHeight() : this.options.defFullscreenHeight * window.getHeight();
|
||||
} else {
|
||||
this.options.contentsHeight = (h > 0) ? h : this.options.defContentsHeight;
|
||||
}
|
||||
} else if (aDim && aDim[0]) {
|
||||
// we have the first dimension specified, but not the second
|
||||
// so we interpret as width = height = the given value
|
||||
if (aDim[0].test("%")) {
|
||||
this.options.contentsHeight = (w > 0) ? 0.01 * w * window.getHeight() : this.options.defFullscreenHeight * window.getHeight();
|
||||
} else {
|
||||
this.options.contentsHeight = (w > 0) ? w : this.options.defContentsHeight;
|
||||
}
|
||||
}
|
||||
// correct a little approximation bug (size flickers)
|
||||
this.options.contentsWidth = Math.floor(this.options.contentsWidth);
|
||||
this.options.contentsHeight = Math.floor(this.options.contentsHeight);
|
||||
|
||||
}
|
||||
|
||||
this.wizardMode = this.rel.test("wizard");
|
||||
|
||||
// this is where we'll check for other options passed via the rel attribute
|
||||
|
||||
this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
|
||||
this.center.className = 'mb_loading';
|
||||
|
||||
this.fx.contents.hide();
|
||||
|
||||
// AJAX call here
|
||||
this.ajaxRequest = new Ajax(this.href, this.ajaxOptions).request();
|
||||
|
||||
// make the local timeout call here
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
ajaxFailure: function () {
|
||||
this.contents.innerHTML = '';
|
||||
this.error.clone().inject(this.contents);
|
||||
this.nextEffect();
|
||||
this.center.setStyle('cursor', 'pointer');
|
||||
this.bottom.setStyle('cursor', 'pointer');
|
||||
this.center.onclick = this.bottom.onclick = this.close.bind(this);
|
||||
},
|
||||
|
||||
|
||||
// make the local timeout function here
|
||||
|
||||
|
||||
nextEffect: function() {
|
||||
switch (this.step++) {
|
||||
case 1:
|
||||
// remove previous styling from the elements
|
||||
// (e.g. styling applied in case of an error)
|
||||
this.center.className = '';
|
||||
this.center.setStyle('cursor', 'default');
|
||||
this.bottom.setStyle('cursor', 'default');
|
||||
this.center.onclick = this.bottom.onclick = '';
|
||||
this.caption.innerHTML = this.title;
|
||||
|
||||
this.contents.setStyles({width: this.options.contentsWidth + "px", height: this.options.contentsHeight + "px"});
|
||||
|
||||
if (this.center.clientHeight != this.contents.offsetHeight) {
|
||||
this.fx.resize.options.duration = this.options.resizeDuration;
|
||||
this.fx.resize.custom({height: [this.center.clientHeight, this.contents.offsetHeight]});
|
||||
break;
|
||||
}
|
||||
this.step++;
|
||||
|
||||
|
||||
case 2:
|
||||
if (this.center.clientWidth != this.contents.offsetWidth) {
|
||||
this.fx.resize.custom({width: [this.center.clientWidth, this.contents.offsetWidth], marginLeft: [-this.center.clientWidth / 2, -this.contents.offsetWidth / 2]});
|
||||
break;
|
||||
}
|
||||
this.step++;
|
||||
|
||||
case 3:
|
||||
this.bottom.setStyles({top: (this.top + this.center.clientHeight) + 'px', width: this.contents.style.width, marginLeft: this.center.style.marginLeft, display: ''});
|
||||
|
||||
// check to see if in wizard mode and parse links
|
||||
if (this.wizardMode) this.scanAnchors(this.contents, true);
|
||||
if (this.wizardMode) this.scanForms(this.contents, true);
|
||||
|
||||
this.fx.contents.custom(0, 1);
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (this.options.animateCaption) {
|
||||
this.fx.bottom.custom({opacity: [0, 1], height: [0, this.bottom.scrollHeight]});
|
||||
break;
|
||||
}
|
||||
this.bottom.setStyles({opacity: '1', height: this.bottom.scrollHeight + 'px'});
|
||||
|
||||
case 5:
|
||||
this.step = 0;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
keyboardListener: function(event) {
|
||||
// close the MOOdalBox when the user presses CTRL + W, CTRL + X, ESC
|
||||
if ((event.control && event.key == 'w') || (event.control && event.key == 'x') || (event.key == 'esc')) {
|
||||
this.close();
|
||||
event.stop();
|
||||
}
|
||||
},
|
||||
|
||||
close: function() {
|
||||
//restore key event listeners
|
||||
$(document).cloneEvents(this.eventContainer, 'keydown');
|
||||
this.eventContainer.removeEvents('keydown');
|
||||
if (this.step < 0) return;
|
||||
this.step = -1;
|
||||
for (var f in this.fx) this.fx[f].clearTimer();
|
||||
this.center.style.display = this.bottom.style.display = 'none';
|
||||
this.center.className = 'mb_loading';
|
||||
this.fx.overlay.chain(this.setup.pass(false, this)).custom(0);
|
||||
this.overlayDiv.style.display = "none";
|
||||
return false;
|
||||
},
|
||||
|
||||
config: function(options) {
|
||||
this.options = Object.extend(this.options, options || {});
|
||||
return false;
|
||||
// to be used on links
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Moodal Dialog startup
|
||||
//window.addEvent('domready', MOOdalBox.init.bind(MOOdalBox));
|
||||
|
||||
|
||||
// @Todo: This must be reviewed ...
|
||||
function displayLoading() {
|
||||
$('headerLoading').style.visibility = 'visible';
|
||||
}
|
||||
@ -35,7 +35,7 @@ function setUpToolbar(designer, readOnly) {
|
||||
|
||||
if (designer.needsSave()) {
|
||||
designer.save(function() {
|
||||
var monitor = core.Monitor.getInstance();
|
||||
var monitor = core.ToolbarNotifier.getInstance();
|
||||
}, false);
|
||||
}
|
||||
}).periodical(30000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user