Skip to content

Commit

Permalink
Datapackage tweaks (#88)
Browse files Browse the repository at this point in the history 
* Autopopulate Dataset name

* Ignore gh-pages artefacts

* Form spacing and tab order tweaks

* Select first field by default

* Update bootstrap-tagsinput

* Make sure tagsinput fake input field is the correct width

* Trim keywords before add
  • Loading branch information
@pezholio
pezholio committed Apr 22, 2016
1 parent 634b8c0 commit c76a180
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 35 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ app/bower_components/
node_modules/
.idea/
packages
_site
2 changes: 1 addition & 1 deletion app/bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"jquery": "~2.1.4",
"jquery-csv": "*",
"bootstrap": "3.3.5",
"bootstrap-tagsinput": "0.5.0",
"bootstrap-tagsinput": "0.8.0",
"lodash": "~3.10.1"
}
}
8 changes: 8 additions & 0 deletions app/comma-chameleon/css/datapackage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ body, html {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.form-wrapper {
margin: 20px 0;
}

.well {
position: absolute;
bottom: 0;
Expand All @@ -14,3 +18,7 @@ body, html {
border-bottom: 0;
padding: 7px;
}

.bootstrap-tagsinput {
width: 100%;
}
90 changes: 56 additions & 34 deletions app/comma-chameleon/views/datapackage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,45 +15,47 @@
<body>
<div class="container-fluid">
<form id="datapackage">
<div class="form-group">
<label for="name">Dataset name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Dataset name">
</div>
<div class="form-group">
<label for="title">Dataset title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Dataset title">
</div>
<div class="form-group">
<label for="description">Dataset description</label>
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
</div>
<div class="form-group">
<label for="license">License</label>
<select id="license" name="license" class="form-control">
<option value="">Please select...</option>
<option value="cc-by">Creative Commons Attribution</option>
<option value="cc-by-sa">Creative Commons Attribution Share-Alike</option>
<option value="cc-zero">Creative Commons CCZero</option>
<option value="ogl-uk">UK Open Government Licence</option>
<option value="odc-by">Open Data Commons Attribution License</option>
<option value="odc-odbl">Open Data Commons Open Database License (ODbL)</option>
<option value="odc-pddl">Open Data Commons Public Domain Dedication and Licence (PDDL)</option>
</select>
</div>
<div class="form-group">
<label for="keywords">Keywords (Comma seperated)</label><br />
<input type="text" id="keywords" data-role="tagsinput" class="form-control" id="keywords" name="keywords">
<div class="form-wrapper">
<div class="form-group">
<label for="title">Dataset title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Dataset title" autofocus>
</div>
<div class="form-group">
<label for="name">Dataset name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Dataset name">
</div>
<div class="form-group">
<label for="description">Dataset description</label>
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
</div>
<div class="form-group">
<label for="license">License</label>
<select id="license" name="license" class="form-control">
<option value="">Please select...</option>
<option value="cc-by">Creative Commons Attribution</option>
<option value="cc-by-sa">Creative Commons Attribution Share-Alike</option>
<option value="cc-zero">Creative Commons CCZero</option>
<option value="ogl-uk">UK Open Government Licence</option>
<option value="odc-by">Open Data Commons Attribution License</option>
<option value="odc-odbl">Open Data Commons Open Database License (ODbL)</option>
<option value="odc-pddl">Open Data Commons Public Domain Dedication and Licence (PDDL)</option>
</select>
</div>
<div class="form-group">
<label for="keywords">Keywords (Comma seperated)</label><br />
<input type="text" id="keywords" class="form-control" data-role="tagsinput" name="keywords">
</div>
<div id="headers">
<label>Generate Headers?</label>
<input type="radio" name="group1" value="true" checked="checked" /> Yes
<input type="radio" name="group1" value="false" /> No<br />
<p id="status" />
</div>
</div>
<div class="well">
<button id="submit" class="btn btn-default">Go</button> <button id="cancel" class="btn btn-default">Cancel</button>
</div>
</form>
<div id="headers">
<label>Generate Headers?</label>
<input type="radio" name="group1" value="true" /> Yes
<input type="radio" name="group1" value="false" /> No<br />
<p id="status" />
</div>
</div>
<script>
var ipc = require('ipc');
Expand Down Expand Up @@ -108,6 +110,17 @@
ipc.send('datapackageCanceled');
});

$('#title').on('input keyup', function() {
title = $(this).val()
$('#name').val(slugify(title))
})

$('#keywords').on('beforeItemAdd', function(event) {
event.item = event.item.trim()
items = $('#keywords').tagsinput('items')
if ($.inArray(event.item, items) != -1) event.cancel = true
});

function headerOptionClicked(){
var rGrp = $("input[name=group1]");
if(rGrp.filter(":checked")["length"] > 0){
Expand All @@ -117,6 +130,15 @@
}
return includeHeaders;
}

function slugify(text) {
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}
</script>
</body>
</html>

0 comments on commit c76a180

Please sign in to comment.