Update styles preview system to work with JavaScript applications

src/messenger/webim/default.css

@@ -922,6 +922,11 @@ table.awaiting .no-threads, table.awaiting .no-visitors  {
 	font-size: 11px;
 }
 
+/* themes */
+.screenshot {
+	border: solid 1px #BBBBBB;
+}
+
 /* updates */
 
 #news {

src/messenger/webim/libs/common/configurations.php

@@ -87,7 +87,8 @@ function get_dialogs_style_config($style) {
 		),
 		'mail' => array(
 			'window_params' => ''
-		)
+		),
+		'screenshots' => array()
 	);
 
 	return $config;

src/messenger/webim/operator/themes.php

@@ -30,97 +30,25 @@ $stylelist = get_style_list("../styles/dialogs");
 
 $preview = verifyparam("preview", "/^\w+$/", "default");
 if (!in_array($preview, $stylelist)) {
-	$preview = $stylelist[0];
+	$style_names = array_keys($stylelist);
+	$preview = $stylelist[$style_names[0]];
 }
 
-$show = verifyparam("show", "/^(chat|nochat|mail|mailsent|survey|leavemessage|leavemessagesent|redirect|redirected|agentchat|agentrochat|error)$/", "");
+$style_config = get_dialogs_style_config($preview);
-$showerrors = verifyparam("showerr", "/^on$/", "") == "on";
-$errors = array();
-if ($showerrors || $show == 'error') {
-	$errors[] = "Test error";
-}
 
-if ($show == 'chat' || $show == 'mail' || $show == 'leavemessage' || $show == 'leavemessagesent' || $show == 'nochat') {
+$screenshots = array();
-	setup_chatview_for_user(array('threadid' => 0, 'userName' => getstring("chat.default.username"), 'ltoken' => 123), "ajaxed");
+foreach($style_config['screenshots'] as $name => $desc) {
-	$page['mailLink'] = "$webimroot/operator/themes.php?preview=$preview&show=mail";
+	$screenshots[] = array(
-	$page['info'] = "";
+		'name' => $name,
-	expand("../styles/dialogs", "$preview", "$show.tpl");
+		'file' => $webimroot . '/styles/dialogs/' . $preview
-	exit;
+			. '/screenshots/' . $name . '.png',
+		'description' => $desc
+	);
 }
-if ($show == 'survey') {
-	setup_survey("Visitor", "", "", "", "http://google.com");
-	setup_logo();
-	expand("../styles/dialogs", "$preview", "$show.tpl");
-	exit;
-}
-if ($show == 'mailsent' || $show == 'error') {
-	$page['email'] = "admin@yourdomain.com";
-	setup_logo();
-	expand("../styles/dialogs", "$preview", "$show.tpl");
-	exit;
-}
-if ($show == 'redirect' || $show == 'redirected' || $show == 'agentchat' || $show == 'agentrochat') {
-	setup_chatview_for_operator(
-		array(
-			 'threadid' => 0,
-			 'userName' => getstring("chat.default.username"),
-			 'remote' => "1.2.3.4",
-			 'agentId' => 1,
-			 'groupid' => 0,
-			 'userid' => 'visitor1',
-			 'locale' => $current_locale,
-			 'ltoken' => $show == 'agentrochat' ? 124 : 123),
-		array(
-			 'operatorid' => ($show == 'agentrochat' ? 2 : 1),
-		));
-	if ($show == 'redirect') {
-		setup_redirect_links(0, $operator, $show == 'agentrochat' ? 124 : 123);
-	} elseif ($show == 'redirected') {
-		$page['message'] = getlocal2("chat.redirected.content", array("Administrator"));
-	}
-	$page['redirectLink'] = "$webimroot/operator/themes.php?preview=$preview&show=redirect";
-	expand("../styles/dialogs", "$preview", "$show.tpl");
-	exit;
-}
-
-$templateList = array(
-	array('label' => getlocal("page.preview.userchat"), 'id' => 'chat', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.nochat"), 'id' => 'nochat', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.survey"), 'id' => 'survey', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.leavemessage"), 'id' => 'leavemessage', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.leavemessagesent"), 'id' => 'leavemessagesent', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.mail"), 'id' => 'mail', 'h' => 254, 'w' => 603),
-	array('label' => getlocal("page.preview.mailsent"), 'id' => 'mailsent', 'h' => 254, 'w' => 603),
-	array('label' => getlocal("page.preview.redirect"), 'id' => 'redirect', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.redirected"), 'id' => 'redirected', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.agentchat"), 'id' => 'agentchat', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.agentrochat"), 'id' => 'agentrochat', 'h' => 480, 'w' => 640),
-	array('label' => getlocal("page.preview.error"), 'id' => 'error', 'h' => 480, 'w' => 640),
-);
-
-$template = verifyparam("template", "/^\w+$/", "chat");
 
 $page['formpreview'] = $preview;
