From 46c3f6939869a76f0f511125ec91078bdf9f708a Mon Sep 17 00:00:00 2001
From: ovclas <ovclas@gmail.com>
Date: Thu, 27 Sep 2012 06:40:23 +0000
Subject: [PATCH] issue 2390 Importer UI refactoring

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11548 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/admin/tpl/js/admin.js    | 292 +++++++++++++++++++++++++++++++
 modules/importer/tpl/header.html |   4 +-
 modules/importer/tpl/index.html  |  30 ++--
 3 files changed, 310 insertions(+), 16 deletions(-)

diff --git a/modules/admin/tpl/js/admin.js b/modules/admin/tpl/js/admin.js
index 48b8a89dd..10c46aa2c 100644
--- a/modules/admin/tpl/js/admin.js
+++ b/modules/admin/tpl/js/admin.js
@@ -427,6 +427,298 @@ $.fn.xeContentToggler = function(){
 $('a.tgAnchor').xeContentToggler();
 
 });
+
+// Module finder
+jQuery(function($){
+
+$.fn.xeModuleFinder = function(){
+	this
+		.not('.xe-module-finder')
+		.addClass('xe-module-finder')
+		.find('a.tgAnchor.findsite')
+			.bind('before-open.tc', function(){
+				var $this, $ul, val;
+
+				$this = $(this);
+				$ul   = $($this.attr('href')).find('>ul');
+				val   = $this.prev('input:text').val();
+
+				function on_complete(data) {
+					var $li, list = data.site_list, i, c;
+
+					$ul.empty();
+					$this.closest('.modulefinder').find('.moduleList,.moduleIdList').attr('disabled','disabled');
+
+					if(data.error || !$.isArray(list)) {
+						$this.trigger('close.tc');
+						return;
+					}
+
+					for(i=0,c=list.length; i < c; i++) {
+						$li = $('<li />').appendTo($ul);
+						$('<button type="button" />').text(list[i].domain).data('site_srl', list[i].site_srl).appendTo($li);
+					}
+				};
+
+				$.exec_json('admin.getSiteAllList', {domain:val}, on_complete);
+			})
+		.end()
+		.find('.tgContent.suggestion')
+			.delegate('button','click',function(){
+				var $this, $finder;
+
+				$this    = $(this);
+				$finder  = $this.closest('.modulefinder');
+
+				function on_complete(data) {
+					var $mod_select, list = data.module_list, x;
+
+					if(data.error || !list) return;
+
+					$mod_select = $finder.find('.moduleList').data('module_list', list).removeAttr('disabled').empty();
+					for(x in list) {
+						if(!list.hasOwnProperty(x)) continue;
+						$('<option />').attr('value', x).text(list[x].title).appendTo($mod_select);
+					}
+					$mod_select.prop('selectedIndex', 0).change().focus();
+
+					if(!$mod_select.is(':visible')) {
+						$mod_select
+							.slideDown(100, function(){
+								$finder.find('.moduleIdList:not(:visible)').slideDown(100).trigger('show');
+							})
+							.trigger('show');
+					}
+				};
+
+				$finder.find('a.tgAnchor.findsite').trigger('close.tc');
+
+				$.exec_json('module.procModuleAdminGetList', {site_srl:$this.data('site_srl')}, on_complete);
+			})
+		.end()
+		.find('.moduleList,.moduleIdList').hide().end()
+		.find('.moduleList')
+			.change(function(){
+				var $this, $mid_select, val, list;
+
+				$this   = $(this);
+				val     = $this.val();
+				list    = $this.data('module_list');
+
+				if(!list[val]) return;
+
+				list = list[val].list;
+				$mid_select = $this.closest('.modulefinder').find('.moduleIdList').removeAttr('disabled').empty();
+
+				for(var x in list) {
+					if(!list.hasOwnProperty(x)) continue;
+					$('<option />').attr('value', list[x].module_srl).text(list[x].browser_title).appendTo($mid_select);
+				}
+				$mid_select.prop('selectedIndex', 0).change();
+			});
+
+	return this;
+};
+$('.modulefinder').xeModuleFinder();
+
+});
+
+// Module Search : A New Version Of Module Finder
+jQuery(function($){
+
+_xeModuleSearch = function(){
+	var t = this;
+	var $t = $(this);
+
+	var $moduleSearchWindow = $t.find(".moduleSearchWindow");
+
+	var $siteListDiv = $moduleSearchWindow.find('.siteList');
+	var $moduleTypeListDiv = $moduleSearchWindow.find('.moduleTypeList');
+	var $moduleInstanceListDiv = $moduleSearchWindow.find('.moduleInstanceList');
+
+	var $siteList = $siteListDiv.find('UL');
+	var $moduleTypeList = $moduleTypeListDiv.find('UL');
+	var $moduleInstanceList = $moduleInstanceListDiv.find('SELECT');
+
+	var $siteListSearchInput = $moduleSearchWindow.find('INPUT.siteListSearchInput');
+	var aSiteListData;
+
+	var MAX_LIST_HEIGHT = 280;
+	
+	function setListSize($UL, nHeight){
+		var nWidth, $div;
+		$UL.find('li div').width('');
+		$UL.css('height', '');
+		$UL.css('overflow-y', '');
+		if($UL.height() > nHeight){
+			$div = $UL.find('li div');
+			$div.width($div.width()-20+'px');
+			$UL.css('height', nHeight+'px');
+			$UL.css('overflow-y', 'auto');
+		}
+	}
+
+	function setSiteList(sFilter){
+		var sDomain;
+		var rxFilter = new RegExp(sFilter, "ig");
+		var list = aSiteListData;
+
+		$siteList.empty();
+	
+		for(i=0,c=list.length; i < c; i++) {
+			sDomain = list[i].domain;
+			if(sFilter){
+				if(!sDomain.match(rxFilter)) continue;
+				sDomain = sDomain.replace(rxFilter, function(sKeyword){
+					return '<span class="highlight">'+sKeyword+'</span>';
+				});
+			}
+
+			$li = $('<li />').appendTo($siteList);
+			$('<a>').attr('href', '#').html(
+				'<div>' + sDomain + '</div>' +
+				'<span class="icon-circle-arrow-right" style="display:inline-block;float:right;width:16px;height:16px;"></span>'
+			).data('site_srl', list[i].site_srl).appendTo($li);
+		}
+
+		setListSize($siteList, MAX_LIST_HEIGHT - $siteListSearchInput.parent("DIV").height());
+	}
+
+	$siteListSearchInput.keyup(function(){
+		setSiteList($siteListSearchInput.val());
+	});
+
+	if(typeof console == 'undefined'){
+		console={log:function(){}};
+	}
+
+	$t
+		.not('.xe-module-search')
+		.addClass('xe-module-search')
+		.find('a.tgAnchor.moduleSearch')
+			.bind('before-open.tc', function(){
+				var $this;
+
+				$this = $(this);
+
+				function on_complete(data) {
+					var $li, list = data.site_list, i, c;
+
+					if(data.error || !$.isArray(list)) {
+						$this.trigger('close.tc');
+						return;
+					}
+
+					aSiteListData = list;
+
+					setSiteList($siteListSearchInput.val());
+
+					$siteListSearchInput.focus();
+				};
+
+				$siteList.empty();
+				$moduleInstanceList.empty();
+				$moduleTypeListDiv.hide();
+				$moduleInstanceListDiv.hide();
+				$.exec_json('admin.getSiteAllList', {domain:""}, on_complete);
+			})
+		.end()
+		.find('.tgContent .siteListUL')
+			.delegate('a','click',function(oEvent){
+				var $this, $finder;
+
+				$this    = $(this);
+				$finder  = $this.closest('.modulefinder');
+
+				function on_complete(data) {
+
+					var list = data.module_list, x;
+
+					if(data.error || !list) return;
+
+					for(x in list) {
+						if(!list.hasOwnProperty(x)) continue;
+						$li = $('<li />').appendTo($moduleTypeList);
+						$('<a>').attr('href', '#').html(
+							'<div>'+list[x].title+'</div>' +
+							'<span class="icon-circle-arrow-right" style="display:inline-block;float:right;width:16px;height:16px;"></span>'
+						).data('moduleInstanceList', list[x].list).appendTo($li);
+						//$('<option />').attr('value', x).text(list[x].title).appendTo($mod_select);
+					}
+
+					$moduleSearchWindow.find('.moduleTypeList').show();
+					setListSize($moduleTypeList, MAX_LIST_HEIGHT);
+
+					$siteList.find('li').removeClass('on');
+					$this.parent('li').addClass('on');
+				};
+
+				//$finder.find('a.tgAnchor.findsite').trigger('close.tc');
+				$moduleTypeList.empty();
+				$moduleInstanceListDiv.hide();
+
+				$.exec_json('module.procModuleAdminGetList', {site_srl:$this.data('site_srl')}, on_complete);
+
+				oEvent.preventDefault();
+			})
+		.end()
+		//.find('.moduleList,.moduleIdList').hide().end()
+		.find('.moduleTypeListUL')
+			.delegate('a', 'click', function(oEvent){
+			
+				var $this, $mid_select, val, list;
+
+				$this = $(this);
+				list = $this.data('moduleInstanceList');
+				if(!list) return;
+
+				t.sSelectedModuleType = $this.text();
+				$moduleInstanceList.empty();
+
+				for(var x in list) {
+					if(!list.hasOwnProperty(x)) continue;
+
+					$li = $('<option />').html(list[x].browser_title).appendTo($moduleInstanceList).val(list[x].module_srl).data('mid', list[x].module_srl)
+							.data('module_srl', list[x].module_srl).data('layout_srl', list[x].layout_srl).data('browser_title', list[x].browser_title);
+				}
+
+				$moduleInstanceListDiv.show();
+				setListSize($moduleInstanceList, MAX_LIST_HEIGHT);
+
+				$moduleTypeList.find('li').removeClass('on');
+				$this.parent('li').addClass('on');
+
+				oEvent.preventDefault();
+			})
+		.end()
+		.find('.moduleSearch_ok').click(function(oEvent){
+				var aSelected = [];
+				$t.find('.moduleInstanceListSelect option:selected').each(function(){
+					aSelected.push({
+						'type' : t.sSelectedModuleType,
+						'module_srl' : $(this).data('module_srl'),
+						'layout_srl' : $(this).data('layout_srl'),
+						'browser_title' : $(this).data('browser_title')
+					});
+				});
+
+				$t.trigger('moduleSelect', [aSelected]);
+				$('.tgAnchor.moduleSearch').trigger('close.tc');
+				
+				oEvent.preventDefault();
+			});
+			
+
+	return this;
+};
+
+$.fn.xeModuleSearch = function(){
+	$(this).each(_xeModuleSearch);
+};
+
+$('.moduleSearch').xeModuleSearch();
+});
+
 // Sortable table
 jQuery(function($){
 
diff --git a/modules/importer/tpl/header.html b/modules/importer/tpl/header.html
index 629153a82..04aae4331 100644
--- a/modules/importer/tpl/header.html
+++ b/modules/importer/tpl/header.html
@@ -4,5 +4,7 @@
 <load target="js/importer_admin.min.js" usecdn="true" />
 <!--@end-->
 {@ $type_list = array('module'=>$lang->type_module, 'ttxml'=>$lang->type_ttxml, 'member'=>$lang->type_member, 'sync'=>$lang->type_syncmember, 'message'=>$lang->type_message) }
-<h1 class="h1">{$lang->importer}</h1>
+<div class="x_page-header">
+<h1>{$lang->importer}</h1>
+</div>
 <p>{nl2br($lang->about_importer)}</p>
diff --git a/modules/importer/tpl/index.html b/modules/importer/tpl/index.html
index 260802a29..6a626741d 100644
--- a/modules/importer/tpl/index.html
+++ b/modules/importer/tpl/index.html
@@ -5,24 +5,24 @@
 	<p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
 
-<form action="./" class="form" method="get" onsubmit="return doPreProcessing(this, 'documentForm')" id="documentForm">
+<form action="./" method="get" onsubmit="return doPreProcessing(this, 'documentForm')" id="documentForm">
 	<input type="hidden" name="act" value="" />
 	<input type="hidden" name="type" value="module" />
 	<input type="hidden" name="unit_count" value="10" />
-	<h2 class="h2">{$lang->type_module}</h2>
+	<h2>{$lang->type_module}</h2>
 	<ul>
 		<li>
 			<p class="q">{$lang->xml_path} {$lang->path_info}</p>
 			<p class="a checkxml">
 				<input type="text" name="xml_file" value="./" />
-				<button type="button">{$lang->cmd_check_path}</button>
+				<button type="button" class="x_btn">{$lang->cmd_check_path}</button>
 				<em class="desc"></em><!--//class="error|success"-->
 			</p>
 		</li>
 		<li class="xml ttxml modulefinder">
 		<p class="q">{$lang->data_destination} <br />{$lang->import_desc}</p>
 			<div class="a">
-				<input type="text" name="site_keyword" /> <a href="#suggestion1" class="tgAnchor findsite">{$lang->find_site}</a>
+				<input type="text" name="site_keyword" /> <a href="#suggestion1" class="tgAnchor findsite x_btn">{$lang->find_site}</a>
 				<div id="suggestion1" class="tgContent suggestion">
 					<ul></ul>
 				</div>
@@ -41,7 +41,7 @@
 		<li class="ttxml modulefinder">
 			<p class="q">{$lang->guestbook_destination}</p>
 			<div class="a">
-				<input type="text" name="site_keyword" /> <a href="#suggestion3" class="tgAnchor findsite">{$lang->find_site}</a>
+				<input type="text" name="site_keyword" /> <a href="#suggestion3" class="tgAnchor findsite x_btn">{$lang->find_site}</a>
 				<div id="suggestion3" class="tgContent suggestion">
 					<ul></ul>
 				</div>
@@ -67,19 +67,19 @@
 		</li>
 	</ul>
 	<div class="btnArea">
-		<span class="btn"><input type="submit" value="{$lang->importer}" /></span>
+		<button type="submit" class="x_btn x_btn-primary">{$lang->importer}</button>
 	</div>
 </form>
-<form action="./" class="form" method="get" onsubmit="return doPreProcessing(this, 'memberForm')" id="memberForm">
+<form action="./" method="get" onsubmit="return doPreProcessing(this, 'memberForm')" id="memberForm">
 	<input type="hidden" name="type" value="member" />
 	<input type="hidden" name="unit_count" value="100" />
-	<h2 class="h2">{$lang->type_member}</h2>
+	<h2>{$lang->type_member}</h2>
 	<ul>
 		<li>
 			<p class="q">{$lang->xml_path} {$lang->path_info}</p>
 			<p class="a checkxml">
 				<input type="text" name="xml_file" value="./" />
-				<button type="button">{$lang->cmd_check_path}</button>
+				<button type="button" class="x_btn">{$lang->cmd_check_path}</button>
 				<em class="desc">{$lang->msg_no_xml_file}</em>
 			</p>
 		</li>
@@ -89,29 +89,29 @@
 		</li>
 	</ul>
 	<div class="btnArea">
-		<span class="btn"><input type="submit" value="{$lang->importer}" /></span>
+		<button type="submit" class="x_btn x_btn-primary">{$lang->importer}</button>
 	</div>
 </form>
-<form action="./" class="form" method="get" onsubmit="return doPreProcessing(this)" id="fo_import">
+<form action="./" method="get" onsubmit="return doPreProcessing(this)" id="fo_import">
 	<input type="hidden" name="type" value="message" />
 	<input type="hidden" name="unit_count" value="100" />
-	<h2 class="h2">{$lang->type_message}</h2>
+	<h2>{$lang->type_message}</h2>
 	<ul>
 		<li>
 			<p class="q">{$lang->xml_path} {$lang->path_info}</p>
 			<p class="a checkxml">
 				<input type="text" name="xml_file" value="./" />
-				<button type="button">{$lang->cmd_check_path}</button>
+				<button type="button" class="x_btn">{$lang->cmd_check_path}</button>
 				<em class="desc"></em><!--//class="error|success"-->
 			</p>
 		</li>
 	</ul>
 	<div class="btnArea">
-		<span class="btn"><input type="submit" value="{$lang->importer}" /></span>
+		<button type="submit" class="x_btn x_btn-primary">{$lang->importer}</button>
 	</div>
 </form>
 <a href="#process" class="modalAnchor"></a>
-<div class="modal" id="process" style="display:none;">
+<div class="x_modal" id="process" style="display:none;">
     <form action="./" method="get" onsubmit="return doImport()" id="fo_process" class="fg">
         <input type="hidden" name="type" value="" />
         <input type="hidden" name="total" value="" />