orbit4-5/app/views/pages/_member_frontend_field.html...

112 lines
4.8 KiB
Plaintext

<form id="form_for_attribs" action="">
<div class="form-inline">
<ul class="current-roles">
</ul>
</div>
<div class="form-horizontal controls-row">
<div class="attr-type-wrap control-group">
<label class="attr control-label">Attribute Type: </label>
<div class="attr controls">
<select class="role-selector" id="type_selector">
</select>
</div>
</div>
<div class="attr-wrap control-group">
<label class="attr control-label"> Attribute: </label>
<div class="attr controls">
<select class="role-selector attrb-selector" id="profile_selector">
</select>
<select class="role-selector hide attrb-selector" id="custom_selector">
</select>
<select class="role-selector hide attrb-selector" id="role_selector">
</select>
</div>
</div>
<a href="#" class="add-role btn btn-info">Add role</a>
<input type="hidden" value="<%= @page_id %>">
</div>
</form>
<script type="text/javascript">
var selected_attribs = <%= @selected_attribs.to_json.html_safe %>,
attributes = <%= @attribs.to_json.html_safe %>;
var render_default_attributes = function(){
var html = "";
$.each(selected_attribs,function(i,attrib){
var collection = attributes[attrib.type],
node = collection.filter(function(x){return x.key == attrib.key})[0];
if(typeof node !== "undefined"){
if(attrib.key != "email"){
html+= '<li class="clearfix" data-attrib-key="' + attrib.key + '" data-attrib-type="' + attrib.type + '"><span class="role-value">' + node.human_readable + '</span><span class="remove-role"><i class="icon-remove-sign"></i></span><label class="checkbox link-to-show"><input type="checkbox" value="true" ' + (attrib.link_to_show ? "checked=checked" : "" ) + '> Link to show </label></li>';
}else{
html+= '<li class="clearfix" data-attrib-key="' + attrib.key + '" data-attrib-type="' + attrib.type + '"><span class="role-value">' + node.human_readable + '</span><span class="remove-role"><i class="icon-remove-sign"></i></span></li>';
}
}
})
$("#form_for_attribs ul.current-roles").html(html);
}();
var render_default_type_selectors = function(){
var html = "",
keys = [];
$.each(attributes.types,function(i, type){
html+= "<option value='" + type.key + "'>" + type.human_readable + "</option>";
keys.push(type.key);
})
$("#form_for_attribs select#type_selector").html(html).on("change",function(){
var val = $(this).val();
$("#form_for_attribs .attrb-selector").addClass("hide");
$("#form_for_attribs #" + val + "_selector").removeClass("hide");
});
$.each(keys,function(i,key){
var attribs = attributes[key],
html = "";
$.each(attribs,function(x,attrib){
html+= "<option value='"+ attrib.key +"'>" + attrib.human_readable + "</option>";
})
$("#" + key + "_selector").html(html);
})
}();
$(document).ready(function(){
// Add Role function, get the current selected item value and append it to select element
function addRole( e ) {
var type = $("#form_for_attribs #type_selector").val(),
attrib_key = $("#form_for_attribs #"+type+"_selector").val(),
attrib_text = $("#form_for_attribs #"+type+"_selector option[value="+attrib_key+"]").text();
// If the select is empty, stop appending or it will keep appending blank content to select element
if(attrib_key != "email"){
$( ".current-roles" ).append( "<li class=\"clearfix\" data-attrib-key=\"" + attrib_key + "\" data-attrib-type=\"" + type + "\"><span class=\"role-value\">" + attrib_text + "</span><span class=\"remove-role\"><i class=\"icon-remove-sign\"></i></span><label class=\"checkbox link-to-show\"><input type=\"checkbox\" value=\"true\"> Link to show </label></li>" );
}else{
$( ".current-roles" ).append( "<li class=\"clearfix\" data-attrib-key=\"" + attrib_key + "\" data-attrib-type=\"" + type + "\"><span class=\"role-value\">" + attrib_text + "</span><span class=\"remove-role\"><i class=\"icon-remove-sign\"></i></span></li>" );
}
e.preventDefault();
}
// Remove the select role and append it back to select element
function removeRole( e ) {
var el = $( this ).closest( "li" ).remove();
e.preventDefault();
}
// Add event listeners
$( ".add-role" ).on( "click", addRole );
$( ".current-roles" ).on( "click", ".remove-role", removeRole );
$("#form_for_attribs ul.current-roles").sortable();
})
</script>