Создание встраивоемого модуля
 

добрый день.

Может кто уже сталкивался или копал существующие аналоги.

Мне нужно создать встраиваемый модуль на яваскрипте. т.е. что то на подобие янднес аналитики, реформал и т.п.

т.е. на моем сервере будет лежать JS файл. при вставке которого на странице сайта будет появляться кнопка (прилепленная к краям). по нажатию на нее должно будет открыться модальное окно с формой управления.

вся логика должна находиться на моем сервере. следовательно будет яваскрипт код, который уже будет создавать дом объекты и строить все на сайте клиента.

Вопрос по логике работы и использовании библиотек (jqeru, dojo, bootstrap ...) не важно. может есть готовые плагины для этого???

Пока сделал так:

var jQ = false;  
function initJQ() {  
	if (typeof(jQuery) == 'undefined') {
		console.log('wait');  
		setTimeout('initJQ()', 50);  
	} else {  
		console.log('setBut');  
		setHtml();		  
	}  
}  

function reportModuleShow(){
	$('#modalReport').modal({opacity:80,
                        overlayCss: {backgroundColor:"#fff"},
                        closeClass : "simp-close",
                        minWidth : 700,
                        maxWidth : 700,
                        minHeight : 300
                        });
	$('#modalReport').html('<center><img src="'+url+'/img/upload.gif"> Загружаем данные</center>');
}

function setHtml(){
	add_css('jquery.simplemodal.css');
	add_css('report_mod.css');
	$('#reportModuleDiv').css('position', "fixed");
	$('#reportModuleDiv').css('right', "10px");
	$('#reportModuleDiv').css('top', "20px");

    $("#reportModuleDiv").append('<a href="#" class="a_demo_one" onclick="reportModuleShow()">открыть</a>');
    $("#reportModuleDiv").append('<div id="modalReport" style="display : none;"></div>');
}

var div;
var url = 'http://localhost:9000/public/';

function initreportModule(){
	console.log('init');
	
	div = document.createElement('div');
	div.id = 'reportModuleDiv';
	document.body.appendChild(div);
	add_js('jquery-1.3.2.min.js');
	add_js('jquery.simplemodal.js');
	initJQ();
}
eval('initreportModule()');

function add_js (libs) {
	var jq = document.createElement('script');
	jq.type='text/javascript';
	div.appendChild(jq);
	jq.src = url + 'js/'+libs;
	
}

function add_css (libs) {
	var report_modcss = document.createElement('link');
	report_modcss.type='text/css';
	report_modcss.rel='stylesheet';
	div.appendChild(report_modcss);
	report_modcss.href = url + 'css/'+libs;
}

и вызов

<!--Report Module-->
<script type="text/javascript" src="http://localhost:9000/public/js/initReportModule.js"></script>
<!--/Report Module-->

Инкапсулируй свой модуль, не стоит глобал засирать. Особенно такими общеупотребительными именами, как div и url.

(function() {
  var div;
  var url = window.location.href;

  function function_for_export() {
    alert("Dick");
  }

  if (typeof module === "object" && module && typeof module.exports === "object")
  {
    module.exports.function_for_export = function_for_export;
  }
  else
  {
    window.function_for_export = function_for_export;
  }
})();

А тебе не кажется, что это просто initreportModule()?

прошу помощи в инкапсуляции. простой пример в пару строк! как дальше его вызывать? у jquery очень нравится как сделано (jQuery.show()) евал использую... вроде без него автоматически функции не вызывались... хотя возможно другие причины были.

Я ж показал. function_for_export - это любое название любой функции, которая должна стать доступной на странице, к которой модуль был подключен.
Ну присваивай все нужные функции как методы какому-либо объекту, и уже его отдавай на экспорт. Вообще-то это как раз правильно, но не всегда целесообразно.

А чо это она должна автоматически вызываться? Функция не будет вызванной ровно до тех пор, пока ты, очевидно, ее не вызовешь. Строчкой initreportModule() как раз и происходит вызов, да, никакой эвал не нужен.