git-svn-id: http://xe-core.googlecode.com/svn/trunk@620 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/editor/components/image_gallery/lang/ko.lang.php

@@ -0,0 +1,14 @@
+<?php
+    /**
+     * @file   /modules/editor/components/slide_show/lang/ko.lang.php
+     * @author zero <zero@nzeo.com>
+     * @brief  위지윅에디터(editor) 모듈 > 슬라이드쇼(slide_show) 컴포넌트의 언어팩
+     **/
+
+    $lang->slide_show = "슬라이드쇼 제작"; 
+    $lang->width = "가로크기"; 
+    $lang->height = "세로크기"; 
+    $lang->image_list = "이미지 목록"; 
+    $lang->cmd_make_thumbnail = "썸네일 생성"; 
+    $lang->about_image_list = "슬라이드쇼에 추가할 파일을 선택하세요. 선택후 드래그 또는 shift+클릭(범위선택), ctrl+클릭(개별선택) 가능합니다";
+?>

modules/editor/components/image_gallery/slide_show.class.php

@@ -0,0 +1,89 @@
+<?php
+    /**
+     * @class  slide_show
+     * @author zero (zero@nzeo.com)
+     * @brief  업로드된 이미지로 슬라이드 쇼를 만듬
+     **/
+
+    class slide_show extends EditorHandler { 
+
+        // upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
+        var $upload_target_srl = 0;
+        var $component_path = '';
+
+        /**
+         * @brief upload_target_srl과 컴포넌트의 경로를 받음
+         **/
+        function slide_show($upload_target_srl, $component_path) {
+            $this->upload_target_srl = $upload_target_srl;
+            $this->component_path = $component_path;
+        }
+
+        /**
+         * @brief popup window요청시 popup window에 출력할 내용을 추가하면 된다
+         **/
+        function getPopupContent() {
+            // 템플릿을 미리 컴파일해서 컴파일된 소스를 return
+            $tpl_path = $this->component_path.'tpl';
+            $tpl_file = 'popup.html';
+
+            Context::set("tpl_path", $tpl_path);
+
+            require_once("./classes/template/TemplateHandler.class.php");
+            $oTemplate = new TemplateHandler();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+        /**
+         * @brief 에디터 컴포넌트가 별도의 고유 코드를 이용한다면 그 코드를 html로 변경하여 주는 method
+         *
+         * 이미지나 멀티미디어, 설문등 고유 코드가 필요한 에디터 컴포넌트는 고유코드를 내용에 추가하고 나서
+         * DocumentModule::transContent() 에서 해당 컴포넌트의 transHtml() method를 호출하여 고유코드를 html로 변경
+         **/
+        function transHTML($xml_obj) {
+            $width = $xml_obj->attrs->width;
+            $height = $xml_obj->attrs->height;
+
+            $make_thumbnail = $xml_obj->attrs->make_thumbnail;
+            if(!$make_thumbnail) $make_thumbnail = "N";
+            else $make_thumbnail = "Y";
+
+            $body = $xml_obj->body;
+            $image_list = explode("\n",$body);
+
+            Context::set("slide_show_width", $width);
+            Context::set("slide_show_height", $height);
+            Context::set("slide_show_images", $image_list);
+            Context::set("slide_show_srl", rand(111111,999999));
+
+            $tpl_path = $this->component_path.'tpl';
+            $tpl_file = 'slide_show.html';
+
+            Context::set("tpl_path", $tpl_path);
+            require_once("./classes/template/TemplateHandler.class.php");
+            $oTemplate = new TemplateHandler();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+    }
+?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

modules/editor/components/image_gallery/tpl/popup.css

@@ -0,0 +1,69 @@
+.editor_window {
+  width:550px;
+  text-align:center;
+}
+
+.editor_title {
+  font-size:10pt;
+  font-weight:bold;
+  clear:both;
+  height:20px;
+  background-color:#555555;
+  color:#EFEFEF;
+  vertical-align:middle;
+  padding-top:5px;
+  border-bottom:1px solid #000000;
+  text-align:center;
+}
+
+.header {
+  float:left;
+  width:100px;
+  clear:left;
+  text-align:left;
+  font-weight:bold;
+  margin:5px;
+  font-size:9pt;
+}
+
+.body {
+  float:left;
+  width:350px;
+  text-align:left;
+  margin:5px;
+  font-size:9pt;
+  font-size:9pt;
+}
+
+.image_list {
+  width:380px;
+}
+
+.about_image_list {
+  margin-top:10px;
+  font-size:9pt;
+  color:#AAAAAA;
+}
+
+.editor_input {
+  width:40px;
+  height:13px;
+  font-size:9pt;
+  border:1px solid #AAAAAA;
+}
+
+.editor_button_area {
+  border-top:1px solid #AAAAAA;
+  text-align:center;
+  background-color:#EEEEEE;
+  padding:2px 0px 2px 0px;
+  clear:both;
+}
+
+.editor_button {
+  margin-top:4px;
+  background-color:#FFFFFF;
+  border:1px solid #AAAAAA;
+  height:16px;
+  font-size:9pt;
+}

modules/editor/components/image_gallery/tpl/popup.html

@@ -0,0 +1,34 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<!--%import("../lang")-->
+
+<form action="./" method="get" onSubmit="return false" id="fo">
+  <input type="hidden" name="upload_target_srl" value="{$upload_target_srl}" />
+  <div class="editor_window">
+
+    <div class="editor_title">{$lang->slide_show}</div>
+
+    <div class="header">{$lang->width}</div>
+    <div class="body"><input type="text" class="editor_input" id="width" value="600" />px</div>
+
+    <div class="header">{$lang->height}</div>
+    <div class="body"><input type="text" class="editor_input" id="height" value="600" />px</div>
+
+    <div class="header">{$lang->cmd_make_thumbnail}</div>
+    <div class="body"><input type="checkbox" id="make_thumbnail" value="Y" checked="true" /></div>
+
+    <div class="header">{$lang->image_list}</div>
+    <div class="body">
+      <div>
+        <select id="image_list" size="10" class="image_list" multiple="true">
+        </select>
+      </div>
+      <div class="about_image_list">{$lang->about_image_list}</div>
+    </div>
+
+    <div class="editor_button_area">
+      <input type="button" value="{$lang->cmd_insert}" class="editor_button" onclick="insertSlideShow()" />
+      <input type="button" value="{$lang->cmd_close}" class="editor_button" onclick="window.close();" />
+    </div>
+  </div>
+</form>

modules/editor/components/image_gallery/tpl/popup.js

@@ -0,0 +1,95 @@
+var selected_node = null;
+function getSlideShow() {
+    // 부모창이 있는지 체크 
+    if(typeof(opener)=="undefined") return;
+
+    // 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
+    var node = opener.editorPrevNode;
+    var selected_images = "";
+    if(node && node.nodeName == "DIV") {
+        selected_node = node;
+
+        var width = xWidth(selected_node)-6;
+        var height = xHeight(selected_node)-6;
+        var make_thumbnail = selected_node.getAttribute("make_thumbnail");
+        xGetElementById("width").value = width; 
+        xGetElementById("height").value = height; 
+        if(make_thumbnail=="Y") xGetElementById("make_thumbnail").checked = true;
+        else xGetElementById("make_thumbnail").checked = false;
+
+        selected_images = xInnerHtml(selected_node);
+    }
+
+    // 부모창의 업로드된 파일중 이미지 목록을 모두 가져와서 세팅 
+    var fo = xGetElementById("fo");
+    var upload_target_srl = fo.upload_target_srl.value;
+
+    var parent_list_obj = opener.xGetElementById("uploaded_file_list_"+upload_target_srl);
+
+    var list_obj = xGetElementById("image_list");
+
+    for(var i=0;i<parent_list_obj.length;i++) {
+        var opt = parent_list_obj.options[i];
+        var file_srl = opt.value;
+        var file_obj = opener.uploaded_files[file_srl];
+        var filename = file_obj.uploaded_filename;
+        if((/(jpg|jpeg|gif|png)$/).test(filename)) {
+            var selected = false;
+            if(selected_images.indexOf(filename)!=-1) selected = true;
+            var opt = new Option(opt.text, opt.value, false, selected);
+            list_obj.options.add(opt);
+        }
+    }
+}
+
+function insertSlideShow() {
+    if(typeof(opener)=="undefined") return;
+
+    var list = new Array();
+    var list_obj = xGetElementById("image_list");
+    for(var i=0;i<list_obj.length;i++) {
+        var opt = list_obj.options[i];
+        if(opt.selected) {
+            var file_srl = opt.value;
+            var file_obj = opener.uploaded_files[file_srl];
+            var filename = file_obj.uploaded_filename;
+            list[list.length] = filename;
+        }
+    }
+
+    if(!list.length) {
+        window.close();
+        return;
+    }
+
+    var width = xGetElementById("width").value;
+    var height = xGetElementById("height").value;
+    var make_thumbnail = "N";
+    if(xGetElementById("make_thumbnail").checked) make_thumbnail = "Y";
+    else make_thumbnail = "N";
+
+    var images_list = "";
+    for(var i=0; i<list.length;i++) {
+        images_list += list[i]+"\n";
+    }
+
+    if(selected_node) {
+        selected_node.setAttribute("width", width);
+        selected_node.setAttribute("height", height);
+        selected_node.setAttribute("make_thumbnail", make_thumbnail);
+        selected_node.style.width = width+"px";
+        selected_node.style.height = height+"px";
+        xInnerHtml(selected_node, images_list);
+    } else {
+        var text = "<div editor_component=\"slide_show\" class=\"editor_component_output\" make_thumbnail=\""+make_thumbnail+"\" width=\""+width+"\" height=\""+height+"\" style=\"width:"+width+"px;height:"+height+"px;\" >"+images_list+"</div>";
+        opener.editorFocus(opener.editorPrevSrl);
+        var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)
+        opener.editorReplaceHTML(iframe_obj, text);
+    }
+
+    opener.editorFocus(opener.editorPrevSrl);
+
+    window.close();
+}
+
+xAddEventListener(window, "load", getSlideShow);

modules/editor/components/image_gallery/tpl/slide_show.css

@@ -0,0 +1,26 @@
+.slide_loading_text {
+  color:#555555;
+  font-size:8pt;
+  font-family:tahoma;
+  font-weight:bold;
+  margin-top:20px;
+  text-align:center;
+}
+
+.slide_main_image_box {
+  border:3px solid #EEEEEE;
+  background-color:#FFFFFF;
+  margin:10px;
+}
+
+.slide_thumbnail_image_box {
+  background-color:#FFFFFF;
+  margin:10px;
+  text-align:center;
+}
+
+.slide_thumbnail_image_box img {
+  border:1px solid #555555;
+  padding:1px;
+  margin:4px;
+}

modules/editor/components/image_gallery/tpl/slide_show.html

@@ -0,0 +1,18 @@
+<!--%import("slide_show.js")-->
+<!--%import("slide_show.css")-->
+<script type='text/javascript'>
+  // 슬라이드쇼에 보여줄 이미지 등록
+  <!--@foreach($slide_show_images as $image)-->
+  slide_show_add_image({$slide_show_srl},'{$image}','{$image}');
+  <!--@end-->
+
+  // window.onLoad 이벤트 후에 슬라이드 쇼 시작 
+  xAddEventListener(window,'load',start_slide_show);
+</script>
+
+<div id='zone_slide_show_{$slide_show_srl}' style="width:{$slide_show_width}px;height:{$slide_show_height}px;" class="slide_main_image_box">
+  <div id="slide_loading_text" class="slide_loading_text">loading images...</div>
+  <img id="slide_main_image_{$slide_show_srl}" border="0" style="display:none" alt="slide" />
+</div>
+<div id='zone_thumbnail_{$slide_show_srl}' class="slide_thumbnail_image_box" style="width:{$slide_show_width}px;"></div>
+

modules/editor/components/image_gallery/tpl/slide_show.js

@@ -0,0 +1,152 @@
+/**
+ * @file  slide_show.js
+ * @brief 이미지 슬라이드 쇼 스크립트
+ * @author zero (zero@nzeo.com)
+ **/
+
+// 슬라이드쇼를 하기 위한 변수
+var slide_show_images = new Array();
+
+// 슬라이드쇼 이미지 목록에 추가
+function slide_show_add_image(srl, thumbnail_url, image_url) {
+  if(!thumbnail_url || !image_url) return;
+
+  // 객체 생성
+  var obj = {"srl":0, "thumbnail_url":null, "thumbnail":null, "image_url":null, "image":null}
+
+  // slide_show_images에 슬라이드 쇼 고유번호에 해당하는 공간을 초기화
+  if(typeof(slide_show_images[srl])=="undefined") slide_show_images[srl] = new Array();
+
+  // 슬라이드쇼 고유번호를 세팅
+  obj.srl = srl;
+  obj.idx = slide_show_images[srl].length;
+
+  // 썸네일 이미지를 미리 로딩
+  obj.thumbnail = new Image();
+  obj.thumbnail.src = thumbnail_url;
+  obj.thumbnail.style.cursor = "pointer";
+  obj.thumbnail.style.width = "60px";
+  obj.thumbnail.style.height = "60px";
+  obj.thumbnail.style.margin = "5px";
+  obj.thumbnail.style.opacity = 0.5;
+  obj.thumbnail.style.filter = "alpha(opacity=50)";
+
+  // 원본 이미지를 미리 로딩
+  obj.image = new Image();
+  obj.image.src = image_url;
+
+  // 썸네일 클릭시 메인 이미지로 바꾸어줌
+  xAddEventListener(obj.thumbnail, "mousedown", function() { display_slide_image(obj) });
+
+  // 생성된 객체를 slide_show_images[슬라이드쇼 고유번호]에 추가
+  slide_show_images[srl][slide_show_images[srl].length] = obj;
+}
+
+// 슬라이드쇼 시작
+function start_slide_show() {
+
+  // 등록된 모든 이미지 목록을 돌면서 thumbnail 목록을 만들어줌
+  for(var srl in slide_show_images) {
+
+    // 첫번째 이미지의 경우 큰 이미지 출력 시작 이미지 출력
+    display_slide_image(slide_show_images[srl][0]);
+
+    // 등록된 이미지가 없으면 pass~
+    if(!slide_show_images[srl].length) continue;
+
+    // 메인이미지가 나올 곳과 썸네일이 노출될 곳의 객체를 구함
+    var zone_thumbnail = xGetElementById('zone_thumbnail_'+srl);
+
+    // 썸네일 출력
+    for(var i=0; i<slide_show_images[srl].length;i++) {
+      zone_thumbnail.appendChild(slide_show_images[srl][i].thumbnail);
+    }
+
+  }
+}
+
+// 메인 이미지 표시
+function display_slide_image(obj) {
+  var zone = xGetElementById('zone_slide_show_' + obj.srl );
+
+  // 갤러리 외부 박스보다 이미지가 클 경우 resizing시킴 
+  var zone_width = xWidth(zone);
+  var zone_height = xHeight(zone);
+
+  var image_width = obj.image.width;
+  var image_height = obj.image.height;
+
+  var resize_scale = 1;
+
+  // 슬라이드 쇼 박스보다 큰 이미지는 크기를 줄여서 출력
+  if(image_width>(zone_width-30)) {
+    resize_scale = (zone_width-30)/image_width;
+    image_width = parseInt(image_width*resize_scale,10);
+    image_height = parseInt(image_height*resize_scale,10);
+  }
+
+  if(image_height>(zone_height-30)) {
+    resize_scale = (zone_height-30)/image_height;
+    image_width = parseInt(image_width*resize_scale,10);
+    image_height = parseInt(image_height*resize_scale,10);
+  }
+
+  var x = parseInt((zone_width - image_width)/2,10)-3;
+  var y = parseInt((zone_height - image_height)/2,10)-3;
+
+  // 로딩 텍스트 없앰
+  xGetElementById("slide_loading_text").style.display = "none";
+
+  // 이미지 표시 
+  var target_image = xGetElementById("slide_main_image_"+obj.srl);
+  target_image.style.display = "none";
+
+  target_image.src = obj.image.src;
+  target_image.srl = obj.srl;
+  target_image.idx = obj.idx;
+  target_image.style.opacity = 1;
+  target_image.style.filter = "alpha(opacity=100)";
+  target_image.start_opacity = 0;
+  xWidth(target_image, image_width);
+  xHeight(target_image, image_height);
+
+  target_image.style.margin = "0px;";
+  target_image.style.marginTop = y+"px";
+  target_image.style.marginLeft = x+"px";
+
+  target_image.style.display = "block";
+
+  // resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌
+  if(resize_scale!=1) {
+    target_image.style.cursor = 'pointer';
+    xAddEventListener(target_image, 'mousedown', slide_show_winopen);
+  } else {
+    target_image.style.cursor = 'default';
+    xRemoveEventListener(target_image, 'mousedown', slide_show_winopen);
+  }
+
+  // srl의 모든 썸네일의 투명도 조절
+  for(var i=0; i<slide_show_images[obj.srl].length;i++) {
+    if(i==obj.idx) {
+      slide_show_images[obj.srl][i].thumbnail.style.opacity = 1;
+      slide_show_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=100)";
+    } else {
+      slide_show_images[obj.srl][i].thumbnail.style.opacity = 0.5;
+      slide_show_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=50)";
+    }
+  }
+
+}
+
+// 큰 이미지의 경우 새창으로 띄워줌
+function slide_show_winopen(evt) {
+  var e = new xEvent(evt);
+  var obj = e.target;
+  var srl = obj.srl;
+  var idx = obj.idx;
+
+  var image_width = slide_show_images[srl][idx].image.width + 20;
+  var image_height = slide_show_images[srl][idx].image.height + 20;
+
+  winopen(slide_show_images[srl][idx].image.src, "SlideShow", "left=10,top=10,scrollbars=auto,resizable=yes,toolbars=no,width="+image_width+",height="+image_height);
+}