Disclaimer, I posted this
here, but was told it wasn't the place since it was more of a question of approach than non-working code. In hindsight I agree, SO isn't really the place for discussing things.
Apologies for the long post, I've tried to only include the relevant bits and the code works, I'm just looking for a better/more accepted method.
I'm really just beginning in Javascript, and despite much googling I can't find the preferred method of doing what I'm attempting to do.
I'm creating a desktop style web page which will have a lot of small self contained applications that I want to load in as required through Ajax. Some of these may take a while to load, so I don't want to load them all at once and many of them will not be required for all users. I'm also trying to limit the scope of the variables since a lot of the "widgets" will use the same libraries so I'm trying to create self contained javascript modules (keeping them separate to make them easier to work on in isolation) that "plug in" to the desktop module. I'm currently using a model like the below (simplified) and to be honest, I'm not really sure whether I'm committing some fundamental errors since I've never used js in this way before.
I've used this as the base of what I'm doing:
http://sonspring.com/journal/jquery-desktop
I've got a main page that lays out the desktop environment, each widget will be called by clicking on a link like this:
PHP Code:
<a class="abs icon ui-draggable active" style="left:20px;top:100px;" href="#icon_dock_admin" rel="targets">
<img src="/images/desktop/icons/icon_32_drive.png">
Targets
</a>
Which chains to (in the taskbar):
PHP Code:
<li id="icon_dock_targets">
<a href="#window_targets">
<img src="/images/desktop/icons/icon_22_admin.png">
Admin
</a>
</li>
The base js looks something like:
PHP Code:
var DSK = (function($, window, undefined) {
return {
go: function() {
for (var i in DSK.init) {
DSK.init[i]();
}
},
init: {
desktop: {
var d = $(document);
d.on('dblclick', 'a.icon', function() {
// Get the target.
var winsrc = $(this).attr('rel');
//check rel exists
if(typeof winsrc !== 'undefined' && winsrc !== false) {
var x = $(this).attr('href');
var y = $(x).find('a').attr('href');
// Load the window if it doesn't exist in the page.
if($(y).length==0) {
$.get('/'+winsrc, function(data) {
$("#desktop").append(data);
DSK.apps[winsrc].go();
});
} else {
//show window
}
} else {
alert('application not found');
}});
}
},
apps: {}
}
})(jQuery, this, this.document);
The page (widget) that it calls is structured like this:
PHP Code:
<div id="window_targets" class="abs window">
//some stuff
</div>
<script src="/js/desktopApps/targets.js"></script>
The js for each widget is structured like this:
PHP Code:
DSK.apps.targets = (function($, undefined) {
return {
go: function() {
var tgts = DSK.apps.targets;
for (var i in tgts.init) {
tgts.init[i]();
}
},
init: {
//Loading code
logIt: function() {
//some code
}
}
}
})(jQuery, this);
All the code works and works for multiple widgets, but I'm thinking there's probably a better way of doing all this. So are there any major issues with my approach? and are there any frameworks/guidelines out there on how to load self contained js widgets into and existing page? The widgets will have a lot of html in them, so it's useful to be able to edit this directly rather than import the whole lot as javascript, it's also generated by PHP - I'm using codeigniter.
Any advice/pointers would be very much appreciated, thanks in advance.