You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
7.3 KiB
315 lines
7.3 KiB
// if use the "view/edit" button or rely on the api instead
|
|
var isSankore = false;
|
|
// whether to do window.resize or not (window = widget area)
|
|
var isBrowser = ( typeof( widget ) == "undefined" );
|
|
|
|
function wcontainer( containerID )
|
|
{
|
|
// some protecred variables
|
|
var thisInstance = this;
|
|
var editMode = false;
|
|
var data = {}; // see setData and getData
|
|
this.allowResize = false;
|
|
this.maxWidth = 1000; // set to 0 for no max width restriction
|
|
this.minWidth = 50;
|
|
this.maxHeight = 800; // set to 0 for no max width restriction
|
|
this.minHeight = 50;
|
|
|
|
// links to the elements of the widget
|
|
this.elements = {};
|
|
|
|
/*
|
|
============
|
|
create
|
|
============
|
|
- creates html base, inits this.elements, assings events
|
|
*/
|
|
this.create = function( containerID )
|
|
{
|
|
var html =
|
|
'<div id="mp_setup">' +
|
|
'<div class="viewmode">' +
|
|
'<button>Edit</button>' +
|
|
'</div>' +
|
|
'<div class="editmode">' +
|
|
'<button>View</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div id="mp_content">' +
|
|
'<div class="viewmode" id="mp_view">' +
|
|
'</div>' +
|
|
'<div class="editmode" id="mp_edit">' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
var container = $( containerID );
|
|
|
|
container.append( html );
|
|
this.elements.edit = container.find( ".editmode" );
|
|
this.elements.view = container.find( ".viewmode" );
|
|
|
|
this.elements.container = container;
|
|
this.elements.subcontainer = container.find( "#mp_content" );
|
|
this.elements.setup = container.find( "#mp_setup" );
|
|
this.elements.splash = $( "<div>" );
|
|
|
|
this.elements.containerView = this.elements.subcontainer.find( ".viewmode" );
|
|
this.elements.containerEdit = this.elements.subcontainer.find( ".editmode" );
|
|
|
|
|
|
|
|
|
|
container.find( ".viewmode button" ).click( function(){
|
|
thisInstance.modeEdit();
|
|
} );
|
|
|
|
container.find( ".editmode button" ).click( function(){
|
|
thisInstance.modeView();
|
|
} );
|
|
|
|
};
|
|
|
|
this.setSplashContent = function( html )
|
|
{
|
|
this.elements.container.find( "#mp_setup .viewmode" ).append(
|
|
'<button class="hideAll">Hide</button>'
|
|
);
|
|
this.elements.container.find( "#mp_setup .editmode" ).append(
|
|
'<button class="hideAll">Hide</button>'
|
|
);
|
|
this.elements.container.after(
|
|
'<div id="mp_splash">'+ html +'</div>'
|
|
);
|
|
|
|
this.elements.splash = $( "#mp_splash" );
|
|
this.elements.splash.hide();
|
|
this.elements.splash.click( function()
|
|
{
|
|
winstance.modeSplash( false );
|
|
});
|
|
|
|
this.elements.setup.find( "button.hideAll" ).click( function()
|
|
{
|
|
winstance.modeSplash();
|
|
});
|
|
};
|
|
|
|
|
|
/*
|
|
===============
|
|
setViewContent
|
|
===============
|
|
- assigns custom html to the viewmode container
|
|
*/
|
|
this.setViewContent = function( html )
|
|
{
|
|
this.elements.container.find( "#mp_content .viewmode" ).html( html );
|
|
};
|
|
this.getViewContent = function()
|
|
{
|
|
return this.elements.container.find( "#mp_content .viewmode" ).html();
|
|
};
|
|
|
|
/*
|
|
===============
|
|
setEditContent
|
|
===============
|
|
- assigns custom html to the editmode container
|
|
*/
|
|
this.setEditContent = function( html )
|
|
{
|
|
this.elements.container.find( "#mp_content .editmode" ).html( html );
|
|
};
|
|
this.getEditContent = function( html )
|
|
{
|
|
return this.elements.container.find( "#mp_content .editmode" ).html();
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
=========================
|
|
modeEdit and modeView
|
|
=========================
|
|
- switch the widget betweed modes
|
|
* for customization extend onEditMode and onViewMode
|
|
*/
|
|
this.modeEdit = function()
|
|
{
|
|
this.onEditMode();
|
|
editMode = true;
|
|
this.elements.edit.removeClass( "hide" );
|
|
this.elements.view.addClass( "hide" );
|
|
|
|
this.adjustSize();
|
|
};
|
|
this.modeView = function()
|
|
{
|
|
this.onViewMode();
|
|
editMode = false;
|
|
this.elements.edit.addClass( "hide" );
|
|
this.elements.view.removeClass( "hide" );
|
|
|
|
this.adjustSize();
|
|
};
|
|
this.modeSplash = function( enable )
|
|
{
|
|
if( arguments.length < 1 ){
|
|
var enable = true;
|
|
}
|
|
if( enable ){
|
|
this.allowResize = false;
|
|
this.elements.container.hide();
|
|
this.elements.splash.show();
|
|
// hack, need to work out
|
|
this.adjustSize( 190, 110, true );
|
|
}
|
|
else{
|
|
this.elements.container.show();
|
|
this.elements.splash.hide();
|
|
this.adjustSize();
|
|
this.allowResize = true;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
================
|
|
adjustSize
|
|
================
|
|
- changes the widget size (window and container)
|
|
*/
|
|
this.adjustSize = function( width, height, override )
|
|
{
|
|
if( arguments.length < 3 ){
|
|
var override = false;
|
|
}
|
|
|
|
// retrieve the arguments
|
|
if( arguments.length < 2 )
|
|
{
|
|
var s = ( editMode )? this.editSize() : this.viewSize();
|
|
var width = s.w;
|
|
var height = s.h;
|
|
}
|
|
|
|
// check for validity
|
|
if( width + height == 0 )
|
|
return;
|
|
|
|
// add view/edit bar height
|
|
if( !isSankore && !override ){
|
|
height += $( this.elements.container ).find( "#mp_setup" ).outerHeight();
|
|
}
|
|
|
|
if( !override )
|
|
{
|
|
// apply min and max restrictions
|
|
width = Math.max( this.minWidth, width );
|
|
height = Math.max( this.minHeight, height );
|
|
if( this.maxWidth ){
|
|
width = Math.min( width, this.maxWidth );
|
|
}
|
|
}
|
|
|
|
// if viewed as a widget, resize the window
|
|
if( !isBrowser )
|
|
{
|
|
// dw and dh are paddings+margins+borders
|
|
var dw = this.getData( "dw" );
|
|
var dh = this.getData( "dh" );
|
|
|
|
if( override ) dw = dh = 0;
|
|
|
|
if( width == 0 ){
|
|
width = widget.width;
|
|
}
|
|
if( height == 0 ){
|
|
height = widget.height;
|
|
}
|
|
window.resizeTo( width + dw, height + dh );
|
|
}
|
|
|
|
// resize the container
|
|
var params = {};
|
|
if( width != 0 ){
|
|
params.width = width;
|
|
}
|
|
if( height != 0 ){
|
|
params.height = height;
|
|
}
|
|
console.log( params );
|
|
this.elements.container.animate( params );
|
|
|
|
};
|
|
|
|
/*
|
|
======================
|
|
setData and getData
|
|
======================
|
|
- store some data inside
|
|
*/
|
|
this.setData = function( name, value ){
|
|
data[name] = value;
|
|
};
|
|
this.getData = function( name ){
|
|
if( typeof( data[name] ) == "undefined" ){
|
|
return null;
|
|
} else return data[name];
|
|
};
|
|
|
|
this.viewSizeDefault = function(){
|
|
return {
|
|
w: this.elements.containerView.outerWidth(),
|
|
h: this.elements.containerView.outerHeight()
|
|
};
|
|
};
|
|
this.editSizeDefault = function(){
|
|
return {
|
|
w: this.elements.containerEdit.outerWidth(),
|
|
h: this.elements.containerEdit.outerHeight()
|
|
};
|
|
};
|
|
|
|
|
|
// redefinable methods
|
|
|
|
/*
|
|
==========================
|
|
onEditMode and onViewMode
|
|
==========================
|
|
- these are called when the mode is being changed
|
|
*/
|
|
this.onEditMode = function(){
|
|
//
|
|
};
|
|
this.onViewMode = function(){
|
|
//
|
|
};
|
|
|
|
/*
|
|
======================
|
|
viewSize and editSize
|
|
======================
|
|
- calculate container size for the adjustSize method
|
|
* they are likely to be redefined for each particular widget
|
|
*/
|
|
this.viewSize = function(){
|
|
return this.viewSizeDefault();
|
|
};
|
|
this.editSize = function(){
|
|
return this.editSizeDefault();
|
|
};
|
|
|
|
// constructor end
|
|
|
|
// if the constructor was called with a parameter,
|
|
// call create() automatically
|
|
if( arguments.length > 0 ){
|
|
this.create( containerID );
|
|
}
|
|
this.setData( "dw", this.elements.container.outerWidth( true ) - this.elements.container.width() );
|
|
this.setData( "dh", this.elements.container.outerHeight( true ) - this.elements.container.height() );
|
|
window.winstance = thisInstance;
|
|
}
|
|
|