fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-04 01:01:41 +09:00
Code Issues Projects Releases Packages Wiki Activity

네모의 꿈/ 컨텐츠 위젯 스킨 (#712)

Browse source 
## 컨텐츠 모듈 스킨

- 사이트 테마를 따르지 않고 다른 색을 선택할 수 있도록 네모의 꿈 회원 스킨 컬러셋 추가.
- 탭이 많을 때 터치 환경이 아니면 좌우로 넘기기 어려운 점을 고려하여서 메뉴를 펼침.
- 작은 화면에서 화면을 최대한 활용하도록, 레이아웃 햄버거 메뉴를 부드럽게 나타내고 감춥니다.

## 위젯에서 LESS/SCSS 의 사용
- 변수를 위젯 캐시에도 전달할 수 있도록 해서 LESS 나 SCSS 에 값 전달이 가능하도록 함.
- LESS 나 SCSS 를 사용한 경우에 위젯 코드 캐싱 코드가 적절하게 기록되도록 해서 LESS나 SCSS 를 사용
가능하도록 수정.

## 그 외 변화
- Reduce the number of regular expressions.
This commit is contained in:
Min-Soo Kim 2017-02-26 01:05:57 +09:00 • committed by GitHub
parent b1ba031117
commit 5140047b5f
26 changed files with 1286 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

14
classes/display/HTMLDisplayHandler.php
View file

@ -174,7 +174,7 @@ class HTMLDisplayHandler
$output = preg_replace_callback('!<meta(.*?)(?:\/|)>!is', array($this, '_moveMetaToHeader'), $output);
// change a meta fine(widget often put the tag like <!--Meta:path--> to the content because of caching)
$output = preg_replace_callback('/<!--(#)?Meta:([a-z0-9\_\-\/\.\@\:]+)-->/is', array($this, '_transMeta'), $output);
$output = preg_replace_callback('/<!--(#)?Meta:([a-z0-9\_\-\/\.\@\:]+)(\?\$\_\_Context\-\>[a-z0-9\_\-\/\.\@\:]+)?-->/is', array($this, '_transMeta'), $output);
// handles a relative path generated by using the rewrite module
if(Context::isAllowRewrite())
@ -370,9 +370,17 @@ class HTMLDisplayHandler
{
return '';
}
Context::loadFile($matches[2]);
if($matches[3])
{
$vars = Context::get(str_replace('?$__Context->', '', $matches[3]));
Context::loadFile(array($matches[2], null, null, null, $vars));
}
else
{
Context::loadFile($matches[2]);
}
}
/**
* Add OpenGraph metadata tags.
*

11
classes/template/TemplateHandler.class.php
View file

@ -805,6 +805,7 @@ class TemplateHandler
else
{
$metafile = $attr['target'];
$metavars = ($attr['vars'] ? self::_replaceVar($attr['vars']) : '');
$result = "\$__tmp=array('{$attr['target']}','{$attr['media']}','{$attr['targetie']}','{$attr['index']}'," . ($attr['vars'] ? self::_replaceVar($attr['vars']) : 'array()') . ");Context::loadFile(\$__tmp);unset(\$__tmp);";
}
break;
@ -813,7 +814,15 @@ class TemplateHandler
$result = "<?php {$result} ?>";
if($metafile)
{
$result = "<!--#Meta:{$metafile}-->" . $result;
if(!$metavars)
{
$result = "<!--#Meta:{$metafile}-->" . $result;
}
else
{
// LESS or SCSS needs the variables to be substituted.
$result = "<!--#Meta:{$metafile}?{$metavars}-->" . $result;
}
}
return $result;

2
layouts/simple_world/layout.html
View file

@ -48,7 +48,7 @@
{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
<!--// Load styles -->
{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
{@Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
<load target="layout.scss" vars="$layout_scss_value" />
<load target="layout.js" />

6
layouts/simple_world/layout.js
View file

@ -67,8 +67,10 @@ $(function()
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
{
$("#layout_menu_toggle").fadeIn();
$("#layout_menu_toggle").css('display', '');
$("#layout_menu_toggle").fadeIn(400, function() {
$("#layout_menu_toggle").css('display', '')
});
;
}
}
previousScroll = currentScroll;

7
modules/member/skins/simple_world/common_header.html
View file

@ -41,8 +41,8 @@
<block cond="$layout_info->extra_var->primary_color->type !== 'select' && $layout_info->extra_var->customized_primary_color->type !== 'colorpicker'">
{@$layout_info->primary_color = 'blue';}
</block>
<!--// Load styles -->
{@$colorset = $material_colors[$member_config->colorset];}
{@$skin_color = $material_colors[$layout_info->primary_color];}
<block cond="!$skin_color">
<!--@if(preg_match("/#([a-f0-9]{3}){1,2}/i", $layout_info->primary_color))-->
@ -54,7 +54,10 @@
{@$skin_color = '#f44336'}
<!--@endif-->
</block>
{Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
<block cond="$colorset">
{@$skin_color = $colorset}
</block>
{@Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
<load target="css/css.less" vars="$simple_less_value" />
<section class="rx_simple_member">
<div class="rx_simple_tab" cond="$is_logged && $logged_info->menu_list && (!$member_srl || $member_srl == $logged_info->member_srl)">

7
modules/member/skins/simple_world/css/css.less
View file

@ -188,9 +188,6 @@ script, style
.rx_simple_member div.rx_simple_tab{
background: #ffffff;
margin: 5px 0;
height: 52px;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
box-sizing: border-box;
}
@ -198,9 +195,7 @@ script, style
list-style: outside none none;
margin: 0;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 0px 100px;
padding: 6px 0;
text-decoration: none;
}

90
modules/member/skins/simple_world/skin.xml
View file

@ -11,6 +11,94 @@
<name xml:lang="en">misol</name>
</author>
<colorset type="colorpicker">
<colorset>
<color name="theme">
<title xml:lang="ko">사이트 테마 색</title>
<title xml:lang="en">The site theme color</title>
</color>
<color name="red">
<title xml:lang="ko">붉은 색</title>
<title xml:lang="en">Red</title>
</color>
<color name="crimson">
<title xml:lang="ko">크림슨</title>
<title xml:lang="en">Crimson</title>
</color>
<color name="pink">
<title xml:lang="ko">분홍</title>
<title xml:lang="en">Pink</title>
</color>
<color name="purple">
<title xml:lang="ko">보라</title>
<title xml:lang="en">Purple</title>
</color>
<color name="deep-purple">
<title xml:lang="ko">진보라</title>
<title xml:lang="en">Deep Purple</title>
</color>
<color name="indigo">
<title xml:lang="ko">인디고</title>
<title xml:lang="en">Indigo</title>
</color>
<color name="deep-blue">
<title xml:lang="ko">짙은 파랑</title>
<title xml:lang="en">Deep Blue</title>
</color>
<color name="blue">
<title xml:lang="ko">파랑</title>
<title xml:lang="en">Blue</title>
</color>
<color name="light-blue">
<title xml:lang="ko">밝은 파랑</title>
<title xml:lang="en">Light Blue</title>
</color>
<color name="cyan">
<title xml:lang="ko">시안</title>
<title xml:lang="en">Cyan</title>
</color>
<color name="teal">
<title xml:lang="ko">틸</title>
<title xml:lang="en">Teal</title>
</color>
<color name="green">
<title xml:lang="ko">초록</title>
<title xml:lang="en">Green</title>
</color>
<color name="light-green">
<title xml:lang="ko">연한 초록</title>
<title xml:lang="en">Light Green</title>
</color>
<color name="lime">
<title xml:lang="ko">라임</title>
<title xml:lang="en">Lime</title>
</color>
<color name="yellow">
<title xml:lang="ko">노랑</title>
<title xml:lang="en">Yellow</title>
</color>
<color name="amber">
<title xml:lang="ko">앰버</title>
<title xml:lang="en">Amber</title>
</color>
<color name="orange">
<title xml:lang="ko">주황</title>
<title xml:lang="en">Orange</title>
</color>
<color name="deep-orange">
<title xml:lang="ko">진한 주황</title>
<title xml:lang="en">Deep Orange</title>
</color>
<color name="brown">
<title xml:lang="ko">갈색</title>
<title xml:lang="en">Brown</title>
</color>
<color name="grey">
<title xml:lang="ko">회색</title>
<title xml:lang="en">Grey</title>
</color>
<color name="blue-grey">
<title xml:lang="ko">푸른 회색</title>
<title xml:lang="en">Blue Grey</title>
</color>
</colorset>
</skin>

4
modules/message/skins/simple_world/common_header.html
View file

@ -1,5 +1,5 @@
<!--// responsible layout -->
{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
{@Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
<!--// Check layout. If it is Simple World, select layout primary colors as a primary color of this skin -->
{@
@ -57,6 +57,6 @@
{@$skin_color = '#f44336'}
<!--@endif-->
</block>
{Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
{@Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
<load target="css/message.less" vars="$simple_less_value" />
<section class="rx_simple_message">

2
modules/message/skins/xedition/http_status_code.html
View file

@ -1,5 +1,5 @@
<!--// META -->
{Context::addHtmlHeader('<meta name="viewport" content="width=1240">')}
{@Context::addHtmlHeader('<meta name="viewport" content="width=1240">')}
<!--// CSS -->
<style>
.xedition-error {

2
modules/page/page.mobile.php
View file

@ -64,7 +64,7 @@ class pageMobile extends pageView
if($mtime + $interval*60 > $_SERVER['REQUEST_TIME'])
{
$page_content = FileHandler::readFile($cache_file);
$page_content = preg_replace('@<\!--#Meta:@', '<!--Meta:', $page_content);
$page_content = str_replace('<!--#Meta:', '<!--Meta:', $page_content);
}
else
{

2
modules/page/page.view.php
View file

@ -69,7 +69,7 @@ class pageView extends page
if($mtime + $this->interval*60 > $_SERVER['REQUEST_TIME'])
{
$page_content = FileHandler::readFile($this->cache_file);
$page_content = preg_replace('@<\!--#Meta:@', '<!--Meta:', $page_content);
$page_content = str_replace('<!--#Meta:', '<!--Meta:', $page_content);
}
else
{

30
modules/widget/widget.controller.php
View file

@ -395,7 +395,16 @@ class widgetController extends widget
$cache_data = Rhymix\Framework\Cache::get('widget_cache:' . $widget_sequence);
if ($cache_data)
{
return preg_replace('@<\!--#Meta:@', '<!--Meta:', $cache_data);
// Load the variables, need to load the LESS or SCSS files.
if(is_object($cache_data))
{
foreach ($cache_data->variables as $key => $value)
{
Context::set($key, $value);
}
$cache_data = $cache_data->content;
}
return str_replace('<!--#Meta:', '<!--Meta:', $cache_data);
}
$oWidget = $this->getWidgetObject($widget);
@ -404,9 +413,26 @@ class widgetController extends widget
$widget_content = $oWidget->proc($args);
$oModuleController = getController('module');
$oModuleController->replaceDefinedLangCode($widget_content);
Rhymix\Framework\Cache::set('widget_cache:' . $widget_sequence, $widget_content, $widget_cache, true);
// Keep the variables, need to load the LESS or SCSS files.
if(preg_match_all('/<!--#Meta:([a-z0-9\_\-\/\.\@\:]+)(\?\$\_\_Context\-\>[a-z0-9\_\-\/\.\@\:]+)?-->/is', $widget_content, $widget_var_matches, PREG_SET_ORDER))
{
$cache_content = new stdClass();
$cache_content->content = $widget_content;
$cache_content->variables = new stdClass();
foreach($widget_var_matches as $matches)
{
if($matches[2])
{
$key = str_replace('?$__Context->', '', $matches[2]);
$cache_content->variables->{$key} = Context::get($key);
}
}
Rhymix\Framework\Cache::set('widget_cache:' . $widget_sequence, $cache_content, $widget_cache, true);
}
return $widget_content;
}

26
widgets/content/content.class.php
View file

@ -204,6 +204,7 @@ class content extends WidgetHandler
$attribute = $oComment->getObjectVars();
$title = $oComment->getSummary($args->content_cut_size);
$thumbnail = $oComment->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
$thumbnail_x2 = $oComment->getThumbnail($args->thumbnail_width * 2, $args->thumbnail_height * 2, $args->thumbnail_type);
$url = sprintf("%s#comment_%s",getUrl('','document_srl',$oComment->get('document_srl')),$oComment->get('comment_srl'));
$attribute->mid = $args->mid_lists[$attribute->module_srl];
@ -214,6 +215,7 @@ class content extends WidgetHandler
$content_item->adds($attribute);
$content_item->setTitle($title);
$content_item->setThumbnail($thumbnail);
$content_item->setThumbnail($thumbnail_x2, 2);
$content_item->setLink($url);
$content_item->setDomain($domain);
$content_item->add('mid', $args->mid_lists[$attribute->module_srl]);
@ -283,6 +285,7 @@ class content extends WidgetHandler
$module_srl = $oDocument->get('module_srl');
$category_srl = $oDocument->get('category_srl');
$thumbnail = $oDocument->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
$thumbnail_x2 = $oDocument->getThumbnail($args->thumbnail_width * 2,$args->thumbnail_height * 2,$args->thumbnail_type);
$content_item = new contentItem( $args->module_srls_info[$module_srl]->browser_title );
$content_item->adds($oDocument->getObjectVars());
@ -293,6 +296,7 @@ class content extends WidgetHandler
$content_item->setContent($oDocument->getSummary($args->content_cut_size));
$content_item->setLink( getSiteUrl($domain,'','document_srl',$document_srl) );
$content_item->setThumbnail($thumbnail);
$content_item->setThumbnail($thumbnail_x2, 2);
$content_item->setExtraImages($oDocument->printExtraImages($args->duration_new * 60 * 60));
$content_item->add('mid', $args->mid_lists[$module_srl]);
if($first_thumbnail_idx==-1 && $thumbnail) $first_thumbnail_idx = $i;
@ -347,6 +351,7 @@ class content extends WidgetHandler
$content = $oDocument->getSummary($args->content_cut_size);
$url = sprintf("%s#%s",$oDocument->getPermanentUrl() ,$oDocument->getCommentCount());
$thumbnail = $oDocument->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
$thumbnail_x2 = $oDocument->getThumbnail($args->thumbnail_width * 2, $args->thumbnail_height * 2, $args->thumbnail_type);
$extra_images = $oDocument->printExtraImages($args->duration_new);
$content_item = new contentItem($browser_title);
@ -355,6 +360,7 @@ class content extends WidgetHandler
$content_item->setContent($content);
$content_item->setLink($url);
$content_item->setThumbnail($thumbnail);
$content_item->setThumbnail($thumbnail_x2, 2);
$content_item->setExtraImages($extra_images);
$content_item->setDomain($domain);
$content_item->add('mid', $args->mid_lists[$attribute->module_srl]);
@ -825,9 +831,14 @@ class contentItem extends Object
{
$this->add('title', escape(strip_tags($title), false));
}
function setThumbnail($thumbnail)
function setThumbnail($thumbnail, $source_size = 1)
{
$this->add('thumbnail', $thumbnail);
if($source_size === 1)
{
$this->add('thumbnail', $thumbnail);
} else {
$this->add('thumbnail_x' . $source_size, $thumbnail);
}
}
function setContent($content)
{
@ -931,9 +942,16 @@ class contentItem extends Object
{
return $this->has_first_thumbnail_idx;
}
function getThumbnail()
function getThumbnail($source_size = 1)
{
return $this->get('thumbnail');
if(intval($source_size) === 1)
{
return $this->get('thumbnail');
}
else
{
return $this->get('thumbnail_x' . intval($source_size));
}
}
function getMemberSrl()
{

38
widgets/content/skins/simple_rectangle/_tab_left.html Normal file
View file

@ -0,0 +1,38 @@
{@
$misol_contents = array();
$misol_contents_count = 0;
}
{$widget_info->content_type}
<!--@if($widget_info->page_count > 1)-->
{@$misol_contents_count = $widget_info->list_count * $widget_info->page_count}
<!--@else-->
{@$misol_contents_count = $widget_info->list_count}
<!--@end-->
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
{@ $contents_key = ''; }
<block loop="$tab->content_items => $key, $item">
{@
$contents_key = intval(preg_replace("/[^0-9]*/s", '', $item->getLink()));
$misol_contents[$contents_key] = $item;
}
</block>
<!--@end-->
{@ krsort($misol_contents);}
{@$i = 0;}
<!--@foreach($misol_contents as $key => $val)-->
{@$i = $i + 1;}
<!--@if($i > $misol_contents_count)-->
{@ unset($misol_contents[$key])}
<!--@end-->
<!--@end-->
{@
$tab = new stdClass();
$tab->content_items = $misol_contents;
$tab->title = $lang->all;
$tab->url = getUrl('mid',Context::get('mid'));
$tab->tab_type = 'all';
}
{@ array_unshift($widget_info->tab, $tab) }
<!--#include("./_tab_top.html")-->

