funky-framadate-front/documentation/components/VotingChoiceComponent.html

1127 lines
48 KiB
HTML

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>framadate-funky-frontend documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="../" class="navbar-brand">framadate-funky-frontend documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li>VotingChoiceComponent</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li >
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
<li >
<a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
</li>
<li >
<a href="#styleData" role="tab" id="styleData-tab" data-toggle="tab" data-link="style">Styles</a>
</li>
<li >
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="c-info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/app/pages/voting/voting-choice/voting-choice.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>each vote choice takes a configuration from the container of all choices.
this component is used to select a date choice, or a name answer</p>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>framadate-voting-choice</code></td>
</tr>
<tr>
<td class="col-md-3">styleUrls</td>
<td class="col-md-9"><code>./voting-choice.component.scss</code></td>
</tr>
<tr>
<td class="col-md-3">templateUrl</td>
<td class="col-md-9"><code>./voting-choice.component.html</code></td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Public</span>
<a href="#showChangeChoicebutton">showChangeChoicebutton</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#setAnswserTo">setAnswserTo</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#choice">choice</a>
</li>
<li>
<a href="#choice_id">choice_id</a>
</li>
<li>
<a href="#choices_count">choices_count</a>
</li>
<li>
<a href="#poll">poll</a>
</li>
<li>
<a href="#pollIsSpecialDate">pollIsSpecialDate</a>
</li>
<li>
<a href="#simpleAnswer">simpleAnswer</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(el: <a href="https://angular.io/api/core/ElementRef" target="_blank">ElementRef</a>, config: <a href="../injectables/ConfigService.html">ConfigService</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:35</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td>
<code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>config</td>
<td>
<code><a href="../injectables/ConfigService.html" target="_self" >ConfigService</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="choice"></a>
<b>choice</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:30</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="choice_id"></a>
<b>choice_id</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:32</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="choices_count"></a>
<b>choices_count</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:31</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="poll"></a>
<b>poll</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:33</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="pollIsSpecialDate"></a>
<b>pollIsSpecialDate</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:35</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="simpleAnswer"></a>
<b>simpleAnswer</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:34</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setAnswserTo"></a>
<span class="name">
<b>
setAnswserTo
</b>
<a href="#setAnswserTo"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>setAnswserTo(newAnswer: "yes" | "no" | "maybe" | null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45"
class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:45</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>newAnswer</td>
<td>
<code>&quot;yes&quot; | &quot;no&quot; | &quot;maybe&quot; | null</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="showChangeChoicebutton"></a>
<span class="name">
<b>
<span class="modifier">Public</span>
showChangeChoicebutton</b>
<a href="#showChangeChoicebutton"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/pages/voting/voting-choice/voting-choice.component.ts:29</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {Component, ElementRef, Input} from &#x27;@angular/core&#x27;;
import {ConfigService} from &quot;../../../services/config.service&quot;;
interface VoteChoice {
votes?: {
yes: number
no: number
maybe: number
notAnswered: number
};
name?: string;
date?: Date;
answer: &#x27;yes&#x27; | &#x27;no&#x27; | &#x27;maybe&#x27; | null;
simpleAnswer?: boolean
false; // enable if we display only a togglable &quot;yes&quot;
}
/**
* each vote choice takes a configuration from the container of all choices.
* this component is used to select a date choice, or a name answer
*/
@Component({
selector: &#x27;framadate-voting-choice&#x27;,
templateUrl: &#x27;./voting-choice.component.html&#x27;,
styleUrls: [&#x27;./voting-choice.component.scss&#x27;]
})
export class VotingChoiceComponent {
public showChangeChoicebutton &#x3D; false;
@Input() public choice: any;
@Input() public choices_count: any;
@Input() public choice_id: any;
@Input() public poll: any;
@Input() public simpleAnswer: boolean &#x3D; true;
@Input() public pollIsSpecialDate: boolean &#x3D; false;
constructor(private el: ElementRef,
private config: ConfigService) {
if (this.poll &amp;&amp; this.poll.allowedAnswers) {
this.simpleAnswer &#x3D; this.poll.allowedAnswers.length &#x3D;&#x3D; 1
}
}
setAnswserTo(newAnswer: &#x27;yes&#x27; | &#x27;no&#x27; | &#x27;maybe&#x27; | null) {
if (this.simpleAnswer) {
// only toggle yes to no
if (this.choice.answer &amp;&amp; this.choice.answer &#x3D;&#x3D;&#x3D; &#x27;yes&#x27;) {
this.choice.answer &#x3D; &#x27;no&#x27;;
this.config.myTempVoteStack--;
} else {
this.choice.answer &#x3D; newAnswer;
this.config.myTempVoteStack++;
}
} else {
this.choice.answer &#x3D; newAnswer;
if (this.choice.answer !&#x3D;&#x3D; newAnswer) {
if (newAnswer &#x3D;&#x3D; &#x27;maybe&#x27; || newAnswer &#x3D;&#x3D; &#x27;yes&#x27;) {
this.config.myTempVoteStack++;
}
} else {
console.info(&#x27;same answer as before&#x27;)
}
}
this.el.nativeElement.blur();
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-templateData">
<pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;choicebox selection-{{choice.answer}}&quot; &gt;
&lt;!-- add .choicebox--active to most voted --&gt;
&lt;button
*ngIf&#x3D;&#x27;showChangeChoicebutton&#x27;
class&#x3D;&#x27;btn btn--primary&#x27;
(click)&#x3D;&#x27; choice.simpleAnswer &#x3D; !choice.simpleAnswer&#x27; &gt;
&lt;i class&#x3D;&#x27;fa fa-gears&#x27; &gt;&lt;/i &gt;
&lt;/button &gt;
&lt;div class&#x3D;&quot;choicebox__subject&quot; &gt;
&lt;div class&#x3D;&#x27;columns&#x27; &gt;
&lt;div class&#x3D;&#x27;column&#x27; &gt;
&lt;div
class&#x3D;&quot;text title clickable&quot;
(click)&#x3D;&quot;setAnswserTo(&#x27;yes&#x27;)&quot; &gt;
{{choice.text}}
&lt;/div &gt; &lt;!-- TEXT CASE --&gt;&lt;!--
&lt;p class&#x3D;&quot;choicebox__txt&quot;&gt;
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
&lt;/p&gt;
--&gt;&lt;!-- TEXT CASE --&gt;
&lt;!-- IMG CASE --&gt;
&lt;img
*ngIf&#x3D;&#x27;choice.url&#x27;
class&#x3D;&quot;choicebox__img&quot;
[src]&#x3D;&quot;choice.url&quot;
alt&#x3D;&quot;{{choice.url}}&quot;
&gt;
&lt;!-- IMG CASE --&gt;
&lt;!-- DATE CASE --&gt;
&lt;div
class&#x3D;&quot;dates&quot;
*ngIf&#x3D;&quot;pollIsSpecialDate&quot; &gt;
&lt;div class&#x3D;&quot;choicebox__date&quot; &gt;
{{choice.date.date | date:&#x27;EEE&#x27;}} &lt;span
class&#x3D;&quot;choicebox__day&quot; &gt;{{choice.date.date | date:&#x27;dd&#x27;}}&lt;/span &gt; {{choice.date.date | date:&#x27;LLL&#x27;}}
&lt;/div &gt;
&lt;div class&#x3D;&quot;choicebox__hour&quot; &gt;
{{choice.date.date | date:&#x27;H:m&#x27;}}
&lt;/div &gt;
&lt;/div &gt;
&lt;!-- DATE CASE --&gt;
&lt;/div &gt;
&lt;div class&#x3D;&#x27;column&#x27; &gt;
&lt;div class&#x3D;&quot;choicebox__actions&quot; &gt;
&lt;!-- show only the yes check if the config is set to simpleAnswer --&gt;
&lt;!-- add .choicebox__btn--active to selected &lt;button&gt; --&gt;
&lt;span class&#x3D;&quot;simple-answer&quot; &gt;
&lt;button
class&#x3D;&quot;choicebox__btn choicebox__btn--yes&quot;
type&#x3D;&quot;button&quot;
[ngClass]&#x3D;&quot;{&#x27;choicebox__btn--active&#x27;: choice.answer &#x3D;&#x3D;&#x3D; &#x27;yes&#x27;}&quot;
(click)&#x3D;&quot;setAnswserTo(&#x27;yes&#x27;)&quot; &gt;
&lt;img
src&#x3D;&quot;../../../assets/img/check.svg&quot;
alt&#x3D;&quot;&quot; &gt;
&lt;/button &gt;
&lt;/span &gt;
&lt;span
class&#x3D;&quot;complex-answers&quot;
*ngIf&#x3D;&quot;!simpleAnswer&quot; &gt;
&lt;button
class&#x3D;&quot;choicebox__btn choicebox__btn--maybe&quot;
type&#x3D;&quot;button&quot;
[ngClass]&#x3D;&quot;{&#x27;choicebox__btn--active&#x27;: choice.answer &#x3D;&#x3D;&#x3D; &#x27;maybe&#x27;}&quot;
(click)&#x3D;&quot;setAnswserTo(&#x27;maybe&#x27;)&quot; &gt;
&lt;img
src&#x3D;&quot;../../../assets/img/check-2.svg&quot;
alt&#x3D;&quot;&quot; &gt;
&lt;/button &gt;
&lt;button
class&#x3D;&quot;choicebox__btn choicebox__btn--no&quot;
type&#x3D;&quot;button&quot;
[ngClass]&#x3D;&quot;{&#x27;choicebox__btn--active&#x27;: choice.answer &#x3D;&#x3D;&#x3D; &#x27;no&#x27;}&quot;
(click)&#x3D;&quot;setAnswserTo(&#x27;no&#x27;)&quot;
&gt;
&lt;img
src&#x3D;&quot;../../../assets/img/croix.svg&quot;
alt&#x3D;&quot;&quot; &gt;
&lt;/button &gt;
&lt;/span &gt;
&lt;/div &gt;
&lt;/div &gt;
&lt;div class&#x3D;&#x27;column&#x27; &gt;
&lt;div class&#x3D;&quot;choicebox__count&quot; &gt;
&lt;div
class&#x3D;&#x27;no-votes&#x27;
*ngIf&#x3D;&#x27;! poll.choices_count.counts[choice.id] &#x27; &gt;
aucun vote
&lt;/div &gt;
&lt;button
type&#x3D;&quot;button&quot;
aria-describedby&#x3D;&quot;choicebox-tooltip&quot;
class&#x3D;&quot;choicebox__votes&quot;
*ngIf&#x3D;&quot;poll.choices_count &amp;&amp; choice &amp;&amp; poll.choices_count.counts[choice.id]&quot; &gt;
&lt;div class&#x3D;&quot;choicebox__vote&quot; &gt;
{{poll.choices_count.counts[choice.id].yes.count}}
&lt;img
width&#x3D;&quot;20px&quot;
height&#x3D;&quot;21px&quot;
src&#x3D;&quot;../../../assets/img/votant-sur.svg&quot;
alt&#x3D;&quot;&quot; &gt;
&lt;/div &gt;
&lt;div class&#x3D;&quot;choicebox__vote&quot; &gt;
{{poll.choices_count.counts[choice.id].maybe.count}}
&lt;img
width&#x3D;&quot;22px&quot;
height&#x3D;&quot;24px&quot;
src&#x3D;&quot;../../../assets/img/votant-pas-sur.svg&quot;
alt&#x3D;&quot;&quot; &gt;
&lt;/div &gt;
&lt;div
class&#x3D;&quot;choicebox__tooltip&quot;
id&#x3D;&quot;choicebox-tooltip&quot; &gt;
&lt;div class&#x3D;&quot;choicebox__tooltiplist&quot; &gt;
&lt;div class&#x3D;&quot;choicebox__tooltipttl&quot; &gt;
&lt;img
width&#x3D;&quot;20px&quot;
height&#x3D;&quot;21px&quot;
src&#x3D;&quot;../../../assets/img/votant-sur.svg&quot;
alt&#x3D;&quot;&quot; &gt;
{{poll.choices_count.counts[choice.id].yes.count}} &quot;Oui&quot;
&lt;/div &gt;
&lt;!-- liste des gens qui ont répondu oui--&gt;
&lt;ul &gt;
&lt;li *ngFor&#x3D;&#x27;let pseudo of choices_count.counts[choice.id].yes.people &#x27; &gt;{{pseudo}}&lt;/li &gt;
&lt;/ul &gt;
&lt;/div &gt;
&lt;div
class&#x3D;&quot;choicebox__tooltiplist&quot;
*ngIf&#x3D;&#x27;!simpleAnswer&#x27; &gt;
&lt;div class&#x3D;&quot;choicebox__tooltipttl&quot; &gt;
&lt;img
width&#x3D;&quot;22px&quot;
height&#x3D;&quot;24px&quot;
src&#x3D;&quot;../../../assets/img/votant-pas-sur.svg&quot;
alt&#x3D;&quot;&quot; &gt;
{{poll.choices_count.counts[choice.id].maybe.count}} &quot;Peut-être&quot;
&lt;/div &gt;
&lt;ul &gt;
&lt;li *ngFor&#x3D;&#x27;let pseudo of choices_count.counts[choice.id].maybe.people &#x27; &gt;{{pseudo}}&lt;/li &gt;
&lt;/ul &gt;
&lt;/div &gt;
&lt;div
class&#x3D;&quot;choicebox__tooltiplist&quot;
*ngIf&#x3D;&#x27;!simpleAnswer&#x27; &gt;
&lt;div class&#x3D;&quot;choicebox__tooltipttl&quot; &gt;
&lt;i class&#x3D;&#x27;fa fa-times&#x27; &gt;&lt;/i &gt;
{{poll.choices_count.counts[choice.id].no.count}} &quot;Non&quot;
&lt;/div &gt;
&lt;ul &gt;
&lt;li *ngFor&#x3D;&#x27;let pseudo of choices_count.counts[choice.id].no.people &#x27; &gt;{{pseudo}}&lt;/li &gt;
&lt;/ul &gt;
&lt;/div &gt;
&lt;/div &gt;
&lt;/button &gt;
&lt;div class&#x3D;&quot;choicebox__countxt&quot; &gt;
Choix ayant reçu le plus de votes
&lt;/div &gt;
&lt;/div &gt;
&lt;/div &gt;
&lt;/div &gt;
&lt;/div &gt;
&lt;/div &gt;
</code></pre>
</div>
<div class="tab-pane fade " id="c-styleData">
<p class="comment">
<code>./voting-choice.component.scss</code>
</p>
<pre class="line-numbers"><code class="language-scss">// ---------------------------------------------------------
// -- VOTE CHOICE COMPONENT
// ---------------------------------------------------------
// -- IMPORTS
// ----------------------------
@import &quot;../../../../assets/scss/variables&quot;;
// -- VARIABLES
// ----------------------------
$box-padding: 2rem;
$box-border-width: .6rem;
$btn-size: 5rem;
$btn-margin-x: 1rem;
$btn-margin-y: 1.5rem;
$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
$img-maxheight: 12rem;
$breakpoint-responsive: 640px; // à définir
// -- GLOBAL
// ----------------------------
.choicebox {
position: relative;
min-width: 32rem;
min-height: 16rem;
display: block;
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent;
background-color: $white;
box-shadow: 0 0 .6rem 0 rgba($black, .2);
&amp;--active {
padding-left: $box-padding;
border-left-color: $primary_color;
}
&amp;.selection-yes {
font-weight: 700;
background: #e9bdeb;
}
}
.choicebox__subject {
margin-bottom: 3rem;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
padding-right: 0;
}
}
// -- DATE
// ----------------------------
.choicebox__date {
font-size: 1.8rem;
margin-bottom: .5rem;
white-space: nowrap;
text-transform: capitalize;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
}
}
.choicebox__day {
font-size: 2.4rem;
font-weight: bold;
}
// -- IMG
// ----------------------------
.choicebox__img {
max-width: 100%;
max-height: $img-maxheight;
}
// -- TXT
// ----------------------------
.choicebox__txt {
margin: 0;
font-size: 1.8rem;
min-width: 10em;
}
// -- VOTE BTNS
// ----------------------------
.choicebox__actions {
position: absolute;
z-index: 1;
max-width: $btn-wrap-size;
top: 50%;
right: $box-padding;
@media (min-width: $breakpoint-responsive) {
position: static;
max-width: none;
transform: none;
margin: 0 1.5rem;
}
}
.choicebox__btn {
width: $btn-size;
height: $btn-size;
align-items: center;
justify-content: center;
margin: $btn-margin-y $btn-margin-x;
border: .3rem solid #ccc9c9;
background-color: transparent;
border-radius: 50%;
cursor: pointer;
float: left;
&amp;--maybe {
position: relative;
top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2);
@media (min-width: $breakpoint-responsive) {
top: auto;
left: auto;
}
}
&amp;--active {
border-color: #bf83c2;
}
@media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
}
// -- VOTE COUNT
// ----------------------------
.choicebox__count {
position: relative;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
text-align: right;
padding-right: 0;
}
}
.choicebox__votes {
border: 0;
padding: 0;
line-height: normal;
background-color: transparent;
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
}
}
.choicebox__vote {
display: inline-block;
vertical-align: middle;
&amp; + .choicebox__vote {
margin-left: 1.5rem;
}
}
.choicebox__countxt {
display: none;
margin-top: .5rem;
.choicebox--active &amp; {
display: block;
@media (min-width: $breakpoint-responsive) {
display: none;
}
}
}
// -- TOOLTIP
// ----------------------------
.choicebox__tooltip {
display: none;
@media (min-width: $breakpoint-responsive) {
position: absolute;
min-width: 18rem;
font-weight: normal;
top: 5rem;
left: 50%;
z-index: 1;
padding: 2rem;
border: .1rem solid rgba($black, .1);
background-color: $white;
text-align: left;
transform: translateX(-50%);
&amp;::after,
&amp;::before {
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 50%;
content: &quot; &quot;;
pointer-events: none;
border: solid transparent;
}
&amp;::after {
margin-left: -1.5rem;
border-width: 1.5rem;
border-color: rgba($white, 0);
border-bottom-color: #fff;
}
&amp;::before {
margin-left: -1.6rem;
border-width: 1.6rem;
border-color: rgba($black, 0);
border-bottom-color: rgba($black, .1);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
}
.choicebox__tooltiplist {
&amp; + .choicebox__tooltiplist {
padding-left: 3rem;
}
ul {
max-height: 11rem;
overflow: auto;
}
}
.choicebox__tooltipttl {
@media (min-width: $breakpoint-responsive) {
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: bold;
white-space: nowrap;
img {
margin-right: .5rem;
vertical-align: sub;
}
&amp; ~ .choicebox__tooltipttl {
margin-top: 3rem;
}
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="c-tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><div class="choicebox selection-{{choice.answer}}" > <!-- add .choicebox--active to most voted --> <button *ngIf=\'showChangeChoicebutton\' class=\'btn btn--primary\' (click)=\' choice.simpleAnswer = !choice.simpleAnswer\' > <i class=\'fa fa-gears\' ></i > </button > <div class="choicebox__subject" > <div class=\'columns\' > <div class=\'column\' > <div class="text title clickable" (click)="setAnswserTo(\'yes\')" > {{choice.text}} </div > <!-- TEXT CASE --><!-- <p class="choicebox__txt"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa ! </p> --><!-- TEXT CASE --> <!-- IMG CASE --> <img *ngIf=\'choice.url\' class="choicebox__img" [src]="choice.url" alt="{{choice.url}}" > <!-- IMG CASE --> <!-- DATE CASE --> <div class="dates" *ngIf="pollIsSpecialDate" > <div class="choicebox__date" > {{choice.date.date | date:\'EEE\'}} <span class="choicebox__day" >{{choice.date.date | date:\'dd\'}}</span > {{choice.date.date | date:\'LLL\'}} </div > <div class="choicebox__hour" > {{choice.date.date | date:\'H:m\'}} </div > </div > <!-- DATE CASE --> </div > <div class=\'column\' > <div class="choicebox__actions" > <!-- show only the yes check if the config is set to simpleAnswer --> <!-- add .choicebox__btn--active to selected <button> --> <span class="simple-answer" > <button class="choicebox__btn choicebox__btn--yes" type="button" [ngClass]="{\'choicebox__btn--active\': choice.answer === \'yes\'}" (click)="setAnswserTo(\'yes\')" > <img src="../../../assets/img/check.svg" alt="" > </button > </span > <span class="complex-answers" *ngIf="!simpleAnswer" > <button class="choicebox__btn choicebox__btn--maybe" type="button" [ngClass]="{\'choicebox__btn--active\': choice.answer === \'maybe\'}" (click)="setAnswserTo(\'maybe\')" > <img src="../../../assets/img/check-2.svg" alt="" > </button > <button class="choicebox__btn choicebox__btn--no" type="button" [ngClass]="{\'choicebox__btn--active\': choice.answer === \'no\'}" (click)="setAnswserTo(\'no\')" > <img src="../../../assets/img/croix.svg" alt="" > </button > </span > </div > </div > <div class=\'column\' > <div class="choicebox__count" > <div class=\'no-votes\' *ngIf=\'! poll.choices_count.counts[choice.id] \' > aucun vote </div > <button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes" *ngIf="poll.choices_count && choice && poll.choices_count.counts[choice.id]" > <div class="choicebox__vote" > {{poll.choices_count.counts[choice.id].yes.count}} <img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt="" > </div > <div class="choicebox__vote" > {{poll.choices_count.counts[choice.id].maybe.count}} <img width="22px" height="24px" src="../../../assets/img/votant-pas-sur.svg" alt="" > </div > <div class="choicebox__tooltip" id="choicebox-tooltip" > <div class="choicebox__tooltiplist" > <div class="choicebox__tooltipttl" > <img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt="" > {{poll.choices_count.counts[choice.id].yes.count}} "Oui" </div > <!-- liste des gens qui ont répondu oui--> <ul > <li *ngFor=\'let pseudo of choices_count.counts[choice.id].yes.people \' >{{pseudo}}</li > </ul > </div > <div class="choicebox__tooltiplist" *ngIf=\'!simpleAnswer\' > <div class="choicebox__tooltipttl" > <img width="22px" height="24px" src="../../../assets/img/votant-pas-sur.svg" alt="" > {{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être" </div > <ul > <li *ngFor=\'let pseudo of choices_count.counts[choice.id].maybe.people \' >{{pseudo}}</li > </ul > </div > <div class="choicebox__tooltiplist" *ngIf=\'!simpleAnswer\' > <div class="choicebox__tooltipttl" > <i class=\'fa fa-times\' ></i > {{poll.choices_count.counts[choice.id].no.count}} "Non" </div > <ul > <li *ngFor=\'let pseudo of choices_count.counts[choice.id].no.people \' >{{pseudo}}</li > </ul > </div > </div > </button > <div class="choicebox__countxt" > Choix ayant reçu le plus de votes </div > </div > </div > </div > </div ></div ></div>'
var COMPONENTS = [{'name': 'AdminComponent', 'selector': 'framadate-admin'},{'name': 'AnswersComponent', 'selector': 'framadate-answers'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BaseComponent', 'selector': 'framadate-base-page'},{'name': 'ChoicesListComponent', 'selector': 'framadate-choices-list'},{'name': 'CommentsListComponent', 'selector': 'framadate-comments-list'},{'name': 'CopyTextComponent', 'selector': 'framadate-copy-text'},{'name': 'CreateOrRetrieveComponent', 'selector': 'framadate-create-or-retrieve'},{'name': 'DatesComponent', 'selector': 'framadate-dates'},{'name': 'DebuggerComponent', 'selector': 'framadate-debugger'},{'name': 'EndConfirmationComponent', 'selector': 'framadate-end-confirmation'},{'name': 'ErasableInputComponent', 'selector': 'framadate-erasable-input'},{'name': 'HeaderComponent', 'selector': 'framadate-header'},{'name': 'HomeComponent', 'selector': 'framadate-home'},{'name': 'KindComponent', 'selector': 'framadate-page-kind'},{'name': 'NavigationComponent', 'selector': 'framadate-navigation'},{'name': 'PasswordComponent', 'selector': 'framadate-password'},{'name': 'PicturesComponent', 'selector': 'framadate-pictures'},{'name': 'PollDisplayComponent', 'selector': 'framadate-poll-display'},{'name': 'PollGraphicComponent', 'selector': 'framadate-poll-graphic'},{'name': 'ResumeComponent', 'selector': 'framadate-resume'},{'name': 'SelectorComponent', 'selector': 'framadate-selector'},{'name': 'VisibilityComponent', 'selector': 'framadate-visibility'},{'name': 'VotingChoiceComponent', 'selector': 'framadate-voting-choice'},{'name': 'VotingCommentComponent', 'selector': 'framadate-voting-comment'},{'name': 'VotingComponent', 'selector': 'framadate-voting'},{'name': 'VotingGraphComponent', 'selector': 'framadate-voting-graph'},{'name': 'VotingNavigationComponent', 'selector': 'framadate-voting-navigation'},{'name': 'VotingSummaryComponent', 'selector': 'framadate-voting-summary'}];
var DIRECTIVES = [{'name': 'DateValueAccessor', 'selector': '[useValueAsDate]'},{'name': 'ResettableInputDirective', 'selector': '[framadateResettableInput]'}];
var ACTUAL_COMPONENT = {'name': 'VotingChoiceComponent'};
</script>
<script src="../js/tree.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'VotingChoiceComponent.html';
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="../js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
<script src="../js/menu-wc.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>