Browse Source

merge

master
aj 7 years ago
parent
commit
7c8e9fb526
  1. 476
      css/styles.css
  2. 3
      index.html
  3. 2
      js/app.js
  4. 188
      js/controllers/website-controller.js
  5. 1
      js/lib/ez-file-tree/ez-file-tree.min.js
  6. 1
      js/lib/ez-file-tree/ez-object2array.min.js
  7. 4
      templates/account-settings.html
  8. 2
      templates/splash-page.html
  9. 341
      templates/website.html
  10. 58
      templates/widgets/filetree.html

476
css/styles.css

@ -34,7 +34,12 @@
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.ls-none {
list-style: none;
}
.ls-pd0 {
-webkit-padding-start: 0;
}
/* Side Menu */
.side-menu {
padding-top: 10px;
@ -58,11 +63,12 @@
align-items: center;
}
.button-container.active .side-menu-button {
background: steelblue;
color: white;
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.button-container.active .button-title {
color: steelblue;
color: #286090;
}
.button-container a:hover {
text-decoration: none;
@ -148,3 +154,465 @@
overflow: hidden;
background-color: #e5e5e5;
}
.demo-title {
text-align: center;
font-size: 3rem;
margin-bottom: 50px;
}
.invite-option {
border: 1px solid #e5e5e5;
}
.invite-card-container {
flex-wrap: wrap;
width: 100%;
display: flex;
}
.invite-card-container .invite-option {
width: 25%;
background: white;
float: left;
padding: 2%;
text-align: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
margin: 5px;
}
.invite-card-container .invite-option:hover {
/*cursor: pointer;*/
box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3);
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.invite-card-container .invite-option:hover i, .invite-card-container .invite-option:hover h1, .invite-card-container .invite-option:hover span, .invite-card-container .invite-option:hover b {
color: #286090;
}
.invite-card-container .invite-option:hover .front {
opacity: 0;
visibility: hidden;
}
.invite-card-container .invite-option:hover .back {
opacity: 1 !important;
visibility: visible !important;
}
.invite-card-container .invite-option:hover .back a.button {
cursor: pointer;
-webkit-transform: translateY(0px) !important;
transform: translateY(0px) !important;
}
.invite-card-container .invite-option hr {
border: none;
border-bottom: 1px solid #F0F0F0;
}
.invite-card-container .invite-option i {
color: #D8D8D8;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.invite-card-container .invite-option h1 {
margin: 10px 0;
color: #212121;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.invite-card-container .invite-option p {
color: #999;
padding: 0 10px;
line-height: 1.3;
}
.invite-card-container .invite-option .price {
position: relative;
}
.invite-card-container .invite-option .price .front span.price {
font-size: 2rem;
text-transform: uppercase;
margin-top: 20px;
display: block;
font-weight: 700;
position: relative;
}
.invite-card-container .invite-option .price .front span.price b {
position: absolute;
font-size: 1rem;
margin-left: 2px;
font-weight: 600;
}
.invite-card-container .invite-option .price .back {
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.invite-card-container .invite-option .price .back a.button {
background: #286090;
padding: 15px 20px;
display: inline-block;
text-decoration: none;
color: white;
position: absolute;
font-size: 13px;
top: -5px;
left: 0;
right: 0;
width: 150px;
margin: auto;
text-transform: uppercase;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.invite-card-container .invite-option .price .back a.button:hover {
background: #286090;
}
.invite-card-container .invite-option:hover i {
color: white;
}
.website-card-button-group {
display: flex;
justify-content: space-around;
}
.media {
border: 1px solid #d5dbdd;
padding: 5px 20px;
border-radius: 5px;
box-shadow: 0px 2px 1px rgba(0,0,0,0.04);
background: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
}
.align-self-center {
-ms-flex-item-align: center !important;
align-self: center !important;
}
.rounded-circle {
border-radius: 50%;
}
.media .media-left img {
width: 75px;
}
.shares-container {
list-style: none;
-webkit-padding-start: 0px;
}
/*
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/*
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/*
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
background: #fff;
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #666; }
/*
Tree expanded icon
*/
label.tree_label:before {
/*background: #000;*/
color: #000;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
font-family: FontAwesome;
content: '\f07b';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/*
Tree branches
*/
/*.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}*/
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
.tree_label.filez:after {
position: absolute;
font-family: FontAwesome;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '\f15c';
}
label.tree_label:active:before, label.tree_label:hover:before {
position: absolute;
font-family: FontAwesome;
top: 0;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '\f07c';
}
.breadcrumbs-list:last-child {
color: #777;
}
li.move-back {
margin-left: -20px;
}
label.tree_label:after { border-bottom: 0; }
ul.tree.files-only.ls-none {
margin-left: 30px;
}
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
.tree ul {
-webkit-padding-start: 0;
}
.websites-tile img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.websites-tile iframe {
border-width: 2px;
border-style: none;
border-color: none;
border-image: inone;
}
.websites-tile .btn {
background-color: white;
border: 1px solid #cccccc;
color: #696969;
padding: 0.5rem;
text-transform: uppercase;
}
.websites-tile .btn--block {
display: block;
width: 100%;
}
.websites-tile .cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.websites-tile .cards__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem;
}
@media (min-width: 40rem) {
.websites-tile .cards__item {
width: 50%;
}
}
@media (min-width: 56rem) {
.websites-tile .cards__item {
width: 33.3333%;
}
}
.websites-tile .card {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
max-width: 350px;
min-width: 350px;
}
.websites-tile .card:hover .card__image {
-webkit-filter: contrast(100%);
filter: contrast(100%);
}
.websites-tile .card__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
}
.websites-tile .card__image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background: rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
-webkit-filter: contrast(70%);
filter: contrast(70%);
overflow: hidden;
position: relative;
-webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.websites-tile .card__title {
color: #696969;
font-size: 1.25rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.websites-tile .card__text {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
.card__title.text-center {
margin-bottom: 10px;
}
a:hover, a:focus {
color: #2a6496;
text-decoration: none;
}
.square-service-block{
position:relative;
overflow:hidden;
margin:15px auto;
}
.square-service-block a {
background-color: #e74c3c;
border-radius: 5px;
display: block;
padding: 60px 20px;
text-align: center;
width: 100%;
}
.square-service-block a:hover{
background-color: rgba(231, 76, 60, 0.8);
border-radius: 5px;
}
.ssb-icon {
color: #fff;
display: inline-block;
font-size: 28px;
margin: 0 0 20px;
}
h2.ssb-title {
color: #fff;
font-size: 20px;
font-weight: 200;
margin:0;
padding:0;
text-transform: uppercase;
}

3
index.html

@ -34,6 +34,9 @@
<script src="/js/lib/angular/angular-local-storage.js" charset="utf-8"></script>
<script src="/js/lib/angular/angular-ui-router.min.js" charset="utf-8"></script>
<script src="/js/lib/angular/angucomplete-alt.min.js" charset="utf-8"></script>
<script src="/js/lib/ez-file-tree/ez-file-tree.min.js" charset="utf-8"></script>
<script src="/js/lib/ez-file-tree/ez-object2array.min.js" charset="utf-8"></script>
<!-- Core Files -->
<script src="/js/app.js" charset="utf-8"></script>
<!-- Services -->

2
js/app.js

@ -4,7 +4,7 @@
var angular = window.angular;
var OAUTH3 = window.OAUTH3;
var app = window.app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule', 'angucomplete-alt']);
var app = window.app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule', 'angucomplete-alt', 'ez.fileTree']);
app.directive('daplieFileChange', function () {
return {

188
js/controllers/website-controller.js

@ -36,9 +36,31 @@ function handleFiles(ev) {
window.document.body.addEventListener('change', handleFiles);
*/
app.directive('daplieFileChange', [function () {
return {
restrict: 'A',
require:"ngModel",
link: function (scope, element, attrs, ngModel) {
element.bind('change', function (event) {
var files = event.target.files;
ngModel.$setViewValue(files[0]);
scope.$eval(attrs.daplieFileChange);
});
}
};
}]);
app.directive('fileTree', [function () {
return {
restrict: 'EA',
templateUrl: '/templates/widgets/filetree.html',
controller: 'websiteCtrl as vm'
};
}]);
app.controller('websiteCtrl', [
'$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
, function ($scope, $q, Auth, Oauth3, $timeout) {
'$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout', '$sce'
, function ($scope, $q, Auth, Oauth3, $timeout, $sce) {
var vm = this;
var angular = window.angular;
@ -302,6 +324,7 @@ app.controller('websiteCtrl', [
console.log(r);
};
vm.Sites.upload = function (r) {
r.uploadPath = vm.autoPopulateWebPath;
var pkg = Auth.oauth3.pkg('www@daplie.com');
//analyzeFile(r.newFile, r);
vm._uploadFile(pkg, r);
@ -340,18 +363,83 @@ app.controller('websiteCtrl', [
window.alert(JSON.stringify(result));
});
};
vm.breadcrumbs = ['Root'];
vm.breadcrumbsPath = ['/'];
vm.breadcrumbPathClicked = false;
vm.webPathAutofill = '/';
vm.Sites.contents = function (r) {
vm.siteResults = r;
vm.directoryPath = r.newPath;
vm.siteDirectories = [];
vm.siteFiles = [];
var pkg = Auth.oauth3.pkg('www@daplie.com');
return pkg.contents({
hostname: r.domain
, domain: r.domain
, tld: r.tld
, sld: r.sld
//, sub: r.sub
, path: r.newPath
}).then(function (result) {
window.alert(JSON.stringify(result));
});
vm.getSiteContents = function (site, newPath) {
newPath = site;
site = vm.siteResults;
function updatePath (path) {
if (typeof path !== 'object') {
vm.breadcrumbs.push(path);
vm.breadcrumbsPath.push(path);
vm.autoPopulateWebPath = vm.breadcrumbsPath;
vm.autoPopulateWebPath.push('/');
vm.autoPopulateWebPath = vm.autoPopulateWebPath.join('');
}
if (vm.breadcrumbPathClicked) {
if (path === 'Root') {
vm.breadcrumbs = ['Root'];
vm.breadcrumbsPath = ['/'];
vm.breadcrumbPathClicked = false;
vm.autoPopulateWebPath = "/";
vm.showUploadContainer = false;
} else {
var breadcrumbsPath = vm.breadcrumbsPath;
var breadcrumbs = vm.breadcrumbs;
var removeFromBreadcrumbsPath = breadcrumbsPath.indexOf(path) + 1;
var removeFromBreadcrumbs = breadcrumbs.indexOf(path) + 1;
vm.breadcrumbsPath = breadcrumbsPath.splice(0,removeFromBreadcrumbsPath);
vm.breadcrumbs = breadcrumbs.splice(0,removeFromBreadcrumbs);
var updatebreadcrumbsPath = vm.breadcrumbsPath;
vm.autoPopulateWebPath = updatebreadcrumbsPath.join('');
vm.autoPopulateWebPath = vm.autoPopulateWebPath+"/";
}
}
}
updatePath(newPath);
return pkg.contents({
hostname: site.domain,
domain: site.domain,
tld: site.tld,
sld: site.sld,
//, sub: r.sub,
path: vm.breadcrumbsPath.join('/')
}).then(function (result) {
vm.folderStructure = result;
result.data.forEach(function(file) {
if (file.directory) {
vm.siteDirectories.push(file.name);
} else if (file.file) {
vm.siteFiles.push(file.name);
}
});
});
};
vm.getSiteContents(r);
};
vm.getDirectories = function (path) {
vm.siteDirectories = [];
vm.siteFiles = [];
var site = vm.siteResults;
vm.directoryPath = path;
vm.getSiteContents(path, site);
};
vm.getDirectoriesFromBreadcrumbs = function (dir) {
vm.breadcrumbPathClicked = true;
vm.siteDirectories = [];
vm.siteFiles = [];
vm.getSiteContents(dir);
};
vm.Shares = {};
@ -455,6 +543,10 @@ app.controller('websiteCtrl', [
console.log('[listSites] sites:');
console.log(sites);
vm.sites = sites;
vm.sites.forEach(function(site) {
site.urlSafeDomain = "https://" + site.domain;
site.urlSafeDomain = $sce.trustAsResourceUrl(site.urlSafeDomain);
});
});
};
@ -489,6 +581,78 @@ app.controller('websiteCtrl', [
});
return matches;
};
vm.showAction = function (action) {
switch(action) {
case 'invite':
vm.showInviteContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
case 'shares':
vm.showSharesContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
case 'files':
vm.showFilesContainer = true;
vm.websiteTiles = true;
vm.showBackBtn = true;
break;
default:
}
};
vm.closeAllOpenActions = function () {
$timeout(function() {
vm.showInviteContainer = false;
vm.showSharesContainer = false;
vm.showFilesContainer = false;
vm.websiteTiles = false;
vm.showBackBtn = false;
}, 150);
};
}]);
}());
app.filter('stringify', function() {
function getSerialize (fn, decycle) {
var seen = [], keys = [];
decycle = decycle || function(key, value) {
return '[Parent REFERENCE]: ' + value.id;
};
return function(key, value) {
var ret = value;
if (typeof value === 'object' && value) {
if (seen.indexOf(value) !== -1)
ret = decycle(key, value);
else {
seen.push(value);
keys.push(key);
}
}
if (fn) ret = fn(key, ret);
return ret;
};
}
function getPath (value, seen, keys) {
var index = seen.indexOf(value);
var path = [ keys[index] ];
for (index--; index >= 0; index--) {
if (seen[index][ path[0] ] === value) {
value = seen[index];
path.unshift(keys[index]);
}
}
return '~' + path.join('.');
}
function stringify(obj, fn, spaces, decycle) {
return JSON.stringify(obj, getSerialize(fn, decycle), spaces);
}
stringify.getSerialize = getSerialize;
return function(ob) {
return stringify(ob, undefined, 2);
};
});

1
js/lib/ez-file-tree/ez-file-tree.min.js

File diff suppressed because one or more lines are too long

1
js/lib/ez-file-tree/ez-object2array.min.js

@ -0,0 +1 @@
angular.module("ez.object2array",[]).filter("object2array",[function(){return function(a){if("[object Array]"===Object.prototype.toString.call(a))return a;var b=[];for(var c in a)b.push(a[c]);return b}}]);

4
templates/account-settings.html

@ -57,7 +57,7 @@
<span ng-bind="session.subject"></span>
<p class="text-muted small" ng-bind="session.issuer"></p>
<div class="divider"></div>
<button type="button" class="btn btn-default" disabled ng-if="vm.session.subject == session.subject">Current Profile</button>
<button type="button" class="btn btn-default" disabled ng-if="vm.session.subject == session.subject && vm.session.issuer == session.issuer">Current Profile</button>
</div>
</div>
</div>
@ -68,7 +68,7 @@
<a class="btn btn-default btn-sm" ng-click="vm.selectSession(session);">Use Account</a>
</div>
<div class="col-md-6">
<a class="btn btn-default btn-sm pull-right" ng-if="vm.session.subject == session.subject" ng-click="vm.signOut()">Sign Out</a>
<a class="btn btn-default btn-sm pull-right" ng-if="vm.session.subject == session.subject && vm.session.issuer == session.issuer" ng-click="vm.signOut()">Sign Out</a>
</div>
</div>
</div>

2
templates/splash-page.html

@ -3,7 +3,7 @@
<h4 class="text-center">Sign in</h4>
<a href="#!/home" class="current-user-container" ng-repeat="profile in vm.Auth.sessions track by $index" ng-click="vm.selectSession(profile);">
<div class="current-user-split"><i class="fa fa-user"></i></div>
<div class="current-user-text">Resume with {{ profile.email }}</div>
<div class="current-user-text">Resume with {{ profile.email }} | {{ profile.issuer }}</div>
</a>
<div class="form-group">
<label for="dap-address">Address</label>

341
templates/website.html

@ -1,139 +1,238 @@
<style>
.panel{
box-shadow: none;
border: none;
}
</style>
<div class="container">
<div class="row">
<div class="home-container">
<div class="white-well">
<h1>Create a new Website</h1>
<h3>Select a Domain</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="www" ng-model="vm.newRecord" ng-change="vm.setRecord()" />
<div class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="record in vm.records track by $index"><button class="btn btn-link" ng-bind="record.sub" ng-click="vm.selectRecord(record)">www</button></li>
</ul>
</div>
</div>
<span class="input-group-addon">.</span>
<div angucomplete-alt
placeholder="Select a domain"
pause="300"
selected-object="vm.selectedDomain"
local-data="domain"
local-search="localDomainSearch"
title-field="domain"
minlength="0"
input-class="form-control trigger-dropdown"
match-class="highlight">
</div>
<button class="btn btn-primary btn-lg" title="..." data-toggle="modal" data-target=".create-website-modal">
Create Website
</button>
<hr>
<div class="modal fade create-website-modal" tabindex="-1" role="dialog" aria-labelledby="create-website-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Create a new Website</h4>
</div>
<div class="modal-body">
<h4>Select a domain</h4>
<div class="input-group">
<div angucomplete-alt
placeholder="Select a domain"
pause="300"
selected-object="vm.selectedDomain"
local-data="domain"
local-search="localDomainSearch"
title-field="domain"
minlength="0"
input-class="form-control trigger-dropdown"
match-class="highlight">
</div>
<!-- <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" /> -->
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default trigger-dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.triggerDropdown()"><span class="caret"></span>
</button>
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="www" ng-model="vm.newRecord" ng-change="vm.setRecord()" />
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="record in vm.records track by $index"><button class="btn btn-link" ng-bind="record.sub" ng-click="vm.selectRecord(record)">www</button></li>
</ul>
</div>
</div>
</div>
<!-- <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" /> -->
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default trigger-dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.triggerDropdown()"><span class="caret"></span>
</button>
<div class="input-group">
<div>
<label>Select .zip upload</label>
<input type="file" class="js-file-upload this-has-a-special-non-angular-event-handler" />
</div>
<div ng-if="vm.isZip" >
<label>
<input type="checkbox" ng-model="vm.unzip" />
Unpack .zip
</label>
</div>
<div ng-if="vm.unzip" >
<label>
<input type="checkbox" ng-model="vm.stripZip" />
Strip zip directory root
</label>
</div>
<!-- <div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
<div ng-if="vm.uploadTotal">
<span ng-bind="vm.uploadPercent">99</span>% | <span ng-bind="vm.uploadProgress">1</span> MiB / <span ng-bind="vm.uploadTotal">100</span> MiB
</div>
<div>
<label>Web path</label>
<input type="text" class="form-control" ng-model="vm.uploadPath" />
</div>
<button ng-click="vm.Sites.create()" type="button" name="button" class="btn btn-default">Create Website</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.showSharesList = false; vm.showListFiles = false;">Close</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<!--
Choose or create a public shared folder <button class="btn btn-default">Select Daplie Folder</button>
<br>
-->
<div class="input-group">
<div><label>Select .zip upload</label> <input type="file" ng-model="vm.newFile" daplie-file-change="vm.Sites.setUpload(vm)" /></div>
<div ng-if="vm.isZip" ><label><input type="checkbox" ng-model="vm.unzip" /> Unpack .zip</label></div>
<div ng-if="vm.unzip" ><label><input type="checkbox" ng-model="vm.stripZip" /> Strip zip directory root</label></div>
<!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
</div>
</div>
<div ng-if="vm.uploadTotal"><span ng-bind="vm.uploadPercent">99</span>% | <span ng-bind="vm.uploadProgress">1</span> MiB / <span ng-bind="vm.uploadTotal">100</span> MiB</div>
<div><label>Web path</label> <input type="text" ng-model="vm.uploadPath" /></div>
</div>
<div class="invite-card-container">
<div class="invite-option">
<h1>Enter Invite Code</h1>
<hr />
<input type="text" class="form-control" ng-model="vm.Shares.inviteToken" />
<hr />
<div class="price">
<div class="front">
<span class="price">&nbsp;</span>
</div>
</div>
<!--
<div class="panel panel-default">
<div class="panel-body">
Who can edit and upload to this site? <input placeholder="Type contact name or email address" type="text" class="form-control">
<div class="">
<a class="btn btn-primary" ng-click="vm.Shares.accept()">Accept Invite</a>
</div>
</div>
-->
<!-- <div class="form-group">
<div class="pull-right"> -->
<button ng-click="vm.Sites.create()" type="button" name="button" class="btn btn-default">Create Website</button>
<!-- </div>
</div> -->
<div class="input-group">
<div><label>Invite Code</label> <input type="text" ng-model="vm.Shares.inviteToken" /></div>
<button ng-click="vm.Shares.accept()" type="button" name="button" class="btn btn-default">Accept Invite</button>
</div>
</div>
<div class="white-well">
<h1>Your Websites</h1>
<div ng-repeat="r in vm.sites">
<table class="table">
<tbody>
<tr>
<td>
<a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a>
<span ng-if="r.pending">(pending)</span>
<a ng-href="{{r.download}}" target="_blank">Download</a>
<!-- button class="btn btn-link" ng-click="vm.Sites.archive(r)">download</button -->
<button class="btn btn-link" ng-click="vm.Sites.remove(r, { path: '/', confirm: true })">Clear</button>
</td>
<td>
<input type="text" ng-model="r.newPath" placeholder="/" />
<button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
</td>
<td ng-bind="r.path">Sites > blogs > blog.jane.smith.net</td>
<td>
<div ng-repeat="share in r.sharedWith" ng-if="!share.me">
<span ng-bind="share.path">/</span>
<span ng-bind="share.comment">friend@email.com</span>
<em ng-if="share.pending">pending</em>
(<span ng-bind="share.mode">rwx</span>)
<button class="btn btn-link" ng-click="vm.Shares.remove(r, share)">[X]</button>
</div>
</td>
<td>
<input type="text" ng-model="r.shareEmail" placeholder="ex: john@example.com" />
<input type="text" ng-model="r.sharePath" placeholder="/" />
<input type="text" ng-model="r.shareMode" placeholder="rwx (read, write, invite)" />
<button class="btn btn-default" ng-click="vm.Shares.invite(r)">Invite</button>
<button class="btn btn-default" ng-click="vm.Shares.list(r)">List Shares</button>
</td>
</tr>
</tbody>
</table>
<div class="input-group">
<div><label>Select upload</label> <input type="file" ng-model="r.newFile" daplie-file-change="vm.Sites.setUpload(r)" /></div>
<div ng-if="r.isZip" ><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
<div ng-if="r.unzip" ><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
<!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
</div>
<div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
<hr>
<div class="row">
<div class="websites-tile">
<h1>Your Websites</h1>
<ul class="cards">
<li class="cards__item" ng-repeat="r in vm.sites">
<div class="card">
<div class="card__image card__image--fence">
<iframe src="{{ r.urlSafeDomain }}" width="350" height="350"></iframe>
</div>
<div class="card__content">
<div class="card__title text-center"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.domain">example.com</a></div>
<button class="btn btn--block card__btn" data-toggle="modal" data-target=".{{ r.challenge }}" ng-click="vm.closeAllOpenActions()">Edit</button>
</div>
</div>
</li>
</ul>
</div>
<div><label>Web path</label> <input type="text" ng-model="r.uploadPath" /></div>
<button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
<div class="modal fade {{ r.challenge }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="vm.closeAllOpenActions()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.urlSafeDomain">example.com</a></h4>
</div>
<div class="modal-body">
<div class="website-menu container" ng-hide="vm.websiteTiles">
<div class="row">
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.showAction('invite')" class="cp">
<div class="ssb-icon"><i class="fa fa-share-square-o" aria-hidden="true"></i></div>
<h2 class="ssb-title">Invite</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.showAction('shares'); vm.Shares.list(r)" class="cp">
<div class="ssb-icon"> <i class="fa fa-list-alt" aria-hidden="true"></i> </div>
<h2 class="ssb-title">Shares</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.showAction('files'); vm.Sites.contents(r)" class="cp">
<div class="ssb-icon"><i class="fa fa-sitemap" aria-hidden="true"></i></div>
<h2 class="ssb-title">Files</h2>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="square-service-block">
<a ng-href="https://{{ r.domain }}" target="_blank" class="cp">
<div class="ssb-icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
<h2 class="ssb-title">Website</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.Sites.archive(r)" class="cp">
<div class="ssb-icon"><i class="fa fa-file-archive-o" aria-hidden="true"></i></div>
<h2 class="ssb-title">Download</h2>
</a>
</div>
</div>
<div class="col-md-3">
<div class="square-service-block">
<a ng-click="vm.Sites.remove(r)" class="cp">
<div class="ssb-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
<h2 class="ssb-title">Delete</h2>
</a>
</div>
</div>
</div>
</div>
<div ng-show="vm.showInviteContainer">
<h1>TODO:// FIX THIS UGLY</h1>
<form class="form-inline text-center">
<div class="form-group">
<input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" />
</div>
<div class="form-group">
<input type="text" ng-model="r.sharePath" class="form-control" placeholder="/" />
</div>
<div class="form-group">
<input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" />
</div>
<button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
</form>
</div>
<div ng-show="vm.showSharesContainer">
<span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span>
<ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
<li>
<div class="media">
<div class="media-left align-self-center">
<img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png">
</div>
<div class="media-body">
<h4 ng-bind="share.comment">friend@email.com</h4>
<p><b>Share Path:</b> <span ng-bind="share.path" class="text-muted">/</span></p>
<p><b>Actions Allowed:</b> <span ng-bind="share.mode" class="text-muted">rwx</span></p>
<p><b>Invite:</b> <em ng-if="share.pending" class="text-muted">pending</em></p>
</div>
<div class="media-right align-self-center">
<button class="btn btn-danger" ng-click="vm.Shares.remove(r, share)">Remove Access</button>
</div>
</div>
</li>
</ul>
</div>
<div ng-show="vm.showFilesContainer">
<file-tree r="r"></file-tree>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-primary pull-left" ng-show="vm.showBackBtn" ng-click="vm.closeAllOpenActions()">Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.closeAllOpenActions()">Close</button>
</div>
</div>
</div>
</div>

58
templates/widgets/filetree.html

@ -0,0 +1,58 @@
<div class="text-left">
<div class="row">
<ul class="breadcrumb">
<li ng-repeat="breadcrumb in vm.breadcrumbs track by $index" ng-click="vm.getDirectoriesFromBreadcrumbs(breadcrumb)" data="{{ breadcrumb }}" class="cp breadcrumbs-list">
{{ breadcrumb }}
</li>
</ul>
</div>
<div class="row">
<div class="col-lg-6">
<ul class="tree ls-none">
<li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
<input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
<label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.getDirectories(directory); vm.showUploadContainer = false" data="{{ directory }}">{{ directory }}</label>
</li>
</ul>
<ul class="tree files-only ls-none">
<li ng-repeat="file in vm.siteFiles track by $index">
<span class="tree_label filez">{{ file }}</span><span class="pull-right"><button type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></button></span>
</li>
<li class="move-back">
<a ng-click="vm.showUploadContainer = true;"><i class="fa fa-plus"></i> Add Files</a>
</li>
</ul>
<div class="upload-container" ng-show="vm.showUploadContainer">
<hr>
<h4 class="text-left">Upload Files:</h4>
<div>
<input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
<div ng-if="r.isZip"><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
<div ng-if="r.unzip"><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
<!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
<div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
<div>
<label>Web path</label>
<input type="text" class="form-control" ng-model="vm.autoPopulateWebPath" />
<!-- <input type="text" class="form-control" ng-model="r.uploadPath" placeholder="{{ vm.autoPopulateWebPath }}"/> -->
</div>
<button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" class="btn btn-danger" ng-click="vm.Sites.remove(r)"><i class="fa fa-trash"></i> Remove all Files</button>
</div>
</div>
</div>
Loading…
Cancel
Save