15
widgets/content/skins/simple_rectangle/_tab_none.html Normal file
View file

@ -0,0 +1,15 @@
<h1 class="misolTop" cond="count($widget_info->modules_info) === 1">
{@$soo_module_info = current($widget_info->modules_info);}
<a href="{getUrl('','mid',$soo_module_info->mid)}" target="_blank"|cond="$widget_info->new_window" class="misol_top_a">{$soo_module_info->browser_title}</a>
</h1>
<!--@if($widget_info->list_type == "gallery")-->
<!--#include("./gallery.html")-->
<!--@elseif($widget_info->list_type == "image_title")-->
<!--#include("./image_title.html")-->
<!--@elseif($widget_info->list_type == "image_title_content")-->
<!--#include("./image_title_content.html")-->
<!--@elseif($widget_info->list_type == "title_content")-->
<!--#include("./title_content.html")-->
<!--@else-->
<!--#include("./normal.html")-->
<!--@end-->

18
widgets/content/skins/simple_rectangle/_tab_top.html Normal file
View file

@ -0,0 +1,18 @@
<div class="misolTab">
<ul class="simple_contentTabA widgetTab">
{@$i=0}
<li loop="$widget_info->tab => $module_srl, $tab" class="active"|cond="$i==0"><a href="{$tab->url}" onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('div.misolTab').next('dl.simple_columns'),{$i})" onclick="this.onmouseover();return false;"><span>{$tab->title}</span></a>{@$i++}</li>
</ul>
</div>
<dl class="simple_columns">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
<dt>{$tab->title}</dt>
<dd <!--@if($i==0)--> class="open"<!--@end-->>
{@$widget_info->content_items = $tab->content_items}
<!--#include("_tab_none.html")-->
</dd>
{@$i++}
<!--@end-->
</dl>

