Initial commit
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,92 @@
|
||||
/* ---------------------- Sample for table widget ------------------------- */
|
||||
.tclass-overflow {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tclass {
|
||||
border: 0px solid black;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
font-family: Arial;
|
||||
}
|
||||
.tclass-inner {
|
||||
border: 0px solid black;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
height: 100%;
|
||||
}
|
||||
.tclass-inner-overflow {
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.tclass-th {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tclass-th1 {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.tclass-th2 {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.tclass-th3 {
|
||||
width: 150px;
|
||||
}
|
||||
.tclass-th4 {
|
||||
width: 200px;
|
||||
}
|
||||
.tclass-tr {
|
||||
color: black;
|
||||
}
|
||||
.tclass-tr-even {
|
||||
background-color: darkgray;
|
||||
}
|
||||
.tclass-tr-odd {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.tclass-tr:hover {
|
||||
color:blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tclass-tr-selected {
|
||||
background-color: lightblue;
|
||||
/* color: white;*/
|
||||
}
|
||||
.tclass-detail {
|
||||
width: 100%
|
||||
}
|
||||
.tclass-detail-tr {
|
||||
width: 100%
|
||||
}
|
||||
.tclass-detail-tr-even {
|
||||
}
|
||||
.tclass-detail-tr-odd {
|
||||
}
|
||||
.tclass-detail-td-name {
|
||||
width:200px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tclass-detail-td-value {
|
||||
}
|
||||
.tclass-print-button {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
.tclass-tr-error {
|
||||
color:red;
|
||||
}
|
||||
.tclass-tr-warning {
|
||||
color:yellow;
|
||||
}
|
||||
.tclass-img-type {
|
||||
width:16px;
|
||||
height:16px
|
||||
}
|
||||
.tclass-img-person {
|
||||
width:16px;
|
||||
height:16px
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/doc.css" />
|
||||
<title>Dokumentation Widget-Set basic</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3><a name="tplContainerView">container - view in widget</a></h3>
|
||||
|
||||
Dieses Widget kann Views innerhalb von Views darstellen. Sinnvoll z.B. für eine Navigation: Man baut eine View mit
|
||||
Navigations-Elementen auf und bindet diese dann in beliebig vielen anderen Views ein.
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>contains_view</dt>
|
||||
<dd>Name der View die im Container angezeigt werden soll.</dd>
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplHtml">static - HTML</a></h3>
|
||||
|
||||
Dieses Widget stellt beliebigen HTML-Code dar. Es ist auch möglich Javascript innerhalb des Widgets zu verwenden.
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>html</dt>
|
||||
<dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplIFrame">static - iFrame</a></h3>
|
||||
Dieses Widget bindet ein iFrame ein
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>src</dt>
|
||||
<dd>Die URL (src Attribut)</dd>
|
||||
<dt>refreshInterval</dt>
|
||||
<dd>iFrame in Intervall neuladen: Angabe in milli-sekunden</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplImage">static - Image</a></h3>
|
||||
Dieses Widget stellt ein Bild dar. (HTML <img> Tag)
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>src</dt>
|
||||
<dd>Die Bild-URL</dd>
|
||||
<dt>refreshInterval</dt>
|
||||
<dd>Bild in Intervall neuladen: Angabe in milli-sekunden</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplLink">static - link</a></h3>
|
||||
Dieses Widget entspricht dem <a href="#tplHtml">Widget "static - HTML"</a> ist aber zusätzlich auf seiner ganzen Fläche
|
||||
ein klickbarer Link. Kann für die Navigation zwischen Views oder für externe Links genutzt werden.
|
||||
|
||||
<dl>
|
||||
<dt>html</dt>
|
||||
<dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd>
|
||||
|
||||
<dt>href</dt>
|
||||
<dd>Die Link-URL. Um einen Link auf eine andere View zu nutzen einfach den View-Namen mit vorangestelltem Hash-Symbol (#)
|
||||
eintragen</dd>
|
||||
|
||||
<dt>target</dt>
|
||||
<dd>Das Ziel des Links. Leer lassen um im gleichen Browser-Fenster zu bleiben, möchte man ein neues Fenster öffnen _blank eintragen</dd>
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplStatefulContainerView8">stateful/container - view in widget 8</a></h3>
|
||||
|
||||
Zeigt eine von 8 Views in Abhängigkeit von einem Zustand an.
|
||||
|
||||
<dl>
|
||||
<dt>persistent</dt>
|
||||
<dd>Views die einmal gerendert wurden nicht mehr aus dem DOM Entfernen</dd>
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplStatefulIFrame8">stateful - iFrame 8</a></h3>
|
||||
Zeigt einen von 8 iFrames in Abhängigkeit von einem Zustand an.
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplStatefulImage8">stateful - Image 8</a></h3>
|
||||
|
||||
Zeigt eines von 8 Bildern in Abhängigkeit von einem Zustand an.
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplHtmlNav">navigation - HTML</a></h3>
|
||||
Dieses Widget dient dazu eine Navigation zwischen den Views aufzubauen. Entspricht dem <a href="#tplLink">Widget "static - link"</a>,
|
||||
ist jedoch ausschließlich für die Navigation zwischen den Views nutzbar und bietet zusätzlich die Möglichkeit animierte
|
||||
Effekte beim Wechsel der Views zu verwenden.
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>html</dt>
|
||||
<dd>Selbsterklärend ;) ...hier den HTML-Code einfügen</dd>
|
||||
|
||||
<dt>nav_view</dt>
|
||||
<dd>Hier muss der Name der View zu der navigiert werden soll eingetragen werden</dd>
|
||||
|
||||
<dt>hide_effect</dt>
|
||||
<dd>Hier kann der Name eines jQueryUI Effektes eingetragen werden der beim verlassen der View genutzt wird.
|
||||
Verfügbare Effekte sind: Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size,
|
||||
Slide und Transfer.
|
||||
<a href="http://jqueryui.com/effect/" target="_blank">Hier gibt es Demos der Effekte</a>.
|
||||
</dd>
|
||||
|
||||
<dt>hide_duration</dt>
|
||||
<dd>Dauer des Effekts in ms</dd>
|
||||
|
||||
<dt>show_effect</dt>
|
||||
<dd>siehe oben, das gleiche aber dieses mal für das einblenden der neuen View</dd>
|
||||
|
||||
<dt>show_duration</dt>
|
||||
<dd>Siehe oben, Zeit in ms für das einblenden der neuen View</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueFloat">hm_val - Number</a></h3>
|
||||
Dieses Widget stellt einen Zahlenwert dar (sowohl für Integer als auch Float verwendbar)
|
||||
<h4>Attribute</h4>
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Zahlenwert angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Zahlenwert angezeigt wird</dd>
|
||||
|
||||
<dt>digits</dt>
|
||||
<dd>Anzahl der dargestellten Nachkommastellen</dd>
|
||||
|
||||
<dt>factor</dt>
|
||||
<dd>Faktor mit dem der Zahlenwert multipliziert wird</dd>
|
||||
</dl>
|
||||
<h4>Beispiel</h4>
|
||||
<img src="/dashui/widgets/basic/doc_example_hm_val_number.png" />
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueString">hm_val - String</a></h3>
|
||||
Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem String angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem String angezeigt wird</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueStringRaw">hm_val - String (unescaped)</a></h3>
|
||||
Dieses Widget stellt einen Datenpunkt vom Typ Zeichenkette dar. Im Unterschied zum <a href="#tplValueString">Widget "hm_val - String"</a>
|
||||
werden dabei keine Sonderzeichen "escaped" - d.h. die Variable kann auch HTML-Code enthalten und dieser wird dann dargestellt.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem String angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem String angezeigt wird</dd>
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueStringImg">hm_val - String img src</a></h3>
|
||||
Diesem Widget kann ein Variable vom Typ Zeichenkette zugeordnet werden, eine dort enthaltene URL wird dann als Bild dargestellt
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplValueList">hm_val - ValueList Text</a></h3>
|
||||
Dieses Widget stellt eine Variable vom Typ Werteliste dar.
|
||||
<dl>
|
||||
<dt>valuelist</dt>
|
||||
<dd>Eine Semikolon-getrennte Liste von Texten für die jeweiligen Werte.</dd>
|
||||
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueListHtml">hm_val - ValueList HTML</a></h3>
|
||||
Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem <a href="#tplValueList">Widget "hm_val - ValueList Text</a>,
|
||||
allerdings wird nicht "escaped", d.h. in valuelist kann HTML-Code eingetragen werden.
|
||||
<dl>
|
||||
<dt>valuelist</dt>
|
||||
<dd>Eine Semikolon-getrennte Liste von HTML-Code für die jeweiligen Werte.</dd>
|
||||
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueListHtml8">hm_val - ValueList HTML 8</a></h3>
|
||||
Dieses Widget stellt eine Variable vom Typ Werteliste dar. Entspricht dem <a href="#tplValueListHTML">Widget "hm_val - ValueList HTML</a>,
|
||||
bietet aber die Möglichkeit für 8 verschiedene Werte (0-7) auch 8 verschiedene CSS-Angaben zu verwenden.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>value0 bis value7</dt>
|
||||
<dd>Text oder HTML-Code für die Werte 0 bis 7</dd>
|
||||
|
||||
<dt>style0 bis style7</dt>
|
||||
<dd>CSS-Angaben für die Werte 0 bis 7</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueBool">hm_val - Bool HTML</a></h3>
|
||||
Dieses Widget stellt Bool-Werte dar.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_true</dt>
|
||||
<dd>Text oder HTML-Code der im True-Fall angezeigt wird</dd>
|
||||
|
||||
<dt>html_false</dt>
|
||||
<dd>Text oder HTML-Code der im False-Fall angezeigt wird</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueBoolCheckbox">hm_ctrl - Bool Checkbox</a></h3>
|
||||
Dieses Widget zeigt Bool-Werte als einfache Checkbox an und erlaubt außerdem den Wert zu umzuschalten.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor der Checkbox angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter der Checkbox angezeigt wird</dd>
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueBoolSelect">hm_ctrl - Bool Select</a></h3>
|
||||
Dieses Widget stellt Bool-Werte als Dropdown dar und erlaubt außerdem den Wert umzuschalten.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>text_true</dt>
|
||||
<dd>Text für den True-Fall</dd>
|
||||
|
||||
<dt>text_false</dt>
|
||||
<dd>Text für den False-Fall</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
<h3><a name="tplValueBoolCtrl">hm_ctrl - Bool HTML</a></h3>
|
||||
Dieses Widget stellt Bool-Werte dar und erlaubt außerdem den Wert auf Klick innerhalb der Widget-Fläche umzuschalten.
|
||||
<dl>
|
||||
<dt>html_prepend</dt>
|
||||
<dd>Text oder HTML-Code der vor dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_append</dt>
|
||||
<dd>Text oder HTML-Code der hinter dem Bild angezeigt wird</dd>
|
||||
|
||||
<dt>html_true</dt>
|
||||
<dd>Text oder HTML-Code der im True-Fall angezeigt wird</dd>
|
||||
|
||||
<dt>html_false</dt>
|
||||
<dd>Text oder HTML-Code der im False-Fall angezeigt wird</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplBasicState">hm_ctrl - HTML State</a></h3>
|
||||
Dieses Widget setzt bei Klick innerhalb der Widget-Fläche einen Wert.
|
||||
<dl>
|
||||
<dt>html</dt>
|
||||
<dd>Text oder HTML-Code der angezeigt wird</dd>
|
||||
|
||||
<dt>value</dt>
|
||||
<dd>Wert der gesetzt werden soll</dd>
|
||||
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplHide">hm_val - Hide on 0/false</a></h3>
|
||||
Dieses Widget verschwindet wenn der Wert des zugeordneten Datenpunkts 0 bzw false ist. Geschickt z.B. für die Anzeige von Servicemeldungen
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplRedNumber">hm_val - Red Number</a></h3>
|
||||
Anzeige eines numerischen Werts im Stil der iOS Benachrichtigungs-Symbole. Verschwindet beim Wert 0.
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplBulbOnOff">hm_val - Bulb on/off</a></h3>
|
||||
Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Ist für Bool und Float-Werte (Dimmer) einsetzbar.
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplBulbOnOffCtrl">hm_ctrl - Bulb on/off</a></h3>
|
||||
Dieses Widget stellt einen Wert als ausgeschaltete oder leuchtende Glühbirne auf schwarzem Hintergrund dar. Bei Klick auf das Widget
|
||||
wird der Wert umgeschaltet.
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplHmWindowRotary">hm_val - Drehgriff</a></h3>
|
||||
Dieses Widget stellt eine Drehgriff-Sensor mit den originalen Homematic-Icons dar.
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplHmWindow">hm_val - TFK</a></h3>
|
||||
Dieses Widget stellt einen Tür-/Fenster-Kontakt mit den originalen Homematic-Icons dar.
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueFloatBar">hm_val - Bar Horizontal</a></h3>
|
||||
Dieses Widget stellt einen Wert von 0-100 als horizontalen Balken dar.
|
||||
<dl>
|
||||
<dt>factor</dt>
|
||||
<dd>Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.</dd>
|
||||
|
||||
<dt>color</dt>
|
||||
<dd>CSS-Eigenschaft background-color des Balkens</dd>
|
||||
|
||||
<dt>border</dt>
|
||||
<dd>CSS-Eigenschaft border des Balkens</dd>
|
||||
|
||||
<dt>shadow</dt>
|
||||
<dd>CSS-Eigenschaft box-shadow des Balkens</dd>
|
||||
|
||||
<dt>reverse</dt>
|
||||
<dd>Wenn hier true eingetragen wird wird der Balken von rechts nach links statt von links nach rechts angezeigt</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a name="tplValueFloatBarVertical">hm_val - Bar Vertical</a></h3>
|
||||
Entspricht dem <a href="#tplValueFloatBar">Widget "hm_val - Bar Horizontal</a>, allerdings vertikal statt horiziontal.
|
||||
<dl>
|
||||
<dt>factor</dt>
|
||||
<dd>Faktor mit dem der Wert multipliziert wird. Beispiel: für einen Dimmer (der von 0.00 bis 1.00 geht) muss 100 eingetragen werden.</dd>
|
||||
|
||||
<dt>color</dt>
|
||||
<dd>CSS-Eigenschaft background-color des Balkens</dd>
|
||||
|
||||
<dt>border</dt>
|
||||
<dd>CSS-Eigenschaft border des Balkens</dd>
|
||||
|
||||
<dt>shadow</dt>
|
||||
<dd>CSS-Eigenschaft box-shadow des Balkens</dd>
|
||||
|
||||
<dt>reverse</dt>
|
||||
<dd>Wenn hier true eingetragen wird wird der Balken von unten nach oben statt von oben nach unten angezeigt</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
<hr/>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1003 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 137.3 139.3;" version="1.1" viewBox="0 0 137.3 139.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{fill:#2C8AAA;}
|
||||
.st1{opacity:0.19;clip-path:url(#XMLID_79_);fill:#070808;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#22728E;}
|
||||
</style><circle class="st0" cx="68.2" cy="69.6" id="XMLID_240_" r="66.2"/><g id="XMLID_55_"><defs><circle cx="68.4" cy="69.6" id="XMLID_56_" r="66.2"/></defs><clipPath id="XMLID_79_"><use style="overflow:visible;" xlink:href="#XMLID_56_"/></clipPath><polygon class="st1" id="XMLID_139_" points="70.8,30.5 136.1,81.8 133.6,135.8 88.9,133.9 51.8,105 70.2,99.3 "/></g><path class="st2" d="M60,54.2h21.1V39.7c0,0-0.4-9.2-10.3-9.2s-10.7,9.2-10.7,9.2L60,54.2z" id="XMLID_280_"/><path class="st2" d="M53.5,50.1C53.5,50.1,53.5,50.1,53.5,50.1l0,24.6c0,0,0.2,13.2,16.7,13.2 c16.7,0,16.7-13.2,16.7-13.2V50.1c0,0,0,0,0,0h-3.1c0,0,0,0,0,0v23.1c0,0-0.1,11.1-13.6,11.1c-6,0-9.2-2.6-10.9-5.2 c-1.3-2-2-4.3-2-6.7V50.1c0,0,0,0,0,0H53.5z" id="XMLID_277_"/><path class="st2" d="M59.4,56.2h22.4v16.3c0,0,0.2,9.3-11.2,9.3c-11.9,0-11.2-9.3-11.2-9.3V56.2z" id="XMLID_274_"/><rect class="st2" height="11.5" id="XMLID_265_" width="3.7" x="68.6" y="87.2"/><path class="st2" d="M51.8,105h38.1C89.9,105,72,89,51.8,105z" id="XMLID_256_"/><path class="st3" d="M76.6,57.8h3.1V72c0,0-0.9,8.1-8.6,8.2c0,0,4.7-2.4,5.4-8L76.6,57.8z" id="XMLID_253_"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 137.3 139.3;" version="1.1" viewBox="0 0 137.3 139.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{fill:#FFB051;}
|
||||
.st1{opacity:0.19;clip-path:url(#XMLID_79_);fill:#070808;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#FF8C00;}
|
||||
</style><circle class="st0" cx="68.2" cy="69.6" id="XMLID_240_" r="66.2"/><g id="XMLID_55_"><defs><circle cx="68.4" cy="69.6" id="XMLID_56_" r="66.2"/></defs><clipPath id="XMLID_79_"><use style="overflow:visible;" xlink:href="#XMLID_56_"/></clipPath><polygon class="st1" id="XMLID_139_" points="70.8,30.5 136.1,81.8 133.6,135.8 88.9,133.9 51.8,105 70.2,99.3 "/></g><path class="st2" d="M60,54.2h21.1V39.7c0,0-0.4-9.2-10.3-9.2s-10.7,9.2-10.7,9.2L60,54.2z" id="XMLID_280_"/><path class="st2" d="M53.5,50.1C53.5,50.1,53.5,50.1,53.5,50.1l0,24.6c0,0,0.2,13.2,16.7,13.2 c16.7,0,16.7-13.2,16.7-13.2V50.1c0,0,0,0,0,0h-3.1c0,0,0,0,0,0v23.1c0,0-0.1,11.1-13.6,11.1c-6,0-9.2-2.6-10.9-5.2 c-1.3-2-2-4.3-2-6.7V50.1c0,0,0,0,0,0H53.5z" id="XMLID_277_"/><path class="st2" d="M59.4,56.2h22.4v16.3c0,0,0.2,9.3-11.2,9.3c-11.9,0-11.2-9.3-11.2-9.3V56.2z" id="XMLID_274_"/><rect class="st2" height="11.5" id="XMLID_265_" width="3.7" x="68.6" y="87.2"/><path class="st2" d="M51.8,105h38.1C89.9,105,72,89,51.8,105z" id="XMLID_256_"/><path class="st3" d="M76.6,57.8h3.1V72c0,0-0.9,8.1-8.6,8.2c0,0,4.7-2.4,5.4-8L76.6,57.8z" id="XMLID_253_"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 137.3 139.3;" version="1.1" viewBox="0 0 137.3 139.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{fill:#808080;}
|
||||
.st1{opacity:0.19;clip-path:url(#XMLID_79_);fill:#070808;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#404040;}
|
||||
</style><circle class="st0" cx="68.2" cy="69.6" id="XMLID_240_" r="66.2"/><g id="XMLID_55_"><defs><circle cx="68.4" cy="69.6" id="XMLID_56_" r="66.2"/></defs><clipPath id="XMLID_79_"><use style="overflow:visible;" xlink:href="#XMLID_56_"/></clipPath><polygon class="st1" id="XMLID_139_" points="70.8,30.5 136.1,81.8 133.6,135.8 88.9,133.9 51.8,105 70.2,99.3 "/></g><path class="st2" d="M60,54.2h21.1V39.7c0,0-0.4-9.2-10.3-9.2s-10.7,9.2-10.7,9.2L60,54.2z" id="XMLID_280_"/><path class="st2" d="M53.5,50.1C53.5,50.1,53.5,50.1,53.5,50.1l0,24.6c0,0,0.2,13.2,16.7,13.2 c16.7,0,16.7-13.2,16.7-13.2V50.1c0,0,0,0,0,0h-3.1c0,0,0,0,0,0v23.1c0,0-0.1,11.1-13.6,11.1c-6,0-9.2-2.6-10.9-5.2 c-1.3-2-2-4.3-2-6.7V50.1c0,0,0,0,0,0H53.5z" id="XMLID_277_"/><path class="st2" d="M59.4,56.2h22.4v16.3c0,0,0.2,9.3-11.2,9.3c-11.9,0-11.2-9.3-11.2-9.3V56.2z" id="XMLID_274_"/><rect class="st2" height="11.5" id="XMLID_265_" width="3.7" x="68.6" y="87.2"/><path class="st2" d="M51.8,105h38.1C89.9,105,72,89,51.8,105z" id="XMLID_256_"/><path class="st3" d="M76.6,57.8h3.1V72c0,0-0.9,8.1-8.6,8.2c0,0,4.7-2.4,5.4-8L76.6,57.8z" id="XMLID_253_"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 137.3 139.3;" version="1.1" viewBox="0 0 137.3 139.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{fill:#7E88D3;}
|
||||
.st1{opacity:0.19;clip-path:url(#XMLID_79_);fill:#070808;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#17269B;}
|
||||
</style><circle class="st0" cx="68.2" cy="69.6" id="XMLID_240_" r="66.2"/><g id="XMLID_55_"><defs><circle cx="68.4" cy="69.6" id="XMLID_56_" r="66.2"/></defs><clipPath id="XMLID_79_"><use style="overflow:visible;" xlink:href="#XMLID_56_"/></clipPath><polygon class="st1" id="XMLID_139_" points="70.8,30.5 136.1,81.8 133.6,135.8 88.9,133.9 51.8,105 70.2,99.3 "/></g><path class="st2" d="M60,54.2h21.1V39.7c0,0-0.4-9.2-10.3-9.2s-10.7,9.2-10.7,9.2L60,54.2z" id="XMLID_280_"/><path class="st2" d="M53.5,50.1C53.5,50.1,53.5,50.1,53.5,50.1l0,24.6c0,0,0.2,13.2,16.7,13.2 c16.7,0,16.7-13.2,16.7-13.2V50.1c0,0,0,0,0,0h-3.1c0,0,0,0,0,0v23.1c0,0-0.1,11.1-13.6,11.1c-6,0-9.2-2.6-10.9-5.2 c-1.3-2-2-4.3-2-6.7V50.1c0,0,0,0,0,0H53.5z" id="XMLID_277_"/><path class="st2" d="M59.4,56.2h22.4v16.3c0,0,0.2,9.3-11.2,9.3c-11.9,0-11.2-9.3-11.2-9.3V56.2z" id="XMLID_274_"/><rect class="st2" height="11.5" id="XMLID_265_" width="3.7" x="68.6" y="87.2"/><path class="st2" d="M51.8,105h38.1C89.9,105,72,89,51.8,105z" id="XMLID_256_"/><path class="st3" d="M76.6,57.8h3.1V72c0,0-0.9,8.1-8.6,8.2c0,0,4.7-2.4,5.4-8L76.6,57.8z" id="XMLID_253_"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 137.3 139.3;" version="1.1" viewBox="0 0 137.3 139.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
|
||||
.st0{fill:#A5FF7F;}
|
||||
.st1{opacity:0.19;clip-path:url(#XMLID_79_);fill:#070808;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#00FF21;}
|
||||
</style><circle class="st0" cx="68.2" cy="69.6" id="XMLID_240_" r="66.2"/><g id="XMLID_55_"><defs><circle cx="68.4" cy="69.6" id="XMLID_56_" r="66.2"/></defs><clipPath id="XMLID_79_"><use style="overflow:visible;" xlink:href="#XMLID_56_"/></clipPath><polygon class="st1" id="XMLID_139_" points="70.8,30.5 136.1,81.8 133.6,135.8 88.9,133.9 51.8,105 70.2,99.3 "/></g><path class="st2" d="M60,54.2h21.1V39.7c0,0-0.4-9.2-10.3-9.2s-10.7,9.2-10.7,9.2L60,54.2z" id="XMLID_280_"/><path class="st2" d="M53.5,50.1C53.5,50.1,53.5,50.1,53.5,50.1l0,24.6c0,0,0.2,13.2,16.7,13.2 c16.7,0,16.7-13.2,16.7-13.2V50.1c0,0,0,0,0,0h-3.1c0,0,0,0,0,0v23.1c0,0-0.1,11.1-13.6,11.1c-6,0-9.2-2.6-10.9-5.2 c-1.3-2-2-4.3-2-6.7V50.1c0,0,0,0,0,0H53.5z" id="XMLID_277_"/><path class="st2" d="M59.4,56.2h22.4v16.3c0,0,0.2,9.3-11.2,9.3c-11.9,0-11.2-9.3-11.2-9.3V56.2z" id="XMLID_274_"/><rect class="st2" height="11.5" id="XMLID_265_" width="3.7" x="68.6" y="87.2"/><path class="st2" d="M51.8,105h38.1C89.9,105,72,89,51.8,105z" id="XMLID_256_"/><path class="st3" d="M76.6,57.8h3.1V72c0,0-0.9,8.1-8.6,8.2c0,0,4.7-2.4,5.4-8L76.6,57.8z" id="XMLID_253_"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 34 KiB |
@@ -0,0 +1,615 @@
|
||||
"use strict";
|
||||
// Following classes should be used if variable table_class="tclass"
|
||||
// <table class="tclass">
|
||||
// <tr class="tclass-th">
|
||||
// <th class="tclass-th1">Time</th>
|
||||
// <th class="tclass-th2">Event</th>
|
||||
// </tr>
|
||||
// <tr class="tclass-tr tclass-tr-even tclass-tr-selected">
|
||||
// <td>12:34:34</td>
|
||||
// <td>Door opened</td>
|
||||
// </tr>
|
||||
// <tr class="tclass-tr tclass-tr-odd tclass-tr-red">
|
||||
// <td>12:34:35</td>
|
||||
// <td>Door closed</td>
|
||||
// </tr>
|
||||
// <tr class="tclass-tr tclass-tr-even">
|
||||
// <td>12:34:36</td>
|
||||
// <td>Window opened</td>
|
||||
// </tr>
|
||||
// </table>
|
||||
//
|
||||
// following json string or object is expected:
|
||||
// '[\
|
||||
// {"Time": "12:34:34", "Event": "Door opened", "_data":{"Type": "1", "Event" : "SomeEvent1"}, "_class": "selected"},\
|
||||
// {"Time": "12:34:35", "Event": "Door closed", "_data":{"Type": "2", "Event" : "SomeEvent2"}, "_class": "red" },\
|
||||
// {"Time": "12:34:36", "Event": "Window opened", "_data":{"Type": "3", "Event" : "SomeEvent3"}}\
|
||||
// ]'
|
||||
//
|
||||
// If _detail object found and detailed_wid is defined
|
||||
// following object will be created by selecting of one row:
|
||||
// <table class="tclass-detail">
|
||||
// <tr class="tclass-detail-tr tclass-detail-tr-even"><td class="tclass-detail-td-name">Type</td><td class="tclass-detail-td-value">1</td></tr>
|
||||
// <tr class="tclass-detail-tr tclass-detail-tr-odd"><td class="tclass-detail-td-name">Event</td><td class="tclass-detail-td-value">SomeEvent1</td></tr>
|
||||
// </table>
|
||||
//
|
||||
// Dialog
|
||||
// Can be opened by writing "open" into trigger_id.
|
||||
// As dialog closed the trigger_id will be written with the text of button
|
||||
// "show" option is active only in edit mode and has no effect
|
||||
//
|
||||
|
||||
if (vis.editMode) {
|
||||
// Add words for basic widgets
|
||||
$.extend(true, systemDictionary, {
|
||||
"table_oid": {"en": "Table Object ID", "de": "Table Object ID", "ru": "ID таблицы"},
|
||||
"static_value": {"en": "Static JSON(If no ID)", "de": "Static JSON(If no ID)", "ru": "Значение, если нет ID таблицы"},
|
||||
"event_oid": {"en": "Event ID", "de": "Ereigniss ID", "ru": "ID события"},
|
||||
"hide_header": {"en": "Hide header", "de": "Kein Header", "ru": "Скрыть заголовок"},
|
||||
"show_scroll": {"en": "Show scroll", "de": "Zeige Scrollbar", "ru": "Показать прокрутку"},
|
||||
"detailed_wid": {"en": "Detailed widget", "de": "Detailed widget", "ru": "Виджет детализации"},
|
||||
"colCount": {"en": "Column count", "de": "Kolumnanzahl", "ru": "Кол-во колонок"},
|
||||
"group_header": {"en": "Headers", "de": "Headers", "ru": "Заголовок"},
|
||||
"colName": {"en": "Name", "de": "Name", "ru": "Имя"},
|
||||
"colWidth": {"en": "Width", "de": "Width", "ru": "Ширина"},
|
||||
"colAttr": {"en": "Attribute in JSON", "de": "Attribut in JSON", "ru": "Атрибут в JSON"},
|
||||
"ack_oid": {"en": "Acknowledge ID", "de": "Bestätigung ID", "ru": "ID для подтверждения"},
|
||||
"new_on_top": {"en": "New event on top", "de": "Neus Ereignis am Anfang", "ru": "Новые события сначала"}
|
||||
});
|
||||
}
|
||||
|
||||
vis.binds.table = {
|
||||
getBrowserScrollSize: function (){
|
||||
var css = {
|
||||
"border": "none",
|
||||
"height": "200px",
|
||||
"margin": "0",
|
||||
"padding": "0",
|
||||
"width": "200px"
|
||||
};
|
||||
|
||||
var inner = $("<div>").css($.extend({}, css));
|
||||
var outer = $("<div>").css($.extend({
|
||||
"left": "-1000px",
|
||||
"overflow": "scroll",
|
||||
"position": "absolute",
|
||||
"top": "-1000px"
|
||||
}, css)).append(inner).appendTo("body")
|
||||
.scrollLeft(1000)
|
||||
.scrollTop(1000);
|
||||
|
||||
var scrollSize = {
|
||||
height: (outer.offset().top - inner.offset().top) || 0,
|
||||
width: (outer.offset().left - inner.offset().left) || 0
|
||||
};
|
||||
|
||||
outer.remove();
|
||||
return scrollSize;
|
||||
},
|
||||
|
||||
// Show detailed information
|
||||
onRowClick: function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('options');
|
||||
|
||||
// Deselect all rows
|
||||
$('#' + data.wid + ' .vis-table-row').removeClass(data.tClass + '-tr-selected');
|
||||
// Select a new one
|
||||
$this.addClass(data.tClass + '-tr-selected');
|
||||
|
||||
// Get container for detailed information
|
||||
var $el = $('#' + data.detailed_wid);
|
||||
if ($el.length) {
|
||||
var text = '';
|
||||
|
||||
if (data.content._detail) {
|
||||
text += '<table class="' + data.tClass + '-detail">';
|
||||
// Show that object
|
||||
var r = 0;
|
||||
var obj = '_detail';
|
||||
// Go through all attributes
|
||||
if (typeof data.content[obj] == 'object') {
|
||||
for (var odata in data.content[obj]) {
|
||||
if (typeof data.content[obj][odata] === 'function') continue;
|
||||
var val = data.content[obj][odata].toString();
|
||||
if (odata.length > 1 && odata[0] === '_' && obj !== '_class' && obj.substring(0, 4) !== '_btn' && obj !== '_id') {
|
||||
continue;
|
||||
}
|
||||
text += '<tr class="' + data.tClass + '-detail-tr ' + data.tClass + '-detail-tr-' + ((r % 2) ? 'odd' : 'even') + '"><td class="' + data.tClass + '-detail-td-name">' + odata + '</td>' +
|
||||
'<td class="' + data.tClass + '-detail-td-value">' + val + '</td></tr>';
|
||||
if (val && val.length > 6 && val.substring(val.length - 6) === ' ') {
|
||||
text += '<tr class="' + data.tClass + '-detail-tr"><td colspan="2"> </td></tr>';
|
||||
}
|
||||
r++;
|
||||
}
|
||||
} else {
|
||||
var val = data.content[obj].toString();
|
||||
|
||||
text += '<tr class="' + data.tClass + '-detail-tr ' + data.tClass + '-detail-tr-' + ((r % 2) ? 'odd' : 'even') + '"><td class="' + data.tClass + '-detail-td-name">' + obj.substring(1) + '</td>' +
|
||||
'<td class="' + data.tClass + '-detail-td-value">' + val + '</td></tr>';
|
||||
|
||||
if (val && val.length > 6 && val.substring(val.length - 6) === ' ') {
|
||||
text += '<tr class="' + data.tClass + '-detail-tr"><td colspan="2"> </td></tr>';
|
||||
}
|
||||
r++;
|
||||
}
|
||||
text += '</table>';
|
||||
} else {
|
||||
// Try to find special attributes starting with '_'
|
||||
for (var obj in data.content) {
|
||||
if (!data.content.hasOwnProperty(obj) || typeof data.content[obj] === 'function') continue;
|
||||
if (obj.length > 0 && obj[0] === '_' && obj !== '_class' && obj.substring(0, 4) !== '_btn' && obj !== '_id') {
|
||||
text += '<table class="' + data.tClass + '-detail">';
|
||||
// Show that object
|
||||
var r = 0;
|
||||
// Go through all attributes
|
||||
if (typeof data.content[obj] === 'object') {
|
||||
for (var odata in data.content[obj]) {
|
||||
if (typeof data.content[obj][odata] === 'function') continue;
|
||||
var val = data.content[obj][odata].toString();
|
||||
if (odata.length > 1 && odata[0] === '_' && obj !== '_class' && obj.substring(0, 4) !== '_btn' && obj !== '_id') {
|
||||
continue;
|
||||
}
|
||||
text += '<tr class="' + data.tClass + '-detail-tr ' + data.tClass + '-detail-tr-' + ((r % 2) ? 'odd' : 'even') + '"><td class="' + data.tClass + '-detail-td-name">' + odata + '</td>' +
|
||||
'<td class="' + data.tClass + '-detail-td-value">' + val + '</td></tr>';
|
||||
if (val && val.length > 6 && val.substring(val.length - 6) === ' ') {
|
||||
text += '<tr class="' + data.tClass + '-detail-tr"><td colspan="2"> </td></tr>';
|
||||
}
|
||||
r++;
|
||||
}
|
||||
} else {
|
||||
var val = data.content[obj].toString();
|
||||
|
||||
text += '<tr class="' + data.tClass + '-detail-tr ' + data.tClass + '-detail-tr-' + ((r % 2) ? 'odd' : 'even') + '"><td class="' + data.tClass + '-detail-td-name">' + obj.substring(1) + '</td>' +
|
||||
'<td class="' + data.tClass + '-detail-td-value">' + val + '</td></tr>';
|
||||
|
||||
if (val && val.length > 6 && val.substring(val.length - 6) === ' ') {
|
||||
text += '<tr class="' + data.tClass + '-detail-tr"><td colspan="2"> </td></tr>';
|
||||
}
|
||||
r++;
|
||||
}
|
||||
text += '</table>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// If no special _data object found => show standard elements
|
||||
if (!text) {
|
||||
text = '<table class="' + data.tClass + '-detail">';
|
||||
// Go through all attributes
|
||||
var row = 0;
|
||||
for (var data_obj in data.content) {
|
||||
// Show that object
|
||||
if (!data.content.hasOwnProperty(data_obj) ||
|
||||
(data_obj.length > 1 && data_obj[0] === '_' && data_obj !== '_class' && data_obj.substring(0, 4) !== '_btn' && data_obj !== '_id')) {
|
||||
continue;
|
||||
}
|
||||
var val = data.content[data_obj].toString();
|
||||
|
||||
text += '<tr class="' + data.tClass + '-detail-tr ' + data.tClass + '-detail-tr-' + ((row % 2) ? 'odd' : 'even') + '"><td class="' + data.tClass + '-detail-td-name">' + data_obj + '</td>' +
|
||||
'<td class="' + data.tClass + '-detail-td-value">' + data.content[data_obj]+'</td></tr>';
|
||||
|
||||
if (val.length > 6 && val.substring(val.length - 6) === ' ') {
|
||||
text += '<tr class="' + data.tClass + '-detail-tr"><td colspan="2"> </td></tr>';
|
||||
}
|
||||
row++;
|
||||
}
|
||||
text += '</table>';
|
||||
}
|
||||
|
||||
$el.html(text);
|
||||
|
||||
/*if (options.btn_print) {
|
||||
$(el).append ('<button id="print_'+that._parent._wid+'" class="'+data.tClass+'-print-button">' + options.btn_print + '</button>');
|
||||
var btn = document.getElementById ('print_'+that._parent._wid);
|
||||
btn._parent = that._parent;
|
||||
btn._print_id = that._data._print_id || JSON.stringify(that._data);
|
||||
|
||||
if (btn && !vis.editMode) {
|
||||
$(btn).bind('click', function () {
|
||||
if (that._parent._options.ack_oid) {
|
||||
vis.setValue(that._parent._options.ack_oid, that._print_id);
|
||||
}
|
||||
|
||||
if (that._parent._options.view_for_print) {
|
||||
vis.changeView(that._parent._options.view_for_print);
|
||||
}
|
||||
setTimeout(function () {
|
||||
window.print();
|
||||
window.location.reload()
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
}*/
|
||||
}
|
||||
},
|
||||
|
||||
onAckButton: function () {
|
||||
var data = $(this).data('options');
|
||||
if (data.ack_oid) {
|
||||
vis.setValue(data.ack_oid, data.ack_id);
|
||||
}
|
||||
},
|
||||
|
||||
createRow: function (rowData, wid, options, rowNumber, noTR, index, serverID) {
|
||||
var tClass = options['class'] || 'tclass';
|
||||
var _classes = rowData['_class'] ? rowData['_class'].split(' ') : null;
|
||||
var text;
|
||||
// Create row
|
||||
if (!noTR) {
|
||||
text = '<tr class="vis-table-row ' + tClass + '-tr ' +
|
||||
tClass + ((rowNumber % 2) ? '-tr-even' : '-tr-odd');
|
||||
|
||||
if (_classes) {
|
||||
for (var t = 0, len = _classes.length; t < len; t++) {
|
||||
text += ' ' + (tClass + '-tr-' + _classes[t]);
|
||||
}
|
||||
}
|
||||
text += '" data-index="' + index + '" data-server-id="' + serverID + '">';
|
||||
} else {
|
||||
text = '';
|
||||
}
|
||||
var k = 1;
|
||||
for (var obj in rowData) {
|
||||
if (!rowData.hasOwnProperty(obj) ||
|
||||
obj.match(/^jQuery/) ||
|
||||
typeof rowData[obj] === 'function') {
|
||||
continue;
|
||||
}
|
||||
|
||||
var attr = options['colAttr' + k] || obj;
|
||||
|
||||
if (attr && attr[0] === '_') {
|
||||
if (attr.match(/^_btn/) || options['colAttr' + k]) {
|
||||
var btnText = '';
|
||||
var btnClass = '';
|
||||
text += '<td class="' + tClass + '-th' + k + '" ' + (options['colWidth' + k] ? 'style="width:' + options['colWidth' + k] + '"' : '') + '>';
|
||||
if (attr.match(/^_btn/)){
|
||||
if (typeof rowData[attr] === 'string') {
|
||||
btnText = rowData[attr];
|
||||
} else {
|
||||
btnText = rowData[attr].caption;
|
||||
btnClass = rowData[attr]._class;
|
||||
}
|
||||
if (btnText) {
|
||||
text += '<button data-index="' + index + '" data-server-id="' + serverID + '" class="vis-table-ack-button ' + tClass + '-ack-button ' + (btnClass ? ('-' + btnClass) : '') + '">' + btnText + '</button>';
|
||||
}
|
||||
} else {
|
||||
text += rowData[attr];
|
||||
}
|
||||
|
||||
text += '</td>';
|
||||
k++;
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!options.colCount || k <= options.colCount) {
|
||||
text += '<td class="' + tClass + '-th' + k + '" ' + (options['colWidth' + k] ? 'style="width:' + options['colWidth' + k] + '"' : '') + '>' + rowData[attr] + '</td>';
|
||||
}
|
||||
k++;
|
||||
}
|
||||
|
||||
if (!noTR) text += '</tr>';
|
||||
|
||||
return text;
|
||||
},
|
||||
|
||||
showTable: function (view, wid, options) {
|
||||
var $div = $('#' + wid);
|
||||
if (!$div.length) {
|
||||
setTimeout(function () {
|
||||
vis.binds.table.showTable(view, wid, options);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
//vis.binds.table.initTable();
|
||||
var tClass = options['class'] || 'tclass';
|
||||
|
||||
// read actual table as json string
|
||||
var tableJson = options.table_oid ? vis.states.attr(options.table_oid + '.val') : (options.static_value || '');
|
||||
var table = [];
|
||||
if (typeof app !== 'undefined' && app.replaceFilePathJson) {
|
||||
tableJson = app.replaceFilePathJson(tableJson);
|
||||
}
|
||||
if (tableJson && typeof tableJson === 'string') {
|
||||
try {
|
||||
table = JSON.parse(tableJson);
|
||||
}
|
||||
catch (e) {
|
||||
console.log ("showTable: Cannot parse json table");
|
||||
table = [];
|
||||
}
|
||||
} else {
|
||||
table = tableJson;
|
||||
}
|
||||
|
||||
if (!table) table = [];
|
||||
|
||||
// Create widget container
|
||||
var $elem = $('#' + wid);
|
||||
|
||||
// Start creation of table
|
||||
var header = '<table class="vis-table-header ' + tClass + '">';
|
||||
var text = '<div class="vis-table-div ' + tClass + '-inner' + ((options.show_scroll) ? ' tclass-inner-overflow' : '') + '"><table class="vis-table-body ' + tClass + '">';
|
||||
var headerDone = false;
|
||||
var j = 0;
|
||||
var selectedId = null;
|
||||
|
||||
if (options.max_rows) options.max_rows = parseInt(options.max_rows);
|
||||
|
||||
// Go through all lines
|
||||
for (var ii = 0, ilen = table.length; ii < ilen; ii++) {
|
||||
if (!table[ii]) continue;
|
||||
|
||||
var _classes = table[ii]['_class'] ? table[ii]['_class'].split(' ') : null;
|
||||
|
||||
// Create table header
|
||||
if (!headerDone) {
|
||||
header += '<tr class="' + tClass + '-th">';
|
||||
var k = 1;
|
||||
for (var obj in table[ii]) {
|
||||
if (!table[ii].hasOwnProperty(obj) ||
|
||||
obj.match(/^jQuery/) ||
|
||||
typeof table[ii][obj] === 'function') {
|
||||
continue;
|
||||
}
|
||||
|
||||
var attr = options['colAttr' + k] || obj;
|
||||
|
||||
if (attr && attr[0] === '_') {
|
||||
if (attr.match(/^_btn/) || options['colAttr' + k]) {
|
||||
header += '<th class="' + tClass + '-th' + k + '" ' + (options['colWidth' + k] ? 'style="width:' + options['colWidth' + k] + '"' : '') + '>' + (options['colName' + k] || '') + '</th>';
|
||||
k++;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (!options.colCount || k <= options.colCount) {
|
||||
header += '<th class="' + tClass + '-th' + k + '" ' + (options['colWidth' + k] ? 'style="width:' + options['colWidth' + k] + '"' : '') + '>' + (options['colName' + k] || attr) + '</th>';
|
||||
}
|
||||
k++;
|
||||
}
|
||||
if (options.show_scroll !== 'false' && options.show_scroll !== false && options.show_scroll !== undefined){
|
||||
// Get the scroll width once
|
||||
if (!vis.binds.table.scrollSize) vis.binds.table.scrollSize = vis.binds.table.getBrowserScrollSize();
|
||||
|
||||
header += '<td style="width:' + (vis.binds.table.scrollSize.width - 6) + 'px"></td></tr>';
|
||||
}
|
||||
//header += '</tr>';
|
||||
headerDone = true;
|
||||
}
|
||||
|
||||
if (_classes &&_classes.indexOf('selected') !== -1) selectedId = ii;
|
||||
|
||||
text += vis.binds.table.createRow(table[ii], wid, options, j, false, ii, table[ii]._id);
|
||||
j++;
|
||||
if (options.max_rows && j >= options.max_rows) break;
|
||||
}
|
||||
text += '</table></div>\n';
|
||||
header += '</table>\n';
|
||||
|
||||
$elem.find('.vis-table-div').remove();
|
||||
$elem.find('.vis-table-header').remove();
|
||||
// Insert table into container
|
||||
$elem.append((options.hide_header ? '' : header) + text);
|
||||
var data = {
|
||||
options: options,
|
||||
wid: wid,
|
||||
view: view
|
||||
};
|
||||
|
||||
$elem.find('.vis-table-ack-button').unbind('click touchstart').bind('click touchstart', function (e) {
|
||||
// Protect against two events
|
||||
if (vis.detectBounce(this)) return;
|
||||
|
||||
vis.binds.table.onAckButton.call(this, e);
|
||||
});
|
||||
|
||||
// Set additional data for every row
|
||||
for (var i = 0, len = table.length; i < len; i++) {
|
||||
if (!table[i]) continue;
|
||||
|
||||
$elem.find('.vis-table-ack-button[data-index="' + i + '"]')
|
||||
.data('options', {
|
||||
ack_id: table[i]._ack_id || JSON.stringify(table[i]),
|
||||
ack_oid: options.ack_oid
|
||||
});
|
||||
}
|
||||
// If detailed information desired
|
||||
if (options.detailed_wid) {
|
||||
// Bind on click event for every row
|
||||
$elem.find('.vis-table-row').unbind('click touchstart').bind('click touchstart', function (e) {
|
||||
// Protect against two events
|
||||
if (vis.detectBounce(this)) return;
|
||||
|
||||
vis.binds.table.onRowClick.call(this, e);
|
||||
});
|
||||
|
||||
// Set additional data for every row
|
||||
for (i = 0, len = table.length; i < len; i++) {
|
||||
if (!table[i]) continue;
|
||||
$elem.find('.vis-table-row[data-index="' + i + '"]')
|
||||
.data('options', {
|
||||
content: table[i],
|
||||
detailed_wid: options.detailed_wid,
|
||||
tClass: tClass,
|
||||
wid: wid
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedId) {
|
||||
setTimeout (function () {
|
||||
$elem.find('.vis-table-row[data-index="' + selectedId + '"]').trigger('click');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
// Remember index to calculate even or odd
|
||||
data.rowNum = options.new_on_top ? 0 : ((j - 1) >= 0 ? j - 1 : 0);
|
||||
|
||||
function cbNewTable (e, newVal, oldVal) {
|
||||
$elem.trigger('newTable', newVal);
|
||||
}
|
||||
function cbNewEvent (e, newVal, oldVal) {
|
||||
$elem.trigger('newEvent', newVal);
|
||||
}
|
||||
|
||||
if (!$('#' + wid).data('inited')) {
|
||||
$('#' + wid).data('inited', true);
|
||||
// New event coming
|
||||
$elem.on('newEvent', function (e, newVal) {
|
||||
if (e.handled) return;
|
||||
e.handled = true;
|
||||
var newEvent;
|
||||
var data = $(this).data('options');
|
||||
// Convert event to json
|
||||
if (newVal) {
|
||||
if (typeof newVal === 'string') {
|
||||
try {
|
||||
newEvent = JSON.parse(newVal);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
console.log('elem.triggered: Cannot parse json new event ' + newVal);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
newEvent = newVal;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to find, if this event yet exists
|
||||
var $row = (newEvent._id !== undefined) ? $(this).find('tr[data-index="' + newEvent._id + '"]') : [];
|
||||
|
||||
// get next row number for new line
|
||||
if (!$row.length) data.rowNum++;
|
||||
|
||||
var text = vis.binds.table.createRow(newEvent, data.wid, data.options, data.rowNum, ($row.length > 0), (newEvent._id === undefined) ? data.rowNum : newEvent._id);
|
||||
|
||||
if ($row.length) {
|
||||
$row.html(text).addClass(newEvent._class || '');
|
||||
} else {
|
||||
// If add to the top of table
|
||||
if (data.options.new_on_top) {
|
||||
$('#' + this.id).find('.vis-table-body').prepend(text);
|
||||
} else {
|
||||
// Add to the bottom of table
|
||||
$('#' + this.id).find('.vis-table-body').append(text);
|
||||
}
|
||||
}
|
||||
var $el;
|
||||
// If detailed widget desired
|
||||
if (data.options.detailed_wid) {
|
||||
$el = $('#' + this.id).find('.vis-table-row[data-index="' + ((newEvent._id === undefined) ? data.rowNum : newEvent._id) + '"]')
|
||||
.data('options', {
|
||||
content: newEvent,
|
||||
detailed_wid: options.detailed_wid,
|
||||
tClass: tClass,
|
||||
wid: wid
|
||||
}).unbind('click touchstart').bind('click touchstart', function (e) {
|
||||
// Protect against two events
|
||||
if (vis.detectBounce(this)) return;
|
||||
|
||||
vis.binds.table.onRowClick.call(this, e);
|
||||
});
|
||||
$el = $(this).find('.tr_' + ((newEvent._id === undefined) ? data.rowNum : newEvent._id));
|
||||
}
|
||||
|
||||
$('#' + this.id).find('.ack_button_' + ((newEvent._id === undefined) ? data.rowNum : newEvent._id))
|
||||
.data('options', {data: newEvent, parent: this, ack_id: newEvent._ack_id || JSON.stringify(newEvent)})
|
||||
.unbind('click touchstart').bind('click touchstart', function (e) {
|
||||
// Protect against two events
|
||||
if (vis.detectBounce(this)) return;
|
||||
|
||||
vis.binds.table.onAckButton.call(this, e);
|
||||
});
|
||||
})
|
||||
.on('newTable', function (e, newVal) {
|
||||
if (e.handled) return;
|
||||
e.handled = true;
|
||||
var data = $(this).data('options');
|
||||
// Update whole table
|
||||
_setTimeout(vis.binds.table.showTable, 50, data.view, data.wid, data.options);
|
||||
});
|
||||
}
|
||||
$('#' + wid).data('options', data);
|
||||
|
||||
if (options.event_oid) {
|
||||
if ($('#' + wid).data('binded') !== options.event_oid) {
|
||||
$('#' + wid).data('binded', options.event_oid);
|
||||
vis.states.bind(options.event_oid + '.val', cbNewEvent);
|
||||
}
|
||||
} else {
|
||||
if ($('#' + wid).data('binded') !== options.table_oid) {
|
||||
$('#' + wid).data('binded', options.table_oid);
|
||||
vis.states.bind(options.table_oid + '.val', cbNewTable);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showDialog: function (view, wid, options) {
|
||||
var trigger_value = vis.states.attr(options.trigger_id + '.val');
|
||||
// Register callback in dashUI
|
||||
if (options.trigger_id) vis.binds.table.registerIds(wid, options.trigger_id);
|
||||
|
||||
// Create widget container
|
||||
$('#' + wid).remove();
|
||||
$('#visview_' + view).append('<div class="vis-widget ' + (options._class || "") + '" id="' + wid + '" data-oid="' + (options.trigger_id || '') + '" title="'+options.title+'">' +
|
||||
'<table style="margin-left: ' + options.margin_left + 'px;margin-top:' + options.margin_top + 'px"><tr><td>' + (options.image ? '<img src="' + options.image + '"/>': '') + '</td><td>' + options.text + '</td></tr></table>' +
|
||||
'</div>');
|
||||
|
||||
var elem = document.getElementById(wid);
|
||||
|
||||
var buttons = {};
|
||||
for (var t = 0, len = options.buttons.length; t < len; t++) {
|
||||
if (options.buttons[t]) {
|
||||
buttons[options.buttons[t]] = {
|
||||
text: options.buttons[t],
|
||||
data: {data: options.buttons[t], trigger_id: options.trigger_id},
|
||||
click: function (evt, ui) {
|
||||
if (1 || !vis.editMode) {
|
||||
if (vis.binds.dialog_trigger_id) {
|
||||
vis.setValue(vis.binds.dialog_trigger_id, evt.currentTarget.textContent);
|
||||
}
|
||||
}
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
elem._options = options;
|
||||
|
||||
// Disable autofocus in edit mode
|
||||
if (vis.editMode) {
|
||||
$.ui.dialog.prototype._focusTabbable = function () {
|
||||
};
|
||||
}
|
||||
|
||||
$(elem).dialog({
|
||||
resizable: false,
|
||||
height: options.height || 200,
|
||||
width: options.width || 400,
|
||||
autoOpen: false,
|
||||
modal: (options.modal === true || options.modal === 'true'),
|
||||
draggable: false,
|
||||
buttons: buttons
|
||||
});
|
||||
|
||||
if ((vis.editMode && options.show) || trigger_value === 'open') {
|
||||
$(elem).dialog('open');
|
||||
vis.binds.dialog_trigger_id = options.trigger_id;
|
||||
}
|
||||
|
||||
elem.triggered = function (objId, _newEvent) {
|
||||
if (_newEvent === 'open') {
|
||||
$(this).dialog('open');
|
||||
vis.binds.dialog_trigger_id = this._options.trigger_id;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,174 @@
|
||||
<link rel="stylesheet" type="text/css" href="widgets/jqplot/css/jquery.jqplot.min.css" />
|
||||
|
||||
<script type="text/javascript" src="widgets/jqplot/js/jquery.jqplot.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
if (vis.editMode) {
|
||||
// Add words for basic widgets
|
||||
$.extend(true, systemDictionary, {
|
||||
"background": {"en": "Background", "de": "Hintergrund", "ru": "Фон"},
|
||||
"group_ticks": {"en": "Ticks", "de": "Ticken", "ru": "Штрихи"},
|
||||
"ticks": {"en": "Ticks-Namen", "de": "Ticken-Beschriften", "ru": "Подписи штрихов"},
|
||||
"ticks_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. '10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
|
||||
"showTickLabels": {"en": "Show tick labels", "de": "Zeige Ticken-Beschriftungen", "ru": "Показать подписи"},
|
||||
"tickPadding": {"en": "Tick padding", "de": "Ticken-Abstand", "ru": "Отступ штрихов"},
|
||||
"group_intervals": {"en": "Intervals", "de": "Intervale", "ru": "Интервалы"},
|
||||
"intervals": {"en": "Intervals", "de": "Intervale", "ru": "Отрезки"},
|
||||
"intervals_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. ''10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
|
||||
"intervalColors": {"en": "Interval colors", "de": "Intervalfarben", "ru": "Цвета интервалов"},
|
||||
"intervalColors_tooltip": {"en": "Divide with semicolon, e.g 'green;#0000FF;red'", "de": "Mit Semikolon trennen, z.B. 'green;#0000FF;red'", "ru": "Разделять точкой запятой, например 'green;#0000FF;red'"},
|
||||
"intervalInnerRadius": {"en": "Inner interval raduis", "de": "Inner Inerval-Radius", "ru": "Внутренний радиус интервалов"},
|
||||
"intervalOuterRadius": {"en": "Outer interval radius", "de": " Außenmaß-Radius", "ru": "Внешний радиус интервалов"},
|
||||
"diameter": {"en": "Diameter", "de": "Diameter", "ru": "Диаметер"},
|
||||
"padding": {"en": "Padding", "de": "Abstand", "ru": "Отступ"},
|
||||
"group_shadow": {"en": "Shadow", "de": "Schatten", "ru": "Тень"},
|
||||
"shadowOffset": {"en": "shadowOffset", "de": "Schatten offset", "ru": "Сдвиг тени"},
|
||||
"shadowAlpha": {"en": "Shadow transparence", "de": "Schatten Alpha", "ru": "Прозрачость тени"},
|
||||
"shadowDepth": {"en": "Shadow depth", "de": "Schattentiefe", "ru": "Глубина тени"},
|
||||
"group_ring": {"en": "Ring", "de": "Rand", "ru": "Кайма"},
|
||||
"ringColor": {"en": "Ring color", "de": "Randfarbe", "ru": "Цвет окантовки"},
|
||||
"ringWidth": {"en": "Ring width", "de": "Randbreite", "ru": "Ширина окантовки"},
|
||||
"group_needle": {"en": "Needle", "de": "Zeiger", "ru": "Стрелка"},
|
||||
"needleThickness": {"en": "Needle thickness", "de": "Zeigerdicke", "ru": "Ширина стрелки"},
|
||||
"needlePad": {"en": "Needle pad", "de": "Zeigeroffset", "ru": "Радиус основания"},
|
||||
"hubRadius": {"en": "Hub radius", "de": "Zeigerbasis-Radius", "ru": "Основание стрелки"}
|
||||
});
|
||||
}
|
||||
|
||||
vis.binds.jqplot = {
|
||||
gauge: function (el, data) {
|
||||
var $this = $(el).find('.jqplot-gauge');
|
||||
|
||||
var id = $(el).attr('id');
|
||||
if (id && id.match(/_removed$/)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$this.length || !$this.is(':visible')) {
|
||||
setTimeout(function () {
|
||||
vis.binds.jqplot.gauge(el, data);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) return;
|
||||
|
||||
var options = {
|
||||
title: data.title,
|
||||
seriesDefaults: {
|
||||
rendererOptions: {
|
||||
min: (data.min ? parseFloat(data.min) : undefined),
|
||||
max: (data.max ? parseFloat(data.max) : undefined),
|
||||
ticks: (data.ticks ? jQuery.map(data.ticks.split(';'), Number) : undefined),
|
||||
intervals: (data.intervals ? jQuery.map(data.intervals.split(';'), Number) : undefined),
|
||||
intervalColors: (data.intervalColors ? data.intervalColors.split(';') : undefined),
|
||||
label: data.label,
|
||||
showTickLabels: ((data.showTickLabels === 'false' || data.showTickLabels === false) ? false : undefined),
|
||||
intervalInnerRadius: (!data.intervalInnerRadius ? undefined : parseInt(data.intervalInnerRadius, 10)),
|
||||
intervalOuterRadius: (!data.intervalOuterRadius ? undefined : parseInt(data.intervalOuterRadius, 10)),
|
||||
diameter: (!data.diameter ? undefined : parseInt(data.diameter, 10)),
|
||||
padding: (!data.padding ? undefined : parseInt(data.padding, 10)),
|
||||
shadowOffset: (!data.shadowOffset ? undefined : parseInt(data.shadowOffset, 10)),
|
||||
shadowAlpha: (!data.shadowAlpha ? undefined : parseInt(data.shadowAlpha, 10)),
|
||||
shadowDepth: (!data.shadowDepth ? undefined : parseInt(data.shadowDepth, 10)),
|
||||
background: data.background, ringColor: data.ringColor,
|
||||
tickColor: data.tickColor,
|
||||
ringWidth: (!data.ringWidth ? undefined : parseInt(data.ringWidth, 10)),
|
||||
hubRadius: (!data.hubRadius ? undefined : parseInt(data.hubRadius, 10)),
|
||||
tickPadding: (!data.tickPadding ? undefined : parseInt(data.tickPadding, 10)),
|
||||
needleThickness: (!data.needleThickness ? undefined : parseInt(data.needleThickness, 10)),
|
||||
needlePad: (!data.needlePad ? undefined : parseInt(data.needlePad, 10))
|
||||
}
|
||||
}
|
||||
};
|
||||
if (options.seriesDefaults.rendererOptions.ticks && options.seriesDefaults.rendererOptions.ticks.length === 1) {
|
||||
options.seriesDefaults.rendererOptions.ticks[1] = options.seriesDefaults.rendererOptions.ticks[0];
|
||||
}
|
||||
|
||||
$(el).data('options', data);
|
||||
$this.html('');
|
||||
|
||||
try {
|
||||
var jqplotOptions = $.extend(true, {
|
||||
title: {show: false},
|
||||
grid: {
|
||||
background: 'transparent'
|
||||
},
|
||||
seriesDefaults: {
|
||||
renderer: $.jqplot.MeterGaugeRenderer,
|
||||
rendererOptions: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
}
|
||||
}, options);
|
||||
|
||||
var oid = $this.attr('data-oid');
|
||||
var series;
|
||||
if (oid !== 'nothing_selected' && vis.states[oid + '.val'] !== undefined) {
|
||||
series = [[vis.states[oid + '.val']]];
|
||||
} else {
|
||||
series = [[1, 0]];
|
||||
}
|
||||
|
||||
function onChange(e, newVal/* , oldVal */) {
|
||||
plot.series[0].data = [[1, newVal]];
|
||||
plot.redraw();
|
||||
}
|
||||
|
||||
var bound = [];
|
||||
|
||||
if (oid) {
|
||||
vis.states.bind(oid + '.val', onChange);
|
||||
bound.push(oid + '.val');
|
||||
}
|
||||
var plot = $.jqplot($this.attr('id'), series, jqplotOptions);
|
||||
|
||||
if (bound.length) {
|
||||
// remember all ids, that bound
|
||||
$(el).data('bound', bound);
|
||||
// remember bind handler
|
||||
$(el).data('bindHandler', onChange);
|
||||
}
|
||||
} catch(e) {
|
||||
servConn.logError('Cannot render widget jqplot: ' + e);
|
||||
}
|
||||
|
||||
if (vis.editMode) {
|
||||
$(el).resize(function () {
|
||||
var timer = $(this).data('timer');
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
var that = this;
|
||||
$(this).data('timer', setTimeout(function () {
|
||||
$(that).data('timer', null);
|
||||
$('#' + $(that).attr('id') + '_gauge').html('');
|
||||
vis.binds.jqplot.gauge(that, $(that).data('options'));
|
||||
}, 300));
|
||||
});
|
||||
|
||||
$(el).data('destroy', function (id, $widget) {
|
||||
$widget.off('resize');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script type="text/ejs"
|
||||
id="tplJqplotGauge"
|
||||
class="vis-tpl"
|
||||
data-vis-prev='<img src="widgets/jqplot/img/Prev_MeterGauge.png"></img>'
|
||||
data-vis-set="jqplot"
|
||||
data-vis-type="number"
|
||||
data-vis-name="MeterGauge"
|
||||
data-vis-attrs="oid;title;min/number;max/number;label;background/color;padding/slider,0,50,1;group.ticks;ticks;showTickLabels[true]/checkbox;tickPadding/slider,0,50,1;group.intervals;intervals;intervalColors;intervalInnerRadius/slider,0,550,1;intervalOuterRadius/slider,0,550,1;group.shadow;shadowOffset/slider,0,50,1;shadowAlpha/slider,0,1,0.05;shadowDepth/slider,0,50,1;group.ring;ringColor/color;ringWidth/slider,0,150,1;group.needle;needleThickness/slider,0,50,1;needlePad/slider,0,150,1;hubRadius/slider,0,150,1"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="width:460px; height:280px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqplot.gauge(el, data) %>>
|
||||
<div class="vis-widget-body" style="width: 100%; height: 100%">
|
||||
<div class="jqplot-gauge" id="_<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" style="width: 100%; height: 100%"/>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-xaxis{margin-top:10px}.jqplot-x2axis{margin-bottom:10px}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px 1px 5px;z-index:2;font-size:1.5em}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute}.jqplot-yMidAxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:hover,td.jqplot-seriesToggle:active{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:5px;border-bottom-width:5px;border-left-width:6px;border-right-width:6px;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-highlighter-tooltip,.jqplot-canvasOverlay-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,0.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,0.3)}
|
||||
@@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/doc.css" />
|
||||
<title>Dokumentation Widget-Set jqplot</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3><a name="tplJqplotGauge">hm_val - MeterGauge</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
+61
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,313 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/doc.css" />
|
||||
<title>Dokumentation Widget-Set jqui</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3><a name="tplJquiButtonLink">static - Button Link</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiButtonLinkBlank">static - Button Link _blank</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplIconLink">static - Icon link</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiDialog">static - HTML - Dialog</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiIconDialog">static - Icon - Dialog</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplContainerDialog">container - HTML - view in jqui Dialog</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplContainerIconDialog">container - Icon - view in jqui Dialog</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplContainerButtonDialog">container - Button - view in jqui Dialog</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiButtonNav">naviation - Button</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiIconNav">navigation - Icon</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
<h3><a name="tplJquiInput">hm_ctrl - Input</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiBool">hm_ctrl - Icon Bool</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiInputDatetime">hm_ctrl - Input Datetime</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiInputSet">hm_ctrl - Input + Set-Button</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiButtonState">hm_ctrl - Button .State()</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiButtonRunProgram">hm_ctrl - Button .ProgramExecute()</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiRadio">hm_ctrl - Radiobuttons on/off</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiRadioList">hm_ctrl - Radiobuttons ValueList</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiSelectList">hm_ctrl - Select ValueList</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiRadioSteps">hm_ctrl - Radiobuttons 25%</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiSliderVertical">hm_ctrl - Slider vertical</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiSlider">hm_ctrl - Slider horizontal</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplJquiSliderVertical">hm_ctrl - Slider vertical</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3><a name="tplIconState">hm_ctrl - Icon .State()</a></h3>
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt></dt>
|
||||
<dd></dd>
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,278 @@
|
||||
<style>
|
||||
.roundabout-holder {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
left:100px;
|
||||
top:10px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
height: calc(100% - 20px);
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
|
||||
.roundabout-moveable-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.li_carousel {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel_blocking {
|
||||
position: relative;
|
||||
z-index: 149;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.roundabout-in-focus{
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
if (vis.editMode) {
|
||||
// Add words for basic widgets
|
||||
$.extend(true, systemDictionary, {
|
||||
"group_left": {"en": "Swipe to left", "de": "Swipe nach links", "ru": "Сдвиг влево"},
|
||||
"left_nav_view": {"en": "View name", "de": "Viewname", "ru": "Имя страницы"},
|
||||
"left_in_effect": {"en": "In effect", "de": "In-Effekt", "ru": "In эффект"},
|
||||
"left_in_eff_opt": {"en": "In options", "de": "In-Optionen", "ru": "In опции"},
|
||||
"left_out_effect": {"en": "Out effect", "de": "Out-Effekt", "ru": "Out эффект"},
|
||||
"left_out_eff_opt": {"en": "Out options", "de": "Out-Optionen", "ru": "Out опции"},
|
||||
"group_right": {"en": "Swipe to right", "de": "Swipe nach rechts", "ru": "Сдвиг вправо"},
|
||||
"right_nav_view": {"en": "View name", "de": "Viewname", "ru": "Имя страницы"},
|
||||
"right_in_effect": {"en": "In effect", "de": "In-Effekt", "ru": "In эффект"},
|
||||
"right_in_eff_opt": {"en": "In options", "de": "In-Optionen", "ru": "In опции"},
|
||||
"right_out_effect": {"en": "Out effect", "de": "Out-Effekt", "ru": "Out эффект"},
|
||||
"right_out_eff_opt": {"en": "Out options", "de": "Out-Optionen", "ru": "Out опции"},
|
||||
"Swipe Navigation": {"en": "Swipe Navigation", "de": "Swipe Navigation", "ru": "Swipe навигация"}
|
||||
});
|
||||
}
|
||||
|
||||
vis.binds.swipe = {
|
||||
loadedSwipe: false,
|
||||
loadedRound: false,
|
||||
loadSwipeScripts: function (cb) {
|
||||
if (vis.binds.swipe.loadedSwipe) {
|
||||
cb && cb();
|
||||
} else {
|
||||
vis.binds.swipe.loadedSwipe = true;
|
||||
$.ajax({
|
||||
url: 'widgets/swipe/js/jquery.touchSwipe.min.js',
|
||||
dataType: 'script',
|
||||
success: function () {
|
||||
cb && cb();
|
||||
},
|
||||
async: false
|
||||
});
|
||||
}
|
||||
},
|
||||
loadRoundScripts: function (cb) {
|
||||
if (vis.binds.swipe.loadedRound) {
|
||||
cb && cb();
|
||||
} else {
|
||||
vis.binds.swipe.loadedRound = true;
|
||||
$.ajax({
|
||||
url: 'widgets/swipe/js/jquery.roundabout.min.js',
|
||||
dataType: 'script',
|
||||
success: function () {
|
||||
jQuery.ajax({
|
||||
url: 'widgets/swipe/js/jquery.roundabout-shapes.js',
|
||||
dataType: 'script',
|
||||
success: function () {
|
||||
cb && cb();
|
||||
},
|
||||
async: false
|
||||
});
|
||||
},
|
||||
async: false
|
||||
});
|
||||
}
|
||||
},
|
||||
swipeNav: function (wid, view, data, style) {
|
||||
var $div = $('#' + wid);
|
||||
// if nothing found => wait
|
||||
if (!$div.length) {
|
||||
setTimeout(function () {
|
||||
vis.binds.swipe.swipeNav(wid, view, data, style);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (vis.editMode) {
|
||||
$div.show()
|
||||
.find('.translate-it')
|
||||
.each(function () {
|
||||
$(this).html(_($(this).text()));
|
||||
});
|
||||
}
|
||||
|
||||
var $view = $('#visview_' + view);
|
||||
|
||||
if (!vis.editMode) {
|
||||
vis.binds.swipe.loadSwipeScripts(function () {
|
||||
$view.swipe({
|
||||
swipeLeft: function () {
|
||||
vis.changeView(data['left_nav_view'], data['left_nav_view'], {
|
||||
effect: data['left_out_effect'],
|
||||
options: {
|
||||
direction: data['left_out_eff_opt'],
|
||||
queue: false
|
||||
}, duration: $div.attr('duration')
|
||||
}, {
|
||||
effect: data['left_in_effect'],
|
||||
options: {direction: data['left_in_eff_opt'], queue: false},
|
||||
duration: $div.attr('duration')
|
||||
}, true)
|
||||
},
|
||||
swipeRight: function () {
|
||||
vis.changeView(data['right_nav_view'], data['right_nav_view'], {
|
||||
effect: data['right_out_effect'],
|
||||
options: {direction: data['right_out_eff_opt'], queue: false},
|
||||
duration: $div.attr('duration')
|
||||
}, {
|
||||
effect: data['right_in_effect'],
|
||||
options: {direction: data['right_in_eff_opt'], queue: false},
|
||||
duration: $div.attr('duration')
|
||||
}, true)
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
applyCarousel: function ($div, childView) {
|
||||
var $childView = $div.find('#visview_' + childView);
|
||||
var count = $div.data('count');
|
||||
count = count || 0;
|
||||
|
||||
if (!$childView.length) {
|
||||
count++;
|
||||
if (count > 20) {
|
||||
return;
|
||||
}
|
||||
$div.data('count', count);
|
||||
setTimeout(function () {
|
||||
vis.binds.swipe.applyCarousel($div, childView);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
var $all = $div.find('.vis-widget');
|
||||
$all.each(function () {
|
||||
var $id = $(this);
|
||||
var id = $id.attr('id');
|
||||
var idOldPos = $id.position();
|
||||
|
||||
var $idAndChilds = $childView.children('[id^=' + id + ']');
|
||||
|
||||
if ($idAndChilds.length === 1) {
|
||||
$id.css({top: 0, left: 0});
|
||||
|
||||
$idAndChilds.wrapAll('<li id="li_' + id + '" class="li_carousel" ></li>');
|
||||
$('#li_' + id).css({height: $id.css('height'), width: $id.css('width')});
|
||||
} else {
|
||||
$idAndChilds.wrapAll('<div id="wrap_' + id + '" style="position: absolute; height: 50px; width: 50px; left: ' + (idOldPos.left * -1) + 'px; top:' + (idOldPos.top * -1) + 'px"></div>');
|
||||
$('#wrap_' + id).wrap('<li id="li_' + id + '" class="li_carousel"></li>');
|
||||
$('#li_' + id).css({height: $id.css('height'), width: $id.css('width')});
|
||||
}
|
||||
});
|
||||
|
||||
$childView.children('.li_carousel').append('<div class="carousel_blocking"></div>');
|
||||
$childView.children('.li_carousel').wrapAll('<ul class="parent_carousel"></ul>');
|
||||
|
||||
$childView.find('.parent_carousel')
|
||||
.bind('ready', function () {
|
||||
var child = $('.roundabout-in-focus').children();
|
||||
$(child[1]).removeClass('carousel_blocking');
|
||||
})
|
||||
.roundabout({
|
||||
clickToFocus: true,
|
||||
enableDrag: true,
|
||||
dragFactor: 2,
|
||||
minZ: 1,
|
||||
maxZ: 100,
|
||||
tilt: -4,
|
||||
minOpacity: 0.2,
|
||||
minScale: 1,
|
||||
childSelector: '.li_carousel',
|
||||
triggerFocusEvents: true,
|
||||
triggerBlurEvents: true
|
||||
});
|
||||
|
||||
$childView.find('.li_carousel')
|
||||
.bind('focus', function () {
|
||||
var child = $(this).children();
|
||||
$(child[1]).removeClass('carousel_blocking');
|
||||
$(this).removeClass('roundabout-moveable-item')
|
||||
})
|
||||
.bind('blur', function () {
|
||||
var child = $(this).children();
|
||||
$(child[1]).addClass('carousel_blocking');
|
||||
$(this).addClass('roundabout-moveable-item')
|
||||
});
|
||||
},
|
||||
carousel: function (wid, view, data, style) {
|
||||
var $div = $('#' + wid);
|
||||
var childView = data.contains_view;
|
||||
|
||||
// if nothing found => wait
|
||||
if (!$div.length) {
|
||||
setTimeout(function () {
|
||||
vis.binds.swipe.carousel(wid, view, data, style);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (view === data.contains_view) {
|
||||
$div.find('.vis-widget-body').attr('data-vis-contains', '');
|
||||
$div.html('<div style="color: red">' + _('Cannot show itself') + '</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (vis.editMode) return;
|
||||
|
||||
vis.binds.swipe.loadRoundScripts(function () {
|
||||
vis.binds.swipe.applyCarousel($div, childView);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script id="tplSwipe"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="swipe"
|
||||
data-vis-prev='<img src="widgets/swipe/img/Prev_Swipe.png"></img>'
|
||||
data-vis-name="swipe Navigation"
|
||||
data-vis-attrs="duration;"
|
||||
data-vis-attrs0="group.left;left_nav_view;left_in_effect[slide];left_in_eff_opt[right];left_out_effect[slide];left_out_eff_opt[left];"
|
||||
data-vis-attrs1="group.right;right_nav_view;right_in_effect[slide];right_in_eff_opt[left];right_out_effect[slide];right_out_eff_opt[right];">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="display: none; width: 160px; height: 64px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.swipe.swipeNav(this.data.wid, this.view, this.data, this.style) %>>
|
||||
<div class="vis-widget-body">
|
||||
<div style="font-weight: bold" class="translate-it">Swipe Navigation</div>
|
||||
<table>
|
||||
<tr><td style="width: 40px" class="translate-it">left</td><td style="width: 20px">></td><td><%= this.data.attr('left_nav_view') %></td></tr>
|
||||
<tr><td style="width: 40px" class="translate-it">right</td><td style="width: 20px"><</td><td><%= this.data.attr('right_nav_view') %></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script id="tplCarousel"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="swipe"
|
||||
data-vis-prev='<img src="widgets/swipe/img/Prev_Carousel.png"></img>'
|
||||
data-vis-name="Carousel"
|
||||
data-vis-attrs="contains_view/views">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 300px; height: 100px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.swipe.carousel(this.data.wid, this.view, this.data, this.style) %>>
|
||||
<% if (vis.editMode) { %>
|
||||
<div class="editmode-helper" />
|
||||
<% } %>
|
||||
<div data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body vis-view-container"></div>
|
||||
</div>
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/doc.css" />
|
||||
<title>Dokumentation Widget-Set swipe</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3><a name="tplswipe">swipe Navigation</a></h3>
|
||||
|
||||
Dieses Widget ermöglicht Navigation durch Wisch-Gesten
|
||||
|
||||
<h4>Attribute</h4>
|
||||
<dd>
|
||||
|
||||
<dt>Left-nav_view</dt>
|
||||
<dd>Name der View beim Wischen nach Links</dd>
|
||||
|
||||
<dt>Right-nav_view</dt>
|
||||
<dd>Name der View beim Wischen nach Rechts</dd>
|
||||
|
||||
<dt>???-out effect</dt>
|
||||
<dd>Effect der auszublendenen View </dd>
|
||||
|
||||
<dt>???-in effect</dt>
|
||||
<dd>Effect der einzublendenen View </dd>
|
||||
|
||||
<dt>???-???-opt </dt>
|
||||
<dd>ggf. Optionen für den Effect</dd>
|
||||
|
||||
<dt>duration</dt>
|
||||
<dd>Dauer der Animation in ms</dd>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<dt>Hinweis:</dt>
|
||||
<dd>Wenn auf der View zb. Slider vorhanden sind, kann man diese mit dem Eintrag "noSwipe" bei "CSS Klasse:" von der Swipe erkennung ausschliesen</dd>
|
||||
<img src="img/noSwipe.jpg">
|
||||
|
||||
|
||||
</dd>
|
||||
<hr/>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -0,0 +1,182 @@
|
||||
/**
|
||||
* jQuery Roundabout Shapes v2
|
||||
* http://fredhq.com/projects/roundabout-shapes/
|
||||
*
|
||||
* Provides additional paths along which items can move for the
|
||||
* jQuery Roundabout plugin (v1.0+).
|
||||
*
|
||||
* Terms of Use // jQuery Roundabout Shapes
|
||||
*
|
||||
* Open source under the BSD license
|
||||
*
|
||||
* Copyright (c) 2009-2011, Fred LeBlanc
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
*
|
||||
* - Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* - Redistributions in binary form must reproduce the above
|
||||
* copyright notice, this list of conditions and the following
|
||||
* disclaimer in the documentation and/or other materials provided
|
||||
* with the distribution.
|
||||
* - Neither the name of the author nor the names of its contributors
|
||||
* may be used to endorse or promote products derived from this
|
||||
* software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
||||
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
||||
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
||||
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
||||
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
||||
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
||||
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
* POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
jQuery.extend(jQuery.roundaboutShapes,
|
||||
{
|
||||
theJuggler: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: Math.tan(Math.exp(Math.log(r)) + a) / (t - 1),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
figure8: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r * 2 + a),
|
||||
y: (Math.sin(r + Math.PI/2 + a) / 8) * t,
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
waterWheel: function(r, a, t) {
|
||||
return {
|
||||
x: (Math.sin(r + Math.PI/2 + a) / 8) * t,
|
||||
y: Math.sin(r + a) / (Math.PI/2),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
square: function(r, a, t) {
|
||||
var sq_x, sq_y, sq_z;
|
||||
|
||||
if (r <= Math.PI/2) {
|
||||
sq_x = (2/Math.PI) * r;
|
||||
sq_y = -(2/Math.PI) * r + 1;
|
||||
sq_z = -(1/Math.PI) * r + 1;
|
||||
} else if (r > Math.PI/2 && r <= Math.PI) {
|
||||
sq_x = -(2/Math.PI) * r + 2;
|
||||
sq_y = -(2/Math.PI) * r + 1;
|
||||
sq_z = -(1/Math.PI) * r + 1;
|
||||
} else if (r > Math.PI && r <= (3 * Math.PI) / 2) {
|
||||
sq_x = -(2/Math.PI) * r + 2;
|
||||
sq_y = (2/Math.PI) * r - 3;
|
||||
sq_z = (1/Math.PI) * r - 1;
|
||||
} else {
|
||||
sq_x = (2/Math.PI) * r - 4;
|
||||
sq_y = (2/Math.PI) * r - 3;
|
||||
sq_z = (1/Math.PI) * r - 1;
|
||||
}
|
||||
|
||||
return {
|
||||
x: sq_x,
|
||||
y: sq_y * t,
|
||||
z: sq_z,
|
||||
scale: sq_z
|
||||
};
|
||||
},
|
||||
conveyorBeltLeft: function(r, a, t) {
|
||||
return {
|
||||
x: -Math.cos(r + a),
|
||||
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
|
||||
z: (Math.sin(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
conveyorBeltRight: function(r, a, t) {
|
||||
return {
|
||||
x: Math.cos(r + a),
|
||||
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
|
||||
z: (Math.sin(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
goodbyeCruelWorld: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: (Math.tan(r + 3*Math.PI/2 + a) / 8) * (t + 0.5),
|
||||
z: (Math.sin(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
diagonalRingLeft: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: -Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
diagonalRingRight: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
rollerCoaster: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: Math.sin((2 + t) * r),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
tearDrop: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: -Math.sin(r/2 + t) + 0.35,
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
tickingClock: function(r, a, t) {
|
||||
return {
|
||||
x: Math.cos(r + a - Math.PI/2),
|
||||
y: Math.sin(r + a - Math.PI/2),
|
||||
z: Math.cos(r),
|
||||
scale: Math.cos(r) + 0.5
|
||||
}
|
||||
},
|
||||
flurry: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r * 3 + a),
|
||||
y: (Math.cos(r + Math.PI/2 + a) / 2) * t,
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
nowSlide: function(r, a, t) {
|
||||
return {
|
||||
x: Math.tan(r * 2 + a) * 0.5,
|
||||
y: Math.cos(r*2 + t) / 6,
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
},
|
||||
risingEssence: function(r, a, t) {
|
||||
return {
|
||||
x: Math.sin(r + a),
|
||||
y: Math.tan((2 + t) * r),
|
||||
z: (Math.cos(r + a) + 1) / 2,
|
||||
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
|
||||
};
|
||||
}
|
||||
});
|
||||
+41
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,88 @@
|
||||
<link rel="stylesheet" href="widgets/tabs/styles/jquery.sliderTabs.css">
|
||||
<script src="widgets/tabs/jquery.sliderTabs.js"></script>
|
||||
<script type="text/javascript">
|
||||
if (vis.editMode) {
|
||||
// Add words for widgets
|
||||
$.extend(true, systemDictionary, {
|
||||
"show_tabs": {"en": "Tabs count", "de": "Tabs-Anzahl", "ru": "Количество закладок"},
|
||||
"title_tab_": {"en": "Tab title", "de": "Tab-Titel", "ru": "Заголовок закладки"},
|
||||
"contains_view_": {"en": "Contains view", "de": "View für Tab", "ru": "Имя страницы"}
|
||||
});
|
||||
}
|
||||
|
||||
vis.binds.tabs = {
|
||||
stabs: function (view, wid, data) {
|
||||
var $wid = $('#' + wid);
|
||||
var id = $wid.attr('id');
|
||||
if (id && id.match(/_removed$/)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$wid.length) {
|
||||
return setTimeout(function () {
|
||||
vis.binds.tabs.stabs(view, wid, data);
|
||||
}, 100);
|
||||
}
|
||||
// wait till widget will be visible
|
||||
if (!$wid.is(':visible')) {
|
||||
return setTimeout(function () {
|
||||
vis.binds.tabs.stabs(view, wid, data);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
$wid.find('.tabs-container').remove();
|
||||
var i;
|
||||
var text = '<span style="width: 100%; height: 100%" class="tabs-container">\n';
|
||||
text += '<ul>\n';
|
||||
|
||||
data.show_tabs = parseInt(data.show_tabs, 10) || 1;
|
||||
|
||||
for (i = 1; i <= data.show_tabs; i++) {
|
||||
text += '<li><a href="#' + wid + '_st' + i + '">' + (data['title_tab_' + i] || '') + '</a></li>';
|
||||
}
|
||||
text += '</ul>';
|
||||
|
||||
for (i = 1; i <= data.show_tabs; i++) {
|
||||
text += '<div id="' + wid + '_st' + i + '" style="padding-left:0; height:100%">\n';
|
||||
if (vis.editMode) text += ' <div class="editmode-helper" />\n';
|
||||
text += ' <div data-vis-contains="' + (data['contains_view_' + i] || '') + '" class="vis-widget-body vis-view-container"></div>\n';
|
||||
text += '</div>\n';
|
||||
}
|
||||
text += '</span>';
|
||||
$wid.html(text);
|
||||
$wid.find('.tabs-container').sliderTabs({
|
||||
height: $wid.height() - 5
|
||||
});
|
||||
|
||||
vis.updateContainers(view, view);
|
||||
|
||||
if (vis.editMode && vis.activeWidgets.indexOf(wid) !== -1) {
|
||||
$wid.resizable('destroy');
|
||||
vis.resizable(vis.activeViewDiv, vis.activeView, $wid);
|
||||
}
|
||||
|
||||
$wid.data('destroy', function (id, $widget) {
|
||||
try {
|
||||
$widget.resizable('destroy');
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script type="text/ejs"
|
||||
id="tplSTab"
|
||||
class="vis-tpl"
|
||||
data-vis-prev='<div id="prev_tplSTab" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev ui-selectee" style="top: 76px; left: 23px; width: 138px; height: 121px; position: absolute;" > <div class="vis-widget-prev-body"> <span style="width:100%;height:100%" class="ui-slider-tabs"> <!-- Unordered list representing the tabs --> <div class="ui-slider-tabs-list-wrapper"><div class="ui-slider-tabs-list-container" style="margin: 0px 35px;"><ul class="ui-slider-tabs-list" style="margin-left: 0px; width: 166px;"> <li class="selected" style="height: 32px;"><a href="#w00016_st1" style="height: 32px;">Tab</a></li><li style="height: 32px;"><a href="#w00016_st2" style="height: 32px;">Tab</a></li><li style="height: 32px;"><a href="#w00016_st3" style="height: 32px;">Tab</a></li></ul><a href="#" class="ui-slider-left-arrow edge" style="width: 35px; height: 32px;"><div></div></a><a href="#" class="ui-slider-right-arrow" style="width: 35px; height: 32px;"><div></div></a></div></div><div class="ui-slider-tabs-content-container" style="height: 86px;"><div style="padding-left: 0px; height: 100%; display: block; left: 0px; width: 126px;" class="ui-slider-tab-content selected"> <div class="editmode-helper"></div> <div data-vis-contains="hallo" class="vis-widget-body vis-view-container"></div> </div><div style="padding-left: 0px; height: 100%; left: 138px; width: 126px;" class="ui-slider-tab-content"> <div class="editmode-helper"></div> <div data-vis-contains="" class="vis-widget-body vis-view-container"></div> </div><div style="padding-left: 0px; height: 100%; left: 138px; width: 126px;" class="ui-slider-tab-content"> <div class="editmode-helper"></div> <div data-vis-contains="" class="vis-widget-body vis-view-container"></div> </div></div></span> </div> </div>'
|
||||
data-vis-set="tabs"
|
||||
data-vis-update-style="true"
|
||||
data-vis-name="SliderTabs"
|
||||
data-vis-attrs="height[100]/slider,20,1000,1;show_tabs[1]/slider,1,8,1;title_tab_(1-show_tabs)[Tab];contains_view_(1-show_tabs)/views">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 250px; height: 250px;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="vis-widget-body">
|
||||
<% vis.binds.tabs.stabs(this.view, this.data.attr('wid'), data) %>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@@ -0,0 +1,813 @@
|
||||
/*
|
||||
* jQuery SliderTabs v1.1
|
||||
* http://lopatin.github.com/sliderTabs
|
||||
*
|
||||
* Copyright 2012, Alex Lopatin
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
(function( $ ){
|
||||
/*
|
||||
* The sliderTabs tabs class
|
||||
*/
|
||||
$.sliderTabs = function(container, options){
|
||||
var plugin = this;
|
||||
|
||||
var defaults = {
|
||||
autoplay: false,
|
||||
tabArrowWidth: 35,
|
||||
classes: {
|
||||
leftTabArrow: '',
|
||||
panel: '',
|
||||
panelActive: '',
|
||||
panelsContainer: '',
|
||||
rightTabArrow: '',
|
||||
tab: '',
|
||||
tabActive: '',
|
||||
tabsList: ''
|
||||
},
|
||||
defaultTab: 1,
|
||||
height: null,
|
||||
indicators: false,
|
||||
mousewheel: true,
|
||||
position: "top",
|
||||
panelArrows: false,
|
||||
panelArrowsShowOnHover: false,
|
||||
tabs: true,
|
||||
tabHeight: 30,
|
||||
tabArrows: true,
|
||||
tabSlideLength: 100,
|
||||
tabSlideSpeed: 200,
|
||||
transition: 'slide',
|
||||
transitionEasing: 'easeOutCubic',
|
||||
transitionSpeed: 500,
|
||||
width: null
|
||||
};
|
||||
|
||||
// jQuery objects of important elements
|
||||
var $container = $(container),
|
||||
$indicators,
|
||||
$tabsList,
|
||||
$contentDivs,
|
||||
$tabsListContainer,
|
||||
$tabsListWrapper,
|
||||
$contentDivsContainer,
|
||||
$leftTabArrow,
|
||||
$rightTabArrow,
|
||||
$leftPanelArrow,
|
||||
$rightPanelArrow;
|
||||
|
||||
// Locks to stop out of sync behavior
|
||||
var selectLock = false,
|
||||
heightLock = true;
|
||||
|
||||
var settings, minMargin;
|
||||
|
||||
// Index of currently selected tab
|
||||
plugin.selectedTab = defaults.defaultTab;
|
||||
|
||||
plugin.init = function(){
|
||||
settings = plugin.settings = $.extend({}, defaults, options);
|
||||
$container.addClass('ui-slider-tabs');
|
||||
|
||||
/*
|
||||
* Rebuild structure of container
|
||||
*/
|
||||
$contentDivs = $container.children("div").addClass('ui-slider-tab-content').remove();
|
||||
|
||||
// Tabs
|
||||
$tabsList = $container.children("ul").addClass('ui-slider-tabs-list').remove();
|
||||
$tabsList.children("li").remove().appendTo($tabsList);
|
||||
plugin.count = $tabsList.children('li').length;
|
||||
$tabsListWrapper = $("<div class='ui-slider-tabs-list-wrapper'>");
|
||||
$tabsListContainer = $("<div class='ui-slider-tabs-list-container'>").append($tabsList).appendTo($tabsListWrapper);
|
||||
$tabsListContainer.find('li').css('height', settings.tabHeight+2);
|
||||
$tabsListContainer.find('li a').css('height', settings.tabHeight+2);
|
||||
|
||||
// Tab arrows
|
||||
$leftTabArrow = $("<a href='#' class='ui-slider-left-arrow'><div></div></a>").css({
|
||||
'width': settings.tabArrowWidth,
|
||||
'height': settings.tabHeight+2
|
||||
}).appendTo($tabsListContainer).click(function(e){
|
||||
plugin.slideTabs('right', settings.tabSlideLength);
|
||||
return false;
|
||||
});
|
||||
$rightTabArrow = $("<a href='#' class='ui-slider-right-arrow'><div></div></a>").css({
|
||||
'width': settings.tabArrowWidth,
|
||||
'height': settings.tabHeight+2
|
||||
}).appendTo($tabsListContainer).click(function(e){
|
||||
plugin.slideTabs('left', settings.tabSlideLength);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Content container
|
||||
$contentDivsContainer = $("<div class='ui-slider-tabs-content-container'>").append($contentDivs);
|
||||
|
||||
// Position the tabs on top or bottom
|
||||
if(settings.position == 'bottom')
|
||||
$container.append($contentDivsContainer).append($tabsListWrapper.addClass('bottom'));
|
||||
else
|
||||
$container.append($tabsListWrapper).append($contentDivsContainer);
|
||||
|
||||
|
||||
if(settings.width)
|
||||
$container.width(parseInt(settings.width));
|
||||
if(settings.height)
|
||||
$contentDivsContainer.height(parseInt(settings.height)- settings.tabHeight);
|
||||
|
||||
// Create and show indicators
|
||||
if(settings.indicators)
|
||||
plugin.showIndicators();
|
||||
|
||||
|
||||
// Select default tab
|
||||
plugin.selectTab(settings.defaultTab);
|
||||
plugin.slideTabs('left', 0);
|
||||
|
||||
reorderPanels();
|
||||
|
||||
resizePanels();
|
||||
|
||||
// When tab is clicked
|
||||
$container.delegate('.ui-slider-tabs-list li a', 'click', function(){
|
||||
if(!$(this).parent().hasClass('selected') && !selectLock){
|
||||
plugin.selectTab($(this).parent());
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// When indicator is clicked
|
||||
if($indicators)
|
||||
$indicators.delegate('.ui-slider-tabs-indicator', 'click', function(){
|
||||
if(!$(this).hasClass('selected') && !selectLock)
|
||||
plugin.selectTab($(this).index()+1);
|
||||
});
|
||||
|
||||
// Set classes
|
||||
$.each(settings.classes, function(i, c){
|
||||
switch(i){
|
||||
case 'leftTabArrow':
|
||||
$leftTabArrow.addClass(c);
|
||||
break;
|
||||
case 'rightTabArrow':
|
||||
$rightTabArrow.addClass(c);
|
||||
break;
|
||||
case 'panel':
|
||||
$contentDivs.addClass(c);
|
||||
break;
|
||||
case 'panelsContainer':
|
||||
$contentDivsContainer.addClass(c);
|
||||
break;
|
||||
case 'tab':
|
||||
$tabsList.find('li').addClass(c);
|
||||
break;
|
||||
case 'tabsList':
|
||||
$tabsList.addClass(c);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Panel arrows
|
||||
// Creates them if they don't exist
|
||||
if(settings.panelArrows)
|
||||
positionPanelArrows();
|
||||
|
||||
if(settings.panelArrowsShowOnHover){
|
||||
if($leftPanelArrow)
|
||||
$leftPanelArrow.addClass('showOnHover');
|
||||
if($rightPanelArrow)
|
||||
$rightPanelArrow.addClass('showOnHover');
|
||||
}
|
||||
|
||||
$contentDivsContainer.resize(positionPanelArrows);
|
||||
|
||||
// Make responsive to changes in dimensions
|
||||
$tabsListWrapper.resize(function(){
|
||||
resizeTabsList();
|
||||
resizePanels();
|
||||
});
|
||||
|
||||
// Resize content container height if inner panels change
|
||||
setInterval(function(){
|
||||
var $panel = $contentDivsContainer.children('.selected');
|
||||
if($panel.outerHeight() > $contentDivsContainer.outerHeight() && heightLock)
|
||||
resizeContentContainer($panel);
|
||||
}, 100);
|
||||
|
||||
resizeTabsList();
|
||||
|
||||
// Hide tabs wrapper if option if false
|
||||
if(!settings.tabs)
|
||||
$tabsListWrapper.hide();
|
||||
|
||||
// Auto play
|
||||
if(settings.autoplay)
|
||||
setInterval(plugin.next, settings.autoplay);
|
||||
|
||||
// Panel arrows
|
||||
|
||||
// Mousehweel
|
||||
$container.bind('mousewheel', function(event, delta, deltaX, deltaY) {
|
||||
if(delta > 0)
|
||||
plugin.next();
|
||||
else if(delta < 0)
|
||||
plugin.prev();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Public methods
|
||||
*/
|
||||
|
||||
// Select tab
|
||||
// param: tab is a tab index (1 ... n) or jQuery object of tab li element
|
||||
plugin.selectTab = function(tab){
|
||||
heightLock = false;
|
||||
|
||||
// Find $targetPanel, the panel to show
|
||||
var $clicked = (typeof tab === 'number') ? $tabsList.children("li:nth-child("+tab+")") : tab;
|
||||
var targetId = ($clicked.find('a').attr('href')).substr(1);
|
||||
var $targetPanel = $contentDivsContainer.children("#"+targetId);
|
||||
|
||||
// Update selected tab
|
||||
plugin.selectedTab = (typeof tab === 'number') ? tab : tab.index()+1;
|
||||
|
||||
// Resize the main contant container to the size of $targetPanel
|
||||
resizeContentContainer($targetPanel);
|
||||
|
||||
// Lock selections until transitions finished
|
||||
selectLock = true;
|
||||
|
||||
// Direction to slide panel on hide
|
||||
var direction = ($tabsList.find('.selected').index() < $clicked.index()) ? 'left' : 'right';
|
||||
|
||||
// Update selected classes
|
||||
$clicked.siblings().removeClass('selected');
|
||||
if(settings.classes.tabActive != '') $clicked.siblings().removeClass(settings.classes.tabActive);
|
||||
$clicked.addClass('selected').addClass(settings.classes.tabActive);
|
||||
|
||||
// Hide and show appropriate panels
|
||||
hidePanel($contentDivsContainer.children(".ui-slider-tab-content:visible"), direction);
|
||||
showPanel($targetPanel);
|
||||
|
||||
// Slide tabs so that they fit in $tabsListContainer
|
||||
fitTabInContainer($clicked);
|
||||
|
||||
// Select the proper indicator
|
||||
selectIndicator();
|
||||
};
|
||||
|
||||
// Select the next (right) panel
|
||||
plugin.next = function(){
|
||||
if(!selectLock){
|
||||
if(plugin.count === plugin.selectedTab)
|
||||
plugin.selectTab(1);
|
||||
else plugin.selectTab(plugin.selectedTab+1);
|
||||
}
|
||||
};
|
||||
|
||||
// Select the previous panel
|
||||
plugin.prev = function(){
|
||||
if(!selectLock){
|
||||
if(plugin.selectedTab === 1)
|
||||
plugin.selectTab(plugin.count);
|
||||
else plugin.selectTab(plugin.selectedTab-1);
|
||||
}
|
||||
};
|
||||
|
||||
// Slide tabs left/right within $tabsListContainer
|
||||
plugin.slideTabs = function(direction, length){
|
||||
var margin = parseInt($tabsList.css('margin-left'));
|
||||
var newMargin = margin;
|
||||
|
||||
// Reset 'edge' classes on tab arrows
|
||||
$leftTabArrow.removeClass('edge');
|
||||
$rightTabArrow.removeClass('edge');
|
||||
|
||||
// Calculate delta to slide by
|
||||
if(direction=='right') newMargin += length;
|
||||
else if(direction=='left') newMargin -= length;
|
||||
if(newMargin >= 0) {
|
||||
newMargin = 0;
|
||||
$leftTabArrow.addClass('edge');
|
||||
}
|
||||
else if(newMargin <= minMargin){
|
||||
newMargin = minMargin;
|
||||
$rightTabArrow.addClass('edge');
|
||||
}
|
||||
|
||||
// Animate
|
||||
$tabsList.animate({'margin-left': newMargin}, settings.tabSlideSpeed);
|
||||
};
|
||||
|
||||
// Show panel indicators
|
||||
// Create indicators if they don't exist yet
|
||||
plugin.showIndicators = function(){
|
||||
if(!$indicators){
|
||||
$indicators = $("<div class='ui-slider-tabs-indicator-container'>");
|
||||
for(var i = 0; i < $contentDivs.length; i++){
|
||||
$indicators.append("<div class='ui-slider-tabs-indicator'></div>");
|
||||
}
|
||||
$contentDivsContainer.append($indicators);
|
||||
}
|
||||
else
|
||||
$indicators.show();
|
||||
};
|
||||
|
||||
// Hide panel indicators
|
||||
plugin.hideIndicators = function(){
|
||||
if($indicators)
|
||||
$indicators.hide();
|
||||
};
|
||||
|
||||
// Show arrows that slide tabs left and right
|
||||
plugin.showTabArrows = function(){
|
||||
if(!settings.tabArrows)
|
||||
return;
|
||||
$leftTabArrow.show();
|
||||
$rightTabArrow.show();
|
||||
$tabsListContainer.css('margin', '0 '+settings.tabArrowWidth+'px');
|
||||
};
|
||||
|
||||
// Hide arrows that slide tabs left and right
|
||||
plugin.hideTabArrows = function(){
|
||||
$leftTabArrow.hide();
|
||||
$rightTabArrow.hide();
|
||||
$tabsListContainer.css('margin', '0');
|
||||
};
|
||||
|
||||
// Show panel arrows
|
||||
plugin.showPanelArrows = function(){
|
||||
if($leftPanelArrow) $leftPanelArrow.show();
|
||||
if($rightPanelArrow) $rightPanelArrow.show();
|
||||
};
|
||||
|
||||
// Hide panel arrows
|
||||
plugin.hidePanelArrows = function(){
|
||||
if($leftPanelArrow) $leftPanelArrow.hide();
|
||||
if($rightPanelArrow) $rightPanelArrow.hide();
|
||||
};
|
||||
|
||||
/*
|
||||
* Private methods
|
||||
*/
|
||||
|
||||
// Add the selected class to the plugin.selectedTab tab. Remove from all others.
|
||||
var selectIndicator = function(){
|
||||
if(settings.indicators && $indicators){
|
||||
var $indicator = $indicators.children("div:nth-child("+plugin.selectedTab+")");
|
||||
$indicator.siblings().removeClass('selected');
|
||||
$indicator.addClass('selected');
|
||||
}
|
||||
};
|
||||
|
||||
// Slide tabs inside of $tabsListContainer so that the selected one fits inside
|
||||
var fitTabInContainer = function(tab){
|
||||
var tabOffset = tab.offset(),
|
||||
containerOffset = $tabsListContainer.offset(),
|
||||
leftOffset = tabOffset.left - containerOffset.left,
|
||||
rightOffset = (containerOffset.left + $tabsListContainer.outerWidth()) - (tabOffset.left + tab.outerWidth() );
|
||||
|
||||
if(leftOffset < 0)
|
||||
plugin.slideTabs('right', -leftOffset);
|
||||
else if(rightOffset < 0)
|
||||
plugin.slideTabs('left', -rightOffset);
|
||||
};
|
||||
|
||||
// Reposition content panels so that they are ready to be transitioned in and out.
|
||||
// This depends on whether the transition is set to slide or fade
|
||||
var reorderPanels = function(){
|
||||
// Position content divs
|
||||
if(settings.transition == 'slide')
|
||||
// Move panels left/right basedon their index relative to the selected panel
|
||||
$tabsList.children('li').each(function(index, el){
|
||||
var selectedIndex = $tabsList.children('.selected').index(),
|
||||
thisIndex = $(el).index();
|
||||
var panel = $contentDivsContainer.children('#'+$(el).find('a').attr('href').substr(1));
|
||||
if(selectedIndex < thisIndex)
|
||||
panel.css({left: $contentDivsContainer.width()+'px'});
|
||||
else if(selectedIndex > thisIndex)
|
||||
panel.css({left: '-'+$contentDivsContainer.width()+'px'});
|
||||
else
|
||||
panel.addClass(settings.classes.panelActive);
|
||||
});
|
||||
|
||||
if(settings.transition == 'fade')
|
||||
// Set opacity to correct value for non selected panels.
|
||||
$tabsList.children('li').each(function(index, el){
|
||||
var selectedIndex = $tabsList.children('.selected').index(),
|
||||
thisIndex = $(el).index();
|
||||
var panel = $contentDivsContainer.children('#'+$(el).find('a').attr('href').substr(1));
|
||||
if(selectedIndex != thisIndex)
|
||||
panel.css({opacity: 0});
|
||||
else
|
||||
panel.addClass(settings.classes.panelActive);
|
||||
});
|
||||
};
|
||||
|
||||
// Object determining css properties to be animated to based on various actions, transitions, and directions
|
||||
var panelAnimationCSS = function(width){
|
||||
return {
|
||||
hide: {
|
||||
slideleft: {
|
||||
left: '-'+width+'px'
|
||||
},
|
||||
slideright: {
|
||||
left: width+'px'
|
||||
},
|
||||
fade: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
show: {
|
||||
slide: {
|
||||
left: 0
|
||||
},
|
||||
fade: {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Transition out the passed in panel.
|
||||
// param: panel is the jQuery object of the panel to be hidden
|
||||
// direction is either 'left' or 'right' for sliding transitions
|
||||
var hidePanel = function(panel, direction){
|
||||
// Calculate correct key in panelAnimationCSS
|
||||
if(settings.transition == 'slide')
|
||||
var trans = 'slide'+direction;
|
||||
else var trans = settings.transition;
|
||||
|
||||
// Animate the panel out
|
||||
panel.animate(panelAnimationCSS($contentDivsContainer.width())['hide'][trans], settings.transitionSpeed, settings.transitionEasing, function(){
|
||||
panel.hide();
|
||||
panel.removeClass('selected');
|
||||
//if(settings.classes.panelActive != '') panel.removeClass(settings.classes.panelActive);
|
||||
selectLock = false;
|
||||
reorderPanels();
|
||||
});
|
||||
};
|
||||
|
||||
// Transition in the parameter panel
|
||||
// param: panel is the jQuery object of the panel to be shown
|
||||
var showPanel = function(panel){
|
||||
// Show first
|
||||
panel.show();
|
||||
panel.addClass(settings.classes.panelActive).addClass('selected');
|
||||
|
||||
// Then animate css properties
|
||||
panel.animate(panelAnimationCSS($contentDivsContainer.width())['show'][settings.transition], settings.transitionSpeed, settings.transitionEasing, function(){
|
||||
selectLock = false;
|
||||
heightLock = true;
|
||||
reorderPanels();
|
||||
});
|
||||
};
|
||||
|
||||
// Animate the height of the content container to height target
|
||||
// params: target (int) is the new height
|
||||
var resizeContentContainer = function(target){
|
||||
if(!settings.height)
|
||||
$contentDivsContainer.animate({
|
||||
height: actualHeight(target)
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Position the panel arrows
|
||||
var positionPanelArrows = function(){
|
||||
if(settings.panelArrows){
|
||||
// Initialize them if you need to
|
||||
if(!$leftPanelArrow && !$rightPanelArrow){
|
||||
$leftPanelArrow = $("<div class='ui-slider-tabs-leftPanelArrow'>").click(function(){
|
||||
plugin.prev();
|
||||
});
|
||||
$rightPanelArrow = $("<div class='ui-slider-tabs-rightPanelArrow'>").click(function(){
|
||||
plugin.next();
|
||||
});
|
||||
|
||||
$leftPanelArrow.appendTo($contentDivsContainer);
|
||||
$rightPanelArrow.appendTo($contentDivsContainer);
|
||||
}
|
||||
|
||||
// Set correct CSS 'top' attribute of each panel arrow
|
||||
$rightPanelArrow.css({
|
||||
"top": $contentDivsContainer.height()/2 - $rightPanelArrow.outerHeight()/2
|
||||
});
|
||||
$leftPanelArrow.css({
|
||||
"top": $contentDivsContainer.height()/2 - $leftPanelArrow.outerHeight()/2
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Change the width of $tabsList to the sum of the outer widths of all tabs
|
||||
var resizeTabsList = function(){
|
||||
// Calculate total width
|
||||
var width = 0;
|
||||
$tabsList.children().each(function(index, element){
|
||||
width += $(element).outerWidth(true);
|
||||
});
|
||||
// Set new width of $tabsList
|
||||
$tabsList.width(width);
|
||||
|
||||
// Update minMargin. Hide tab arrows if no overflow
|
||||
if($tabsListContainer.width() < width && settings.tabArrows){
|
||||
plugin.showTabArrows();
|
||||
minMargin = $tabsListContainer.width() - width;
|
||||
}
|
||||
else plugin.hideTabArrows();
|
||||
}
|
||||
|
||||
// Resize indiviual panels to the width of the new container
|
||||
var resizePanels = function(){
|
||||
$contentDivs.width($contentDivsContainer.width() - ($contentDivs.outerWidth() - $contentDivs.width()));
|
||||
};
|
||||
|
||||
// Get height of a hidden element
|
||||
var actualHeight = function(element){
|
||||
var prevCSS = {
|
||||
'display': element.css('display'),
|
||||
'left': element.css('left'),
|
||||
'position': element.css('position')
|
||||
};
|
||||
element.css({
|
||||
'display': 'normal',
|
||||
'left': -5000,
|
||||
'position': 'absolute'
|
||||
});
|
||||
var height = element.outerHeight();
|
||||
element.css(prevCSS);
|
||||
return height;
|
||||
};
|
||||
|
||||
|
||||
// Initialize the plugin
|
||||
plugin.init();
|
||||
};
|
||||
|
||||
/*
|
||||
* Handle input. Call public functions and initializers
|
||||
*/
|
||||
$.fn.sliderTabs = function( data ) {
|
||||
return this.each(function(){
|
||||
var _this = $(this),
|
||||
plugin = _this.data('sliderTabs');
|
||||
|
||||
// Method calling logic
|
||||
if (!plugin) {
|
||||
// If no plugin, initialize it
|
||||
plugin = new $.sliderTabs(this, data);
|
||||
_this.data('sliderTabs', plugin);
|
||||
return plugin;
|
||||
}
|
||||
if (plugin.methods[data]){
|
||||
// If plugin exists, call a public method
|
||||
return plugin.methods[ data ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
}
|
||||
});
|
||||
};
|
||||
})( jQuery );
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Additional easing functions
|
||||
* Taken from jQuery UI source code
|
||||
*
|
||||
* https://github.com/jquery/jquery-ui
|
||||
*/
|
||||
|
||||
$.extend($.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
//alert($.easing.default);
|
||||
return $.easing[$.easing.def](x, t, b, c, d);
|
||||
},
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* The following is the jQuery Mousewheel plugin. Full credit goes to
|
||||
* Brandon Aaron. (https://github.com/brandonaaron/jquery-mousewheel)
|
||||
* /
|
||||
|
||||
|
||||
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.6
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
if ($.event.fixHooks) {
|
||||
for ( var i=types.length; i; ) {
|
||||
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
|
||||
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
|
||||
|
||||
// New school multidimensional scroll (touchpads) deltas
|
||||
deltaY = delta;
|
||||
|
||||
// Gecko
|
||||
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaY = 0;
|
||||
deltaX = -1*delta;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,225 @@
|
||||
.ui-slider-tabs{
|
||||
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0 0 -1px 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom{
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
.ui-slider-tabs-list-container{
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-slider-tabs-list{
|
||||
padding: 0;
|
||||
margin: 0 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-slider-tabs-list li{
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
border-right: 1px solid #cfcfcf;
|
||||
border-top: 1px solid #cfcfcf;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
|
||||
background: #000000; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #000000 0%, #000000 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #000000 0%,#000000 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #000000 0%,#000000 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #000000 0%,#000000 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-tabs-list li a{
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
text-decoration: none;
|
||||
color: #BABABA;
|
||||
/* text-shadow: 0px 1px 0px #fff;*/
|
||||
margin: 0;
|
||||
}
|
||||
.ui-slider-tabs-list li a:hover{
|
||||
color: #BABABA;
|
||||
}
|
||||
.ui-slider-tabs-list li.selected{
|
||||
border-bottom-color: #000;
|
||||
border-top-color: #cfcfcf;
|
||||
background: #3B3B3B; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #3B3B3B 0%, #3B3B3B 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3B3B3B), color-stop(100%,#3B3B3B)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #3B3B3B 0%,#3B3B3B 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #3B3B3B 0%,#3B3B3B 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #3B3B3B 0%,#3B3B3B 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #3B3B3B 0%,#3B3B3B 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3B3B3B', endColorstr='#3B3B3B',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-tabs-list li.selected{
|
||||
border-top-color: #000;
|
||||
border-bottom-color: #cfcfcf;
|
||||
}
|
||||
.ui-slider-tabs-list li.selected a{
|
||||
cursor: default;
|
||||
color: #BABABA;
|
||||
}
|
||||
.ui-slider-tabs-list li:first-of-type{
|
||||
border-left: 1px solid #cfcfcf;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container{
|
||||
position: relative;
|
||||
border: 1px solid #cfcfcf;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.ui-slider-tab-content{
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ui-slider-left-arrow, .ui-slider-right-arrow, .ui-slider-left-arrow.edge:hover, .ui-slider-right-arrow.edge:hover{
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #cfcfcf;
|
||||
|
||||
background: #000000; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #000000 0%, #000000 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #000000 0%,#000000 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #000000 0%,#000000 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #000000 0%,#000000 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-left-arrow:hover, .ui-slider-right-arrow:hover{
|
||||
background: #BABABA; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #BABABA 0%, #BABABA 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BABABA), color-stop(100%,#BABABA)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #BABABA 0%,#BABABA 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #BABABA 0%,#BABABA 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #BABABA 0%,#BABABA 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #BABABA 0%,#BABABA 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BABABA', endColorstr='#BABABA',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.ui-slider-left-arrow{
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 2px 0px 1px rgba(0,0,0,.06);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ui-slider-left-arrow div{
|
||||
background-image: url('images/leftArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: inherit;
|
||||
}
|
||||
.ui-slider-left-arrow.edge div{
|
||||
opacity: .25;
|
||||
}
|
||||
.ui-slider-left-arrow.edge{
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-left-arrow{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.ui-slider-right-arrow{
|
||||
top: 0;
|
||||
right: 0;
|
||||
box-shadow: -2px 0px 1px rgba(0,0,0,.06);
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.ui-slider-right-arrow div{
|
||||
background-image: url('images/rightArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: inherit;
|
||||
}
|
||||
.ui-slider-right-arrow.edge div{
|
||||
opacity: .25;
|
||||
}
|
||||
.ui-slider-right-arrow.edge{
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-right-arrow{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-indicator-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-indicator{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-image: url('images/indicator.png');
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-slider-tabs-indicator.selected{
|
||||
background-image: url('images/indicatorActive.png');
|
||||
}
|
||||
|
||||
.ui-slider-tabs-leftPanelArrow{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
background-image: url('images/leftPanelArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
filter:alpha(opacity=5);
|
||||
}
|
||||
|
||||
.ui-slider-tabs-rightPanelArrow{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
background-image: url('images/rightPanelArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
filter:alpha(opacity=5);
|
||||
}
|
||||
|
||||
.ui-slider-tabs-rightPanelArrow.showOnHover, .ui-slider-tabs-leftPanelArrow.showOnHover{
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container:hover .ui-slider-tabs-rightPanelArrow.showOnHover,.ui-slider-tabs-content-container:hover .ui-slider-tabs-leftPanelArrow.showOnHover{
|
||||
opacity: .5;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container .ui-slider-tabs-rightPanelArrow:hover,.ui-slider-tabs-content-container .ui-slider-tabs-leftPanelArrow:hover,.ui-slider-tabs-content-container .ui-slider-tabs-rightPanelArrow.showOnHover:hover,.ui-slider-tabs-content-container .ui-slider-tabs-leftPanelArrow.showOnHover:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
.ui-slider-tabs{
|
||||
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0 0 -1px 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom{
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
.ui-slider-tabs-list-container{
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-slider-tabs-list{
|
||||
padding: 0;
|
||||
margin: 0 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-slider-tabs-list li{
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
border-right: 1px solid #cfcfcf;
|
||||
border-top: 1px solid #cfcfcf;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
|
||||
background: #fcfcfc; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-tabs-list li a{
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.ui-slider-tabs-list li a:hover{
|
||||
color: #000;
|
||||
}
|
||||
.ui-slider-tabs-list li.selected{
|
||||
border-bottom-color: #fff;
|
||||
border-top-color: #cfcfcf;
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#ffffff 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-tabs-list li.selected{
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #cfcfcf;
|
||||
}
|
||||
.ui-slider-tabs-list li.selected a{
|
||||
cursor: default;
|
||||
color: #000;
|
||||
}
|
||||
.ui-slider-tabs-list li:first-of-type{
|
||||
border-left: 1px solid #cfcfcf;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container{
|
||||
position: relative;
|
||||
border: 1px solid #cfcfcf;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ui-slider-tab-content{
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ui-slider-left-arrow, .ui-slider-right-arrow, .ui-slider-left-arrow.edge:hover, .ui-slider-right-arrow.edge:hover{
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #cfcfcf;
|
||||
|
||||
background: #fcfcfc; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
.ui-slider-left-arrow:hover, .ui-slider-right-arrow:hover{
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#ffffff 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.ui-slider-left-arrow{
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 2px 0px 1px rgba(0,0,0,.06);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ui-slider-left-arrow div{
|
||||
background-image: url('images/leftArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: inherit;
|
||||
}
|
||||
.ui-slider-left-arrow.edge div{
|
||||
opacity: .25;
|
||||
}
|
||||
.ui-slider-left-arrow.edge{
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-left-arrow{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.ui-slider-right-arrow{
|
||||
top: 0;
|
||||
right: 0;
|
||||
box-shadow: -2px 0px 1px rgba(0,0,0,.06);
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.ui-slider-right-arrow div{
|
||||
background-image: url('images/rightArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: inherit;
|
||||
}
|
||||
.ui-slider-right-arrow.edge div{
|
||||
opacity: .25;
|
||||
}
|
||||
.ui-slider-right-arrow.edge{
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-slider-tabs-list-wrapper.bottom .ui-slider-right-arrow{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-indicator-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-indicator{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-image: url('images/indicator.png');
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-slider-tabs-indicator.selected{
|
||||
background-image: url('images/indicatorActive.png');
|
||||
}
|
||||
|
||||
.ui-slider-tabs-leftPanelArrow{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
background-image: url('images/leftPanelArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
filter:alpha(opacity=5);
|
||||
}
|
||||
|
||||
.ui-slider-tabs-rightPanelArrow{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
background-image: url('images/rightPanelArrow.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
-moz-opacity: 0.5;
|
||||
filter:alpha(opacity=5);
|
||||
}
|
||||
|
||||
.ui-slider-tabs-rightPanelArrow.showOnHover, .ui-slider-tabs-leftPanelArrow.showOnHover{
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container:hover .ui-slider-tabs-rightPanelArrow.showOnHover,.ui-slider-tabs-content-container:hover .ui-slider-tabs-leftPanelArrow.showOnHover{
|
||||
opacity: .5;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-slider-tabs-content-container .ui-slider-tabs-rightPanelArrow:hover,.ui-slider-tabs-content-container .ui-slider-tabs-leftPanelArrow:hover,.ui-slider-tabs-content-container .ui-slider-tabs-rightPanelArrow.showOnHover:hover,.ui-slider-tabs-content-container .ui-slider-tabs-leftPanelArrow.showOnHover:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,72 @@
|
||||
<script type="text/javascript">
|
||||
//jQuery.extend(true, vis.binds, {
|
||||
vis.binds.debug = {
|
||||
history: function (el, id) {
|
||||
localData.uiState.bind('_' + id+".Value", function( e, newVal, oldVal ) {
|
||||
var timestamp = localData.uiState["_" + id + '.Timestamp'];
|
||||
var ack = localData.uiState['_' + id + '.Ack'];
|
||||
var type = typeof newVal;
|
||||
|
||||
var row = "<tr><td width='70px'>"+type+"</td><td style='padding-right: 18px'>"+JSON.stringify(newVal)+"</td><td width='100px'>"+timestamp+"</td><td width='40px'>"+ack+"</td></tr>";
|
||||
jQuery(el).parent().find(".debugHistoryTable tr:first").after(row);
|
||||
});
|
||||
}
|
||||
};
|
||||
//});
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/ejs" id="tplJqhm" class="dashui-tpl" data-dashui-set="dev" data-dashui-name="Debug uiState" data-dashui-attrs="">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" id="<%= this.data.attr("wid") %>" style="border:1px solid black; background-color:#333; color: #eee; font-family: courier; font-size:11px; padding: 4px; max-height:600px;">
|
||||
<div class="dashui-widget-body" style="overflow-y: scroll; overflow-x: hidden;">
|
||||
<h3 style="margin-bottom:0px;">localData.uiState = {</h3>
|
||||
<table style="white-space: nowrap;">
|
||||
<% localData.uiState.each(function(i, obj) { %>
|
||||
<tr><td>"<%= obj %>":</td><td colspan="2"><%= JSON.stringify(localData.uiState.attr(obj/*.replace(/\./g, "\\.")*/)) %>,</td></tr>
|
||||
<% }) %>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/ejs" id="tplDebugUiStateSingle" class="dashui-tpl" data-dashui-set="dev" data-dashui-name="Debug uiState[id]" data-dashui-attrs="hm_id">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" id="<%= this.data.attr("wid") %>" style="border:1px solid black; background-color:#333; color: #eee; font-family: courier; font-size:11px; padding: 4px; height:20px;width:960px">
|
||||
<div class="dashui-widget-body" style="overflow-y: scroll; overflow-x: hidden;">
|
||||
<% var obj = "_" + this.data.attr("hm_id") %>
|
||||
<table style="white-space: nowrap;">
|
||||
<tr><td>localData.uiState.<%= obj %> = </td><td colspan="2"><%= JSON.stringify({Value:localData.uiState.attr(obj+".Value"),Timestamp:localData.uiState.attr(obj+".Timestamp"),Certain:localData.uiState.attr(obj+".Certain"),LastChange:localData.uiState.attr(obj+".LastChange")}) %></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/ejs" id="tplDebugUiStateHistory" class="dashui-tpl" data-dashui-set="dev" data-dashui-name="Debug uiState[id] History" data-dashui-attrs="hm_id">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" id="<%= this.data.attr("wid") %>" style="border:1px solid black; background-color:#333; color: #eee; font-family: courier; font-size:11px; padding: 4px; height:320px;width:480px">
|
||||
<div class="dashui-widget-body" style="overflow-y: scroll; overflow-x: hidden;">
|
||||
<% var obj = "_" + this.data.attr("hm_id") %>
|
||||
<%= this.data.attr('hm_id') %>
|
||||
<table class="debugHistoryTable" style="white-space: nowrap;">
|
||||
<tr style="font-weight:bold;"><td widtd='70px'>typeof</td><td style='padding-right: 18px'>Value</td><td widtd='100px'>Timestamp</td><td widtd='40px'>Ack</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div <%= (el) -> vis.binds.debug.history(el, data.attr('hm_id')) %>></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/ejs" id="tplDebugSetState" class="dashui-tpl" data-dashui-set="dev" data-dashui-name="Debug setState" data-dashui-attrs="">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" id="<%= this.data.attr("wid") %>" style="border:1px solid black; background-color:#333; color: #eee; font-family: courier; font-size:11px; padding: 4px; max-height:400px;">
|
||||
<div class="dashui-widget-body" style="overflow-y: scroll; overflow-x: hidden;">
|
||||
<h3 style="margin-bottom:0px;">localData.setState = {</h3>
|
||||
<table>
|
||||
<% localData.setState.each(function(i, obj) { %>
|
||||
<% if (obj != 'nothing_selected') { %>
|
||||
<tr><td>"<%= obj %>":{</td><td>"Value":"<%= localData.setState.attr(obj + ".Value") %>",</td><td>"Timestamp":"<%= localData.setState.attr(obj + ".Timestamp") %>"}</td></tr>
|
||||
<% } %>
|
||||
<% }) %>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<style type="text/css">
|
||||
tr.homematic-servicemessage {
|
||||
height: 34px;
|
||||
}
|
||||
tr.homematic-servicemessage td {
|
||||
padding-right: 12px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
"use strict";
|
||||
|
||||
servConn.getStringtable(function (res) {
|
||||
// TODO - bind relies on this is already done. Reliable?
|
||||
localData.homematicStringtable = res;
|
||||
});
|
||||
|
||||
vis.binds.homematic = {
|
||||
serviceMessages: function (el) {
|
||||
|
||||
function appendRow(el, id, name, msg, ts, oper) {
|
||||
|
||||
if (oper == 7) {
|
||||
// Meldung kann bestätigt werden
|
||||
var button = '<button stlye="display:none;" data-hm-alarm="'+id+'" id="'+el.attr('id')+'_'+id+'">bestätigen</button>';
|
||||
} else {
|
||||
var button = "";
|
||||
}
|
||||
|
||||
el.append('<tr class="homematic-servicemessage">' +
|
||||
'<td class="homematic-servicemessage-device">'+name+'</td>' +
|
||||
'<td class="homematic-servicemessage-text">'+msg+'</td>' +
|
||||
'<td class="homematic-servicemessage-ts">'+ts+'</td>' +
|
||||
'<td class="homematic-servicemessage-button">'+button+'</td></tr>')
|
||||
.find('#'+el.attr('id')+'_'+id)
|
||||
.button({
|
||||
icons: {
|
||||
primary: "ui-icon-check"
|
||||
},
|
||||
text: false
|
||||
}).click(function () {
|
||||
//alert("receipt "+jQuery(this).attr('data-hm-alarm'));
|
||||
servConn.alarmReceipt(parseInt(jQuery(this).attr('data-hm-alarm'), 10));
|
||||
jQuery(this).parent().parent().remove();
|
||||
}).show();
|
||||
|
||||
}
|
||||
|
||||
function buildServiceMessageTable() {
|
||||
var $this = jQuery(el).prev().find("table.homematic-servicemessages");
|
||||
$this.html("<tbody></tbody>");
|
||||
|
||||
var ALDPs = localData.metaIndex.ALDP;
|
||||
for (var i = 0; i < ALDPs.length; i++) {
|
||||
|
||||
if (localData.uiState['_' + ALDPs[i] + '.Value'] == 1) {
|
||||
var metaAlarm = localData.metaObjects[ALDPs[i]];
|
||||
var metaTrigger = localData.metaObjects[metaAlarm.AlTriggerDP];
|
||||
var metaDevice = localData.metaObjects[localData.metaObjects[metaTrigger.Parent].Parent];
|
||||
var msg = metaAlarm.Name.split(".");
|
||||
msg = msg[1];
|
||||
|
||||
if (localData.homematicStringtable.MAINTENANCE && localData.homematicStringtable.MAINTENANCE[msg] && localData.homematicStringtable.MAINTENANCE[msg].text) {
|
||||
msg = localData.homematicStringtable.MAINTENANCE[msg].text;
|
||||
}
|
||||
|
||||
appendRow($this, ALDPs[i], metaDevice.Name, msg, localData.uiState['_' + ALDPs[i] + '.Timestamp'], metaAlarm.Operations);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buildServiceMessageTable();
|
||||
|
||||
localData.uiState.bind('_41.Value', function (e, newVal, oldVal) {
|
||||
if (newVal != oldVal) setTimeout(buildServiceMessageTable, 5000);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/ejs" id="tplHmServiceMsgs" class="dashui-tpl" data-dashui-set="homematic" data-dashui-name="homematic - service messages" data-dashui-attrs="">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 360px; height: 200px;font-family: Verdana,Arial,sans-serif;font-size: 13px;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="dashui-widget-body">
|
||||
<table class="homematic-servicemessages" id="msgs_<%= this.data.attr('wid') %>"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div <%= (el) -> vis.binds.homematic.serviceMessages(el) %> />
|
||||
</script>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script type="text/javascript">
|
||||
//jQuery.extend(true, vis.binds, {
|
||||
vis.binds.special = {
|
||||
soundOnClickInitialized: false,
|
||||
soundOnClick: function (el, url) {
|
||||
if (vis.editMode) {
|
||||
$(el).parent().parent().show();
|
||||
return;
|
||||
}
|
||||
if (vis.binds.special.soundOnClickInitialized) {
|
||||
return;
|
||||
}
|
||||
vis.binds.special.soundOnClickInitialized = true;
|
||||
$('body')
|
||||
.append('<audio id="sound_on_click" src="' + url + '"></audio>')
|
||||
.click(function (e) {
|
||||
var node = e.target;
|
||||
|
||||
for (var i = 0; i < 4 && node.parentNode; node = node.parentNode, i++) {
|
||||
//console.log(node);
|
||||
if (node.nodeName === 'BODY') return;
|
||||
var $node = $(node);
|
||||
if ($node.attr('id') === 'vis_container') return;
|
||||
if ($node.hasClass('dashui-view')) return;
|
||||
if ($node.hasClass('ui-dialog')) return;
|
||||
|
||||
var events = $._data(node, "events");
|
||||
|
||||
if (events && events.click || node.nodeName == "INPUT" || node.nodeName == "SELECT" || node.nodeName == "BUTTON") {
|
||||
//console.log("has click event!");
|
||||
document.getElementById('sound_on_click').play();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
preRenderView: function(el, view, delay) {
|
||||
if (vis.editMode) {
|
||||
jQuery(el).parent().parent().show();
|
||||
} else {
|
||||
if (parseInt(delay, 10) > 0) {
|
||||
setTimeout(function (_v) {
|
||||
vis.renderView(_v, _v, true);
|
||||
}, delay, view);
|
||||
} else {
|
||||
vis.renderView(view, view, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
instance: function(el) {
|
||||
if (vis.editMode) {
|
||||
jQuery(el).parent().parent().show();
|
||||
}
|
||||
vis.initInstance();
|
||||
},
|
||||
unfocusInitialized: false,
|
||||
unfocusTimer: null,
|
||||
unfocus: function(el) {
|
||||
if (vis.binds.special.unfocusInitialized) {
|
||||
return;
|
||||
} else {
|
||||
vis.binds.special.unfocusInitialized = true;
|
||||
}
|
||||
if (vis.editMode) {
|
||||
jQuery(el).parent().parent().show();
|
||||
}
|
||||
|
||||
function removeFocus(that) {
|
||||
var $this = jQuery(that);
|
||||
if ($this.is("textarea")) {
|
||||
return;
|
||||
}
|
||||
if ($this.is("input") && ($this.attr("type") == "text" || $this.attr("type") == "number" || $this.attr("type") == "password")) {
|
||||
return;
|
||||
}
|
||||
if (vis.binds.special.unfocusTimer) {
|
||||
clearTimeout(vis.binds.special.unfocusTimer);
|
||||
}
|
||||
vis.binds.special.unfocusTimer = setTimeout(function (_this) {
|
||||
// TODO - Funktioniert nicht mit Android/Webkit :-(
|
||||
_this.trigger("blur");
|
||||
}, 100, $this);
|
||||
|
||||
}
|
||||
|
||||
jQuery("*").mouseup(function() {
|
||||
removeFocus(this);
|
||||
});
|
||||
jQuery("*").on('touchend', function() {
|
||||
removeFocus(this);
|
||||
});
|
||||
jQuery("*").on('touchcancel', function() {
|
||||
removeFocus(this);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
//});
|
||||
|
||||
</script>
|
||||
<script type="text/ejs" id="tplPreRenderView" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - pre-render view" data-dashui-attrs="prerender">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="dashui-widget-body">
|
||||
<b>pre-render view: <%= this.data.attr('prerender') %></b>
|
||||
<div <%= (el) -> vis.binds.special.preRenderView(el, data.attr('prerender')) %>></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/ejs" id="tplInitInstance" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - create Instance" data-dashui-attrs="">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="dashui-widget-body">
|
||||
<b>Instance</b>
|
||||
<div <%= (el) -> vis.binds.special.instance(el) %>></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/ejs" id="tplUnFocus" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - remove Focus" data-dashui-attrs="">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="dashui-widget-body">
|
||||
<b>Remove Focus</b>
|
||||
<div <%= (el) -> vis.binds.special.unfocus(el) %>></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/ejs" id="tplSoundOnClick" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - Sound onClick" data-dashui-attrs="url">
|
||||
<div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="dashui-widget-body">
|
||||
<b>Sound onClick: <%= this.data.attr('url') %></b>
|
||||
<div <%= (el) -> vis.binds.special.soundOnClick(el, data.attr('url')) %>></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script type="text/javascript">
|
||||
vis.binds.weather = {
|
||||
yr: function (el, url) {
|
||||
|
||||
},
|
||||
wunderground: function (el) {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script type="text/ejs" id="tplYrBasic" class="vis-tpl"
|
||||
data-vis-set="weather"
|
||||
data-vis-name="yr.no basic forecast"
|
||||
data-vis-attrs="url">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px;" id="<%= this.data.attr('wid') %>">
|
||||
<div class="vis-widget-body" <%= (el) -> vis.binds.weather.yr(el, data.attr('url')) %> />
|
||||
</div>
|
||||
</script>
|
||||
Reference in New Issue
Block a user