Commit f22a1c52 authored by Antek Grzanka's avatar Antek Grzanka

UI prototype. Showing tasks.

parent 2497ecaa
......@@ -77,14 +77,19 @@
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
<artifactId>materializecss</artifactId>
<version>0.97.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>1.4.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angular-ui-router</artifactId>
<version>0.2.17</version>
</dependency>
<dependency>
<groupId>com.bazaarvoice.dropwizard</groupId>
<artifactId>dropwizard-webjars-bundle</artifactId>
......
About what?
\ No newline at end of file
no elo
\ No newline at end of file
......@@ -3,10 +3,33 @@
<head>
<meta charset="UTF-8">
<title>CTF</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/webjars/angularjs/angular.min.js"></script>
<link rel="stylesheet" href="/webjars/materializecss/css/materialize.min.css">
<link rel="stylesheet" href="/page/statics/libs/angular-materialize.css">
<link rel="stylesheet" href="/page/statics/css/main.css">
</head>
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-logo">Capture the flAGH</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="page#/home">Początek</a></li>
<li><a href="page#/tasks">Zadania</a></li>
<li><a href="page#/scores">Wyniki</a></li>
</ul>
</div>
</nav>
<body>
sup sup sup
<div ng-app="ctfApp" class="container">
<div ui-view></div>
</div>
</body>
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/materializecss/js/materialize.min.js"></script>
<script type="text/javascript" src="/webjars/angularjs/angular.min.js"></script>
<script type="text/javascript" src="/webjars/angular-ui-router/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/page/statics/libs/angular-materialize.js"></script>
<script type="text/javascript" src="/page/statics/libs/angular-breadcrumb.min.js"></script>
<script type="text/javascript" src="/page/statics/js/main.js"></script>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
endpoint: /solutions/all
format:
{
"nazwa zadania": ["lista","druzyn","ktora","go","rozwiazala"],
"drugie zadanie": ["innalista","druzyn","ktora","go","rozwiazala"]
}
\ No newline at end of file
</body>
</html>
\ No newline at end of file
body {
background: url('/page/statics/img/bkg.jpg');
color: white;
}
nav {
background: none;
line-height: 120px;
height: 120px;
}
\ No newline at end of file
(function(){
'use strict';
var app = angular.module('ctfApp', ['ui.router', 'ncy-angular-breadcrumb']);
app.config(function($stateProvider, $urlRouterProvider, $breadcrumbProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/page/home.html'
})
.state('tasks', {
url: '/tasks',
templateUrl: '/page/tasks.html'
})
.state('scores', {
url: '/scores',
templateUrl: '/page/scoresheet.html'
});
});
app.factory('AppSettings', function() {
return {
apiAddress: "http://localhost:8080"
}
});
app.controller('TasksController', ['$scope', '$http', 'AppSettings', function($scope, $http, AppSettings) {
$scope.apiAddress = AppSettings.apiAddress;
$http.get(AppSettings.apiAddress + '/tasks').
success(function(data) {
console.log(data);
$scope.tasks = data;
});
}]);
})();
/*! angular-breadcrumb - v0.4.1
* http://ncuillery.github.io/angular-breadcrumb
* Copyright (c) 2015 Nicolas Cuillery; Licensed MIT */
!function(a,b,c){"use strict";function d(a,c){return b.equals(a.length,c.length)?a>c:a.length>c.length}function e(a){var b=a.replace(/\n/g," ").match(/^([^(]+?)\s*(\((.*)\))?$/);if(!b||4!==b.length)throw new Error("Invalid state ref '"+a+"'");return{state:b[1],paramExpr:b[3]||null}}function f(){var a={prefixStateName:null,template:"bootstrap3",templateUrl:null,includeAbstract:!1};this.setOptions=function(c){b.extend(a,c)},this.$get=["$state","$stateParams","$rootScope",function(b,f,g){var h=g;g.$on("$viewContentLoaded",function(a){!a.targetScope.ncyBreadcrumbIgnore&&d(a.targetScope.$id,h.$id)&&(h=a.targetScope)});var i=function(a){var b=a.parent||(/^(.+)\.[^.]+$/.exec(a.name)||[])[1],c="object"==typeof b;return c?b.name:b},j=function(c,d){for(var g,i,j=e(d),k=!1,l=!1,m=0,n=c.length;n>m;m+=1)if(c[m].name===j.state)return;g=b.get(j.state),g.ncyBreadcrumb&&(g.ncyBreadcrumb.force&&(k=!0),g.ncyBreadcrumb.skip&&(l=!0)),g["abstract"]&&!a.includeAbstract&&!k||l||(j.paramExpr&&(i=h.$eval(j.paramExpr)),g.ncyBreadcrumbLink=b.href(j.state,i||f||{}),c.unshift(g))},k=function(a){var c=e(a),d=b.get(c.state);if(d.ncyBreadcrumb&&d.ncyBreadcrumb.parent){var f="function"==typeof d.ncyBreadcrumb.parent,g=f?d.ncyBreadcrumb.parent(h):d.ncyBreadcrumb.parent;if(g)return g}return i(d)};return{getTemplate:function(b){return a.templateUrl?null:b[a.template]?b[a.template]:a.template},getTemplateUrl:function(){return a.templateUrl},getStatesChain:function(c){for(var d=[],e=b.$current.self.name;e;e=k(e))if(j(d,e),c&&d.length)return d;return a.prefixStateName&&j(d,a.prefixStateName),d},getLastStep:function(){var a=this.getStatesChain(!0);return a.length?a[0]:c},$getLastViewScope:function(){return h}}}]}function g(a,c,d){var e={bootstrap2:'<ul class="breadcrumb"><li ng-repeat="step in steps" ng-switch="$last || !!step.abstract" ng-class="{active: $last}"><a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a><span ng-switch-when="true">{{step.ncyBreadcrumbLabel}}</span><span class="divider" ng-hide="$last">/</span></li></ul>',bootstrap3:'<ol class="breadcrumb"><li ng-repeat="step in steps" ng-class="{active: $last}" ng-switch="$last || !!step.abstract"><a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a><span ng-switch-when="true">{{step.ncyBreadcrumbLabel}}</span></li></ol>'};return{restrict:"AE",replace:!0,scope:{},template:c.getTemplate(e),templateUrl:c.getTemplateUrl(),link:{post:function(e){var f=[],g=function(){l(f),f=[];var d=c.$getLastViewScope();e.steps=c.getStatesChain(),b.forEach(e.steps,function(b){if(b.ncyBreadcrumb&&b.ncyBreadcrumb.label){var c=a(b.ncyBreadcrumb.label);b.ncyBreadcrumbLabel=c(d),k(f,c,d,b)}else b.ncyBreadcrumbLabel=b.name})};d.$on("$viewContentLoaded",function(a){a.targetScope.ncyBreadcrumbIgnore||g()}),g()}}}}function h(a,b,c){return{restrict:"A",scope:{},template:"{{ncyBreadcrumbLabel}}",compile:function(d,e){var f=d.attr(e.$attr.ncyBreadcrumbLast);return f&&d.html(f),{post:function(d){var e=[],f=function(){l(e),e=[];var c=b.$getLastViewScope(),f=b.getLastStep();if(f)if(d.ncyBreadcrumbLink=f.ncyBreadcrumbLink,f.ncyBreadcrumb&&f.ncyBreadcrumb.label){var g=a(f.ncyBreadcrumb.label);d.ncyBreadcrumbLabel=g(c),k(e,g,c,d)}else d.ncyBreadcrumbLabel=f.name};c.$on("$viewContentLoaded",function(a){a.targetScope.ncyBreadcrumbIgnore||f()}),f()}}}}}function i(a,c,d){return{restrict:"A",scope:{},template:"{{ncyBreadcrumbChain}}",compile:function(e,f){var g=e.attr(f.$attr.ncyBreadcrumbText);g&&e.html(g);var h=e.attr(f.$attr.ncyBreadcrumbTextSeparator)||" / ";return{post:function(e){var f=[],g=function(a,c,d){b.forEach(j(c),function(b){var c=d.$watch(b,function(a,b){a!==b&&i()});a.push(c)})},i=function(){l(f),f=[];var d=c.$getLastViewScope(),i=c.getStatesChain(),j=[];b.forEach(i,function(b){if(b.ncyBreadcrumb&&b.ncyBreadcrumb.label){var c=a(b.ncyBreadcrumb.label);j.push(c(d)),g(f,c,d)}else j.push(b.name)}),e.ncyBreadcrumbChain=j.join(h)};d.$on("$viewContentLoaded",function(a){a.targetScope.ncyBreadcrumbIgnore||i()}),i()}}}}}var j=function(a){if(a.expressions)return a.expressions;var c=[];return b.forEach(a.parts,function(a){b.isFunction(a)&&c.push(a.exp)}),c},k=function(a,c,d,e){b.forEach(j(c),function(b){var f=d.$watch(b,function(){e.ncyBreadcrumbLabel=c(d)});a.push(f)})},l=function(a){b.forEach(a,function(a){a()})};g.$inject=["$interpolate","$breadcrumb","$rootScope"],h.$inject=["$interpolate","$breadcrumb","$rootScope"],i.$inject=["$interpolate","$breadcrumb","$rootScope"],b.module("ncy-angular-breadcrumb",["ui.router.state"]).provider("$breadcrumb",f).directive("ncyBreadcrumb",g).directive("ncyBreadcrumbLast",h).directive("ncyBreadcrumbText",i)}(window,window.angular);
\ No newline at end of file
code.language-markup {
overflow: auto !important;
}
pre[class*=language-]>code[data-language] {
max-height: 16em !important;
}
.side-nav a {
height: 44px !important;
line-height: 44px !important;
}
/* Copy from the style used on the materializecss.com */
/***************
HTML Styles
***************/
body {
background-color: #fcfcfc; }
p.box {
padding: 20px; }
p {
color: rgba(0, 0, 0, 0.71);
padding: 0;
-webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased; }
nav {
overflow: hidden; }
nav a {
-webkit-font-smoothing: antialiased; }
nav ul li:hover, nav ul li.active {
background-color: #ea454b; }
.header {
color: #ee6e73;
font-weight: 300; }
.caption {
font-size: 1.25rem;
font-weight: 300;
margin-bottom: 30px; }
.preview {
background-color: #FFF;
border: 1px solid #eee;
padding: 20px 20px; }
header, main, footer {
padding-left: 240px; }
.parallax-demo header, .parallax-demo main, .parallax-demo footer {
padding-left: 0; }
footer.example {
padding-left: 0; }
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0; }
}
/********************
Index Page Styles
********************/
ul.side-nav.fixed li.logo {
text-align: center;
margin-top: 32px;
margin-bottom: 16px;
border-bottom: 1px solid #ddd; }
ul.side-nav.fixed li.logo:hover {
background-color: transparent; }
ul.side-nav.fixed {
overflow: hidden; }
ul.side-nav.fixed li {
line-height: 44px; }
ul.side-nav.fixed li:hover, ul.side-nav.fixed li.active {
background-color: rgba(0, 0, 0, 0.05); }
ul.side-nav.fixed li a {
font-size: 13px; }
ul.side-nav.fixed ul.collapsible-accordion {
background-color: #FFF; }
ul.side-nav.fixed:hover {
overflow-y: auto; }
.bold > a {
font-weight: bold; }
#logo-container {
height: 57px;
margin-bottom: 32px; }
nav.top-nav {
height: 122px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
nav.top-nav a.page-title {
line-height: 122px;
font-size: 48px; }
a.button-collapse.top-nav {
position: absolute;
left: 7.5%;
top: 0;
float: none;
margin-left: 1.5rem;
color: #fff;
font-size: 32px;
z-index: 2; }
a.button-collapse.top-nav.full {
line-height: 122px; }
@media only screen and (max-width : 600px) {
a.button-collapse.top-nav {
left: 5%; }
}
@media only screen and (max-width : 992px) {
nav .nav-wrapper {
text-align: center; }
nav .nav-wrapper a.page-title {
font-size: 36px; }
}
@media only screen and (min-width : 993px) {
.container {
width: 85%; }
}
#front-page-logo {
display: inline-block;
height: 100%;
pointer-events: none; }
@media only screen and (max-width: 992px) {
#front-page-nav ul.side-nav li {
float: none;
padding: 0 15px; }
#front-page-nav ul.side-nav li:hover {
background-color: #ddd; }
#front-page-nav ul.side-nav li .active {
background-color: transparent; }
#front-page-nav ul.side-nav a {
color: #444; }
}
#responsive-img {
width: 80%;
display: block;
margin: 0 auto; }
#index-banner {
background-color: #ee6e73; }
#index-banner .container {
position: relative; }
#index-banner .header {
color: #FFF; }
#index-banner h4 {
margin-bottom: 40px; }
#index-banner h1 {
margin-top: 16px; }
@media only screen and (max-width : 992px) {
#index-banner h1 {
margin-top: 60px; }
#index-banner h4 {
margin-bottom: 15px; }
}
@media only screen and (max-width : 600px) {
#index-banner h4 {
margin-bottom: 0; }
}
.github-commit {
padding: 14px 0;
height: 64px;
line-height: 36px;
background-color: #5c5757;
color: #e6e6e6;
font-size: 0.9rem; }
@media only screen and (max-width : 992px) {
.github-commit {
text-align: center; }
}
#github-button {
background-color: #6f6d6d;
-webkit-transition: 0.25s ease;
-moz-transition: 0.25s ease;
-o-transition: 0.25s ease;
-ms-transition: 0.25s ease;
transition: 0.25s ease; }
#github-button:hover {
background-color: #797777; }
.sha {
color: #f0f0f0;
margin: 0 6px 0 6px; }
#download-button {
background-color: #f3989b;
width: 260px;
height: 70px;
line-height: 70px;
font-size: 18px;
font-weight: 400; }
#download-button:hover {
background-color: #f5a5a8; }
.promo {
width: 100%; }
@media only screen and (max-width : 992px) {
.promo {
width: 60%;
margin: 0 auto;
display: block; } }
.promo i {
color: #ee6e73;
font-size: 7rem;
display: block; }
.promo-caption {
font-size: 1.7rem;
font-weight: 500;
margin-top: 5px;
margin-bottom: 0px; }
#front-page-nav {
background-color: #FFF;
position: relative; }
#front-page-nav a {
color: #ee6e73; }
#front-page-nav li:hover {
background-color: #fdeaeb; }
#front-page-nav li.active {
background-color: #fdeaeb; }
#front-page-nav .container {
height: inherit; }
.col.grid-example {
border: 1px solid #eee;
margin: 7px 0;
text-align: center;
line-height: 50px;
font-size: 28px;
background-color: tomato;
color: white;
padding: 0px; }
.col.grid-example span {
font-weight: 200;
line-height: 50px; }
.promo-example {
overflow: hidden; }
/*******************
Flat Site Mockup
*******************/
#site-layout-example-left {
background-color: #90a4ae;
height: 300px; }
#site-layout-example-right {
background-color: #26a69a;
height: 300px; }
#site-layout-example-top {
background-color: #E57373;
height: 42px; }
.flat-text-header {
height: 35px;
width: 80%;
background-color: rgba(255, 255, 255, 0.15);
display: block;
margin: 27px auto; }
.flat-text {
height: 25px;
width: 80%;
background-color: rgba(0, 0, 0, 0.15);
display: block;
margin: 27px auto; }
.flat-text.small {
width: 25%;
height: 25px;
background-color: rgba(0, 0, 0, 0.15); }
.flat-text.full-width {
width: 100%; }
/**********************
**********************/
/*****************
Chrome Browser
*****************/
.browser-window {
text-align: left;
width: 100%;
height: auto;
display: inline-block;
-webkit-border-radius: 5px 5px 2px 2px;
-moz-border-radius: 5px 5px 2px 2px;
border-radius: 5px 5px 2px 2px;
background-clip: padding-box;
background-color: #fff;
margin: 20px 0px;
overflow: hidden; }
.browser-window .top-bar {
height: 30px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background-clip: padding-box;
border-top: thin solid #eaeae9;
border-bottom: thin solid #dfdfde;
background: linear-gradient(#e7e7e6, #E2E2E1); }
.browser-window .circle {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 50%;
background-color: white;
margin-right: 1px; }
#close-circle {
background-color: #FF5C5A; }
#minimize-circle {
background-color: #FFBB50; }
#maximize-circle {
background-color: #1BC656; }
.browser-window .circles {
margin: 5px 12px; }
.browser-window .content {
margin: 0;
width: 100%;
display: inline-block;
border-radius: 0 0 5px 5px;
background-color: #fafafa; }
.browser-window .row {
margin: 0; }
.clear {
clear: both; }
/**********************
**********************/
.dynamic-color .red, .dynamic-color .pink, .dynamic-color .purple, .dynamic-color .deep-purple, .dynamic-color .indigo, .dynamic-color .blue, .dynamic-color .light-blue, .dynamic-color .cyan, .dynamic-color .teal, .dynamic-color .green, .dynamic-color .light-green, .dynamic-color .lime, .dynamic-color .yellow, .dynamic-color .amber, .dynamic-color .orange, .dynamic-color .deep-orange, .dynamic-color .brown, .dynamic-color .grey, .dynamic-color .blue-grey {
height: 55px;
width: 100%;
padding: 0 15px;
line-height: 55px;
font-weight: 500;
font-size: 12px;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.dynamic-color .col {
margin-bottom: 55px; }
.center {
text-align: center;
vertical-align: middle; }
.icon-demo {
line-height: 50px; }
.icon-container i {
font-size: 3em;
display: block;
margin-bottom: 10px; }
.icon-container .icon-preview {
height: 120px;
text-align: center; }
.icon-holder {
display: block;
text-align: center;
width: 150px;
height: 115px;
float: left;
margin: 0px 0px 15px 0px; }
.icon-holder p {
margin: 0px 0; }
.tabs-wrapper {
position: relative;
height: 48px; }
.tabs-wrapper .row.pinned {
position: fixed;
width: 100%;
top: 0;
z-index: 10; }
.shadow-demo {
background-color: #26a69a;
width: 125px;
height: 125px;
margin: 20px auto; }
@media only screen and (max-width: 1200px) {
.shadow-demo {
width: 100px;
height: 100px; } }
@media only screen and (max-width: 600px) {
.shadow-demo {
width: 150px;
height: 150px; } }
.parallax-container .text-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -27px; }
ul.table-of-contents {
margin-top: 0;
padding-top: 48px; }
code, pre {
position: relative;
font-size: 1.1rem; }
.directory-markup {
font-size: 1rem;
line-height: 1.1rem !important; }
pre[class*="language-"] {
padding: 25px 12px 7px 12px;
border: solid 1px rgba(51, 51, 51, 0.12); }
pre[class*="language-"]:before {
position: absolute;
padding: 1px 5px;
background: #e8e6e3;
top: 0;
left: 0;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
color: #555;
content: attr(class);
font-size: 0.9rem;
border: solid 1px rgba(51, 51, 51, 0.12);
border-top: none;
border-left: none; }
.toc-wrapper {
position: relative;
margin-top: 42px; }
#carbonads {
max-width: 150px;
display: inline-block;
position: relative;
text-align: left;
-webkit-font-smoothing: antialiased; }
#carbonads > span, #carbonads span.carbon-wrap {
height: 100px;
display: block; }
#carbonads a.carbon-img {
height: 100px;
display: inline-block;
margin-right: 10px; }
#carbonads a.carbon-text, #carbonads input[type="submit"] {
position: relative;
top: 0;
width: 150px;
vertical-align: top;
display: inline-block;
font-size: 13px;
color: #E57373; }
#carbonads a.carbon-poweredby {
position: relative;
left: 28px;
font-size: 11px;
color: #EF9A9A; }
.buysellads #carbonads > span, .buysellads #carbonads span.carbon-wrap {
height: auto; }
.buysellads #carbonads a.carbon-text {
top: 5px;
left: 0;
width: 130px;
display: block;
font-size: 13px;
-webkit-font-smoothing: antialiased;
color: #E57373; }
.buysellads #carbonads a.carbon-poweredby {
top: 5px; }
.buysellads-header #carbonads > span, .buysellads-header #carbonads span.carbon-wrap {
height: auto; }
.buysellads-header #carbonads a.carbon-text {
color: #fff; }
.buysellads-header #carbonads a.carbon-poweredby {
color: rgba(255, 255, 255, 0.8); }
.buysellads {
-webkit-font-smoothing: antialiased;
position: relative; }
.buysellads .bsa_it.one {
width: 130px;
position: absolute;
left: 0;
top: 50px; }
.buysellads .bsa_it.one .bsa_it_p {
left: 0;
bottom: -15px; }
.buysellads .bsa_it.one .bsa_it_ad .bsa_it_t {
color: #E57373; }
.buysellads .bsa_it.one .bsa_it_ad .bsa_it_d {
color: #EF9A9A; }
.buysellads .bsa_it_ad a {
display: block;
width: 130px; }
.buysellads-header {
margin-top: 30px; }
.buysellads-header .bsa_it.one .bsa_it_p {
bottom: -20px; }
.bsa_it.one {
min-width: 230px;
max-width: 270px;
display: inline-block;
text-align: left; }
.bsa_it.one .bsa_it_ad {
border: 0;
padding: 0;
background-color: transparent; }
.bsa_it.one .bsa_it_ad .bsa_it_t {
color: #fff; }
.bsa_it.one .bsa_it_ad .bsa_it_d {
color: #FFCDD2; }
.bsa_it.one .bsa_it_p {
right: auto;
left: 40px;
bottom: -5px; }
.bsa_it.one .bsa_it_p a {
color: #FFCDD2; }
footer {
font-size: 0.9rem; }
body.parallax-demo footer {
margin-top: 0; }
.image-container {
width: 100%; }
.image-container img {
max-width: 100%; }
@media only screen and (max-width : 600px) {
.mobile-image {
max-width: 100%; } }
.waves-color-demo .collection-item {
height: 57px;
line-height: 57px; }
.waves-color-demo .collection-item code {
line-height: 57px; }
.waves-color-demo .btn:not(.waves-light), .waves-color-demo .btn-large:not(.waves-light) {
background-color: #FFFFFF;
color: #212121; }
.card-panel span, .card-content p {
-webkit-font-smoothing: antialiased; }
#images .card-panel .row {
margin-bottom: 0; }
.pushpin-demo {
position: relative;
height: 100px; }
#pushpin-demo-1 {
display: block;
height: inherit;
background-color: #ddd; }
.valign-demo {
height: 400px;
background-color: #ddd; }
.talign-demo {
height: 100px;
background-color: #ddd; }
#staggered-test li, #image-test {
-ms-filter: "progid:DXImageTransform@mixin Microsoft@mixin Alpha(Opacity=${iefactor})";
filter: "alpha(opacity=(${iefactor}))";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0; }
#tx-live-lang-container {
background-color: #fcfcfc;
z-index: 999; }
#tx-live-lang-container #tx-live-lang-picker {
background-color: #fcfcfc; }
#tx-live-lang-container #tx-live-lang-picker li {
color: rgba(0, 0, 0, 0.87); }
#tx-live-lang-container #tx-live-lang-picker li:hover {
color: inherit;
background-color: #fdeaeb; }
#tx-live-lang-container .txlive-langselector-toggle {
border-bottom: 2px solid #ee6e73; }
#tx-live-lang-container .txlive-langselector-current {
color: rgba(0, 0, 0, 0.87); }
#tx-live-lang-container .txlive-langselector-marker {
border-bottom: 4px solid rgba(0, 0, 0, 0.61); }
(function (angular) {
angular.module("ui.materialize", ["ui.materialize.ngModel", "ui.materialize.collapsible", "ui.materialize.toast", "ui.materialize.sidenav", "ui.materialize.material_select", "ui.materialize.dropdown", "ui.materialize.inputfield", "ui.materialize.input_date", "ui.materialize.tabs", "ui.materialize.pagination", "ui.materialize.pushpin", "ui.materialize.scrollspy", "ui.materialize.parallax","ui.materialize.modal", "ui.materialize.tooltipped", "ui.materialize.slider", "ui.materialize.materialboxed"]);
angular.module("ui.materialize.ngModel", [])
.directive("ngModel",["$timeout", function($timeout){
return {
restrict: 'A',
priority: -1, // lower priority than built-in ng-model so it runs first
link: function(scope, element, attr) {
scope.$watch(attr.ngModel,function(value){
$timeout(function () {
if (value){
element.trigger("change");
} else if(element.attr('placeholder') === undefined) {
if(!element.is(":focus"))
element.trigger("blur");
}
});
});
}
};
}]);
/* example usage:
<div slider height='500' transition='400'></div>
*/
angular.module("ui.materialize.slider", [])
.directive("slider", ["$timeout", function($timeout){
return {
restrict: 'A',
scope: {
height: '=',
transition: '=',
interval: '=',
indicators: '='
},
link: function(scope, element, attrs) {
element.addClass("slider");
$timeout(function(){
element.slider({
height: (angular.isDefined(scope.height)) ? scope.height : 400,
transition: (angular.isDefined(scope.transition)) ? scope.transition : 500,
interval: (angular.isDefined(scope.interval)) ? scope.interval : 6000,
indicators: (angular.isDefined(scope.indicators)) ? scope.indicators : true
});
});
}
};
}]);
angular.module("ui.materialize.collapsible", [])
.directive("collapsible", ["$timeout", function ($timeout) {
return {
link: function (scope, element, attrs) {
$timeout(function () {
element.collapsible();
});
if ("watch" in attrs) {
scope.$watch(function () {
return element[0].innerHTML;
}, function (oldVal, newVal) {
if (oldVal !== newVal) {
$timeout(function () {
element.collapsible();
});
}
});
}
}
};
}]);
angular.module("ui.materialize.parallax", [])
.directive("parallax", ["$timeout", function($timeout){
return {
link: function(scope, element, attrs) {
$timeout(function(){
element.parallax();
});
}
};
}]);
angular.module("ui.materialize.toast", [])
.constant("toastConfig", {
duration: 3000
})
.directive("toast", ["toastConfig", function (toastConfig) {
return {
scope: {
message: "@",
duration: "@",
callback: "&"
},
link: function (scope, element, attrs) {
element.bind(attrs.toast, function () {
var message = (angular.isDefined(scope.message)) ? scope.message : "";
var toastclass = (angular.isDefined(attrs.toastclass)) ? attrs.toastclass : "";
Materialize.toast(message, scope.duration ? scope.duration : toastConfig.duration, toastclass, scope.callback);
});
}
};
}]);
angular.module('ui.materialize.pushpin', [])
.directive('pushpin', [function(){
return {
restrict: 'AE',
require: [
'?pushpinTop',
'?pushpinOffset',
'?pushpinBottom'
],
link: function (scope, element, attrs) {
var top = attrs.pushpinTop || 0;
var offset = attrs.pushpinOffset || 0;
var bottom = attrs.pushpinBottom || Infinity;
setTimeout(function () {
element.pushpin({top: top, offset: offset, bottom: bottom});
}, 0);
}
};
}]);
// TODO: Add some documentation for this.
angular.module("ui.materialize.scrollspy", [])
.directive("scrollspy", ["$timeout", function($timeout){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.addClass("scrollspy");
$timeout(function(){
element.scrollSpy();
});
}
};
}]);
angular.module("ui.materialize.tabs", [])
.directive("tabs", [function(){
return {
link: function (scope, element, attrs) {
element.tabs();
}
};
}]);
// Example: <a href="#" data-activates="nav-mobile" class="button-collapse top-nav" data-sidenav="left" data-menuwidth="500" data-closeonclick="true">
// data-activates is handled by the jQuery plugin.
angular.module("ui.materialize.sidenav", [])
.directive("sidenav", [function () {
return {
scope: {
menuwidth: "@",
closeonclick: "@"
},
link: function (scope, element, attrs) {
element.sideNav({
menuWidth: (angular.isDefined(scope.menuwidth)) ? scope.menuwidth : undefined,
edge: attrs.sidenav ? attrs.sidenav : "left",
closeOnClick: (angular.isDefined(scope.closeonclick)) ? scope.closeonclick == "true" : undefined
});
}
};
}]);
// This works, unless the content inside the select changes.
angular.module("ui.materialize.material_select", [])
.directive("materialSelect", ["$compile", "$timeout", function ($compile, $timeout) {
return {
link: function (scope, element, attrs) {
if (element.is("select")) {
function initSelect() {
element.siblings(".caret").remove();
scope.$evalAsync(function() {
element.material_select();
});
}
$timeout(initSelect);
if (attrs.ngModel) {
scope.$watch(attrs.ngModel, initSelect);
}
if ("watch" in attrs) {
scope.$watch(function () {
return element[0].innerHTML;
}, function (oldVal, newVal) {
if (oldVal !== newVal) {
$timeout(initSelect);
}
});
}
}
}
};
}]);
/*
Example usage, notice the empty dropdown tag in the dropdown trigger.
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='javascript:void(0);' data-activates='demoDropdown'
dropdown constrain-width="false">
Select a demo
</a>
<!-- Dropdown Structure -->
<ul id='demoDropdown' class='dropdown-content'>
<li ng-repeat="demo in demoDefiniftions">
<a href="javascript:void(0);" ng-click="selectDemo(demo)">{{demo.name}}</a>
</li>
</ul>*/
angular.module("ui.materialize.dropdown", [])
.directive("dropdown", ["$compile", "$timeout", function ($compile, $timeout) {
return {
scope: {
inDuration: "@",
outDuration: "@",
constrainWidth: "@",
hover: "@",
alignment: "@",
gutter: "@",
belowOrigin: "@"
},
link: function (scope, element, attrs) {
$timeout(function () {
$compile(element.contents())(scope);
element.dropdown({
inDuration: (angular.isDefined(scope.inDuration)) ? scope.inDuration : undefined,
outDuration: (angular.isDefined(scope.outDuration)) ? scope.outDuration : undefined,
constrain_width: (angular.isDefined(scope.constrainWidth)) ? scope.constrainWidth : undefined,
hover: (angular.isDefined(scope.hover)) ? scope.hover : undefined,
alignment: (angular.isDefined(scope.alignment)) ? scope.alignment : undefined,
gutter: (angular.isDefined(scope.gutter)) ? scope.gutter : undefined,
belowOrigin: (angular.isDefined(scope.belowOrigin)) ? scope.belowOrigin : undefined
});
});
}
};
}]);
/**
* Instead of adding the .input-field class to a div surrounding a label and input, add the attribute input-field.
* That way it will also work when angular destroys/recreates the elements.
*
* Example:
<inputfield style="margin-top:10px">
<label>{{name}}:</label>
<input type="text" name="{{name}}" ng-model="value">
</inputfield>
*/
angular.module("ui.materialize.inputfield", [])
.directive('inputField', ["$compile", "$timeout", function ($compile, $timeout) {
return {
transclude: true,
scope: {},
link: function (scope, element) {
$timeout(function () {
Materialize.updateTextFields();
// The "> > [selector]", is to restrict to only those tags that are direct children of the directive element. Otherwise we might hit to many elements with the selectors.
// Triggering autoresize of the textareas.
element.find("> > .materialize-textarea").each(function () {
var that = $(this);
that.addClass("materialize-textarea");
that.trigger("autoresize");
var model = that.attr("ng-model");
if (model) {
scope.$parent.$watch(model, function (a, b) {
if (a !== b) {
$timeout(function () {
that.trigger("autoresize");
});
}
});
}
});
// Adding char-counters.
element.find('> > .materialize-textarea, > > input').each(function (index, countable) {
countable = angular.element(countable);
if (!countable.siblings('span[class="character-counter"]').length) {
countable.characterCounter();
}
});
});
},
template: '<div ng-transclude class="input-field"></div>'
};
}]);
/**
* Add pickadate directive
* Type text is mandatory
* Example:
<input input-date
type="text"
name="created"
id="inputCreated"
ng-model="currentTime"
format="dd/mm/yyyy"
months-full="{{ monthFr }}"
months-short="{{ monthShortFr }}"
weekdays-full="{{ weekdaysFullFr }}"
weekdays-short="{{ weekdaysShortFr }}"
weekdays-letter="{{ weekdaysLetterFr }}"
disable="disable"
today="today"
clear="clear"
close="close"
on-start="onStart()"
on-render="onRender()"
on-open="onOpen()"
on-close="onClose()"
on-set="onSet()"
on-stop="onStop()" />
*/
angular.module("ui.materialize.input_date", [])
.directive('inputDate', ["$compile", "$timeout", function ($compile, $timeout) {
// Fix for issue 46. This gotta be a bug in the materialize code, but this fixes it.
var style = $('<style>#inputCreated_root {outline: none;}</style>');
$('html > head').append(style);
// Define Prototype Date format
// Use like this
// today = new Date();
// var dateString = today.format("dd-m-yy");
var dateFormat = function () {
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
timezoneClip = /[^-+\dA-Z]/g,
pad = function (val, len) {
val = String(val);
len = len || 2;
while (val.length < len) {
val = "0" + val;
}
return val;
};
// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
var dF = dateFormat;
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
if (arguments.length === 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
mask = date;
date = undefined;
}
// Passing date through Date applies Date.parse, if necessary
date = date ? new Date(date) : new Date();
if (isNaN(date)) throw SyntaxError("invalid date");
mask = String(dF.masks[mask] || mask || dF.masks["default"]);
// Allow setting the utc argument via the mask
if (mask.slice(0, 4) == "UTC:") {
mask = mask.slice(4);
utc = true;
}
var _ = utc ? "getUTC" : "get",
d = date[ _ + "Date" ](),
D = date[ _ + "Day" ](),
m = date[ _ + "Month" ](),
y = date[ _ + "FullYear" ](),
H = date[ _ + "Hours" ](),
M = date[ _ + "Minutes" ](),
s = date[ _ + "Seconds" ](),
L = date[ _ + "Milliseconds" ](),
o = utc ? 0 : date.getTimezoneOffset(),
flags = {
d: d,
dd: pad(d),
ddd: dF.i18n.dayNames[D],
dddd: dF.i18n.dayNames[D + 7],
m: m + 1,
mm: pad(m + 1),
mmm: dF.i18n.monthNames[m],
mmmm: dF.i18n.monthNames[m + 12],
yy: String(y).slice(2),
yyyy: y,
h: H % 12 || 12,
hh: pad(H % 12 || 12),
H: H,
HH: pad(H),
M: M,
MM: pad(M),
s: s,
ss: pad(s),
l: pad(L, 3),
L: pad(L > 99 ? Math.round(L / 10) : L),
t: H < 12 ? "a" : "p",
tt: H < 12 ? "am" : "pm",
T: H < 12 ? "A" : "P",
TT: H < 12 ? "AM" : "PM",
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
};
return mask.replace(token, function ($0) {
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
});
};
}();
// Some common format strings
dateFormat.masks = {
"default": "ddd mmm dd yyyy HH:MM:ss",
shortDate: "m/d/yy",
mediumDate: "mmm d, yyyy",
longDate: "mmmm d, yyyy",
fullDate: "dddd, mmmm d, yyyy",
shortTime: "h:MM TT",
mediumTime: "h:MM:ss TT",
longTime: "h:MM:ss TT Z",
isoDate: "yyyy-mm-dd",
isoTime: "HH:MM:ss",
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
// Internationalization strings
dateFormat.i18n = {
dayNames: [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};
// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
/**
* Validate date object
* @param {Date} date
* @return {Boolean}
*/
var isValidDate = function(date) {
if( Object.prototype.toString.call(date) === '[object Date]' ) {
return !isNaN(date.getTime());
}
return false;
};
return {
require: 'ngModel',
scope: {
container: "@",
format: "@",
formatSubmit: "@",
monthsFull: "@",
monthsShort: "@",
weekdaysFull: "@",
weekdaysShort: "@",
weekdaysLetter: "@",
firstDay: "=",
disable: "=",
today: "=",
clear: "=",
close: "=",
selectYears: "=",
onStart: "&",
onRender: "&",
onOpen: "&",
onClose: "&",
onSet: "&",
onStop: "&",
ngReadonly: "=?",
max: "@",
min: "@"
},
link: function (scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
if (modelValue) {
var date = new Date(modelValue);
return (angular.isDefined(scope.format)) ? date.format(scope.format) : date.format('d mmmm, yyyy');
}
return null;
});
var monthsFull = (angular.isDefined(scope.monthsFull)) ? scope.$eval(scope.monthsFull) : undefined,
monthsShort = (angular.isDefined(scope.monthsShort)) ? scope.$eval(scope.monthsShort) : undefined,
weekdaysFull = (angular.isDefined(scope.weekdaysFull)) ? scope.$eval(scope.weekdaysFull) : undefined,
weekdaysShort = (angular.isDefined(scope.weekdaysShort)) ? scope.$eval(scope.weekdaysShort) : undefined,
weekdaysLetter = (angular.isDefined(scope.weekdaysLetter)) ? scope.$eval(scope.weekdaysLetter) : undefined;
$compile(element.contents())(scope);
if (!(scope.ngReadonly)) {
$timeout(function () {
var pickadateInput = element.pickadate({
container : (angular.isDefined(scope.container)) ? scope.container : 'body',
format: (angular.isDefined(scope.format)) ? scope.format : undefined,
formatSubmit: (angular.isDefined(scope.formatSubmit)) ? scope.formatSubmit : undefined,
monthsFull: (angular.isDefined(monthsFull)) ? monthsFull : undefined,
monthsShort: (angular.isDefined(monthsShort)) ? monthsShort : undefined,
weekdaysFull: (angular.isDefined(weekdaysFull)) ? weekdaysFull : undefined,
weekdaysShort: (angular.isDefined(weekdaysShort)) ? weekdaysShort : undefined,
weekdaysLetter: (angular.isDefined(weekdaysLetter)) ? weekdaysLetter : undefined,
firstDay: (angular.isDefined(scope.firstDay)) ? scope.firstDay : 0,
disable: (angular.isDefined(scope.disable)) ? scope.disable : undefined,
today: (angular.isDefined(scope.today)) ? scope.today : undefined,
clear: (angular.isDefined(scope.clear)) ? scope.clear : undefined,
close: (angular.isDefined(scope.close)) ? scope.close : undefined,
selectYears: (angular.isDefined(scope.selectYears)) ? scope.selectYears : undefined,
onStart: (angular.isDefined(scope.onStart)) ? function(){ scope.onStart(); } : undefined,
onRender: (angular.isDefined(scope.onRender)) ? function(){ scope.onRender(); } : undefined,
onOpen: (angular.isDefined(scope.onOpen)) ? function(){ scope.onOpen(); } : undefined,
onClose: (angular.isDefined(scope.onClose)) ? function(){ scope.onClose(); } : undefined,
onSet: (angular.isDefined(scope.onSet)) ? function(){ scope.onSet(); } : undefined,
onStop: (angular.isDefined(scope.onStop)) ? function(){ scope.onStop(); } : undefined
});
//pickadate API
var picker = pickadateInput.pickadate('picker');
//watcher of min and max
scope.$watch('max', function(newMax) {
if( picker ) {
var maxDate = new Date(newMax);
picker.set({max: isValidDate(maxDate) ? maxDate : false});
}
});
scope.$watch('min', function(newMin) {
if( picker ) {
var minDate = new Date(newMin);
picker.set({min: isValidDate(minDate) ? minDate : false});
}
});
});
}
}
};
}]);
/**
* Example:
<pagination
page="1"
page-size="10"
total="100"
pagination-action="changePage(page)"
ul-class="customClass">
* ul-class could be either an object or a string
*
* Based on https://github.com/brantwills/Angular-Paging
*/
angular.module("ui.materialize.pagination", [])
.directive('pagination', function () {
// Assign null-able scope values from settings
function setScopeValues(scope, attrs) {
scope.List = [];
scope.Hide = false;
scope.page = parseInt(scope.page) || 1;
scope.total = parseInt(scope.total) || 0;
scope.dots = scope.dots || '...';
scope.ulClass = scope.ulClass || attrs.ulClass || 'pagination';
scope.adjacent = parseInt(scope.adjacent) || 2;
scope.activeClass = 'active';
scope.disabledClass = 'disabled';
scope.scrollTop = scope.$eval(attrs.scrollTop);
scope.hideIfEmpty = scope.$eval(attrs.hideIfEmpty);
scope.showPrevNext = scope.$eval(attrs.showPrevNext);
}
// Validate and clean up any scope values
// This happens after we have set the
// scope values
function validateScopeValues(scope, pageCount) {
// Block where the page is larger than the pageCount
if (scope.page > pageCount) {
scope.page = pageCount;
}
// Block where the page is less than 0
if (scope.page <= 0) {
scope.page = 1;
}
// Block where adjacent value is 0 or below
if (scope.adjacent <= 0) {
scope.adjacent = 2;
}
// Hide from page if we have 1 or less pages
// if directed to hide empty
if (pageCount <= 1) {
scope.Hide = scope.hideIfEmpty;
}
}
// Internal Pagination Click Action
function internalAction(scope, page) {
// Block clicks we try to load the active page
if (scope.page == page) {
return;
}
// Update the page in scope and fire any paging actions
scope.page = page;
scope.paginationAction({
page: page
});
// If allowed scroll up to the top of the page
if (scope.scrollTop) {
scrollTo(0, 0);
}
}
// Add Range of Numbers
function addRange(start, finish, scope) {
var i = 0;
for (i = start; i <= finish; i++) {
var item = {
value: i.toString(),
liClass: scope.page == i ? scope.activeClass : 'waves-effect',
action: function() {
internalAction(scope, this.value);
}
};
scope.List.push(item);
}
}
// Add Dots ie: 1 2 [...] 10 11 12 [...] 56 57
function addDots(scope) {
scope.List.push({
value: scope.dots
});
}
// Add First Pages
function addFirst(scope, next) {
addRange(1, 2, scope);
// We ignore dots if the next value is 3
// ie: 1 2 [...] 3 4 5 becomes just 1 2 3 4 5
if (next != 3) {
addDots(scope);
}
}
/**
* Add the first, previous, next, and last buttons if desired
* The logic is defined by the mode of interest
* This method will simply return if the scope.showPrevNext is false
* This method will simply return if there are no pages to display
*
* @param {Object} scope - The local directive scope object
* @param {int} pageCount - The last page number or total page count
* @param {string} mode - The mode of interest either prev or last
*/
function addPrevNext(scope, pageCount, mode){
// Ignore if we are not showing
// or there are no pages to display
if (!scope.showPrevNext || pageCount < 1) { return; }
// Local variables to help determine logic
var disabled, alpha, beta;
// Determine logic based on the mode of interest
// Calculate the previous / next page and if the click actions are allowed
if(mode === 'prev') {
disabled = scope.page - 1 <= 0;
var prevPage = scope.page - 1 <= 0 ? 1 : scope.page - 1;
alpha = { value : "<<", title: 'First Page', page: 1 };
beta = { value: "<", title: 'Previous Page', page: prevPage };
} else {
disabled = scope.page + 1 > pageCount;
var nextPage = scope.page + 1 >= pageCount ? pageCount : scope.page + 1;
alpha = { value : ">", title: 'Next Page', page: nextPage };
beta = { value: ">>", title: 'Last Page', page: pageCount };
}
// Create the Add Item Function
var addItem = function(item, disabled){
scope.List.push({
value: item.value,
title: item.title,
liClass: disabled ? scope.disabledClass : '',
action: function(){
if(!disabled) {
internalAction(scope, item.page);
}
}
});
};
// Add our items
addItem(alpha, disabled);
addItem(beta, disabled);
}
function addLast(pageCount, scope, prev) {
// We ignore dots if the previous value is one less that our start range
// ie: 1 2 3 4 [...] 5 6 becomes just 1 2 3 4 5 6
if (prev != pageCount -2) {
addDots(scope);
}
addRange(pageCount -1, pageCount, scope);
}
// Main build function
function build(scope, attrs) {
// Block divide by 0 and empty page size
if (!scope.pageSize || scope.pageSize < 0)
{
return;
}
// Assign scope values
setScopeValues(scope, attrs);
// local variables
var start,
size = scope.adjacent * 2,
pageCount = Math.ceil(scope.total / scope.pageSize);
// Validation Scope
validateScopeValues(scope, pageCount);
// Add the Next and Previous buttons to our list
addPrevNext(scope, pageCount, 'prev');
if (pageCount < (5 + size)) {
start = 1;
addRange(start, pageCount, scope);
} else {
var finish;
if (scope.page <= (1 + size)) {
start = 1;
finish = 2 + size + (scope.adjacent - 1);
addRange(start, finish, scope);
addLast(pageCount, scope, finish);
} else if (pageCount - size > scope.page && scope.page > size) {
start = scope.page - scope.adjacent;
finish = scope.page + scope.adjacent;
addFirst(scope, start);
addRange(start, finish, scope);
addLast(pageCount, scope, finish);
} else {
start = pageCount - (1 + size + (scope.adjacent - 1));
finish = pageCount;
addFirst(scope, start);
addRange(start, finish, scope);
}
}
addPrevNext(scope, pageCount, 'next');
}
return {
restrict: 'EA',
scope: {
page: '=',
pageSize: '=',
total: '=',
dots: '@',
hideIfEmpty: '@',
adjacent: '@',
scrollTop: '@',
showPrevNext: '@',
paginationAction: '&',
ulClass: '=?'
},
template:
'<ul ng-hide="Hide" ng-class="ulClass"> ' +
'<li ' +
'ng-class="Item.liClass" ' +
'ng-click="Item.action()" ' +
'ng-repeat="Item in List"> ' +
'<a href> ' +
'<span ng-bind="Item.value"></span> ' +
'</a>' +
'</ul>',
link: function (scope, element, attrs) {
// Hook in our watched items
scope.$watchCollection('[page, total, pageSize]', function () {
build(scope, attrs);
});
}
};
});
/* example usage:
<!-- Modal Trigger -->
<a class='btn' href='#demoModal' modal>show Modal</a>
<!-- Modal Structure -->
<div id="demoModal" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
*/
angular.module("ui.materialize.modal", [])
.directive("modal", ["$compile", "$timeout", function ($compile, $timeout) {
return {
scope: {
dismissible: "=",
opacity: "@",
inDuration: "@",
outDuration: "@",
ready: '&?',
complete: '&?',
open: '=',
enableTabs: '@?'
},
link: function (scope, element, attrs) {
$timeout(function () {
var modalEl = $(attrs.href ? attrs.href : '#' + attrs.target);
$compile(element.contents())(scope);
var complete = function () {
angular.isFunction(scope.complete) && scope.$eval(scope.complete());
scope.open = false;
scope.$apply();
};
var ready = function() {
angular.isFunction(scope.ready) && scope.$eval(scope.ready());
// If tab support is enabled we need to re-init the tabs
// See https://github.com/Dogfalo/materialize/issues/1634
if (scope.enableTabs) {
modalEl.find('ul.tabs').tabs();
}
};
var options = {
dismissible: (angular.isDefined(scope.dismissible)) ? scope.dismissible : undefined,
opacity: (angular.isDefined(scope.opacity)) ? scope.opacity : undefined,
in_duration: (angular.isDefined(scope.inDuration)) ? scope.inDuration : undefined,
out_duration: (angular.isDefined(scope.outDuration)) ? scope.outDuration : undefined,
ready: ready,
complete: complete,
};
element.leanModal(options);
// Setup watch for opening / closing modal programatically.
if (angular.isDefined(attrs.open) && modalEl.length > 0) {
scope.$watch('open', function(value, lastValue) {
if (!angular.isDefined(value)) { return; }
(value === true) ? modalEl.openModal(options) : modalEl.closeModal();
});
}
});
}
};
}]);
/* example usage:
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn" tooltipped data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
*/
angular.module("ui.materialize.tooltipped", [])
.directive("tooltipped", ["$compile", "$timeout", function ($compile, $timeout) {
return {
restrict: "EA",
scope: true,
link: function (scope, element, attrs) {
element.addClass("tooltipped");
$compile(element.contents())(scope);
$timeout(function () {
element.tooltip();
});
scope.$on('$destroy', function () {
element.tooltip("remove");
});
}
};
}]);
/* example usage:
<!-- normal materialboxed -->
<img materialboxed class="materialboxed responsive-img" width="650" src="images/sample-1.jpg">
<!-- caption materialboxed -->
<img materialboxed class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="iamges/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
*/
angular.module("ui.materialize.materialboxed", [])
.directive("materialboxed", ["$timeout", function($timeout){
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function(){
element.materialbox();
});
}
};
}]);
}(angular));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
\ No newline at end of file
<div ng-controller="TasksController">
<div class="row">
<div class="col s12 m6" ng-repeat="task in tasks">
<div class="card blue-grey darken-1" >
<div class="card-content white-text">
<span class="card-title">
<!--<div class="chip">-->
<!--&lt;!&ndash;<img src="" alt="Contact Person">&ndash;&gt;-->
<!--</div>-->
{{task.name}}
</span>
<p>Poziom {{task.level}}. Super zadanie.</p>
</div>
<div class="card-action">
<a href="{{apiAddress}}/task/{{task.level}}">Go!</a></td>-->
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment