Ik heb een klein scriptje gemaakt waarin je pins kan plaatsen, in deze pins kan je weer tekst toevoegen.
Al deze informatie wordt opgeslagen in een JSON bestand. Deze pins kan je ook weer bewerken dus het onthoud wat voor tekst je geplaatst hebt.
<?php $items = $param['args']['items']; ?>
<p>
<input type="button" id="landmark" class="button" value="<?php _e('Add New', 'map'); ?>">
</p>
<ul id="item-list" class="sortable-list">
<li class="list-item new-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php _e('New item', 'map'); ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Name', 'map'); ?><br><input type="text" class="input-text title-input" value="New item"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php foreach ($items as &$item) : ?>
<li class="list-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php echo $item['title']; ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Tile', 'map'); ?><br><input type="text" class="input-text title-input" value="<?php echo $item['title']; ?>"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
<input type="button" id="new-item" class="button" value="<?php _e('New item', 'map'); ?>">
<input type="button" id="delete-landmark" class="button" value="<?php _e('Delete', 'map'); ?>">
<input type="button" id="save-landmark" class="button button-primary right" value="<?php _e('Save', 'map'); ?>">
</div>
<?php
unset($item);
}
?>
Hier wat javascript wat er bij hoort:
// nieuwe item rij
$('#new-item').click(function() {
$('#item-list .new-item').clone().removeClass('new-item').appendTo('#item-list');
});
// landmark save
$('#save-landmark').click(function() {
var data = null,
selected = $('.selected-pin');
if (selected.length) {
data = $('.selected-pin').data('landmarkData');
}
else {
data = {};
data['items'] = getItems();
$(this).val('Save');
}
data['items'] = getItems();
});
var getItems = function() {
var items = [];
$('#item-list .list-item:not(.new-item)').each(function() {
var item = {};
item ['title'] = $('.title-input', this).val();
items.push(item);
});
return items;
}
Om verhaal kort te houden. als 'items' in het eerste JSON niveau ligt kan ik deze aanspreken($items = $param['args']['items'];) en is het allemaal geen probleem maar als 'items' dieper ligt lukt dit niet meer..
Iemand een idee hoe ik in de zelfde lijn als $items = $param['args']['items']; kan schrijven?