79
widgets/content/skins/simple_rectangle/content.html Normal file
View file

@ -0,0 +1,79 @@
<load target="./js/content_widget.js" cond="$widget_info->page_count || count($widget_info->tab)" />
<!--// Check layout. If it is Simple World, select layout primary colors as a primary color of this skin -->
{@$layout_info = Context::get('layout_info')}
{@
$material_colors = array(
'red' => '#f44336',
'crimson' => '#aa0000',
'pink' => '#e91e63',
'purple' => '#9c27b0',
'deep-purple' => '#673ab7',
'indigo' => '#3f51b5',
'deep-blue' => '#00397f',
'blue' => '#2196f3',
'light-blue' => '#03a9f4',
'cyan' => '#00bcd4',
'teal' => '#009688',
'green' => '#4caf50',
'light-green' => '#8bc34a',
'lime' => '#cddc39',
'yellow' => '#ffeb3b',
'amber' => '#ffc107',
'orange' => '#ff9800',
'deep-orange' => '#ff5722',
'brown' => '#795548',
'grey' => '#9e9e9e',
'blue-grey' => '#607d8b',
'black' => '#000000',
'white' => '#ffffff',
'customized' => $layout_info->customized_primary_color,
);
}
<block cond="$layout_info->extra_var->primary_color->type === 'select' || $layout_info->extra_var->customized_primary_color->type === 'colorpicker'">
{@
if(!$layout_info->primary_color && $layout_info->customized_primary_color)
$layout_info->primary_color = 'customized';
if(!$layout_info->primary_color)
$layout_info->primary_color = 'red';
if(!$layout_info->customized_primary_color)
$layout_info->customized_primary_color = '#f44336';
}
</block>
<block cond="$layout_info->extra_var->primary_color->type !== 'select' && $layout_info->extra_var->customized_primary_color->type !== 'colorpicker'">
{@$layout_info->primary_color = 'blue';}
</block>
<!--// Load styles -->
{@$colorset = $material_colors[$colorset];}
{@$skin_color = $material_colors[$layout_info->primary_color];}
<block cond="!$skin_color">
<!--@if(preg_match("/#([a-f0-9]{3}){1,2}/i", $layout_info->primary_color))-->
{@$skin_color = $layout_info->primary_color}
<!--@if(strlen($layout_info->primary_color) === 4)-->
{@$skin_color = $layout_info->primary_color[1].$layout_info->primary_color[1].$layout_info->primary_color[2].$layout_info->primary_color[2].$layout_info->primary_color[3].$layout_info->primary_color[3]}
<!--@endif-->
<!--@else-->
{@$skin_color = '#f44336'}
<!--@endif-->
</block>
<block cond="$colorset">
{@$skin_color = $colorset}
</block>
{@Context::set('less_color', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)), 'thumbnail_height' => intval($widget_info->thumbnail_height), 'thumbnail_width' => intval($widget_info->thumbnail_width)))}
<load target="css/css.less" vars="$less_color" />
<div class="widgetContainer">
<div class="simple_content">
<section class="simple_content">
<!--@if($widget_info->tab_type == "tab_left" && count($widget_info->tab) > 1)-->
<!--#include("./_tab_left.html")-->
<!--@elseif($widget_info->tab_type == "tab_top" && count($widget_info->tab) > 1)-->
<!--#include("./_tab_top.html")-->
<!--@else-->
<!--@if($widget_info->tab_type == "tab_left" || $widget_info->tab_type == "tab_top")-->
{@$widget_info->content_items = $widget_info->tab[0]->content_items}
<!--@end-->
<!--#include("./_tab_none.html")-->
<!--@end-->
</section>
</div>
</div>

