class 명을 기존 jPicker 와 달리 써서 충돌 회피

혹시 한 페이지에 함께 불러오더라도 충돌을 회피함.
This commit is contained in:
MinSoo Kim 2016-02-06 18:46:02 +09:00
parent 3288d504d2
commit f9987347a5
12 changed files with 26 additions and 25 deletions

View file

@ -1,3 +1,3 @@
spectrum.css spectrum.css
spectrum.js spectrum.js
xe_spectrum.js rx_spectrum.js

View file

@ -3,12 +3,12 @@
* @author MinSoo Kim <misol.kr@gmail.com> * @author MinSoo Kim <misol.kr@gmail.com>
**/ **/
jQuery(function($){ jQuery(function($){
$.fn.xe_spectrum = function(settings){ $.fn.rx_spectrum = function(settings){
return this.spectrum(settings); return this.spectrum(settings);
} }
// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용 by misol 2016.02.05 // 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용
if ( $("input.color-indicator").prop('type') != 'color' ) { if ( $("input.rx-spectrum").prop('type') != 'color' ) {
$.getScript(request_uri + "./common/js/plugins/spectrum/i18n/jquery.spectrum-"+ xe.current_lang.replace("jp", "ja").toLowerCase() +".js", function() { $.getScript(request_uri + "./common/js/plugins/spectrum/i18n/jquery.spectrum-"+ xe.current_lang.replace("jp", "ja").toLowerCase() +".js", function() {
var settings = { var settings = {
showInput: true, showInput: true,
@ -42,7 +42,7 @@ jQuery(function($){
["#660000","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] ["#660000","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
] ]
} }
$('input.color-indicator').xe_spectrum(settings); $('input.rx-spectrum').rx_spectrum(settings);
}); });
} }
}); });

View file

@ -61,7 +61,7 @@
<div class="x_control-group"> <div class="x_control-group">
<label class="x_control-label" for="category_color">{$lang->category_color}</label> <label class="x_control-label" for="category_color">{$lang->category_color}</label>
<div class="x_controls"> <div class="x_controls">
<span class="x_input-append"><input type="color" class="color-indicator" name="category_color" id="category_color" value="" /></span> <span class="x_input-append"><input type="color" class="rx-spectrum" name="category_color" id="category_color" value="" /></span>
<a href="#categoy_color_help" class="x_icon-question-sign" data-toggle>{$lang->help}</a> <a href="#categoy_color_help" class="x_icon-question-sign" data-toggle>{$lang->help}</a>
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p> <p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</div> </div>

View file

@ -150,6 +150,7 @@ function clearValue(){
$w.find('input[type="checkbox"]').removeAttr('checked'); $w.find('input[type="checkbox"]').removeAttr('checked');
$w.find('.lang_code').trigger('reload-multilingual'); $w.find('.lang_code').trigger('reload-multilingual');
$w.find('.color-indicator').trigger('keyup'); $w.find('.color-indicator').trigger('keyup');
$w.find('.rx-spectrum').trigger('keyup');
} }
function addNode(node,e){ function addNode(node,e){

View file

@ -40,13 +40,13 @@
<div class="x_control-group"> <div class="x_control-group">
<label for="" class="x_control-label">{$lang->gallery_border_color}</label> <label for="" class="x_control-label">{$lang->gallery_border_color}</label>
<div class="x_controls"> <div class="x_controls">
<input type="color" id="border_color_input" class="color-indicator" size="7" value="#000000" /> <input type="color" id="border_color_input" class="rx-spectrum" size="7" value="#000000" />
</div> </div>
</div> </div>
<div class="x_control-group"> <div class="x_control-group">
<label for="" class="x_control-label">{$lang->gallery_bg_color}</label> <label for="" class="x_control-label">{$lang->gallery_bg_color}</label>
<div class="x_controls"> <div class="x_controls">
<input type="color" id="bg_color_input" class="color-indicator" size="7" value="#FFFFFF" /> <input type="color" id="bg_color_input" class="rx-spectrum" size="7" value="#FFFFFF" />
</div> </div>
</div> </div>
<div class="x_control-group"> <div class="x_control-group">

View file

@ -218,7 +218,7 @@
<legend>{$lang->layout_manager[38]}</legend> <legend>{$lang->layout_manager[38]}</legend>
<span class="inputall"> <span class="inputall">
<input type="text" id="border-width" size="3" title="border-width+px" /> <input type="text" id="border-width" size="3" title="border-width+px" />
<input type="color" id="border-color" size="7" class="color-indicator" title="border-color" /> <input type="color" id="border-color" size="7" class="rx-spectrum" title="border-color" />
<select id="border-style" title="border-style"> <select id="border-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option> <option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option> <option value="hidden">hidden</option>
@ -237,7 +237,7 @@
<div> <div>
<label for="border-top-width">{$lang->layout_manager[34]} : </label> <label for="border-top-width">{$lang->layout_manager[34]} : </label>
<input type="text" id="border-top-width" size="3" title="border-width+px" /> <input type="text" id="border-top-width" size="3" title="border-width+px" />
<input type="color" id="border-top-color" size="7" class="color-indicator" title="border-color" /> <input type="color" id="border-top-color" size="7" class="rx-spectrum" title="border-color" />
<select id="border-top-style" title="border-style"> <select id="border-top-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option> <option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option> <option value="hidden">hidden</option>
@ -254,7 +254,7 @@
<div> <div>
<label for="border-right-width">{$lang->layout_manager[36]} : </label> <label for="border-right-width">{$lang->layout_manager[36]} : </label>
<input type="text" id="border-right-width" size="3" title="border-width+px" /> <input type="text" id="border-right-width" size="3" title="border-width+px" />
<input type="color" id="border-right-color" size="7" class="color-indicator" title="border-color" /> <input type="color" id="border-right-color" size="7" class="rx-spectrum" title="border-color" />
<select id="border-right-style" title="border-style"> <select id="border-right-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option> <option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option> <option value="hidden">hidden</option>
@ -271,7 +271,7 @@
<div> <div>
<label for="border-bottom-width">{$lang->layout_manager[37]} : </label> <label for="border-bottom-width">{$lang->layout_manager[37]} : </label>
<input type="text" id="border-bottom-width" size="3" title="border-width+px" /> <input type="text" id="border-bottom-width" size="3" title="border-width+px" />
<input type="color" id="border-bottom-color" size="7" class="color-indicator" title="border-color" /> <input type="color" id="border-bottom-color" size="7" class="rx-spectrum" title="border-color" />
<select id="border-bottom-style" title="border-style"> <select id="border-bottom-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option> <option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option> <option value="hidden">hidden</option>
@ -288,7 +288,7 @@
<div> <div>
<label for="border-left-width">{$lang->layout_manager[35]} : </label> <label for="border-left-width">{$lang->layout_manager[35]} : </label>
<input type="text" id="border-left-width" size="3" title="border-width+px" /> <input type="text" id="border-left-width" size="3" title="border-width+px" />
<input type="color" id="border-left-color" size="7" class="color-indicator" title="border-color" /> <input type="color" id="border-left-color" size="7" class="rx-spectrum" title="border-color" />
<select id="border-left-style" title="border-style"> <select id="border-left-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option> <option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option> <option value="hidden">hidden</option>
@ -309,7 +309,7 @@
<div class="visible-more"> <div class="visible-more">
<div> <div>
<label for="background-color">{$lang->layout_manager[41]} : </label> <label for="background-color">{$lang->layout_manager[41]} : </label>
<input type="color" id="background-color" size="7" class="color-indicator" /> <input type="color" id="background-color" size="7" class="rx-spectrum" />
</div> </div>
<div> <div>
<label for="background-image">{$lang->layout_manager[42]} :</label> <label for="background-image">{$lang->layout_manager[42]} :</label>
@ -335,7 +335,7 @@
</div> </div>
<div> <div>
<label for="color">{$lang->layout_manager[54]} : </label> <label for="color">{$lang->layout_manager[54]} : </label>
<input type="color" id="color" size="7" class="color-indicator" /> <input type="color" id="color" size="7" class="rx-spectrum" />
</div> </div>
</div> </div>
</fieldset> </fieldset>

View file

@ -129,7 +129,7 @@
</block> </block>
<block cond="$var->type == 'colorpicker'"> <block cond="$var->type == 'colorpicker'">
{@ $use_colorpicker = true; } {@ $use_colorpicker = true; }
<input type="color" class="color-indicator" name="{$name}" id="{$name}" value="{$var->value}" /> <input type="color" class="rx-spectrum" name="{$name}" id="{$name}" value="{$var->value}" />
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p> <p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</block> </block>
<p class="x_help-block">{$var->description}</p> <p class="x_help-block">{$var->description}</p>

View file

@ -117,7 +117,7 @@
<!--// colorpicker--> <!--// colorpicker-->
<div cond="$val->type == 'colorpicker'"> <div cond="$val->type == 'colorpicker'">
{@ $use_colorpicker = true; } {@ $use_colorpicker = true; }
<input type="color" class="color-indicator" name="{$val->name}" id="{$val->name}" value="{$val->value}" /> <input type="color" class="rx-spectrum" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p> <p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</div> </div>
<a href="#about_{$val->name}" data-toggle class="x_icon-question-sign" cond="$val->description" style="vertical-align:top;margin-top:5px"|cond="$val->type == 'textarea'">{$lang->help}</a> <a href="#about_{$val->name}" data-toggle class="x_icon-question-sign" cond="$val->description" style="vertical-align:top;margin-top:5px"|cond="$val->type == 'textarea'">{$lang->help}</a>

View file

@ -669,7 +669,7 @@ function doShowWidgetSizeSetup(px, py, obj) {
if(el) { if(el) {
$el.val(val); $el.val(val);
if($el.hasClass('color-indicator')) { if($el.hasClass('color-indicator') || $el.hasClass('rx-spectrum')) {
if(val != 'transparent') { if(val != 'transparent') {
val = val.toUpperCase(); val = val.toUpperCase();
$el.css('background', '#' + val); $el.css('background', '#' + val);

View file

@ -49,7 +49,7 @@
<input type="text" name="{$id}" /> <input type="text" name="{$id}" />
</block> </block>
<block cond="$var->type == 'color'"> <block cond="$var->type == 'color'">
<input type="color" name="{$id}" value="" id="{$id}" class="color-indicator" style="width:178px" /> <input type="color" name="{$id}" value="" id="{$id}" class="rx-spectrum" style="width:178px" />
</block> </block>
<block cond="$var->type == 'textarea'"> <block cond="$var->type == 'textarea'">
<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}" rows="8" cols="42"></textarea> <textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}" rows="8" cols="42"></textarea>

View file

@ -62,7 +62,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
<input type="color" name="border_top_color" value="" class="color_input color-indicator" maxlength="7"/> <input type="color" name="border_top_color" value="" class="color_input rx-spectrum" maxlength="7"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -72,7 +72,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
<input type="color" name="border_left_color" value="" class="color_input color-indicator" maxlength="7"/> <input type="color" name="border_left_color" value="" class="color_input rx-spectrum" maxlength="7"/>
</td> </td>
<td style="text-align:right"> <td style="text-align:right">
<input type="number" name="border_right_thick" value="" class="small_input" /> px <input type="number" name="border_right_thick" value="" class="small_input" /> px
@ -80,7 +80,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
<input type="color" name="border_right_color" value="" class="color_input color-indicator" maxlength="7"/> <input type="color" name="border_right_color" value="" class="color_input rx-spectrum" maxlength="7"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -90,12 +90,12 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option> <option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option> <option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select> </select>
<input type="color" name="border_bottom_color" value="" class="color_input color-indicator" maxlength="7"/> <input type="color" name="border_bottom_color" value="" class="color_input rx-spectrum" maxlength="7"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>{$lang->cmd_widget_background_color}</th> <th>{$lang->cmd_widget_background_color}</th>
<td colspan="2"><input type="color" name="background_color" value="" class="input color-indicator" /></td> <td colspan="2"><input type="color" name="background_color" value="" class="input rx-spectrum" /></td>
</tr> </tr>
<tr> <tr>
<th>{$lang->cmd_widget_background_image_url}</th> <th>{$lang->cmd_widget_background_image_url}</th>

View file

@ -72,7 +72,7 @@
<input type="text" name="{$id}" value="" class="lang_code" /> <input type="text" name="{$id}" value="" class="lang_code" />
</div> </div>
<input cond="$var->type == 'color'" type="color" name="{$id}" class="color-indicator" /> <input cond="$var->type == 'color'" type="color" name="{$id}" class="rx-spectrum" />
<div cond="$var->type == 'textarea'"> <div cond="$var->type == 'textarea'">
<textarea name="{$id}" rows="8" cols="42" class="lang_code"></textarea> <textarea name="{$id}" rows="8" cols="42" class="lang_code"></textarea>