jsslider.jinja

<div class="hololayout row row-fluid">
  <div class="holoframe" id="display_area{{ id }}">
    <div id="_anim_img{{ id }}">
      {% block init_frame %}
      {{ init_frame }}
      {% endblock %}
    </div>
  </div>
  <div class="holowidgets" id="widget_area{{ id }}">
    <form class="holoform well" id="form{{ id }}">
      {% for widget_data in widgets %}
      {% if widget_data['type'] == 'slider' %}
      <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
        <label for="textInput{{ id }}_{{ widget_data['dim'] }}">
          <strong>{{ widget_data['dim_label'] }}:</strong>
        </label>
        <div class="holowell row row-fluid">
          <div class="hologroup">
            <input type="text" class="holotext form-control input-small"
                   id="textInput{{ id }}_{{ widget_data['dim'] }}" value="" readonly>
          </div>
          <div class="holoslider"
               id="_anim_widget{{ id }}_{{ widget_data['dim'] }}"></div>
        </div>
      </div>
	  <script>
	    function init_slider() {
        // Slider JS Block START
        function loadcssfile(filename){
            var fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
            document.getElementsByTagName("head")[0].appendChild(fileref)
        }
        loadcssfile("https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css");
        /* Check if jQuery and jQueryUI have been loaded
           otherwise load with require.js */
        var jQuery = window.jQuery,
            // check for old versions of jQuery
            oldjQuery = jQuery && !!jQuery.fn.jquery.match(/^1\.[0-4](\.|$)/),
            jquery_path = '',
            paths = {},
            noConflict;
        var jQueryUI = jQuery.ui;
        // check for jQuery
        if (!jQuery || oldjQuery) {
            // load if it's not available or doesn't meet min standards
            paths.jQuery = jQuery;
            noConflict = !!oldjQuery;
        } else {
            // register the current jQuery
            define('jquery', [], function() { return jQuery; });
        }
        if (!jQueryUI) {
            paths.jQueryUI = "{{ CDN['jQueryUI'] }}"
        } else {
            define('jQueryUI', [], function() { return jQuery.ui; });
        }
        paths.underscore = "{{ CDN['underscore'] }}";
        var jquery_require = {
            paths: paths,
            shim: {
                "jQueryUI": {
                    exports:"$",
                    deps: ['jquery']
                },
                "underscore": {
                    exports: '_'
                }
            }
        }
        require.config(jquery_require);
        require(["jQueryUI", "underscore"], function(jUI, _){
            if (noConflict) $.noConflict(true);
            var vals = {{ widget_data['vals'] }};
            var next_vals = {{ widget_data['next_vals'] }};
            if ({{ dynamic }} && vals.constructor === Array) {
                var min = parseFloat(vals[0]);
                var max = parseFloat(vals[vals.length-1]);
                var step = {{ widget_data['step'] }};
                var labels = [min];
            } else {
                var min = 0;
                if ({{ dynamic }}) {
                    var max = Object.keys(vals).length - 1;
                } else {
                    var max = vals.length - 1;
                }
                var step = 1;
				var labels = {{ widget_data['labels'] }};
            }
			function adjustFontSize(text) {
				var width_ratio = (text.parent().width()/8)/text.val().length;
				var size = Math.min(0.9, Math.max(0.6, width_ratio))+'em';
				text.css('font-size', size);
			}
            var slider = $('#_anim_widget{{ id }}_{{ widget_data['dim'] }}');
			slider.slider({
                animate: "fast",
                min: min,
                max: max,
                step: step,
                value: min,
                dim_vals: vals,
                dim_labels: labels,
                next_vals: next_vals,
                slide: function(event, ui) {
                    var vals = slider.slider("option", "dim_vals");
                    var next_vals = slider.slider("option", "next_vals");
                    var labels = slider.slider("option", "dim_labels");
                    if ({{ dynamic }}) {
					    var dim_val = ui.value;
					    if (vals.constructor === Array) {
						   var label = ui.value;
						} else {
						   var label = labels[ui.value];
						}
                    } else {
                        var dim_val = vals[ui.value];
						var label = labels[ui.value];
                    }
					var text = $('#textInput{{ id }}_{{ widget_data['dim'] }}');
					text.val(label);
					adjustFontSize(text);
                    anim{{ id }}.set_frame(dim_val, {{ widget_data['dim_idx'] }});
                    if (Object.keys(next_vals).length > 0) {
                        var new_vals = next_vals[dim_val];
                        var next_widget = $('#_anim_widget{{ id }}_{{ widget_data['next_dim'] }}');
                        update_widget(next_widget, new_vals);
                    }
                }
            });
            slider.keypress(function(event) {
                if (event.which == 80 || event.which == 112) {
                    var start = slider.slider("option", "value");
                    var stop =  slider.slider("option", "max");
                    for (var i=start; i<=stop; i++) {
                        var delay = i*{{ delay }};
                        $.proxy(function doSetTimeout(i) { setTimeout($.proxy(function() {
                            var val = {value:i};
                            slider.slider('value',i);
                            slider.slider("option", "slide")(null, val);
                        }, slider), delay);}, slider)(i);
                    }
                }
                if (event.which == 82 || event.which == 114) {
                    var start = slider.slider("option", "value");
                    var stop =  slider.slider("option", "min");
                    var count = 0;
                    for (var i=start; i>=stop; i--) {
                        var delay = count*{{ delay }};
                        count = count + 1;
                        $.proxy(function doSetTimeout(i) { setTimeout($.proxy(function() {
                            var val = {value:i};
                            slider.slider('value',i);
                            slider.slider("option", "slide")(null, val);
                        }, slider), delay);}, slider)(i);
                    }
                }
            });
			var textInput = $('#textInput{{ id }}_{{ widget_data['dim'] }}')
			textInput.val(labels[0]);
			adjustFontSize(textInput);
        });
		}
        $(document).ready(init_slider)
        // Slider JS Block END
        </script>
        {% elif widget_data['type']=='dropdown' %}
        <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
          <label for="textInput{{ id }}_{{ widget_data['dim'] }}"><strong>{{ widget_data['dim_label'] }}:</strong></label>
          <select class="holoselect form-control" id="_anim_widget{{ id }}_{{ widget_data['dim'] }}" >
          </select>
        </div>
        <script>
        var vals = {{ widget_data['vals'] }};
        var labels = {{ widget_data['labels'] }};
        function init_dropdown() {
        var widget = $("#_anim_widget{{ id }}_{{ widget_data['dim'] }}");
        widget.data('values', vals)
        for (var i=0; i<vals.length; i++){
			if ({{ dynamic }}) {
		       var val = vals[i];
			} else {
			   var val = i;
			}
            widget.append($("<option>", {
                value: val,
                text: labels[i]
            }));
        };
        widget.data("next_vals", {{ widget_data['next_vals'] }});
        widget.on('change', function(event, ui) {
		    if ({{ dynamic }}) {
                var dim_val = parseInt(this.value);
			} else {
			    var dim_val = $.data(this, 'values')[this.value];
			}
            var next_vals = $.data(this, "next_vals");
            if (Object.keys(next_vals).length > 0) {
                var new_vals = next_vals[dim_val];
                var next_widget = $('#_anim_widget{{ id }}_{{ widget_data['next_dim'] }}');
                update_widget(next_widget, new_vals);
            }
			if (anim{{ id }}) {
                anim{{ id }}.set_frame(dim_val, {{ widget_data['dim_idx'] }});
            }

        });
        }
        $(document).ready(init_dropdown)
        </script>
        {% endif %}
        {% endfor %}
        </form>
    </div>
</div>


<script language="javascript">
/* Instantiate the {{ widget_name }} class. */
/* The IDs given should match those used in the template above. */
(function() {
	if (jQuery.ui !== undefined) {
		$("#display_area{{ id }}").resizable({
			resize: function(event, ui) {
				$("#widget_area{{ id }}").width($(this).parent().width()-ui.size.width);
			}
		});
		$("#widget_area{{ id }}").resizable();
	}
    var widget_ids = new Array({{ Nwidget }});
    {% for dim in dimensions %}
    widget_ids[{{ loop.index0 }}] = "_anim_widget{{ id }}_{{ dim }}";
    {% endfor %}
    var frame_data = {{ frames | safe }};
    var dim_vals = {{ init_dim_vals }};
    var keyMap = {{ key_data }};
    var notFound = "{{ notFound }}";
    function create_widget() {
        setTimeout(function() {
            anim{{ id }} = new {{ widget_name }}(frame_data, "{{ id }}", widget_ids,
				keyMap, dim_vals, notFound, {{ load_json }}, "{{ mode }}",
				{{ cached }}, "{{ json_path}}", {{ dynamic }});
        }, 0);
    }
    {% block create_widget %}
    create_widget();
    {% endblock %}
})();
</script>