mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
1127 lines
48 KiB
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>"yes" | "no" | "maybe" | 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 '@angular/core';
|
|
import {ConfigService} from "../../../services/config.service";
|
|
|
|
interface VoteChoice {
|
|
votes?: {
|
|
yes: number
|
|
no: number
|
|
maybe: number
|
|
notAnswered: number
|
|
};
|
|
name?: string;
|
|
date?: Date;
|
|
answer: 'yes' | 'no' | 'maybe' | null;
|
|
simpleAnswer?: boolean
|
|
false; // enable if we display only a togglable "yes"
|
|
}
|
|
|
|
/**
|
|
* 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: 'framadate-voting-choice',
|
|
templateUrl: './voting-choice.component.html',
|
|
styleUrls: ['./voting-choice.component.scss']
|
|
})
|
|
export class VotingChoiceComponent {
|
|
|
|
public showChangeChoicebutton = false;
|
|
@Input() public choice: any;
|
|
@Input() public choices_count: any;
|
|
@Input() public choice_id: any;
|
|
@Input() public poll: any;
|
|
@Input() public simpleAnswer: boolean = true;
|
|
@Input() public pollIsSpecialDate: boolean = false;
|
|
|
|
constructor(private el: ElementRef,
|
|
private config: ConfigService) {
|
|
|
|
if (this.poll && this.poll.allowedAnswers) {
|
|
this.simpleAnswer = this.poll.allowedAnswers.length == 1
|
|
}
|
|
}
|
|
|
|
setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
|
|
if (this.simpleAnswer) {
|
|
// only toggle yes to no
|
|
if (this.choice.answer && this.choice.answer === 'yes') {
|
|
this.choice.answer = 'no';
|
|
this.config.myTempVoteStack--;
|
|
} else {
|
|
this.choice.answer = newAnswer;
|
|
this.config.myTempVoteStack++;
|
|
}
|
|
|
|
} else {
|
|
this.choice.answer = newAnswer;
|
|
if (this.choice.answer !== newAnswer) {
|
|
if (newAnswer == 'maybe' || newAnswer == 'yes') {
|
|
this.config.myTempVoteStack++;
|
|
}
|
|
} else {
|
|
console.info('same answer as before')
|
|
}
|
|
|
|
}
|
|
this.el.nativeElement.blur();
|
|
}
|
|
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade " id="c-templateData">
|
|
<pre class="line-numbers"><code class="language-html"><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 >
|
|
</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 "../../../../assets/scss/variables";
|
|
|
|
|
|
// -- 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);
|
|
|
|
&--active {
|
|
padding-left: $box-padding;
|
|
border-left-color: $primary_color;
|
|
}
|
|
|
|
&.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;
|
|
|
|
&--maybe {
|
|
position: relative;
|
|
top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2);
|
|
@media (min-width: $breakpoint-responsive) {
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
&--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;
|
|
|
|
& + .choicebox__vote {
|
|
margin-left: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.choicebox__countxt {
|
|
display: none;
|
|
margin-top: .5rem;
|
|
|
|
.choicebox--active & {
|
|
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%);
|
|
&::after,
|
|
&::before {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
content: " ";
|
|
pointer-events: none;
|
|
border: solid transparent;
|
|
}
|
|
&::after {
|
|
margin-left: -1.5rem;
|
|
border-width: 1.5rem;
|
|
border-color: rgba($white, 0);
|
|
border-bottom-color: #fff;
|
|
}
|
|
&::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 {
|
|
& + .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;
|
|
}
|
|
& ~ .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>
|