-$page['formtemplate'] = $template;
-$page['canshowerrors'] = $template == 'leavemessage' || $template == 'mail' || $template == 'all';
-$page['formshowerr'] = $showerrors;
 $page['availablePreviews'] = $stylelist;
-$page['availableTemplates'] = array(
+$page['screenshotsList'] = $screenshots;
-	"chat", "nochat",
-	"survey", "leavemessage", "leavemessagesent",
-	"mail", "mailsent",
-	"redirect", "redirected",
-	"agentchat", "agentrochat", "error",
-	"all");
-
-$page['showlink'] = "$webimroot/operator/themes.php?preview=$preview&" . ($showerrors ? "showerr=on&" : "") . "show=";
-
-$page['previewList'] = array();
-foreach ($templateList as $tpl) {
-	if ($tpl['id'] == $template || $template == 'all') {
-		$page['previewList'][] = $tpl;
-	}
-}
 
 prepare_menu($operator);
 start_html_output();

src/messenger/webim/styles/dialogs/silver/config.ini

@@ -7,4 +7,11 @@ window_params = "toolbar=0,scrollbars=0,location=0,status=1,menubar=0,width=640,
 
 [mail]
 ; window_param use as param string in JavaScript window.open method
-window_params = "toolbar=0,scrollbars=0,location=0,status=1,menubar=0,width=603,height=254,resizable=0"
+window_params = "toolbar=0,scrollbars=0,location=0,status=1,menubar=0,width=603,height=254,resizable=0"
+
+; Screenshots section describe all screenshots shiped with style
+; Params names should be equals to file names without extension. Pictures
+; extension should be '.png'
+; Params values should be equals to screenshot desription
+[screenshots]
+client_chat = "Client chat window"

src/messenger/webim/view/themes.php

@@ -40,30 +40,13 @@ function tpl_content() { global $page, $webimroot;
 				<select name="preview" onchange="this.form.submit();"><?php foreach($page['availablePreviews'] as $k) { echo "<option value=\"".$k."\"".($k == form_value("preview") ? " selected=\"selected\"" : "").">".$k."</option>"; } ?></select>
 			</div>
 		</div>
-		<div class="field">
+<?php foreach($page['screenshotsList'] as $screenshot) { ?>
-			<div class="flabel"><?php echo getlocal("page.preview.choosetpl") ?></div>
-			<div class="fvaluenodesc">
-				<select name="template" onchange="this.form.submit();"><?php foreach($page['availableTemplates'] as $k) { echo "<option value=\"".$k."\"".($k == form_value("template") ? " selected=\"selected\"" : "").">".$k."</option>"; } ?></select>
-			</div>
-		</div>
-<?php if( $page['canshowerrors'] ) { ?>
-		<div class="field">
-			<div class="flabel"><?php echo getlocal("page.preview.showerr") ?></div>
-			<div class="fvaluenodesc">
-				<input type="checkbox" name="showerr" value="on"<?php echo form_value_cb('showerr') ? " checked=\"checked\"" : "" ?> onchange="this.form.submit();"/>
-			</div>
-		</div>
-<?php } ?>
-<?php foreach( $page['previewList'] as $pp ) { ?>
 		<div class="field">
 			<div class="flabel">
-			<?php echo htmlspecialchars($pp['label']) ?>
+				<?php echo($screenshot['description']); ?>
-			<a href="<?php echo $page['showlink'] ?><?php echo $pp['id'] ?>" target="_blank" title="in separate window" onclick="this.newWindow = window.open('<?php echo $page['showlink'] ?><?php echo $pp['id'] ?>', '<?php echo $pp['id'] ?>', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,width=<?php echo $pp['w'] ?>,height=<?php echo $pp['h'] ?>,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;">link</a>
 			</div>
 			<div class="fvalueframe">
-			<iframe id="sample<?php echo $pp['id'] ?>" width="<?php echo $pp['w'] ?>" height="<?php echo $pp['h'] ?>" src="<?php echo $page['showlink'] ?><?php echo $pp['id'] ?>" frameborder="0" scrolling="no">
+				<img class="screenshot" alt="<?php echo($screenshot['name']); ?>" src="<?php echo($screenshot['file']); ?>" />
-				No iframes
-			</iframe>
 			</div>
 		</div>
 <?php } ?>