Produits Entr'ouvert » Intégrations graphiques Publik

div.meetings_table {

	/* style for templates/qommon/forms/widgets/select--meetings.html */

	margin-top: 1ex;

	display: flex;

	width: 100%;

	& > div {

		flex: 0 1 auto;

		width: 20%;

		text-align: center;

		display: none;

	}

	div.head {

		padding-bottom: 1ex;

	}

	div span {

		display: block;

		cursor: pointer;

		padding: 0.3ex 0;

		&.disabled {

			opacity: 0.3;

		}

	}

	span.selectable {

		&:hover {

			background: #ccc;

			color: black;

		}

		&.on {

			background: $button-background;

			color: $button-color;

		}

	}

}

{% extends "qommon/forms/widget.html" %}

{% block widget-control %}

<select style="display: none" id="form_{{widget.name}}" name="{{widget.name}}"

    {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>

  {% for option in widget.get_options %}

  <option{% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}>{{ option.description }}</option>

  {% empty %}

    {% if widget.separate_hint or not widget.hint %}

    <option value="">---</option>

    {% endif %}

  {% endfor %}

</select>

<div id="form_{{widget.name}}_table" class="meetings_table">

</div>

<style>

div.meetings_table {

  margin-top: 1ex;

  display: flex;

  width: 100%;

}

div.meetings_table > div {

  flex: 0 1 auto;

  width: 20%;

  text-align: center;

  display: none;

}

div.meetings_table div span {

  display: block;

  cursor: pointer;

  padding: 0.3ex 0;

}

div.meetings_table div span.disabled {

  opacity: 0.3;

}

div.meetings_table div span.disabled {

}

div.meetings_table div.head {

  padding-bottom: 1ex;

}

</style>

<script>

$(function() {

  var options = $('#form_{{widget.name}} option');

  var current_date = null;

  var current_day_div = null;

  var current_offset = 0;

  var nb_days = 0;

  for (var i=0; i<options.length; i++) {

    var option_date = $(options[i]).attr('value').split(':')[1].split('-', 3).join('-');

    if (option_date !== current_date) {

      var day_label = $(options[i]).text().split(' ', 3).join(' ');

      nb_days += 1;

      current_day_div = $('<div><div class="head">' + day_label + '</div></div>');

      current_day_div.appendTo($('#form_{{widget.name}}_table'));

      current_date = option_date;

    }

    var day_time = $(options[i]).text().split(' ')[3];

    var option_span = $('<span class="selectable" data-idx="' + i + '">' + day_time + '</span>').appendTo(current_day_div);

    if ($(options[i]).attr('disabled')) {

      $(option_span).addClass('disabled').removeClass('selectable');

    }

    if ($(options[i]).attr('selected')) {

      current_offset = nb_days - 1;

      $(option_span).addClass('on');

    }

  }

  var go_prev = $('<button class="prev">&lt;</button>');

  var go_next = $('<button class="next">&gt;</button>');

  go_prev.prependTo($('#form_{{widget.name}}_table'));

  go_next.appendTo($('#form_{{widget.name}}_table'));

  go_prev.on('click', function() {

    current_offset = Math.max(0, current_offset-1);

    display(current_offset);

    return false;

  });

  go_next.on('click', function() {

    current_offset = Math.min(current_offset+1, Math.max(0, nb_days-5));

    display(current_offset);

    return false;

  });

  function display(offset) {

    $('#form_{{widget.name}}_table > div').each(function(idx, elem) {

      if (idx >= offset && idx < offset+5) {

        $(elem).show();

      } else {

        $(elem).hide();

      }

    });

    current_offset = offset;

  }

  display(current_offset);

  $('#form_{{widget.name}}_table span.selectable').on('click', function() {

   $('#form_{{widget.name}}_table span').removeClass('on');

   $(this).addClass('on');

   $('#form_{{widget.name}}').val($(options[$(this).data('idx')]).attr('value'));

  });

});

</script>

{% endblock %}