리뉴얼 수정
This commit is contained in:
thisgun committed
1 parent
b6ffbcf901
commit
a72b34adf6
17 files changed
+145
-1192
No files matched your search
+2
-3
@@ -1020,7 +1020,7 @@ if ($config['cf_sms_use'] && $config['cf_icode_id'] && $config['cf_icode_pw']) {
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><label for="cf_social_servicelist">소셜로그인설정</label></th>
|
||||
<td colspan="3">
|
||||
<td colspan="3" class="social_config_explain">
|
||||
<p>
|
||||
<input type="checkbox" name="cf_social_servicelist[]" id="check_social_naver" value="naver" <?php echo option_array_checked('naver', $config['cf_social_servicelist']); ?> >
|
||||
<label for="check_social_naver">네이버 로그인을 사용합니다</label>
|
||||
@@ -1034,7 +1034,6 @@ if ($config['cf_sms_use'] && $config['cf_icode_id'] && $config['cf_icode_pw']) {
|
||||
<label for="check_social_kakao">카카오 로그인을 사용합니다</label>
|
||||
<div>
|
||||
<h3>카카오 웹 Redirect Path</h3>
|
||||
<p>
|
||||
<p><?php echo get_social_callbackurl('kakao'); ?></p>
|
||||
</p>
|
||||
</div>
|
||||
@@ -1068,7 +1067,7 @@ if ($config['cf_sms_use'] && $config['cf_icode_id'] && $config['cf_icode_pw']) {
|
||||
<tr>
|
||||
<th scope="row"><label for="cf_naver_clientid">네이버 Client ID</label></th>
|
||||
<td>
|
||||
<input type="text" name="cf_naver_clientid" value="<?php echo $config['cf_naver_clientid'] ?>" id="cf_naver_clientid" class="frm_input" size="40"> <a href="https://nid.naver.com/devcenter/register.nhn" target="_blank" class="btn_frmline">앱 등록하기</a>
|
||||
<input type="text" name="cf_naver_clientid" value="<?php echo $config['cf_naver_clientid'] ?>" id="cf_naver_clientid" class="frm_input" size="40"> <a href="https://developers.naver.com/apps/#/register" target="_blank" class="btn_frmline">앱 등록하기</a>
|
||||
</td>
|
||||
<th scope="row"><label for="cf_naver_secret">네이버 Client Secret</label></th>
|
||||
<td>
|
||||
|
||||
@@ -622,6 +622,8 @@ box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);}
|
||||
.pg_end {background:url(../img/page_4.png) 50% 50% no-repeat;width:32px;text-indent:-999px;overflow:hidden}
|
||||
.pg_current {display:inline-block;background:#3f51b5;color:#fff;font-weight:normal}
|
||||
|
||||
.social_config_explain p{padding-bottom:10px}
|
||||
|
||||
/* social member_list.php member_form.php */
|
||||
.sns-icon .ico {display:inline-block;background:url('../img/social/sns_logo.png') no-repeat;vertical-align:top}
|
||||
.sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
|
||||
|
||||
@@ -19,6 +19,10 @@ include_once('./admin.head.php');
|
||||
$directory = array();
|
||||
$dl = array('file', 'editor');
|
||||
|
||||
if( defined('G5_YOUNGCART_VER') ){
|
||||
$dl[] = 'item';
|
||||
}
|
||||
|
||||
foreach($dl as $val) {
|
||||
if($handle = opendir(G5_DATA_PATH.'/'.$val)) {
|
||||
while(false !== ($entry = readdir($handle))) {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -6,10 +6,10 @@ if( ! $config['cf_social_login_use']) { //소셜 로그인을 사용하지
|
||||
}
|
||||
|
||||
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal.css">', 11);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal-default-theme.css">', 12);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/remodal/remodal.css">', 11);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/remodal/remodal-default-theme.css">', 12);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 13);
|
||||
add_javascript('<script src="'.get_social_skin_url().'/remodal/remodal.js"></script>', 10);
|
||||
add_javascript('<script src="'.G5_JS_URL.'/remodal/remodal.js"></script>', 10);
|
||||
|
||||
$email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.다른 이메일을 입력해 주세요.' : '';
|
||||
?>
|
||||
@@ -76,10 +76,14 @@ $email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.
|
||||
</form>
|
||||
<!-- 새로가입 끝 -->
|
||||
|
||||
<div class="btn_group_trigger">
|
||||
<a class="btn_submit_trigger">회원가입</a>
|
||||
</div>
|
||||
|
||||
<!-- 기존 계정 연결 -->
|
||||
|
||||
<div class="member_connect">
|
||||
<p>혹시 기존 회원이신가요?</p>
|
||||
<p class="strong">혹시 기존 회원이신가요?</p>
|
||||
<button type="button" class="connect-opener btn-txt" data-remodal-target="modal">
|
||||
기존 계정에 연결하기
|
||||
<i class="fa fa-angle-double-right"></i>
|
||||
@@ -101,7 +105,7 @@ $email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.
|
||||
|
||||
<div class="connect-desc">
|
||||
기존 아이디에 SNS 아이디를 연결합니다.<br>
|
||||
SNS 아이디로 로그인 하시면 기존 아이디로 로그인 됩니다.
|
||||
이 후 SNS 아이디로 로그인 하시면 기존 아이디로 로그인 할 수 있습니다.
|
||||
</div>
|
||||
|
||||
<div id="login_fs">
|
||||
@@ -185,6 +189,11 @@ $email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.
|
||||
$("input[name^=agree]").prop("checked", false);
|
||||
}
|
||||
});
|
||||
|
||||
$(".btn_submit_trigger").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("#btn_submit").trigger("click");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -12,44 +12,42 @@ $session_id = session_id();
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 10);
|
||||
?>
|
||||
|
||||
<tr>
|
||||
<th scope="row">소셜로그인</th>
|
||||
<td>
|
||||
<div class="reg-form sns-wrap-32 sns-wrap-over">
|
||||
<div class="sns-wrap">
|
||||
<li>
|
||||
<label class="frm_label">SNS 로그인 관리</label>
|
||||
<div class="reg-form sns-wrap-reg">
|
||||
<div class="sns-wrap">
|
||||
|
||||
<?php foreach( $socials as $social=>$provider_name ){
|
||||
<?php foreach( $socials as $social=>$provider_name ){
|
||||
|
||||
if( !option_array_checked($social, $config['cf_social_servicelist'])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$social_nonce = social_nonce_create($social, $session_id);
|
||||
$add_class='';
|
||||
$title='';
|
||||
if( in_array($social, $my_provides) ){
|
||||
|
||||
if( !option_array_checked($social, $config['cf_social_servicelist'])) {
|
||||
continue;
|
||||
}
|
||||
$link_href = G5_SOCIAL_LOGIN_URL.'/unlink.php?provider='.$social.'&social_nonce='.$social_nonce;
|
||||
|
||||
$social_nonce = social_nonce_create($social, $session_id);
|
||||
$add_class='';
|
||||
$title='';
|
||||
if( in_array($social, $my_provides) ){
|
||||
|
||||
$link_href = G5_SOCIAL_LOGIN_URL.'/unlink.php?provider='.$social.'&social_nonce='.$social_nonce;
|
||||
$title = $provider_name.' 연결해제하기';
|
||||
} else {
|
||||
$add_class = ' sns-icon-not';
|
||||
|
||||
$title = $provider_name.' 연결해제하기';
|
||||
} else {
|
||||
$add_class = ' sns-icon-not';
|
||||
$link_href = $self_url.'?provider='.$social.'&mylink=1&url='.$urlencode;
|
||||
|
||||
$link_href = $self_url.'?provider='.$social.'&mylink=1&url='.$urlencode;
|
||||
$title = $provider_name.' 연결하기';
|
||||
|
||||
$title = $provider_name.' 연결하기';
|
||||
}
|
||||
?>
|
||||
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo $link_href; ?>" id="sns-<?php echo $social; ?>" class="sns-icon social_link sns-<?php echo $social; ?><?php echo $add_class; ?>" title="<?php echo $title; ?>" data-provider="<?php echo $social; ?>" ><span class="ico"></span><span class="txt"><?php echo $provider_name; ?> 로그인</span></a>
|
||||
|
||||
<a href="<?php echo $link_href; ?>" id="sns-<?php echo $social; ?>" class="sns-icon oauth_connect social_link sns-<?php echo $social; ?><?php echo $add_class; ?>" title="<?php echo $title; ?>" data-provider="<?php echo $social; ?>" ><span class="ico"></span><span class="txt"><?php echo $provider_name; ?> 로그인</span></a>
|
||||
<?php } //end foreach ?>
|
||||
|
||||
<?php } //end foreach ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
@@ -15,14 +15,37 @@
|
||||
.sns-icon .ico {display:block;vertical-align:middle}
|
||||
.sns-icon .txt i {font-style:normal}
|
||||
|
||||
.reg-form .sns-wrap {margin:0;text-align:left}
|
||||
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
|
||||
#fregisterform .form_01 .reg-form {margin-bottom:20px}
|
||||
#fregisterform .form_01 .reg-form .sns-wrap {margin:10px 0 0;text-align:left}
|
||||
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none;border-width:1px;border-style:solid;overflow:hidden;margin:0 1px}
|
||||
.reg-form .sns-icon:hover {text-decoration:none}
|
||||
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle}
|
||||
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle;width:24px;height:24px}
|
||||
.reg-form .sns-icon-not .ico {display:block;background:url('./img/sns_logo_not.png') no-repeat;vertical-align:middle}
|
||||
.reg-form .sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
|
||||
.reg-form .sns-icon .txt i {font-style:normal}
|
||||
|
||||
.sns-wrap-reg .sns-naver {border-color:#18a400;background:#2db400}
|
||||
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
|
||||
.sns-wrap-reg .sns-google {border-color:#ca2c19;background:#dd5443}
|
||||
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
|
||||
.sns-wrap-reg .sns-facebook {border-color:#2e5393;background:#3a5897}
|
||||
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
|
||||
|
||||
.sns-wrap-reg .sns-icon {border-color:#dcdcdc}
|
||||
.sns-wrap-reg .sns-icon-not {border-color:#8b8b8b}
|
||||
.sns-wrap-reg .sns-naver{border-color:#18a400}
|
||||
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
|
||||
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
|
||||
.sns-wrap-reg .sns-google {border-color:#ca2c19}
|
||||
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
|
||||
.sns-wrap-reg .sns-facebook {border-color:#2e5393}
|
||||
.sns-wrap-reg .sns-kakao .ico {background-position:-87px 0}
|
||||
.sns-wrap-reg .sns-twitter {border-color:#488FC9}
|
||||
.sns-wrap-reg .sns-twitter .ico {background-position:-145px 0}
|
||||
.sns-wrap-reg .sns-payco {border-color:#C44646}
|
||||
.sns-wrap-reg .sns-payco .ico {background-position:-116px 0}
|
||||
.sns-wrap-reg .sns-kakao {border-color:#f2df00}
|
||||
|
||||
/* SNS by COLOR */
|
||||
.sns-wrap-over .sns-naver{background:url('./img/sns_naver_s.png') no-repeat}
|
||||
.sns-wrap-over .sns-google {background:url('./img/sns_gp_s.png') no-repeat}
|
||||
@@ -121,14 +144,12 @@ box-shadow:0 0 10px rgba(0, 0, 0,0.8);}
|
||||
#sns-link-pnl .connect-fg .connect-title {margin-top:25px;margin-bottom:10px;font-size:1.667em;font-weight:bold;text-align:center}
|
||||
|
||||
.mbskin .member_connect:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
.mbskin .member_connect{margin-top:1em;border: 2px solid #cacaca;margin:10px;padding:20px;text-align:center}
|
||||
.mbskin .member_connect p{font-size:1.25em;font-weight:bold;margin:0 0 10px}
|
||||
.mbskin .member_connect button{; color: #fff;border:0;padding:10px 20px;border:1px solid #6446e7;font-weight:bold;background: #6f50e7;border-radius:3px;font-size:1.08em}
|
||||
.mbskin .member_connect{margin-top:1em;border: 2px solid #cacaca;margin:10px;padding:10px;text-align:left}
|
||||
.mbskin .member_connect .strong{font-weight:bold;margin:0 0 10px;font-size:0.97em}
|
||||
.mbskin .member_connect button{color: #fff;border:0;padding:7px 13px;border:1px solid #6446e7;font-weight:bold;background: #6f50e7;border-radius:3px;font-size:0.92em}
|
||||
.mbskin .member_connect button:hover{background:#6446e7}
|
||||
|
||||
.mbskin .member_connect{margin-top:1em}
|
||||
html.remodal-is-locked {overflow-y:scroll !important}
|
||||
.mbskin .btn_group_trigger{margin:10px;text-align:center}
|
||||
.mbskin .btn_group_trigger .btn_submit_trigger{display:inline-block;height:45px;line-height:45px;color:#fff;padding:0 30px;font-weight:bold;font-size:1.083em;background:#253dbe}
|
||||
|
||||
@media only screen and (min-width: 641px) {
|
||||
#sns-link-pnl.remodal{max-width:400px}
|
||||
}
|
||||
.mbskin .member_connect{margin-top:50px}
|
||||
@@ -1,242 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Remodal's default mobile first theme
|
||||
========================================================================== */
|
||||
|
||||
/* Default theme styles for the background */
|
||||
|
||||
.remodal-bg.remodal-is-opening,
|
||||
.remodal-bg.remodal-is-opened {
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
/* Default theme styles of the overlay */
|
||||
|
||||
.remodal-overlay {
|
||||
background: rgba(43, 46, 56, 0.9);
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-opening,
|
||||
.remodal-overlay.remodal-is-closing {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-opening {
|
||||
animation-name: remodal-overlay-opening-keyframes;
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-closing {
|
||||
animation-name: remodal-overlay-closing-keyframes;
|
||||
}
|
||||
|
||||
/* Default theme styles of the wrapper */
|
||||
|
||||
.remodal-wrapper {
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
/* Default theme styles of the modal dialog */
|
||||
|
||||
.remodal {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 35px;
|
||||
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
color: #2b2e38;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-opening,
|
||||
.remodal.remodal-is-closing {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-opening {
|
||||
animation-name: remodal-opening-keyframes;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-closing {
|
||||
animation-name: remodal-closing-keyframes;
|
||||
}
|
||||
|
||||
/* Vertical align of the modal dialog */
|
||||
|
||||
.remodal,
|
||||
.remodal-wrapper:after {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
|
||||
.remodal-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
overflow: visible;
|
||||
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
|
||||
color: #95979c;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.remodal-close:hover,
|
||||
.remodal-close:focus {
|
||||
color: #2b2e38;
|
||||
}
|
||||
|
||||
.remodal-close:before {
|
||||
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 35px;
|
||||
|
||||
content: "\00d7";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Dialog buttons */
|
||||
|
||||
.remodal-confirm,
|
||||
.remodal-cancel {
|
||||
font: inherit;
|
||||
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
|
||||
min-width: 110px;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.remodal-confirm {
|
||||
color: #fff;
|
||||
background: #81c784;
|
||||
}
|
||||
|
||||
.remodal-confirm:hover,
|
||||
.remodal-confirm:focus {
|
||||
background: #66bb6a;
|
||||
}
|
||||
|
||||
.remodal-cancel {
|
||||
color: #fff;
|
||||
background: #e57373;
|
||||
}
|
||||
|
||||
.remodal-cancel:hover,
|
||||
.remodal-cancel:focus {
|
||||
background: #ef5350;
|
||||
}
|
||||
|
||||
/* Remove inner padding and border in Firefox 4+ for the button tag. */
|
||||
|
||||
.remodal-confirm::-moz-focus-inner,
|
||||
.remodal-cancel::-moz-focus-inner,
|
||||
.remodal-close::-moz-focus-inner {
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Keyframes
|
||||
========================================================================== */
|
||||
|
||||
@keyframes remodal-opening-keyframes {
|
||||
from {
|
||||
transform: scale(1.05);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-closing-keyframes {
|
||||
from {
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(0.95);
|
||||
|
||||
opacity: 0;
|
||||
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-overlay-opening-keyframes {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-overlay-closing-keyframes {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media queries
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 641px) {
|
||||
.remodal {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE8
|
||||
========================================================================== */
|
||||
|
||||
.lt-ie9 .remodal-overlay {
|
||||
background: #2b2e38;
|
||||
}
|
||||
|
||||
.lt-ie9 .remodal {
|
||||
width: 700px;
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Remodal's necessary styles
|
||||
========================================================================== */
|
||||
|
||||
/* Hide scroll bar */
|
||||
|
||||
html.remodal-is-locked {
|
||||
overflow: hidden;
|
||||
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Anti FOUC */
|
||||
|
||||
.remodal,
|
||||
[data-remodal-id] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Necessary styles of the overlay */
|
||||
|
||||
.remodal-overlay {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: -5000px;
|
||||
right: -5000px;
|
||||
bottom: -5000px;
|
||||
left: -5000px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Necessary styles of the wrapper */
|
||||
|
||||
.remodal-wrapper {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
display: none;
|
||||
overflow: auto;
|
||||
|
||||
text-align: center;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.remodal-wrapper:after {
|
||||
display: inline-block;
|
||||
|
||||
height: 100%;
|
||||
margin-left: -0.05em;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Fix iPad, iPhone glitches */
|
||||
|
||||
.remodal-overlay,
|
||||
.remodal-wrapper {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Necessary styles of the modal dialog */
|
||||
|
||||
.remodal {
|
||||
position: relative;
|
||||
|
||||
outline: none;
|
||||
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.remodal-is-initialized {
|
||||
/* Disable Anti-FOUC */
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1,776 +0,0 @@
|
||||
!(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], function($) {
|
||||
return factory(root, $);
|
||||
});
|
||||
} else if (typeof exports === 'object') {
|
||||
factory(root, require('jquery'));
|
||||
} else {
|
||||
factory(root, root.jQuery || root.Zepto);
|
||||
}
|
||||
})(this, function(global, $) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Name of the plugin
|
||||
* @private
|
||||
* @const
|
||||
* @type {String}
|
||||
*/
|
||||
var PLUGIN_NAME = 'remodal';
|
||||
|
||||
/**
|
||||
* Namespace for CSS and events
|
||||
* @private
|
||||
* @const
|
||||
* @type {String}
|
||||
*/
|
||||
var NAMESPACE = global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME;
|
||||
|
||||
/**
|
||||
* Animationstart event with vendor prefixes
|
||||
* @private
|
||||
* @const
|
||||
* @type {String}
|
||||
*/
|
||||
var ANIMATIONSTART_EVENTS = $.map(
|
||||
['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'],
|
||||
|
||||
function(eventName) {
|
||||
return eventName + '.' + NAMESPACE;
|
||||
}
|
||||
|
||||
).join(' ');
|
||||
|
||||
/**
|
||||
* Animationend event with vendor prefixes
|
||||
* @private
|
||||
* @const
|
||||
* @type {String}
|
||||
*/
|
||||
var ANIMATIONEND_EVENTS = $.map(
|
||||
['animationend', 'webkitAnimationEnd', 'MSAnimationEnd', 'oAnimationEnd'],
|
||||
|
||||
function(eventName) {
|
||||
return eventName + '.' + NAMESPACE;
|
||||
}
|
||||
|
||||
).join(' ');
|
||||
|
||||
/**
|
||||
* Default settings
|
||||
* @private
|
||||
* @const
|
||||
* @type {Object}
|
||||
*/
|
||||
var DEFAULTS = $.extend({
|
||||
hashTracking: true,
|
||||
closeOnConfirm: true,
|
||||
closeOnCancel: true,
|
||||
closeOnEscape: true,
|
||||
closeOnOutsideClick: true,
|
||||
modifier: '',
|
||||
appendTo: null
|
||||
}, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS);
|
||||
|
||||
/**
|
||||
* States of the Remodal
|
||||
* @private
|
||||
* @const
|
||||
* @enum {String}
|
||||
*/
|
||||
var STATES = {
|
||||
CLOSING: 'closing',
|
||||
CLOSED: 'closed',
|
||||
OPENING: 'opening',
|
||||
OPENED: 'opened'
|
||||
};
|
||||
|
||||
/**
|
||||
* Reasons of the state change.
|
||||
* @private
|
||||
* @const
|
||||
* @enum {String}
|
||||
*/
|
||||
var STATE_CHANGE_REASONS = {
|
||||
CONFIRMATION: 'confirmation',
|
||||
CANCELLATION: 'cancellation'
|
||||
};
|
||||
|
||||
/**
|
||||
* Is animation supported?
|
||||
* @private
|
||||
* @const
|
||||
* @type {Boolean}
|
||||
*/
|
||||
var IS_ANIMATION = (function() {
|
||||
var style = document.createElement('div').style;
|
||||
|
||||
return style.animationName !== undefined ||
|
||||
style.WebkitAnimationName !== undefined ||
|
||||
style.MozAnimationName !== undefined ||
|
||||
style.msAnimationName !== undefined ||
|
||||
style.OAnimationName !== undefined;
|
||||
})();
|
||||
|
||||
/**
|
||||
* Is iOS?
|
||||
* @private
|
||||
* @const
|
||||
* @type {Boolean}
|
||||
*/
|
||||
var IS_IOS = /iPad|iPhone|iPod/.test(navigator.platform);
|
||||
|
||||
/**
|
||||
* Current modal
|
||||
* @private
|
||||
* @type {Remodal}
|
||||
*/
|
||||
var current;
|
||||
|
||||
/**
|
||||
* Scrollbar position
|
||||
* @private
|
||||
* @type {Number}
|
||||
*/
|
||||
var scrollTop;
|
||||
|
||||
/**
|
||||
* Returns an animation duration
|
||||
* @private
|
||||
* @param {jQuery} $elem
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getAnimationDuration($elem) {
|
||||
if (
|
||||
IS_ANIMATION &&
|
||||
$elem.css('animation-name') === 'none' &&
|
||||
$elem.css('-webkit-animation-name') === 'none' &&
|
||||
$elem.css('-moz-animation-name') === 'none' &&
|
||||
$elem.css('-o-animation-name') === 'none' &&
|
||||
$elem.css('-ms-animation-name') === 'none'
|
||||
) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var duration = $elem.css('animation-duration') ||
|
||||
$elem.css('-webkit-animation-duration') ||
|
||||
$elem.css('-moz-animation-duration') ||
|
||||
$elem.css('-o-animation-duration') ||
|
||||
$elem.css('-ms-animation-duration') ||
|
||||
'0s';
|
||||
|
||||
var delay = $elem.css('animation-delay') ||
|
||||
$elem.css('-webkit-animation-delay') ||
|
||||
$elem.css('-moz-animation-delay') ||
|
||||
$elem.css('-o-animation-delay') ||
|
||||
$elem.css('-ms-animation-delay') ||
|
||||
'0s';
|
||||
|
||||
var iterationCount = $elem.css('animation-iteration-count') ||
|
||||
$elem.css('-webkit-animation-iteration-count') ||
|
||||
$elem.css('-moz-animation-iteration-count') ||
|
||||
$elem.css('-o-animation-iteration-count') ||
|
||||
$elem.css('-ms-animation-iteration-count') ||
|
||||
'1';
|
||||
|
||||
var max;
|
||||
var len;
|
||||
var num;
|
||||
var i;
|
||||
|
||||
duration = duration.split(', ');
|
||||
delay = delay.split(', ');
|
||||
iterationCount = iterationCount.split(', ');
|
||||
|
||||
// The 'duration' size is the same as the 'delay' size
|
||||
for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) {
|
||||
num = parseFloat(duration[i]) * parseInt(iterationCount[i], 10) + parseFloat(delay[i]);
|
||||
|
||||
if (num > max) {
|
||||
max = num;
|
||||
}
|
||||
}
|
||||
|
||||
return max;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a scrollbar width
|
||||
* @private
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getScrollbarWidth() {
|
||||
if ($(document).height() <= $(window).height()) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var outer = document.createElement('div');
|
||||
var inner = document.createElement('div');
|
||||
var widthNoScroll;
|
||||
var widthWithScroll;
|
||||
|
||||
outer.style.visibility = 'hidden';
|
||||
outer.style.width = '100px';
|
||||
document.body.appendChild(outer);
|
||||
|
||||
widthNoScroll = outer.offsetWidth;
|
||||
|
||||
// Force scrollbars
|
||||
outer.style.overflow = 'scroll';
|
||||
|
||||
// Add inner div
|
||||
inner.style.width = '100%';
|
||||
outer.appendChild(inner);
|
||||
|
||||
widthWithScroll = inner.offsetWidth;
|
||||
|
||||
// Remove divs
|
||||
outer.parentNode.removeChild(outer);
|
||||
|
||||
return widthNoScroll - widthWithScroll;
|
||||
}
|
||||
|
||||
/**
|
||||
* Locks the screen
|
||||
* @private
|
||||
*/
|
||||
function lockScreen() {
|
||||
if (IS_IOS) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $html = $('html');
|
||||
var lockedClass = namespacify('is-locked');
|
||||
var paddingRight;
|
||||
var $body;
|
||||
|
||||
if (!$html.hasClass(lockedClass)) {
|
||||
$body = $(document.body);
|
||||
|
||||
// Zepto does not support '-=', '+=' in the `css` method
|
||||
paddingRight = parseInt($body.css('padding-right'), 10) + getScrollbarWidth();
|
||||
|
||||
$body.css('padding-right', paddingRight + 'px');
|
||||
$html.addClass(lockedClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unlocks the screen
|
||||
* @private
|
||||
*/
|
||||
function unlockScreen() {
|
||||
if (IS_IOS) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $html = $('html');
|
||||
var lockedClass = namespacify('is-locked');
|
||||
var paddingRight;
|
||||
var $body;
|
||||
|
||||
if ($html.hasClass(lockedClass)) {
|
||||
$body = $(document.body);
|
||||
|
||||
// Zepto does not support '-=', '+=' in the `css` method
|
||||
paddingRight = parseInt($body.css('padding-right'), 10) - getScrollbarWidth();
|
||||
|
||||
$body.css('padding-right', paddingRight + 'px');
|
||||
$html.removeClass(lockedClass);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a state for an instance
|
||||
* @private
|
||||
* @param {Remodal} instance
|
||||
* @param {STATES} state
|
||||
* @param {Boolean} isSilent If true, Remodal does not trigger events
|
||||
* @param {String} Reason of a state change.
|
||||
*/
|
||||
function setState(instance, state, isSilent, reason) {
|
||||
|
||||
var newState = namespacify('is', state);
|
||||
var allStates = [namespacify('is', STATES.CLOSING),
|
||||
namespacify('is', STATES.OPENING),
|
||||
namespacify('is', STATES.CLOSED),
|
||||
namespacify('is', STATES.OPENED)].join(' ');
|
||||
|
||||
instance.$bg
|
||||
.removeClass(allStates)
|
||||
.addClass(newState);
|
||||
|
||||
instance.$overlay
|
||||
.removeClass(allStates)
|
||||
.addClass(newState);
|
||||
|
||||
instance.$wrapper
|
||||
.removeClass(allStates)
|
||||
.addClass(newState);
|
||||
|
||||
instance.$modal
|
||||
.removeClass(allStates)
|
||||
.addClass(newState);
|
||||
|
||||
instance.state = state;
|
||||
!isSilent && instance.$modal.trigger({
|
||||
type: state,
|
||||
reason: reason
|
||||
}, [{ reason: reason }]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Synchronizes with the animation
|
||||
* @param {Function} doBeforeAnimation
|
||||
* @param {Function} doAfterAnimation
|
||||
* @param {Remodal} instance
|
||||
*/
|
||||
function syncWithAnimation(doBeforeAnimation, doAfterAnimation, instance) {
|
||||
var runningAnimationsCount = 0;
|
||||
|
||||
var handleAnimationStart = function(e) {
|
||||
if (e.target !== this) {
|
||||
return;
|
||||
}
|
||||
|
||||
runningAnimationsCount++;
|
||||
};
|
||||
|
||||
var handleAnimationEnd = function(e) {
|
||||
if (e.target !== this) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (--runningAnimationsCount === 0) {
|
||||
|
||||
// Remove event listeners
|
||||
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
|
||||
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
|
||||
});
|
||||
|
||||
doAfterAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
|
||||
instance[elemName]
|
||||
.on(ANIMATIONSTART_EVENTS, handleAnimationStart)
|
||||
.on(ANIMATIONEND_EVENTS, handleAnimationEnd);
|
||||
});
|
||||
|
||||
doBeforeAnimation();
|
||||
|
||||
// If the animation is not supported by a browser or its duration is 0
|
||||
if (
|
||||
getAnimationDuration(instance.$bg) === 0 &&
|
||||
getAnimationDuration(instance.$overlay) === 0 &&
|
||||
getAnimationDuration(instance.$wrapper) === 0 &&
|
||||
getAnimationDuration(instance.$modal) === 0
|
||||
) {
|
||||
|
||||
// Remove event listeners
|
||||
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
|
||||
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
|
||||
});
|
||||
|
||||
doAfterAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes immediately
|
||||
* @private
|
||||
* @param {Remodal} instance
|
||||
*/
|
||||
function halt(instance) {
|
||||
if (instance.state === STATES.CLOSED) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
|
||||
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
|
||||
});
|
||||
|
||||
instance.$bg.removeClass(instance.settings.modifier);
|
||||
instance.$overlay.removeClass(instance.settings.modifier).hide();
|
||||
instance.$wrapper.hide();
|
||||
unlockScreen();
|
||||
setState(instance, STATES.CLOSED, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a string with options
|
||||
* @private
|
||||
* @param str
|
||||
* @returns {Object}
|
||||
*/
|
||||
function parseOptions(str) {
|
||||
var obj = {};
|
||||
var arr;
|
||||
var len;
|
||||
var val;
|
||||
var i;
|
||||
|
||||
// Remove spaces before and after delimiters
|
||||
str = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',');
|
||||
|
||||
// Parse a string
|
||||
arr = str.split(',');
|
||||
for (i = 0, len = arr.length; i < len; i++) {
|
||||
arr[i] = arr[i].split(':');
|
||||
val = arr[i][1];
|
||||
|
||||
// Convert a string value if it is like a boolean
|
||||
if (typeof val === 'string' || val instanceof String) {
|
||||
val = val === 'true' || (val === 'false' ? false : val);
|
||||
}
|
||||
|
||||
// Convert a string value if it is like a number
|
||||
if (typeof val === 'string' || val instanceof String) {
|
||||
val = !isNaN(val) ? +val : val;
|
||||
}
|
||||
|
||||
obj[arr[i][0]] = val;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a string separated by dashes and prefixed with NAMESPACE
|
||||
* @private
|
||||
* @param {...String}
|
||||
* @returns {String}
|
||||
*/
|
||||
function namespacify() {
|
||||
var result = NAMESPACE;
|
||||
|
||||
for (var i = 0; i < arguments.length; ++i) {
|
||||
result += '-' + arguments[i];
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the hashchange event
|
||||
* @private
|
||||
* @listens hashchange
|
||||
*/
|
||||
function handleHashChangeEvent() {
|
||||
var id = location.hash.replace('#', '');
|
||||
var instance;
|
||||
var $elem;
|
||||
|
||||
if (!id) {
|
||||
|
||||
// Check if we have currently opened modal and animation was completed
|
||||
if (current && current.state === STATES.OPENED && current.settings.hashTracking) {
|
||||
current.close();
|
||||
}
|
||||
} else {
|
||||
|
||||
// Catch syntax error if your hash is bad
|
||||
try {
|
||||
$elem = $(
|
||||
'[data-' + PLUGIN_NAME + '-id="' + id + '"]'
|
||||
);
|
||||
} catch (err) {}
|
||||
|
||||
if ($elem && $elem.length) {
|
||||
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
|
||||
|
||||
if (instance && instance.settings.hashTracking) {
|
||||
instance.open();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remodal constructor
|
||||
* @constructor
|
||||
* @param {jQuery} $modal
|
||||
* @param {Object} options
|
||||
*/
|
||||
function Remodal($modal, options) {
|
||||
var $body = $(document.body);
|
||||
var $appendTo = $body;
|
||||
var remodal = this;
|
||||
|
||||
remodal.settings = $.extend({}, DEFAULTS, options);
|
||||
remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1;
|
||||
remodal.state = STATES.CLOSED;
|
||||
|
||||
remodal.$overlay = $('.' + namespacify('overlay'));
|
||||
|
||||
if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) {
|
||||
$appendTo = $(remodal.settings.appendTo);
|
||||
}
|
||||
|
||||
if (!remodal.$overlay.length) {
|
||||
remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
|
||||
$appendTo.append(remodal.$overlay);
|
||||
}
|
||||
|
||||
remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
|
||||
|
||||
remodal.$modal = $modal
|
||||
.addClass(
|
||||
NAMESPACE + ' ' +
|
||||
namespacify('is-initialized') + ' ' +
|
||||
remodal.settings.modifier + ' ' +
|
||||
namespacify('is', STATES.CLOSED))
|
||||
.attr('tabindex', '-1');
|
||||
|
||||
remodal.$wrapper = $('<div>')
|
||||
.addClass(
|
||||
namespacify('wrapper') + ' ' +
|
||||
remodal.settings.modifier + ' ' +
|
||||
namespacify('is', STATES.CLOSED))
|
||||
.hide()
|
||||
.append(remodal.$modal);
|
||||
$appendTo.append(remodal.$wrapper);
|
||||
|
||||
// Add the event listener for the close button
|
||||
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
remodal.close();
|
||||
});
|
||||
|
||||
// Add the event listener for the cancel button
|
||||
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="cancel"]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
remodal.$modal.trigger(STATE_CHANGE_REASONS.CANCELLATION);
|
||||
|
||||
if (remodal.settings.closeOnCancel) {
|
||||
remodal.close(STATE_CHANGE_REASONS.CANCELLATION);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the event listener for the confirm button
|
||||
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="confirm"]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
remodal.$modal.trigger(STATE_CHANGE_REASONS.CONFIRMATION);
|
||||
|
||||
if (remodal.settings.closeOnConfirm) {
|
||||
remodal.close(STATE_CHANGE_REASONS.CONFIRMATION);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the event listener for the overlay
|
||||
remodal.$wrapper.on('click.' + NAMESPACE, function(e) {
|
||||
var $target = $(e.target);
|
||||
|
||||
if (!$target.hasClass(namespacify('wrapper'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (remodal.settings.closeOnOutsideClick) {
|
||||
remodal.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens a modal window
|
||||
* @public
|
||||
*/
|
||||
Remodal.prototype.open = function() {
|
||||
var remodal = this;
|
||||
var id;
|
||||
|
||||
// Check if the animation was completed
|
||||
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
|
||||
return;
|
||||
}
|
||||
|
||||
id = remodal.$modal.attr('data-' + PLUGIN_NAME + '-id');
|
||||
|
||||
if (id && remodal.settings.hashTracking) {
|
||||
scrollTop = $(window).scrollTop();
|
||||
location.hash = id;
|
||||
}
|
||||
|
||||
if (current && current !== remodal) {
|
||||
halt(current);
|
||||
}
|
||||
|
||||
current = remodal;
|
||||
lockScreen();
|
||||
remodal.$bg.addClass(remodal.settings.modifier);
|
||||
remodal.$overlay.addClass(remodal.settings.modifier).show();
|
||||
remodal.$wrapper.show().scrollTop(0);
|
||||
remodal.$modal.focus();
|
||||
|
||||
syncWithAnimation(
|
||||
function() {
|
||||
setState(remodal, STATES.OPENING);
|
||||
},
|
||||
|
||||
function() {
|
||||
setState(remodal, STATES.OPENED);
|
||||
},
|
||||
|
||||
remodal);
|
||||
};
|
||||
|
||||
/**
|
||||
* Closes a modal window
|
||||
* @public
|
||||
* @param {String} reason
|
||||
*/
|
||||
Remodal.prototype.close = function(reason) {
|
||||
var remodal = this;
|
||||
|
||||
// Check if the animation was completed
|
||||
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING || remodal.state === STATES.CLOSED) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
remodal.settings.hashTracking &&
|
||||
remodal.$modal.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
|
||||
) {
|
||||
location.hash = '';
|
||||
$(window).scrollTop(scrollTop);
|
||||
}
|
||||
|
||||
syncWithAnimation(
|
||||
function() {
|
||||
setState(remodal, STATES.CLOSING, false, reason);
|
||||
},
|
||||
|
||||
function() {
|
||||
remodal.$bg.removeClass(remodal.settings.modifier);
|
||||
remodal.$overlay.removeClass(remodal.settings.modifier).hide();
|
||||
remodal.$wrapper.hide();
|
||||
unlockScreen();
|
||||
|
||||
setState(remodal, STATES.CLOSED, false, reason);
|
||||
},
|
||||
|
||||
remodal);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a current state of a modal
|
||||
* @public
|
||||
* @returns {STATES}
|
||||
*/
|
||||
Remodal.prototype.getState = function() {
|
||||
return this.state;
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroys a modal
|
||||
* @public
|
||||
*/
|
||||
Remodal.prototype.destroy = function() {
|
||||
var lookup = $[PLUGIN_NAME].lookup;
|
||||
var instanceCount;
|
||||
|
||||
halt(this);
|
||||
this.$wrapper.remove();
|
||||
|
||||
delete lookup[this.index];
|
||||
instanceCount = $.grep(lookup, function(instance) {
|
||||
return !!instance;
|
||||
}).length;
|
||||
|
||||
if (instanceCount === 0) {
|
||||
this.$overlay.remove();
|
||||
this.$bg.removeClass(
|
||||
namespacify('is', STATES.CLOSING) + ' ' +
|
||||
namespacify('is', STATES.OPENING) + ' ' +
|
||||
namespacify('is', STATES.CLOSED) + ' ' +
|
||||
namespacify('is', STATES.OPENED));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Special plugin object for instances
|
||||
* @public
|
||||
* @type {Object}
|
||||
*/
|
||||
$[PLUGIN_NAME] = {
|
||||
lookup: []
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin constructor
|
||||
* @constructor
|
||||
* @param {Object} options
|
||||
* @returns {JQuery}
|
||||
*/
|
||||
$.fn[PLUGIN_NAME] = function(opts) {
|
||||
var instance;
|
||||
var $elem;
|
||||
|
||||
this.each(function(index, elem) {
|
||||
$elem = $(elem);
|
||||
|
||||
if ($elem.data(PLUGIN_NAME) == null) {
|
||||
instance = new Remodal($elem, opts);
|
||||
$elem.data(PLUGIN_NAME, instance.index);
|
||||
|
||||
if (
|
||||
instance.settings.hashTracking &&
|
||||
$elem.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
|
||||
) {
|
||||
instance.open();
|
||||
}
|
||||
} else {
|
||||
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
|
||||
}
|
||||
});
|
||||
|
||||
return instance;
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
// data-remodal-target opens a modal window with the special Id
|
||||
$(document).on('click', '[data-' + PLUGIN_NAME + '-target]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var elem = e.currentTarget;
|
||||
var id = elem.getAttribute('data-' + PLUGIN_NAME + '-target');
|
||||
var $target = $('[data-' + PLUGIN_NAME + '-id="' + id + '"]');
|
||||
|
||||
$[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open();
|
||||
});
|
||||
|
||||
// Auto initialization of modal windows
|
||||
// They should have the 'remodal' class attribute
|
||||
// Also you can write the `data-remodal-options` attribute to pass params into the modal
|
||||
$(document).find('.' + NAMESPACE).each(function(i, container) {
|
||||
var $container = $(container);
|
||||
var options = $container.data(PLUGIN_NAME + '-options');
|
||||
|
||||
if (!options) {
|
||||
options = {};
|
||||
} else if (typeof options === 'string' || options instanceof String) {
|
||||
options = parseOptions(options);
|
||||
}
|
||||
|
||||
$container[PLUGIN_NAME](options);
|
||||
});
|
||||
|
||||
// Handles the keydown event
|
||||
$(document).on('keydown.' + NAMESPACE, function(e) {
|
||||
if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
|
||||
current.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Handles the hashchange event
|
||||
$(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent);
|
||||
});
|
||||
});
|
||||
@@ -6,10 +6,10 @@ if( ! $config['cf_social_login_use']) { //소셜 로그인을 사용하지
|
||||
}
|
||||
|
||||
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal.css">', 11);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal-default-theme.css">', 12);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/remodal/remodal.css">', 11);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/remodal/remodal-default-theme.css">', 12);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 13);
|
||||
add_javascript('<script src="'.get_social_skin_url().'/remodal/remodal.js"></script>', 10);
|
||||
add_javascript('<script src="'.G5_JS_URL.'/remodal/remodal.js"></script>', 10);
|
||||
|
||||
$email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.다른 이메일을 입력해 주세요.' : '';
|
||||
?>
|
||||
@@ -79,7 +79,7 @@ $email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.
|
||||
<!-- 기존 계정 연결 -->
|
||||
|
||||
<div class="member_connect">
|
||||
<p>혹시 기존 회원이신가요?</p>
|
||||
<p class="strong">혹시 기존 회원이신가요?</p>
|
||||
<button type="button" class="connect-opener btn-txt" data-remodal-target="modal">
|
||||
기존 계정에 연결하기
|
||||
<i class="fa fa-angle-double-right"></i>
|
||||
@@ -101,7 +101,7 @@ $email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.
|
||||
|
||||
<div class="connect-desc">
|
||||
기존 아이디에 SNS 아이디를 연결합니다.<br>
|
||||
SNS 아이디로 로그인 하시면 기존 아이디로 로그인 됩니다.
|
||||
이 후 SNS 아이디로 로그인 하시면 기존 아이디로 로그인 할 수 있습니다.
|
||||
</div>
|
||||
|
||||
<div id="login_fs">
|
||||
|
||||
@@ -12,44 +12,42 @@ $session_id = session_id();
|
||||
add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 10);
|
||||
?>
|
||||
|
||||
<tr>
|
||||
<th scope="row">소셜로그인</th>
|
||||
<td>
|
||||
<div class="reg-form sns-wrap-32 sns-wrap-over">
|
||||
<div class="sns-wrap">
|
||||
<li>
|
||||
<label class="frm_label">SNS 로그인 관리</label>
|
||||
<div class="reg-form sns-wrap-reg">
|
||||
<div class="sns-wrap">
|
||||
|
||||
<?php foreach( $socials as $social=>$provider_name ){
|
||||
<?php foreach( $socials as $social=>$provider_name ){
|
||||
|
||||
if( !option_array_checked($social, $config['cf_social_servicelist'])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$social_nonce = social_nonce_create($social, $session_id);
|
||||
$add_class='';
|
||||
$title='';
|
||||
if( in_array($social, $my_provides) ){
|
||||
|
||||
if( !option_array_checked($social, $config['cf_social_servicelist'])) {
|
||||
continue;
|
||||
}
|
||||
$link_href = G5_SOCIAL_LOGIN_URL.'/unlink.php?provider='.$social.'&social_nonce='.$social_nonce;
|
||||
|
||||
$social_nonce = social_nonce_create($social, $session_id);
|
||||
$add_class='';
|
||||
$title='';
|
||||
if( in_array($social, $my_provides) ){
|
||||
|
||||
$link_href = G5_SOCIAL_LOGIN_URL.'/unlink.php?provider='.$social.'&social_nonce='.$social_nonce;
|
||||
$title = $provider_name.' 연결을 해제합니다.';
|
||||
} else {
|
||||
$add_class = ' sns-icon-not';
|
||||
|
||||
$title = $provider_name.' 연결해제하기';
|
||||
} else {
|
||||
$add_class = ' sns-icon-not';
|
||||
$link_href = $self_url.'?provider='.$social.'&mylink=1&url='.$urlencode;
|
||||
|
||||
$link_href = $self_url.'?provider='.$social.'&mylink=1&url='.$urlencode;
|
||||
$title = $provider_name.' 계정을 연결 합니다.';
|
||||
|
||||
$title = $provider_name.' 연결하기';
|
||||
}
|
||||
?>
|
||||
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo $link_href; ?>" id="sns-<?php echo $social; ?>" class="sns-icon social_link sns-<?php echo $social; ?><?php echo $add_class; ?>" title="<?php echo $title; ?>" data-provider="<?php echo $social; ?>" ><span class="ico"></span><span class="txt"><?php echo $provider_name; ?> 로그인</span></a>
|
||||
|
||||
<a href="<?php echo $link_href; ?>" id="sns-<?php echo $social; ?>" class="sns-icon oauth_connect social_link sns-<?php echo $social; ?><?php echo $add_class; ?>" title="<?php echo $title; ?>" data-provider="<?php echo $social; ?>" ><span class="ico"></span><span class="txt"><?php echo $provider_name; ?> 로그인</span></a>
|
||||
<?php } //end foreach ?>
|
||||
|
||||
<?php } //end foreach ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -73,11 +71,9 @@ function social_link_fn(provider){
|
||||
|
||||
var social_url = "<?php echo G5_SOCIAL_LOGIN_URL; ?>",
|
||||
link_href = social_url+"/unlink.php?provider="+provider+"&social_nonce="+social_get_nonce(provider),
|
||||
atitle = provider+" 연결해제하기";
|
||||
atitle = provider+" 연결을 해제합니다.";
|
||||
|
||||
$icon.attr({"href":link_href, "title":atitle}).removeClass("sns-icon-not");
|
||||
|
||||
//$icon.children("img").attr({"src" : social_url+"/img/32x32/"+provider+".png", "title":atitle, "alt":atitle}).removeClass("link").addClass("unlink");
|
||||
|
||||
alert('연결 되었습니다');
|
||||
|
||||
@@ -129,13 +125,11 @@ jQuery(function($){
|
||||
alert(data.error);
|
||||
return false;
|
||||
} else {
|
||||
var atitle = provider+" 연결하기",
|
||||
var atitle = provider+" 계정을 연결 합니다.",
|
||||
link_href = self_url+"?provider="+provider+"&mylink=1&url="+urlencode;
|
||||
|
||||
othis.attr({"href":link_href, "title":atitle}).addClass("sns-icon-not");
|
||||
|
||||
//othis.children("img").attr({"src" : social_img_path+"/img/32x32/"+provider+"_off.png", "title":atitle, "alt":atitle}).removeClass("unlink").addClass("link");
|
||||
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
|
||||
+29
-6
@@ -16,14 +16,37 @@
|
||||
/*.sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}*/
|
||||
.sns-icon .txt i {font-style:normal}
|
||||
|
||||
.reg-form .sns-wrap {margin:0;text-align:left}
|
||||
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
|
||||
#fregisterform .form_01 .reg-form {margin-bottom:20px}
|
||||
#fregisterform .form_01 .reg-form .sns-wrap {margin:10px 0 0;text-align:left}
|
||||
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none;border-width:1px;border-style:solid;overflow:hidden;margin:0 1px}
|
||||
.reg-form .sns-icon:hover {text-decoration:none}
|
||||
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle}
|
||||
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle;width:24px;height:24px}
|
||||
.reg-form .sns-icon-not .ico {display:block;background:url('./img/sns_logo_not.png') no-repeat;vertical-align:middle}
|
||||
.reg-form .sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
|
||||
.reg-form .sns-icon .txt i {font-style:normal}
|
||||
|
||||
.sns-wrap-reg .sns-naver {border-color:#18a400;background:#2db400}
|
||||
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
|
||||
.sns-wrap-reg .sns-google {border-color:#ca2c19;background:#dd5443}
|
||||
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
|
||||
.sns-wrap-reg .sns-facebook {border-color:#2e5393;background:#3a5897}
|
||||
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
|
||||
|
||||
.sns-wrap-reg .sns-icon {border-color:#dcdcdc}
|
||||
.sns-wrap-reg .sns-icon-not {border-color:#8b8b8b}
|
||||
.sns-wrap-reg .sns-naver{border-color:#18a400}
|
||||
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
|
||||
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
|
||||
.sns-wrap-reg .sns-google {border-color:#ca2c19}
|
||||
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
|
||||
.sns-wrap-reg .sns-facebook {border-color:#2e5393}
|
||||
.sns-wrap-reg .sns-kakao .ico {background-position:-87px 0}
|
||||
.sns-wrap-reg .sns-twitter {border-color:#488FC9}
|
||||
.sns-wrap-reg .sns-twitter .ico {background-position:-145px 0}
|
||||
.sns-wrap-reg .sns-payco {border-color:#C44646}
|
||||
.sns-wrap-reg .sns-payco .ico {background-position:-116px 0}
|
||||
.sns-wrap-reg .sns-kakao {border-color:#f2df00}
|
||||
|
||||
/* SNS by COLOR */
|
||||
.sns-wrap-over .sns-naver{background:url('./img/sns_naver_s.png') no-repeat}
|
||||
.sns-wrap-over .sns-google {background:url('./img/sns_gp_s.png') no-repeat}
|
||||
@@ -113,9 +136,9 @@
|
||||
#sns-link-pnl .connect-fg .connect-title {margin-top:25px;margin-bottom:10px;font-size:1.667em;font-weight:bold;text-align:center}
|
||||
|
||||
.mbskin .member_connect:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
.mbskin .member_connect{margin-top:1em;background:#d9d9d9;border-radius:3px;padding:20px;text-align:center}
|
||||
.mbskin .member_connect p{font-size:1.25em;font-weight:bold;margin:0 0 10px}
|
||||
.mbskin .member_connect button{; color: #fff;border:0;padding:10px 20px;border:1px solid #6446e7;font-weight:bold;background: #6f50e7;border-radius:3px;font-size:1.08em}
|
||||
.mbskin .member_connect{margin-top:50px;background:#d9d9d9;border-radius:3px;padding:10px;text-align:center}
|
||||
.mbskin .member_connect .strong{font-size:1em;font-weight:bold;margin:0 0 10px}
|
||||
.mbskin .member_connect button{color: #fff;border:0;padding:10px 20px;border:1px solid #6446e7;font-weight:bold;background: #6f50e7;border-radius:3px;font-size:0.91em}
|
||||
.mbskin .member_connect button:hover{background:#6446e7}
|
||||
|
||||
html.remodal-is-locked {overflow-y:scroll !important}
|
||||
|
||||
@@ -18,9 +18,10 @@ $thumb_height = 150;
|
||||
if($thumb['src']) {
|
||||
$img = $thumb['src'];
|
||||
} else {
|
||||
$img = $latest_skin_url.'/img/no_img.gif';
|
||||
$img = G5_IMG_URL.'/no_img.png';
|
||||
$thumb['alt'] = '이미지가 없습니다.';
|
||||
}
|
||||
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">';
|
||||
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php echo $list[$i]['href'] ?>" class="lt_img"><?php echo $img_content; ?></a>
|
||||
|
||||
Reference in new issue
Block a user