First draft of the semantic ui selector
Ticket #55,#56
This commit is contained in:
Tim Schumacher
parent
77beeaec73
commit
fc138fb910
8 changed files with 140 additions and 92 deletions
|
|
@ -201,8 +201,13 @@ class LocationController extends Controller
|
|||
);
|
||||
}
|
||||
|
||||
$retval = [
|
||||
"success" => true,
|
||||
"results" => $locations,
|
||||
];
|
||||
|
||||
$response = new Response(json_encode($locations));
|
||||
|
||||
$response = new Response(json_encode($retval));
|
||||
$response->headers->set('Content-Type', 'application/json');
|
||||
|
||||
return $response;
|
||||
|
|
|
|||
|
|
@ -186,8 +186,13 @@ EOF;
|
|||
];
|
||||
}
|
||||
|
||||
$retval = [
|
||||
'success' => true,
|
||||
'results' => $tags,
|
||||
];
|
||||
|
||||
$response = new Response(json_encode($tags));
|
||||
|
||||
$response = new Response(json_encode($retval));
|
||||
$response->headers->set('Content-Type', 'application/json');
|
||||
|
||||
return $response;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ trait TagTrait
|
|||
}
|
||||
return implode(',', $tags);
|
||||
} else {
|
||||
return '';
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,34 @@
|
|||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
#event_location.ui.dropdown.active {
|
||||
.text .ui.fluid.card {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#event_location.ui.dropdown {
|
||||
input.search {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default.text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
|
||||
.ui.fluid.card {
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#view-map, #map {
|
||||
|
|
|
|||
|
|
@ -116,55 +116,34 @@ $(document).ready(function() {
|
|||
calcBoxSize(4);
|
||||
}
|
||||
|
||||
$('#event_tags').selectize({
|
||||
create: true,
|
||||
diacritics: true,
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: 'name',
|
||||
render: {
|
||||
item: function(data,escape){
|
||||
console.log([data,escape]);
|
||||
return '<div class="ui green compact small label"><i class="tag icon"></i>' + escape(data.name) + '</div>';
|
||||
}
|
||||
},
|
||||
load: function(query, callback) {
|
||||
if (!query.length) return callback();
|
||||
$.ajax({
|
||||
url: "/tags/",
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
q: query
|
||||
},
|
||||
error: function() {
|
||||
callback();
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
$location = $('#event_location');
|
||||
|
||||
$('#event_location').selectize({
|
||||
create: true,
|
||||
diacritics: true,
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: 'name',
|
||||
maxItems: 1,
|
||||
render: {
|
||||
item: function(data,escape){
|
||||
console.log([data,escape]);
|
||||
return '<div class="ui green compact small label"><i class="map marker icon"></i>' + escape(data.name) + '</div>';
|
||||
if ($location.length == 1) {
|
||||
$('#event_location')
|
||||
.dropdown({
|
||||
minCharacters: 4,
|
||||
allowAdditions: true,
|
||||
apiSettings: {
|
||||
url: '/orte/?q={query}'
|
||||
},
|
||||
option: function(item, escape) {
|
||||
return '<div class="ui fluid green card">' +
|
||||
fields: {
|
||||
remoteValues : 'results', // grouping for api results
|
||||
values : 'values', // grouping for all dropdown values
|
||||
name : 'name', // displayed dropdown text
|
||||
value : 'name' // actual dropdown value
|
||||
},
|
||||
templates: {
|
||||
menu: function(response, fields) {
|
||||
var
|
||||
values = response[fields.values] || {},
|
||||
html = ''
|
||||
;
|
||||
$.each(values, function(index, option) {
|
||||
var item = option;
|
||||
html += '<div class="item" data-value="' + option[fields.value] + '"><div class="ui fluid green card">' +
|
||||
'<div class="content">'+
|
||||
'<div class="header">' +
|
||||
'<i class="ui icon map marker"></i>' + escape(item.name) +
|
||||
'<i class="ui icon map marker"></i>' + item.name +
|
||||
'</div>' +
|
||||
'<div class="meta">'+
|
||||
(item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+
|
||||
|
|
@ -172,28 +151,35 @@ $(document).ready(function() {
|
|||
'</div>'+
|
||||
(item.description ? '<div class="description">' + item.description + '</div>' : '') +
|
||||
'</div>'+
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
load: function(query, callback) {
|
||||
if (!query.length) return callback();
|
||||
$.ajax({
|
||||
url: "/orte/",
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
q: query
|
||||
},
|
||||
error: function() {
|
||||
callback();
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
callback(res);
|
||||
}
|
||||
'</div></div>';
|
||||
});
|
||||
return html;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
$('#event_tags')
|
||||
.dropdown({
|
||||
minCharacters: 2,
|
||||
allowAdditions: true,
|
||||
apiSettings: {
|
||||
url: '/tags/?q={query}'
|
||||
},
|
||||
fields: {
|
||||
remoteValues: 'results', // grouping for api results
|
||||
values: 'values', // grouping for all dropdown values
|
||||
name: 'name', // displayed dropdown text
|
||||
value: 'name' // actual dropdown value
|
||||
}/*,
|
||||
templates: {
|
||||
label: function (value, text) {
|
||||
return '<i class="tag icon"></i>' + text + '<i class="delete icon"></i>';
|
||||
}
|
||||
}*/
|
||||
}
|
||||
);
|
||||
|
||||
if (view_map_selector.length == 1) {
|
||||
jQuery('.show_map').click(addGeoCoordinates);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
%}
|
||||
<link rel="stylesheet" href="{{ asset_url }}"/>
|
||||
{% endstylesheets %}
|
||||
<link rel="stylesheet" href="/vendor/selectize.js/dist/css/selectize.css"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
%}
|
||||
<script src="{{ asset_url }}"></script>
|
||||
{% endjavascripts %}
|
||||
<script src="/vendor/selectize.js/dist/js/standalone/selectize.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body -%}
|
||||
|
|
|
|||
|
|
@ -80,16 +80,37 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="required field">
|
||||
<div class="field">
|
||||
<label for="event_location">Ort</label>
|
||||
|
||||
<div class="ui icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
|
||||
<input type="text"
|
||||
id="event_location"
|
||||
name="location"
|
||||
maxlength="255"
|
||||
value="{{ entity.location.name|default('') }}"
|
||||
class="form-control">
|
||||
<div id="event_location" class="ui fluid search selection dropdown">
|
||||
<input type="hidden" name="location">
|
||||
<div class="default text">
|
||||
{% if entity.location is null %}
|
||||
Wähle einen Ort…
|
||||
{% else %}
|
||||
<div class="ui fluid green card">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<i class="ui icon map marker"></i> {{ entity.location.name }}
|
||||
</div>
|
||||
<div class="meta">
|
||||
{% if (not entity.location.lat is null) and (not entity.location.lon is null) %}
|
||||
lon: {{ entity.location.lon }}, lat: {{ entity.location.lat }}
|
||||
{% endif %}
|
||||
{% if (not entity.location.streetaddress) %}
|
||||
Anschrift: {{ entity.location.streetaddress }} {{ entity.location.streetnumber }} {{ entity.location.zipcode }} {{ entity.location.city }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="menu">
|
||||
</div>
|
||||
</input>
|
||||
</div>
|
||||
<input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
|
||||
<input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
|
||||
<i class="icon map marker"></i>
|
||||
|
|
@ -123,11 +144,17 @@
|
|||
<label for="event_tags">Tags</label>
|
||||
|
||||
<div class="ui icon input">
|
||||
<input type="text"
|
||||
id="event_tags"
|
||||
name="tags"
|
||||
value="{{ entity.getTagsAsText() }}"
|
||||
class="form-control">
|
||||
<div class="ui fluid search multiple selection dropdown" id="event_tags">
|
||||
<input name="tags" type="hidden" value="{{ entity.getTagsAsText()|default('') }}">
|
||||
|
||||
<div class="default text">Du kannst hier kommasepariert Tags angeben…</div>
|
||||
<div class="menu">
|
||||
{% for tag in entity.tags %}
|
||||
<div class="item" data-value="{{ tag.name }}">{{ tag.name }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</input>
|
||||
</div>
|
||||
<i class="icon tag"></i>
|
||||
</div>
|
||||
<div class="ui label">Du kannst hier kommasepariert <a
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link href="/semantic/dist/semantic.css" rel="stylesheet">
|
||||
{% stylesheets filter="compass"
|
||||
"@CalciferBundle/Resources/assets/css/main.scss"
|
||||
"css/custom.scss"
|
||||
%}
|
||||
<link rel="stylesheet" href="{{ asset_url }}"/>
|
||||
{% endstylesheets %}
|
||||
|
|
|
|||
Reference in a new issue