274
widgets/content/skins/simple_rectangle/css/css.css Normal file
View file

@ -0,0 +1,274 @@
@charset "UTF-8";
/* sample code for css.less by misol */
div.simple_content {
font-family: "맑은 고딕", "Apple SD Gothic Neo", "나눔고딕", NanumGothic, 'Nanum Gothic', Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 3px;
}
section.simple_content {
font-size: 14px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
}
.simple_content ul.simple_content_list {
margin: 0;
padding: 0 8px;
}
.simple_content .simple_content_list .cont_a {
color: #222;
display: block;
letter-spacing: -1px;
line-height: 18px;
overflow: hidden;
padding: 0.667em 3px;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.simple_content .simple_content_list .cont_a:hover {
color: #2196f3;
}
.simple_content .cont_a {
color: #222;
display: block;
letter-spacing: -1px;
overflow: hidden;
padding: 0.467em 0;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.simple_content .content_image {
display: inline-block;
float: left;
position: relative;
margin-right: 5px;
}
.simple_content .content_basic {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.simple_content .content_category {
color: #2196f3;
font-family: HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif-light, sans-serif;
margin: 0 7px 0 3px;
}
.simple_content .simple_gallery_item .content_category {
position: absolute;
top: 0;
right: 0;
background: #fff;
margin: 0;
}
.simple_content .content_nickname,
.simple_content .content_recnt {
color: #616161;
font-size: 12px;
margin: 0 3px 0 7px;
overflow: hidden;
}
.simple_content ul.simple_contentTabA {
list-style: outside none none;
padding: 0;
margin: 0;
}
.simple_content .simple_content_list li {
position: relative;
border-top: 1px solid #e0e0e0;
overflow: hidden;
padding: 0;
}
.simple_content .simple_content_list li:first-child,
.simple_content.simple_content_list li.first-child {
border-top: 0 none;
}
.simple_content .content_recnt {
position: absolute;
height: 18px;
width: 44px;
text-align: right;
font-size: 13px;
margin: 3px;
top: 0.6em;
right: 15px;
}
.simple_content .simple_content_list li.content_reext .cont_a {
padding-right: 70px;
}
.simple_content h1.misolTop {
border-bottom: 1px solid #e0e0e0;
font-weight: 400;
margin: 0;
position: relative;
}
.simple_content h1.misolTop .misol_top_a {
display: block;
margin: 0;
padding: 10px;
text-decoration: none;
}
.simple_content div.simple_gallery {
overflow: hidden;
width: 100%;
height: 137px;
white-space: nowrap;
box-sizing: border-box;
}
div.simple_gallery ul.simple_gallery {
display: block;
list-style: outside none none;
padding: 6px 0px 100px;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
div.simple_gallery ul.simple_gallery > li {
position: relative;
display: inline-block;
width: 100px;
padding: 7px;
}
div.simple_gallery ul.simple_gallery>li .cont_a {
position: relative;
padding: 0;
width: 100px;
}
div.simple_gallery ul.simple_gallery>li .gallery_text>span {
display: block;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.simple_gallery ul.simple_gallery>li .gallery_text>span.content_nickname {
margin: 0;
text-align: right;
}
div.simple_gallery ul.simple_gallery>li .cont_a:hover {
color: #2196f3;
}
.simple_gallery_item .fake_img,
.simple_content_list .content_image {
display: inline-block;
box-sizing: border-box;
background: #fff;
border: 1px solid #e0e0e0;
color: #000;
width: 100px;
height: 75px;
vertical-align: middle;
text-align: center;
line-height: 75px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.simple_content div.misolTab {
overflow: hidden;
width: 100%;
height: 52px;
white-space: nowrap;
border-bottom: 1px solid #e0e0e0;
box-sizing: border-box;
}
.simple_content ul.simple_contentTabA {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 0px 100px;
text-decoration: none;
}
.simple_content ul.simple_contentTabA>li {
display: inline-block;
height: 40px;
line-height: 18px;
position: relative;
}
.simple_content ul.simple_contentTabA>li a {
display: inline-block;
color: #000;
font-weight: 400;
letter-spacing: -1px;
line-height: 40px;
text-decoration: none;
}
.simple_content ul.simple_contentTabA>li a:hover,
.simple_content ul.simple_contentTabA>li.active a,
.simple_content h1.misolTop .misol_top_a {
color: #2196f3;
}
.simple_content ul.simple_contentTabA>li a span {
border-left: 1px solid #e0e0e0;
padding: 0 15px;
}
.simple_content ul.simple_contentTabA>li:first-child a span {
border-left: 0 none;
}
.simple_content dl.simple_columns {
margin: 0;
padding: 0;
}
.simple_content dl.simple_columns dt {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.simple_content dl.simple_columns dd {
display: none;
margin: 0;
}
.widgetContainer .simple_content .open {
display: block !important;
}
.simple_content .simple_content_nav {
text-align: center;
color: #616161;
margin: 0;
padding: 10px 0;
border-top: 1px solid #e0e0e0;
}
.simple_content .simple_content_nav button {
background-color: transparent;
color: inherit;
border: 0 none;
cursor: pointer;
line-height: 20px;
height: 35px;
width: 100%;
margin: 0;
font-size: 15px;
}
.simple_content .simple_content_nav li button:hover {
color: #2196f3;
}
.simple_content .simple_content_nav li button i {
font-size: 16px;
line-height: 16px;
}
.simple_content_list.simple_content_webzine .simple_gallery_image {
position: relative;
width: 100px;
float: left;
}
.simple_content_list.simple_content_webzine .content_basic {
display: block;
padding: 10px;
margin: 0;
}
.simple_content_list.simple_content_webzine .content_basic .simple_content_longtext {
display: block;
margin: 7px 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

328
widgets/content/skins/simple_rectangle/css/css.less Normal file
View file

@ -0,0 +1,328 @@
@charset "UTF-8";
/*
@method .text-contrast()
@author misol <misol.kr@gmail.com>
@brief Select a text color according to WCAG 2.0 contrast guideline. The calcualtion of contrast follows the formula on the guideline.
*/
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
color: @bright_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
color: @dark_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) > 4.5 * @multi ) {
color: @bright_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) =< 4.5 * @multi ) {
.text-contrast(@bg_color; lighten(@bright_color, 5%); @dark_color; @multi; @i + 1);
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 4.5 * @multi ) {
color: @dark_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and (( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 4.5 * @multi ) {
.text-contrast(@bg_color; @bright_color; darken(@dark_color, 5%); @multi; @i + 1);
}
/*
@method .bg-contrast()
@author misol <misol.kr@gmail.com>
@brief Select a background color, which has less contrast background color than WCAG 2.0 contrast guideline. On the WCAG 2.0 guideline, bigger string can have less contrast as 3.0.
*/
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
background: @bright_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
background: @dark_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) > 3 * @multi ) {
background: @bright_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) =< 3 * @multi ) {
.bg-contrast(@text_color; lighten(@bright_color,3%); @dark_color; @multi; @i + 1);
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 3 * @multi ) {
background: @dark_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and (( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 3 * @multi ) {
.bg-contrast(@text_color; @bright_color; darken(@dark_color, 3%); @multi; @i + 1);
}
/* As LESS library in Rhymix substitude variables as an strings, convert colors as the color objects of LESS. */
@color: rgb(@red, @green, @blue);
/* 앱 전체 스타일 */
div.simple_content
{
font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif;
font-size: 14px;
padding: 3px;
}
section.simple_content
{
font-size: 14px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
}
/* 글 목록 스타일 */
.simple_content ul.simple_content_list { margin:0; padding:0 8px;}
.simple_content .simple_content_list .cont_a {
color: #222;
display: block;
letter-spacing: -1px;
line-height: 18px;
overflow: hidden;
padding: 0.667em 3px;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.simple_content .simple_content_list .cont_a:hover {
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
}
.simple_content .cont_a {
color: #222;
display: block;
letter-spacing: -1px;
overflow: hidden;
padding: 0.467em 0;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.simple_content .content_image {
display:block;
left:0;
position:absolute;
}
.simple_content .content_basic{
position:relative;
display:inline-block;
max-width:100%;
box-sizing: border-box;
vertical-align: middle;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.simple_content .content_basic.content_with_thumbnail{
line-height: @thumbnail_height + 0px;
vertical-align:middle;
padding-left: @thumbnail_width + 5px;
}
.simple_content .content_category {
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif-light,sans-serif;
margin: 0 7px 0 3px;
}
.simple_content .simple_gallery_item .content_category {
position: absolute;
top: 0;
right: 0;
background: #fff;
margin: 0;
}
.simple_content .content_nickname, .simple_content .content_recnt{
color: #616161;
font-size: 12px;
margin: 0 3px 0 7px;
overflow:hidden;
}
.simple_content ul.simple_contentTabA {
list-style: outside none none;
padding: 0;
margin: 0;
}
.simple_content .simple_content_list li {
position:relative;
border-top: 1px solid #e0e0e0;
overflow: hidden;
padding:0;
}
.simple_content .simple_content_list li:first-child, .simple_content.simple_content_list li.first-child{
border-top: 0 none;
}
.simple_content .content_recnt{ /* 코멘트 */
position:absolute;
height:18px;
width:44px;
text-align:right;
font-size: 13px;
margin:3px;
top:0.6em;
right:15px;
}
.simple_content .content_recnt.content_with_thumbnail{
height: @thumbnail_height + 0px;
line-height: @thumbnail_height + 0px;
vertical-align:middle;
}
.simple_content .simple_content_list li.content_reext .cont_a { /* 코멘트 있는 항목 */
padding-right:70px;
}
/* 상단 제목 스타일 */
.simple_content h1.misolTop {
border-bottom: 1px solid #e0e0e0;
font-weight: 400;
margin: 0;
position: relative;
}
.simple_content h1.misolTop .misol_top_a {
display: block;
margin: 0;
padding: 10px;
text-decoration: none;
}
/* 갤러리 스타일 */
.simple_content div.simple_gallery{
overflow: hidden;
width:100%;
height: @thumbnail_height + 62px;
white-space: nowrap;
box-sizing: border-box;
}
div.simple_gallery ul.simple_gallery{
display: block;
list-style: outside none none;
padding: 6px 0px 100px;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
div.simple_gallery ul.simple_gallery > li{
position: relative;
display: inline-block;
width: @thumbnail_width + 0px;
padding: 7px;
}
div.simple_gallery ul.simple_gallery>li .cont_a{
position: relative;
padding:0;
width: @thumbnail_width + 0px;
}
div.simple_gallery ul.simple_gallery>li .gallery_text>span
{
display: block;
width: @thumbnail_width + 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.simple_gallery ul.simple_gallery>li .gallery_text>span.content_nickname
{
margin: 0;
text-align: right;
}
div.simple_gallery ul.simple_gallery>li .cont_a:hover {
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
}
.simple_gallery_item .fake_img, .simple_content_list .content_image{
display: inline-block;
box-sizing: border-box;
background: #fff;
border: 1px solid #e0e0e0;
color: #000;
width: @thumbnail_width + 0px;
height: @thumbnail_height + 0px;
vertical-align: middle;
text-align: center;
line-height: @thumbnail_height + 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 상단 탭 스타일 */
.simple_content div.misolTab{
overflow: hidden;
width:100%;
height: 52px;
white-space: nowrap;
border-bottom: 1px solid #e0e0e0;
box-sizing: border-box;
}
.simple_content ul.simple_contentTabA{
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 0px 100px;
text-decoration: none;
}
.simple_content ul.simple_contentTabA>li {
display:inline-block;
height: 40px;
line-height: 18px;
position: relative;
}
.simple_content ul.simple_contentTabA>li a {
display:inline-block;
color: #000;
font-weight: 400;
letter-spacing: -1px;
line-height: 40px;
text-decoration: none;
}
.simple_content ul.simple_contentTabA>li a:hover, .simple_content ul.simple_contentTabA>li.active a, .simple_content h1.misolTop .misol_top_a {
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
}
.simple_content ul.simple_contentTabA>li a span {
border-left: 1px solid #e0e0e0;
padding: 0 15px;
}
.simple_content ul.simple_contentTabA>li:first-child a span {
border-left: 0 none;
}
.simple_content dl.simple_columns{ margin:0; padding:0}
.simple_content dl.simple_columns dt{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
.simple_content dl.simple_columns dd{ display:none; margin:0;}
.widgetContainer .simple_content .open{ display:block !important;}
.simple_content .simple_content_nav {
text-align: center;
color: #616161;
margin: 0;
padding: 10px 0;
border-top: 1px solid #e0e0e0;
}
.simple_content .simple_content_nav button {
background-color:transparent;
color: inherit;
border: 0 none;
cursor: pointer;
line-height: 20px;
height:35px;
width: 100%;
margin:0;
font-size: 15px;
}
.simple_content .simple_content_nav li button:hover{
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
}
.simple_content .simple_content_nav li button i{
font-size:16px;
line-height:16px;
}
.simple_content_list.simple_content_webzine .simple_gallery_image
{
position: relative;
width: @thumbnail_width + 0px;
float:left;
}
.simple_content_list.simple_content_webzine .content_basic
{
display: block;
padding: 10px;
margin:0;
}
.simple_content_list.simple_content_webzine .content_basic .simple_content_longtext
{
display: block;
margin: 7px 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

32
widgets/content/skins/simple_rectangle/gallery.html Normal file
View file

@ -0,0 +1,32 @@
<div class="inner">
<div class="simple_gallery">
<ul class="simple_gallery">
{@$_idx=0}
<li class="simple_gallery_item" loop="$widget_info->content_items => $key, $item">
<a href="{$item->getLink()}" class="cont_a">
<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl')">{$item->getCategory()}</span>
<img class="up_m fade" cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()" src="{$item->getThumbnail()}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" alt="{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" />
<div class="fake_img" cond="!array_search('thumbnail', $widget_info->option_view_arr) || !$item->getThumbnail()">{$lang->none_image}</div>
<div class="up_tw"|cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()">
<span class="gallery_text">
<span class="content_title">
{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
</span>
<span class="content_nickname">
{$item->getNickName($widget_info->nickname_cut_size)}
</span>
</span>
</div>
</a>
</li>
</ul>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<ul class="widgetNavigator">
<li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
<li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
</ul>
<!--@end-->
</div>
</div>

1
widgets/content/skins/simple_rectangle/image_title.html Normal file
View file

@ -0,0 +1 @@
<!--#include("gallery.html")-->

39
widgets/content/skins/simple_rectangle/image_title_content.html Normal file
View file

@ -0,0 +1,39 @@
<ul class="simple_content_list simple_content_webzine">
{@$_idx=0}
<!--@foreach($widget_info->content_items as $key => $item)-->
<li style="display:none"|cond="$_idx >= $widget_info->list_count">
<a href="{$item->getLink()}" class="cont_a" target="_blank"|cond="$widget_info->new_window">
<p class="simple_gallery_item simple_gallery_image">
<!--@if($item->getThumbnail())-->
<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl')">{$item->getCategory()}</span>
<img src="{$item->getThumbnail()}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" />
<!--@else-->
<span class="fake_img">{$lang->none_image}</span>
<!--@end-->
</p>
<p class="content_basic <!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->content_reext<!--@end-->">
<span class="content_title">
<span class="content_category" cond="$widget_info->show_browser_title=='Y' && $item->getBrowserTitle()">{$item->getBrowserTitle()}</span> {str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
</span>
<span class="content_nickname">
{$item->getNickName($widget_info->nickname_cut_size)}
</span>
<span class="content_recnt" cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
<!--@if($item->getCommentCount()<999)-->{$item->getCommentCount()}<!--@else-->999+<!--@end-->
</span>
<span class="simple_content_longtext" cond="in_array('content', $widget_info->option_view_arr)">
{$item->getContent()}
</span>
</p>
</a>
</li>
{@$_idx++}
<!--@end-->
</ul>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<div class="simple_content_nav">
<button type="button" class="soo_cont_more" title="{$lang->more}" onclick="content_widget_plus(jQuery(this).parents('div.simple_content_nav').prev('ul.simple_content_list'),{$widget_info->list_count})"><span class="page_info">1/{intval(($_idx - 1) / $widget_info->list_count) + 1}</span> {$lang->more}</button>
</div>
<!--@end-->

42
widgets/content/skins/simple_rectangle/js/content_widget.js Normal file
View file

@ -0,0 +1,42 @@
function content_widget_plus(obj,list_per_page){
var page = 1;
if(obj.is('table')) {
var list = jQuery('>tbody>tr',obj);
}else if(obj.is('ul')) {
var list = jQuery('>li',obj);
}
var total_page = parseInt((list.size()-1) / list_per_page,10)+1;
list.each(function(i){
if(jQuery(this).css('display') !='none'){
page = parseInt((i-1)/list_per_page,10) + 1;
}
});
if(total_page === page+1)
{
if(obj.is('ul.simple_content_list'))
{
obj.next('div.simple_content_nav').css('display','none');
}
}
if(total_page <= page) return;
if(obj.is('ul.simple_content_list')) {
jQuery('button.soo_cont_more>span.page_info',obj.next('div.simple_content_nav')).html(page+1 + '/' + total_page);
}
list.each(function(i){
if(((page+1) * list_per_page) > i){
jQuery(this).show();
}else{
jQuery(this).hide();
}
});
}
function content_widget_tab_show(tab,list,i){
tab.parents('ul.widgetTab').children('li.active').removeClass('active');
tab.parent('li').addClass('active');
jQuery('>dd',list).each(function(j){
if(j==i) jQuery(this).addClass('open');
else jQuery(this).removeClass('open');
});
}

29
widgets/content/skins/simple_rectangle/normal.html Normal file
View file

@ -0,0 +1,29 @@
<div class="inner">
<ul class="simple_content_list">
{@$_idx=0}
<li loop="$widget_info->content_items => $key, $item" style="display:none"|cond="$_idx >= $widget_info->list_count" class="content_reext"|cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
<a href="{$item->getLink()}" class="cont_a" target="_blank"|cond="$widget_info->new_window">
<span cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()" class="content_image">
<img src="{$item->getThumbnail()}" width="{$widget_info->thumbnail_width}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" height="{$widget_info->thumbnail_height}" alt="{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}" />
</span>
<span class="content_basic <!--@if(array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail())-->content_with_thumbnail<!--@end-->">
<span class="content_title">
<span class="content_category" cond="$widget_info->tab_type == 'tab_left' && $tab->tab_type == 'all'">{$item->getBrowserTitle()}</span>
<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl') && trim($item->getCategory()) && !$tab->tab_type">{$item->getCategory()}</span> {str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
</span>
<span class="content_nickname">
{$item->getNickName($widget_info->nickname_cut_size)}
</span>
</span>
<span class="content_recnt <!--@if(array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail())-->content_with_thumbnail<!--@end-->" cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
<!--@if($item->getCommentCount()<999)-->{$item->getCommentCount()}<!--@else-->999+<!--@end-->
</span>
</a>{@$_idx++}
</li>
</ul>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<div class="simple_content_nav">
<button type="button" class="soo_cont_more" title="{$lang->more}" onclick="content_widget_plus(jQuery(this).parents('div.simple_content_nav').prev('ul.simple_content_list'),{$widget_info->list_count})"><span class="page_info">1/{intval(($_idx - 1) / $widget_info->list_count) + 1}</span> {$lang->more}</button>
</div>
<!--@end-->
</div>

107
widgets/content/skins/simple_rectangle/skin.xml Normal file
View file

@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
<title xml:lang="ko">네모의 꿈</title>
<title xml:lang="en">Rectangular World</title>
<description xml:lang="ko">직사각형과 그림자, 테마색상을 활용한 컨텐츠 스킨입니다.</description>
<description xml:lang="en">Rectangles, shadows, theme-color.</description>
<version>1.0</version>
<date>2017-02-26</date>
<link>https://github.com/rhymix/rhymix/</link>
<license link="https://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GPLv2</license>
<author email_address="misol.kr@gmail.com" link="https://github.com/misol/">
<name xml:lang="ko">misol</name>
<name xml:lang="en">misol</name>
</author>
<colorset>
<color name="theme">
<title xml:lang="ko">사이트 테마 색</title>
<title xml:lang="en">The site theme color</title>
</color>
<color name="red">
<title xml:lang="ko">붉은 색</title>
<title xml:lang="en">Red</title>
</color>
<color name="crimson">
<title xml:lang="ko">크림슨</title>
<title xml:lang="en">Crimson</title>
</color>
<color name="pink">
<title xml:lang="ko">분홍</title>
<title xml:lang="en">Pink</title>
</color>
<color name="purple">
<title xml:lang="ko">보라</title>
<title xml:lang="en">Purple</title>
</color>
<color name="deep-purple">
<title xml:lang="ko">진보라</title>
<title xml:lang="en">Deep Purple</title>
</color>
<color name="indigo">
<title xml:lang="ko">인디고</title>
<title xml:lang="en">Indigo</title>
</color>
<color name="deep-blue">
<title xml:lang="ko">짙은 파랑</title>
<title xml:lang="en">Deep Blue</title>
</color>
<color name="blue">
<title xml:lang="ko">파랑</title>
<title xml:lang="en">Blue</title>
</color>
<color name="light-blue">
<title xml:lang="ko">밝은 파랑</title>
<title xml:lang="en">Light Blue</title>
</color>
<color name="cyan">
<title xml:lang="ko">시안</title>
<title xml:lang="en">Cyan</title>
</color>
<color name="teal">
<title xml:lang="ko">틸</title>
<title xml:lang="en">Teal</title>
</color>
<color name="green">
<title xml:lang="ko">초록</title>
<title xml:lang="en">Green</title>
</color>
<color name="light-green">
<title xml:lang="ko">연한 초록</title>
<title xml:lang="en">Light Green</title>
</color>
<color name="lime">
<title xml:lang="ko">라임</title>
<title xml:lang="en">Lime</title>
</color>
<color name="yellow">
<title xml:lang="ko">노랑</title>
<title xml:lang="en">Yellow</title>
</color>
<color name="amber">
<title xml:lang="ko">앰버</title>
<title xml:lang="en">Amber</title>
</color>
<color name="orange">
<title xml:lang="ko">주황</title>
<title xml:lang="en">Orange</title>
</color>
<color name="deep-orange">
<title xml:lang="ko">진한 주황</title>
<title xml:lang="en">Deep Orange</title>
</color>
<color name="brown">
<title xml:lang="ko">갈색</title>
<title xml:lang="en">Brown</title>
</color>
<color name="grey">
<title xml:lang="ko">회색</title>
<title xml:lang="en">Grey</title>
</color>
<color name="blue-grey">
<title xml:lang="ko">푸른 회색</title>
<title xml:lang="en">Blue Grey</title>
</color>
</colorset>
</skin>

108
widgets/content/skins/simple_rectangle/title_content.html Normal file
View file

@ -0,0 +1,108 @@
<!--// 목록형 출력 -->
<!--@if($widget_info->markup_type=="list")-->
<ul class="widgetA">
{@$_idx=0}
<!--@foreach($widget_info->content_items as $key => $item)-->
<li<!--@if($_idx >= $widget_info->list_count)--> style="display:none"<!--@end-->>
<!--@foreach($widget_info->option_view_arr as $k => $v)-->
<!--@if($v=='title')-->
<!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->
<a href="<!--@if($item->contents_link)-->{$item->contents_link}<!--@else-->{getSiteUrl($item->domain, '', 'mid', $item->get('mid'))}<!--@end-->" class="board" target="_blank"|cond="$widget_info->new_window"><strong>{$item->getBrowserTitle()}</strong></a>
<!--@end-->
<!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->
<a href="{getSiteUrl($item->domain,'','mid',$item->get('mid'),'category',$item->get('category_srl'))}" target="_blank"|cond="$widget_info->new_window"><strong class="category">{$item->getCategory()}</strong></a>
<!--@end-->
<a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
<!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->
<em class="replyNum" title="Replies"><a href="{$item->getLink()}#comment" target="_blank"|cond="$widget_info->new_window">{$item->getCommentCount()}</a></em>
<!--@end-->
<!--@if($widget_info->show_trackback_count=='Y' && $item->getTrackbackCount())-->
<em class="trackbackNum" title="Trackbacks"><a href="{$item->getLink()}#trackback" target="_blank"|cond="$widget_info->new_window">{$item->getTrackbackCount()}</a></em>
<!--@end-->
<!--@if($widget_info->show_icon=='Y')-->
<span class="icon">{$item->printExtraImages()}</span>
<!--@end-->
<!--@else if($v=='nickname')-->
<a <!--@if($item->getMemberSrl())-->href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}"<!--@elseif($item->getAuthorSite())-->href="{$item->getAuthorSite()}" onclick="window.open(this.href); return false;" class="author member"<!--@else-->href="#" onclick="return false;" class="author member"<!--@end--> >{$item->getNickName()}</a>
<!--@else if($v=='regdate')-->
<span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span>
<!--@else if($v=='content')-->
<p class="summary"><a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getContent()}</a></p>
<!--@end-->
<!--@end-->
</li>
{@$_idx++}
<!--@end-->
</ul>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<ul class="widgetNavigator">
<li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
<li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
</ul>
<!--@end-->
<!--// 테이블형 출력 -->
<!--@else-->
<table class="widgetTableA" border="1" cellspacing="0">
<tbody>
{@$_idx=0}
<!--@foreach($widget_info->content_items as $key => $item)-->
<tr<!--@if($_idx >= $widget_info->list_count)--> style="display:none"<!--@end-->>
<!--@foreach($widget_info->option_view_arr as $k => $v)-->
<!--@if($v=='title')-->
<td class="title">
<!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->
<a href="<!--@if($item->contents_link)-->{$item->contents_link}<!--@else-->{getSiteUrl($item->domain, '', 'mid', $item->get('mid'))}<!--@end-->" target="_blank"|cond="$widget_info->new_window"><strong class="board">{$item->getBrowserTitle()}</strong></a>
<!--@end-->
<!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->
<a href="{getSiteUrl($item->domain,'','mid',$item->get('mid'),'category',$item->get('category_srl'))}" target="_blank"|cond="$widget_info->new_window"><strong class="category">{$item->getCategory()}</strong></a>
<!--@end-->
<a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
<!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->
<em class="replyNum" title="Replies"><a href="{$item->getLink()}#comment" target="_blank"|cond="$widget_info->new_window">{$item->getCommentCount()}</a></em>
<!--@end-->
<!--@if($widget_info->show_trackback_count=='Y' && $item->getTrackbackCount())-->
<em class="trackbackNum" title="Trackbacks"><a href="{$item->getLink()}#trackback" target="_blank"|cond="$widget_info->new_window">{$item->getTrackbackCount()}</a></em>
<!--@end-->
<!--@if($widget_info->show_icon=='Y')-->
<span class="icon">{$item->printExtraImages()}</span>
<!--@end-->
</td>
<!--@else if($v=='nickname')-->
<td><a <!--@if($item->getMemberSrl())-->href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}"<!--@elseif($item->getAuthorSite())-->href="{$item->getAuthorSite()}" onclick="window.open(this.href); return false;" class="author member"<!--@else-->href="#" onclick="return false;" class="author member"<!--@end--> >{$item->getNickName()}</a></td>
<!--@else if($v=='regdate')-->
<td class="time"><span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span></td>
<!--@end-->
<!--@end-->
</tr>
<!--@if($v=='content')-->
<tr>
<td colspan="3" class="summary"><a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getContent()}</a></td>
</tr>
<!--@end-->
{@$_idx++}
<!--@end-->
</tbody>
</table>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<ul class="widgetNavigator">
<li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('table.widgetTableA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
<li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('table.widgetTableA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
</ul>
<!--@end-->
<!--@end-->