Skip to content

Y
ygopro-images-generator
Commit 231fc59f authored by Jingqin Lynn's avatar Jingqin Lynn
Browse files
Options

Drop jQuery.editable in favor of [contenteditable] and other changes. 

Add level editing.
Do various style tweaks.
Untested on Firefox / IE.
parent 09462cd6
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 65 deletions
index.html
View file @ 231fc59f
......@@ -11,26 +11,26 @@
<link rel="stylesheet" href="style.css"/>
<script id="card_template" type="text/x-jquery-tmpl">
<div class="card ${category} ${card_type}">
<span class="name">${name}</span>
<span class="attribute" data-attribute="${attribute}"></span>
<span class="name editable">${name}</span>
<span class="attribute editable" data-attribute="${attribute}"></span>
<div class="level" data-level="${level}"></div>
<div class="level editable" data-level="${level}"></div>
<img class="image"
src="${image_url}"/>
<span class="monster_type">【${$.i18n.prop('type.'+type)}·${$.i18n.prop('card_type.'+card_type)}】</span>
<span class="number">TH07-ZH998</span>
<span class="edition">DUEL TERMINAL</span>
<span class="monster_type editable">【${$.i18n.prop('type.'+type)}·${$.i18n.prop('card_type.'+card_type)}】</span>
<span class="number editable">TH07-ZH998</span>
<span class="edition editable">DUEL TERMINAL</span>
<div class="rule_text">${description}</div>
<div class="rule_text editable">${description}</div>
<hr class="hr"/>
<span class="gamecode">${id}</span>
<span class="gamecode editable">${id}</span>
<div class="rarity2"></div>
<span class="copyright">©1996 KAZUKI TAKAHASHI</span>
<span class="copyright editable">©1996 KAZUKI TAKAHASHI</span>
<span class="atk_title">ATK/ </span>
<span class="def_title">DEF/ </span>
<span class="atk">${atk}</span>
<span class="def">${def}</span>
<span class="atk editable">${atk}</span>
<span class="def editable">${def}</span>
</div>
</script>
</head>
......
js/main.coffee
View file @ 231fc59f
......@@ -21,12 +21,13 @@ $(document).ready ->
#submit
$('#card_form').submit ->
$('.editable').each (_, element) ->
element.contentEditable = 'false'
$(element).removeAttr 'contentEditable'
$(element).removeClass 'editable'
@document.value = $('.card')[0].outerHTML
#editable
$('.name').editable (value, settings) ->
value
$('.attribute').editable (value, settings) ->
$(this).attr 'data-attribute', value
, {
......@@ -37,26 +38,35 @@ $(document).ready ->
}
$('.monster_type').editable (value, settings) ->
value
$('.number').editable (value, settings) ->
value
$('.edition').editable (value, settings) ->
value
$('.rule_text').editable (value, settings) ->
value
, {
type: 'textarea',
submit: 'OK'
}
$('.name').editable (value, settings) ->
value
$('.gamecode').editable (value, settings) ->
value
$('.atk').editable (value, settings) ->
value
$('.def').editable (value, settings) ->
value
$('.editable').each (_, element) ->
if element.classList.contains('attribute')
# TODO(lynn): Improve Attribute editing.
else if element.classList.contains('level')
$(element).click (e) ->
delta = 0
if e.offsetX < 0
delta = 1
else if e.offsetX > element.getClientRects()[0].width
delta = -1
old_level = parseInt(element.dataset['level'])
new_level = old_level + delta
if new_level != old_level && new_level > 0 && new_level <= 12
element.dataset['level'] = new_level
false
# Level
else
element.contentEditable = "plaintext-only"
if element.contentEditable != "plaintext-only"
element.contentEditable = "true"
#$('.rule_text').editable (value, settings) ->
#value
#, {
#type: 'textarea',
#submit: 'OK'
#}
#batch
$('#all_button').click ->
......
js/main.js
View file @ 231fc59f
// Generated by CoffeeScript 1.6.2
// Generated by CoffeeScript 1.6.1
(function() {
$(document).ready(function() {
return $.i18n.properties({
name: 'card',
......@@ -20,11 +21,13 @@
def: 1000
}));
$('#card_form').submit(function() {
$('.editable').each(function(_, element) {
element.contentEditable = 'false';
$(element).removeAttr('contentEditable');
return $(element).removeClass('editable');
});
return this.document.value = $('.card')[0].outerHTML;
});
$('.name').editable(function(value, settings) {
return value;
});
$('.attribute').editable(function(value, settings) {
return $(this).attr('data-attribute', value);
}, {
......@@ -41,37 +44,35 @@
type: 'select',
submit: 'OK'
});
$('.monster_type').editable(function(value, settings) {
return value;
});
$('.number').editable(function(value, settings) {
return value;
});
$('.edition').editable(function(value, settings) {
return value;
});
$('.rule_text').editable(function(value, settings) {
return value;
}, {
type: 'textarea',
submit: 'OK'
});
$('.name').editable(function(value, settings) {
return value;
});
$('.gamecode').editable(function(value, settings) {
return value;
});
$('.atk').editable(function(value, settings) {
return value;
});
$('.def').editable(function(value, settings) {
return value;
$('.editable').each(function(_, element) {
if (element.classList.contains('attribute')) {
} else if (element.classList.contains('level')) {
return $(element).click(function(e) {
var delta, new_level, old_level;
delta = 0;
if (e.offsetX < 0) {
delta = 1;
} else if (e.offsetX > element.getClientRects()[0].width) {
delta = -1;
}
old_level = parseInt(element.dataset['level']);
new_level = old_level + delta;
if (new_level !== old_level && new_level > 0 && new_level <= 12) {
element.dataset['level'] = new_level;
}
return false;
});
} else {
element.contentEditable = "plaintext-only";
if (element.contentEditable !== "plaintext-only") {
return element.contentEditable = "true";
}
}
});
return $('#all_button').click(function() {
return mycard.fetch_cards(function(cards) {
var card, i, result, _i, _len;
result = "mkdir result\n";
i = 1;
for (_i = 0, _len = cards.length; _i < _len; _i++) {
......
style.css
View file @ 231fc59f
......@@ -77,6 +77,7 @@
height: 25px;
background: url(mse/data/yugioh-caicai-levels.mse-symbol-font/star.png) repeat-x;
background-size: 25px 25px;
white-space: nowrap;
}
.level[data-level="1"]{width: 25px}
.level[data-level="2"]{width: 50px}
......@@ -91,6 +92,31 @@
.level[data-level="11"]{width: 275px}
.level[data-level="12"]{width: 300px}
.level.editable:hover::before,
.level.editable:hover::after {
position: relative;
width: 25px;
height: 100%;
left: -25px;
display: inline-block;
font-size: 25px;
line-height: 25px;
text-align: center;
background: rgba(200, 200, 200, 0.3);
content: "+";
}
.level.editable:hover::after {
content: "-";
left: 100%;
margin-left: -25px;
}
[contenteditable]:active,
[contenteditable]:hover {
background: rgba(255,255,255,0.3);
}
.image {
position: absolute;
left: 59.5px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment