<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row" style="margin-top:40px;">
<div class="col-md-6"><span class="text-left" style="font-size:24px;"><strong>ER #4</strong></span>
<div class="well well-sm">
<!-- Button (Double) -->
<div class="text-right">
<span class="">
<a id="erok" name="erok" class="btn btn-success">OK</a>
<a id="ernok" name="ernok" class="btn btn-default">NOK</a>
</span>
<a class="btn btn-primary" href="#reviews-anchor" id="open-review-box">Abrir Dispositivo</a>
</div>
<div class="row" id="post-review-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post">
<div class="col-md-8">
<input id="ratings-hidden" name="rating" type="hidden">
<textarea class="form-control animated" cols="50" id="new-review" name="comment" placeholder="Bota GEL..." rows="5"></textarea>
<div>
<span class='your-choice-was' style='display: none;'>
<label class="pull-right">visitada? <input class"checkbox" type="checkbox" checked="checked" value="1">
</label> <br/><span class='stars choice'> </span> iscos a substituir
<!-- Select Multiple para Iscos
<div class="form-group inline">
<label class="control-label" for="iscos_na_er">Iscos</label>
<div class="">
<select id="iscos_na_er" name="iscos_na_er" class="form-control" multiple="multiple">
<option value="1">RATIBROM2</option>
<option value="2">VEBITOXOX</option>
<option value="3">Rat2</option>
<option value="4">VebP</option>
<option value="5">RatBro2</option>
<option value="">RatBlo</option>
</select>
</div>
</div>
-->
</span>
</div>
</div>
<div class="col-md-4">
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-12 control-label" for="checkboxes">2 Blocos
<!--
<div>
<span class='your-choice-was' style='display: none;'>
Substituir: <span class='stars choice'></span>
</span>
</div>
-->
</label>
<div class="col-md-12">
<label class="checkbox-inline" for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="B">
B
</label>
<label class="checkbox-inline" for="checkboxes-1">
<input type="checkbox" name="checkboxes" id="checkboxes-1" value="P">
P
</label>
<label class="checkbox-inline" for="checkboxes-2">
<input type="checkbox" name="checkboxes" id="checkboxes-2" value="C">
C
</label>
</div>
</div>
<div class="text-right">
<div class="stars starrr" data-rating="0">
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success btn-lg" type="submit">OK</button>
<a class="btn btn-danger btn-sm" href="#" id="close-review-box" style="display:none; margin-right: 10px;">
<span class="glyphicon glyphicon-remove"></span> oops
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.animated {
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
}
.stars
{
margin: 20px 0;
font-size: 24px;
color: #d17581;
}
(function(e){var t,o={className:"autosizejs",append:"",callback:!1,resizeDelay:10},i='<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',n=["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],s=e(i).data("autosize",!0)[0];s.style.lineHeight="99px","99px"===e(s).css("lineHeight")&&n.push("lineHeight"),s.style.lineHeight="",e.fn.autosize=function(i){return this.length?(i=e.extend({},o,i||{}),s.parentNode!==document.body&&e(document.body).append(s),this.each(function(){function o(){var t,o;"getComputedStyle"in window?(t=window.getComputedStyle(u,null),o=u.getBoundingClientRect().width,e.each(["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],function(e,i){o-=parseInt(t[i],10)}),s.style.width=o+"px"):s.style.width=Math.max(p.width(),0)+"px"}function a(){var a={};if(t=u,s.className=i.className,d=parseInt(p.css("maxHeight"),10),e.each(n,function(e,t){a[t]=p.css(t)}),e(s).css(a),o(),window.chrome){var r=u.style.width;u.style.width="0px",u.offsetWidth,u.style.width=r}}function r(){var e,n;t!==u?a():o(),s.value=u.value+i.append,s.style.overflowY=u.style.overflowY,n=parseInt(u.style.height,10),s.scrollTop=0,s.scrollTop=9e4,e=s.scrollTop,d&&e>d?(u.style.overflowY="scroll",e=d):(u.style.overflowY="hidden",c>e&&(e=c)),e+=w,n!==e&&(u.style.height=e+"px",f&&i.callback.call(u,u))}function l(){clearTimeout(h),h=setTimeout(function(){var e=p.width();e!==g&&(g=e,r())},parseInt(i.resizeDelay,10))}var d,c,h,u=this,p=e(u),w=0,f=e.isFunction(i.callback),z={height:u.style.height,overflow:u.style.overflow,overflowY:u.style.overflowY,wordWrap:u.style.wordWrap,resize:u.style.resize},g=p.width();p.data("autosize")||(p.data("autosize",!0),("border-box"===p.css("box-sizing")||"border-box"===p.css("-moz-box-sizing")||"border-box"===p.css("-webkit-box-sizing"))&&(w=p.outerHeight()-p.height()),c=Math.max(parseInt(p.css("minHeight"),10)-w||0,p.height()),p.css({overflow:"hidden",overflowY:"hidden",wordWrap:"break-word",resize:"none"===p.css("resize")||"vertical"===p.css("resize")?"none":"horizontal"}),"onpropertychange"in u?"oninput"in u?p.on("input.autosize keyup.autosize",r):p.on("propertychange.autosize",function(){"value"===event.propertyName&&r()}):p.on("input.autosize",r),i.resizeDelay!==!1&&e(window).on("resize.autosize",l),p.on("autosize.resize",r),p.on("autosize.resizeIncludeStyle",function(){t=null,r()}),p.on("autosize.destroy",function(){t=null,clearTimeout(h),e(window).off("resize",l),p.off("autosize").off(".autosize").css(z).removeData("autosize")}),r())})):this}})(window.jQuery||window.$);
var __slice = [].slice;
(function(e, t) {
var n;
n = function() {
function t(t, n) {
var r, i, s, o = this;
this.options = e.extend({}, this.defaults, n);
this.$el = t;
s = this.defaults;
for (r in s) {
i = s[r];
if (this.$el.data(r) != null) {
this.options[r] = this.$el.data(r)
}
}
this.createStars();
this.syncRating();
this.$el.on("mouseover.starrr", "span", function(e) {
return o.syncRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("mouseout.starrr", function() {
return o.syncRating()
});
this.$el.on("click.starrr", "span", function(e) {
return o.setRating(o.$el.find("span").index(e.currentTarget) + 1)
});
this.$el.on("starrr:change", this.options.change)
}
t.prototype.defaults = {
rating: void 0,
numStars: 6,
change: function(e, t) {}
};
t.prototype.createStars = function() {
var e, t, n;
n = [];
for (e = 1, t = this.options.numStars; 1 <= t ? e <= t : e >= t; 1 <= t ? e++ : e--) {
n.push(this.$el.append("<span class='glyphicon .glyphicon-cog'></span>"))
}
return n
};
t.prototype.setRating = function(e) {
if (this.options.rating === e) {
e = void 0
}
this.options.rating = e;
this.syncRating();
return this.$el.trigger("starrr:change", e)
};
t.prototype.syncRating = function(e) {
var t, n, r, i;
e || (e = this.options.rating);
if (e) {
for (t = n = 0, i = e - 1; 0 <= i ? n <= i : n >= i; t = 0 <= i ? ++n : --n) {
this.$el.find("span").eq(t).removeClass("glyphicon-cog").addClass("glyphicon-asterisk")
}
}
if (e && e < 6) {
for (t = r = e; e <= 5 ? r <= 5 : r >= 5; t = e <= 5 ? ++r : --r) {
this.$el.find("span").eq(t).removeClass("glyphicon-asterisk").addClass("glyphicon-cog")
}
}
if (!e) {
return this.$el.find("span").removeClass("glyphicon-asterisk").addClass("glyphicon-cog")
}
};
return t
}();
return e.fn.extend({
starrr: function() {
var t, r;
r = arguments[0], t = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var i;
i = e(this).data("star-rating");
if (!i) {
e(this).data("star-rating", i = new n(e(this), r))
}
if (typeof r === "string") {
return i[r].apply(i, t)
}
})
}
})
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr()
})
$(function(){
$('#new-review').autosize({append: "\n"});
var reviewBox = $('#post-review-box');
var newReview = $('#new-review');
var openReviewBtn = $('#open-review-box');
var closeReviewBtn = $('#close-review-box');
var ratingsField = $('#ratings-hidden');
openReviewBtn.click(function(e)
{
reviewBox.slideDown(400, function()
{
$('#new-review').trigger('autosize.resize');
newReview.focus();
});
openReviewBtn.fadeOut(100);
closeReviewBtn.show();
});
closeReviewBtn.click(function(e)
{
e.preventDefault();
ratingsField.val(0);
$('.choice').text(0);
$('.your-choice-was').hide();
reviewBox.slideUp(300, function()
{
newReview.focus();
openReviewBtn.fadeIn(200);
});
closeReviewBtn.hide();
});
$('.starrr').on('starrr:change', function(e, value){
ratingsField.val(value);
if (value) {
$('.your-choice-was').show();
$('.choice').text(value);
} else {
$('.your-choice-was').hide();
}
});
});
