aboutsummaryrefslogtreecommitdiffstats
path: root/web/cobrands
diff options
context:
space:
mode:
Diffstat (limited to 'web/cobrands')
-rw-r--r--web/cobrands/fixmystreet/admin.js128
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js48
-rw-r--r--web/cobrands/sass/_admin.scss134
-rw-r--r--web/cobrands/sass/_base.scss3
4 files changed, 209 insertions, 104 deletions
diff --git a/web/cobrands/fixmystreet/admin.js b/web/cobrands/fixmystreet/admin.js
index b598f52dd..d3df27f33 100644
--- a/web/cobrands/fixmystreet/admin.js
+++ b/web/cobrands/fixmystreet/admin.js
@@ -115,39 +115,7 @@ $(function(){
$(".js-extra-fields-ui").removeClass("hidden-js");
});
- // If type is changed to 'singlevaluelist' show the options list
- $(".js-metadata-items").on("change", ".js-metadata-item-type", function() {
- var $this = $(this);
- var shown = $this.val() === 'singlevaluelist';
- var $list = $this.closest(".js-metadata-item").find('.js-metadata-options');
- $list.toggle(shown);
- });
- // call immediately to perform page setup
- $(".js-metadata-item-type").change();
-
- // Options can be removed by clicking the 'remove' button
- $(".js-metadata-items").on("click", ".js-metadata-option-remove", function(e) {
- e.preventDefault();
- var $this = $(this);
- var $item = $this.closest(".js-metadata-item");
- $this.closest('li').remove();
- return true;
- });
-
- // New options can be added by clicking the appropriate button
- $(".js-metadata-items").on("click", ".js-metadata-option-add", function(e) {
- e.preventDefault();
- var $ul = $(this).closest("ul");
- var $template_option = $ul.find(".js-metadata-option-template");
- var $new_option = $template_option.clone();
- $new_option.removeClass("hidden-js js-metadata-option-template");
- $new_option.show();
- $new_option.insertBefore($template_option);
- $new_option.find("input").first().focus();
- renumber_metadata_options($(this).closest(".js-metadata-item"));
- return true;
- });
-
+ // For "parent categories"
$(".js-group-item-add").on("click", function(e) {
e.preventDefault();
var $template_item = $(".js-group-item-template");
@@ -158,49 +126,67 @@ $(function(){
return true;
});
- // Fields can be added/removed
- $(".js-metadata-item-add").on("click", function(e) {
- e.preventDefault();
- var $template_item = $(".js-metadata-items .js-metadata-item-template");
- var $new_item = $template_item.clone();
- $new_item.data('index', Math.max.apply(
- null,
- $(".js-metadata-item").map(function() {
- return $(this).data('index');
- }).get()
- ) + 1);
- renumber_metadata_fields($new_item);
- $new_item.removeClass("hidden-js js-metadata-item-template");
- $new_item.show();
- $new_item.insertBefore($template_item);
- $new_item.find("input").first().focus();
- return true;
- });
- $(".js-metadata-items").on("click", ".js-metadata-item-remove", function(e) {
- e.preventDefault();
- $(this).closest(".js-metadata-item").remove();
- return true;
+ $('.js-metadata-item-add').on('click', function(){
+ var $container = $(this).prevAll('.js-metadata-items');
+ var i = $container.children().length + 1;
+ var html = $('#js-template-extra-metadata-item').html().replace(/9999/g, i);
+ $container.append(html);
+ fixmystreet.set_up.toggle_visibility();
+ reloadSortableMetadataItems();
});
- function renumber_metadata_fields($item) {
- var item_index = $item.data("index");
- $item.find("[data-field-name]").each(function(i) {
- var $input = $(this);
- var prefix = "metadata["+item_index+"].";
- var name = prefix + $input.data("fieldName");
- $input.attr("name", name);
+ $('.js-metadata-items').on('click', '.js-metadata-item-remove', function(){
+ $(this).parents('.js-metadata-item').remove();
+ }).on('change', '.js-metadata-item', updateMetadataItemTitle);
+
+ sortable('.js-metadata-items', {
+ forcePlaceholderSize: true,
+ handle: '.js-metadata-item-header-grab',
+ placeholder: '<div class="extra-metadata-item-placeholder"></div>'
+ })[0].addEventListener('sortupdate', function(e) {
+ $(e.detail.destination.items).each(function(i){
+ $(this).find('.js-sort-order input').val(i);
});
+ });
+ $('.js-sort-order').addClass('hidden-js');
+
+ function reloadSortableMetadataItems(){
+ sortable('.js-metadata-items', 'reload');
+ $('.js-sort-order').addClass('hidden-js');
}
- function renumber_metadata_options($item) {
- var item_index = $item.data("index");
- $item.find(".js-metadata-option").each(function(i) {
- var $li = $(this);
- var prefix = "metadata["+item_index+"].values["+i+"]";
- $li.find(".js-metadata-option-key").attr("name", prefix+".key");
- $li.find(".js-metadata-option-name").attr("name", prefix+".name");
- $li.find(".js-metadata-option-disable").attr("name", prefix+".disable");
- });
+ $('.js-metadata-item').each(updateMetadataItemTitle);
+
+ function updateMetadataItemTitle(){
+ var $title = $(this).find('.js-metadata-item-header-title');
+ var defaultTitle = $title.attr('data-default');
+ var html = '<strong>' + defaultTitle + '</strong>';
+ var code = $(this).find('input[name$=".code"]').val();
+ if ( code ) {
+ html = '<strong>' + code + '</strong>';
+ var behaviour = $(this).find('input[name$=".behaviour"]:checked');
+ if ( behaviour.length ) {
+ html += ' / ' + behaviour.val();
+ }
+ var description = $(this).find('textarea[name$=".description"]').val();
+ if ( description && (behaviour.val() == 'question' || behaviour.val() == 'notice') ) {
+ html += ' / ' + description.substring(0, 50);
+ }
+ }
+ $title.html(html);
}
+
+ $('.js-metadata-items').on('click', '.js-metadata-option-add', function(){
+ var $container = $(this).prevAll('.js-metadata-options');
+ var i = $(this).parents('.js-metadata-item').attr('data-i');
+ var j = $container.children().length + 1;
+ var html = $('#js-template-extra-metadata-option').html().replace(/9999/g, i).replace(/8888/g, j);
+ $container.append(html);
+ fixmystreet.set_up.toggle_visibility();
+ });
+
+ $('.js-metadata-items').on('click', '.js-metadata-option-remove', function(){
+ $(this).parents('.js-metadata-option').remove();
+ });
});
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index c7749c729..6b88bc3d3 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -992,14 +992,48 @@ $.extend(fixmystreet.set_up, {
},
toggle_visibility: function() {
- $('input[type="checkbox"][data-toggle-visibility]').each(function(){
- var input = this;
- var $target = $( $(this).attr('data-toggle-visibility') );
- var update = function() {
- $target.toggleClass('hidden-js', ! input.checked );
+ $('[data-toggle-visibility]').each(function(){
+ var $target = $( $(this).attr('data-toggle-visibility') );
+ if ( $(this).is(':checkbox') ){
+ var input = this;
+ var update = function() {
+ $target.toggleClass('hidden-js', ! input.checked );
+ };
+ $(this).off('change.togglevisibility').on('change.togglevisibility', update);
+ update();
+ } else {
+ $(this).off('click.togglevisibility').on('click.togglevisibility', function(){
+ $target.toggleClass('hidden-js');
+ });
+ }
+ });
+
+ $('input[type="radio"][data-show], input[type="radio"][data-hide]').each(function(){
+ var update = function(){
+ if ( this.checked ) {
+ var $showTarget = $( $(this).attr('data-show') );
+ var $hideTarget = $( $(this).attr('data-hide') );
+ $showTarget.removeClass('hidden-js');
+ $hideTarget.addClass('hidden-js');
+ }
+ };
+ // off/on to make sure event handler is only bound once.
+ $(this).off('change.togglevisibility').on('change.togglevisibility', update);
+ update.call(this); // pass DOM element as `this`
+ });
+
+ $('option[data-show], option[data-hide]').each(function(){
+ var $select = $(this).parent();
+ var update = function(){
+ var $option = $(this).find('option:selected');
+ var $showTarget = $( $option.attr('data-show') );
+ var $hideTarget = $( $option.attr('data-hide') );
+ $showTarget.removeClass('hidden-js');
+ $hideTarget.addClass('hidden-js');
};
- $(input).on('change', update);
- update();
+ // off/on to make sure event handler is only bound once.
+ $select.off('change.togglevisibility').on('change.togglevisibility', update);
+ update.call($select[0]); // pass DOM element as `this`
});
},
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index d36c8ced0..3b47ea9aa 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -173,41 +173,125 @@ $button_bg_col: #a1a1a1; // also search bar (tables)
}
}
-.js-metadata-items {
- margin: 0;
+.extra-metadata-item,
+.extra-metadata-option {
+ border: 1px solid $table_border_color;
+ margin: 1em 0;
+ border-radius: 4px;
+ overflow: hidden;
- li {
- list-style: none;
- position: relative;
+ // Make it look more "grabbable" if javascript available.
+ html.js & {
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1);
}
+}
- .js-metadata-item:nth-child(odd) {
- background-color: #eee;
- }
+.extra-metadata-item-placeholder {
+ border: 1px solid #fff;
+ margin: 1em 0;
+}
- .js-metadata-options {
- li {
- list-style: none;
+.extra-metadata-item__header {
+ @include flex-container();
+ line-height: 1;
+ background: #f3f3f3;
- label, input[type=text] {
- display: inline-block;
- margin: 0;
- padding: 0.25em;
- }
+ & > * {
+ padding: 1em;
+ border: none;
+ background: transparent;
+ text-align: inherit;
+ font-family: inherit;
+ font-size: 1em;
+ -webkit-appearance: none;
+ }
- &:nth-child(even) {
- background-color: #ddd;
- }
- &:nth-child(odd) {
- background-color: #ccc;
- }
+ .extra-metadata-item__header__remove {
+ color: #DB0030;
+
+ &:hover,
+ &:focus {
+ background: #ffe1e1;
+ color: #AD0026;
}
}
+}
+
+.extra-metadata-item__header__grab {
+ cursor: grab;
- .js-metadata-item-remove {
+ // Overlap padding-left of the title element
+ margin-#{$right}: -1em;
+ position: relative;
+ z-index: 1;
+ width: 1em;
+
+ &:before {
+ content: "";
+ display: block;
+ width: 1em;
+ height: 2px;
+ background: #000;
+ box-shadow: 0 -4px 0 0 #000, 0 4px 0 0 #000;
position: absolute;
- top: 0.25em;
- #{$right}: 0.25em;
+ top: 50%;
+ left: 1em;
+ margin-top: -1px;
+ }
+
+ .sortable-dragging & {
+ cursor: grabbing;
+ }
+}
+
+.extra-metadata-item__header__title {
+ @include flex(1 0 auto);
+ cursor: pointer;
+}
+
+.extra-metadata-item__body {
+ padding: 0 1em 1em 1em; // 0em to compensate for first label margin-top
+ border-top: 1px solid $table_border_color;
+}
+
+.extra-metadata-option {
+ margin: 0 0 1em 0;
+ padding: 0 1em;
+
+ .row {
+ @include flex-container();
+ margin: 0 -1em;
+ }
+
+ .col {
+ @include box-sizing(border-box);
+ @include flex(1 0 auto);
+ padding: 0 1em;
+ width: 50%;
+ }
+
+ .form-control {
+ margin: 0;
+ }
+
+ button {
+ border: none;
+ background: transparent;
+ text-align: inherit;
+ font-family: inherit;
+ font-size: 1em;
+ -webkit-appearance: none;
+ color: #DB0030;
+ float: right;
+ padding: 0.5em;
+ margin-top: 1em;
+ border-radius: 4px;
+
+ &:hover,
+ &:focus {
+ background: #ffe1e1;
+ color: #AD0026;
+ }
}
}
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 63ff19524..8e460f102 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -278,7 +278,8 @@ textarea {
}
label,
-legend {
+legend,
+.label {
display: block;
margin-top: 1.25em;
margin-bottom: 0.5em;
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-02 14:24:18 +0000