Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update js api

  • Loading branch information...
commit 9a3107aea6ee2cec4d99c7a1c3661a65d8479fe2 1 parent 7445624
@niavok niavok authored
Showing with 330 additions and 9 deletions.
  1. +159 −1 api/js/test.html
  2. +171 −8 resources/www_src/resources/commons/api/software.js
View
160 api/js/test.html
@@ -5,8 +5,10 @@
<body>
Feature list test
<div class="elveos-feature-list"><a href="https://elveos.org/softwares/852">Features to fund with Elveos</a></div>
+Compact feature list test
+<div class="elveos-compact-feature-list"><a href="https://elveos.org/softwares/852">Features to fund with Elveos</a></div>
<script type="text/javascript" src="software.js"></script>
-<!--<script type="text/javascript" src="https://elveos.org/resources/commons/api/software.js"></script>-->
+<!--<script type="text/javascript" src="https://elveos.org/resources/commons/api/software.js"></script>
Fake Feature list test
@@ -163,5 +165,161 @@
</div>
</div>
</div>
+<div class="elveos-compact-feature-list">
+ <style>
+
+ .elveos-compact-feature-list {
+ border: 1px solid rgb(127,127,127);
+ border-radius: 20px;
+ padding: 10px;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ background: rgb(248,248,248);
+ max-width: 350px;
+ }
+
+ .elveos-compact-feature {
+ margin: 10px;
+ vertical-align: top;
+ font-family: Arial,Sans;
+ color: rgb(51,51,51);
+ border-bottom: 1px solid rgb(127,127,127);
+ }
+
+ .elveos-compact-feature:last-child {
+ border-bottom: none;
+ }
+
+ .elveos-feature-title {
+ margin: 0px;
+ margin-top: 5px;
+ margin-bottom: 15px;
+ }
+
+ .elveos-progress-bar-block {
+ display: inline-block;
+ margin-left: 0px;
+ margin-right: 0px;
+ width: 100%;
+ }
+
+ .elveos-progress-bar-background, .elveos-progress-bar-state, .elveos-progress-bar-label {
+ display: block;
+ height: 16px;
+ margin: 0;
+ padding: 0;
+ }
+
+ .elveos-progress-bar-background {
+ background: -moz-linear-gradient(90deg, rgb(196,196,196), rgb(230,230,230)) repeat scroll 0 0 transparent;
+ margin-bottom: 0;
+ width: 100%;
+ }
+
+ .elveos-progress-bar-state {
+ background: -moz-linear-gradient(90deg, rgb(0,0,0), rgb(73,73,73)) repeat scroll 0 0 transparent;
+ margin-top: -16px;
+ }
+
+ .elveos-progress-bar-label {
+ color: white;
+ font-size: 11px;
+ margin-top: -15px;
+ text-align: center;
+ width: 100%;
+ }
+
+ .elveos-feature-title {
+ font-size: 20px;
+ color: rgb(51,51,51)
+ }
+
+ .elveos-progress-text {
+ color: black;
+ display: inline-block;
+ font-size: 13px;
+ text-align: center;
+ width: 100%;
+ }
+
+ .elveos-important {
+ font-size: 14px;
+ font-weight: bold;
+ margin-left: 1em;
+ margin-right: 1em;
+ }
+
+ .elveos-compact-button {
+ display: block;
+
+ background: -moz-linear-gradient(90deg, rgb(0,0,0), rgb(73,73,73)) repeat scroll 0 0 transparent;
+ border: 1px solid rgb(78,78,78);
+ border-radius: 7px;
+ color: white;
+ cursor: pointer;
+ font-size: 14px;
+ text-align:center;
+ padding-top: 3px;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-bottom: 3px;
+ text-decoration: none;
+ width: 100px;
+ }
+
+ .elveos-compact-more-info {
+ margin-top: 0px;
+ }
+
+ .elveos-compact-more-info a {
+ font-size: 13px;
+ color: rgb(0,0,168);
+ text-decoration: none;
+ }
+
+ .elveos-feature-link-block {
+ float: right;
+ }
+ </style>
+ <div class="elveos-compact-feature">
+ <p class="elveos-feature-title">Improve Property fields</p>
+ <div class="elveos-progress-bar-block">
+ <div class="elveos-progress-bar-background"></div>
+ <div class="elveos-progress-bar-state" style="width: 63.0%;"></div>
+ </div>
+ <p class="elveos-progress-text">
+ <span class="elveos-important">195&nbsp;€</span> i.e <span class="elveos-important">49&nbsp;%</span> of <span class="elveos-important">400&nbsp;€</span> requested </p>
+ <div class="elveos-feature-link-block">
+ <a class="elveos-compact-button" href="https://127.0.0.1/features/845">Finance It</a>
+ </div>
+ <p class="elveos-compact-more-info"><a href="https://127.0.0.1/features/845">More info ...</a></p>
+ </div>
+ <div class="elveos-compact-feature">
+ <p class="elveos-feature-title">Improve Property fields</p>
+ <div class="elveos-progress-bar-block">
+ <div class="elveos-progress-bar-background"></div>
+ <div class="elveos-progress-bar-state" style="width: 63.0%;"></div>
+ </div>
+ <p class="elveos-progress-text">
+ <span class="elveos-important">195&nbsp;€</span> i.e <span class="elveos-important">49&nbsp;%</span> of <span class="elveos-important">400&nbsp;€</span> requested </p>
+ <div class="elveos-feature-link-block">
+ <a class="elveos-compact-button" href="https://127.0.0.1/features/845">Finance It</a>
+ </div>
+ <p class="elveos-compact-more-info"><a href="https://127.0.0.1/features/845">More info ...</a></p>
+ </div>
+<div class="elveos-compact-feature">
+ <p class="elveos-feature-title">Improve Property fields</p>
+ <div class="elveos-progress-bar-block">
+ <div class="elveos-progress-bar-background"></div>
+ <div class="elveos-progress-bar-state" style="width: 63.0%;"></div>
+ </div>
+ <p class="elveos-progress-text">
+ <span class="elveos-important">195&nbsp;€</span> i.e <span class="elveos-important">49&nbsp;%</span> of <span class="elveos-important">400&nbsp;€</span> requested </p>
+ <div class="elveos-feature-link-block">
+ <a class="elveos-compact-button" href="https://127.0.0.1/features/845">Finance It</a>
+ </div>
+ <p class="elveos-compact-more-info"><a href="https://127.0.0.1/features/845">More info ...</a></p>
+ </div>
+</div>-->
</body>
</html>
View
179 resources/www_src/resources/commons/api/software.js
@@ -173,7 +173,111 @@ function elveos_getCss() {
}
-function elveos_generateFeature(feature) {
+function elveos_getCompactCss() {
+ return "\
+<style> \
+.elveos-compact-feature-list {\
+ border: 1px solid rgb(127,127,127);\
+ border-radius: 20px;\
+ padding: 10px;\
+ padding-top: 0px;\
+ padding-bottom: 0px;\
+ background: rgb(248,248,248);\
+ max-width: 350px;\
+}\
+.elveos-compact-feature {\
+ margin: 10px;\
+ vertical-align: top;\
+ font-family: Arial,Sans;\
+ color: rgb(51,51,51);\
+ border-bottom: 1px solid rgb(127,127,127);\
+}\
+.elveos-compact-feature:last-child {\
+ border-bottom: none;\
+}\
+.elveos-feature-title {\
+ margin: 0px;\
+ margin-top: 5px;\
+ margin-bottom: 15px;\
+}\
+.elveos-progress-bar-block {\
+ display: inline-block;\
+ margin-left: 0px;\
+ margin-right: 0px;\
+ width: 100%;\
+}\
+.elveos-progress-bar-background, .elveos-progress-bar-state, .elveos-progress-bar-label {\
+ display: block;\
+ height: 16px;\
+ margin: 0;\
+ padding: 0;\
+}\
+.elveos-progress-bar-background {\
+ background: -moz-linear-gradient(90deg, rgb(196,196,196), rgb(230,230,230)) repeat\ scroll 0 0 transparent;\
+ margin-bottom: 0;\
+ width: 100%;\
+}\
+.elveos-progress-bar-state {\
+ background: -moz-linear-gradient(90deg, rgb(0,0,0), rgb(73,73,73)) repeat scroll 0 0 transparent;\
+ margin-top: -16px;\
+}\
+.elveos-progress-bar-label {\
+ color: white;\
+ font-size: 11px;\
+ margin-top: -15px;\
+ text-align: center;\
+ width: 100%;\
+}\
+.elveos-feature-title {\
+ font-size: 20px;\
+ color: rgb(51,51,51)\
+}\
+.elveos-progress-text {\
+ color: black;\
+ display: inline-block;\
+ font-size: 13px;\
+ text-align: center;\
+ width: 100%;\
+}\
+.elveos-important {\
+ font-size: 14px;\
+ font-weight: bold;\
+ margin-left: 1em;\
+ margin-right: 1em;\
+}\
+.elveos-compact-button {\
+ display: block;\
+ background: -moz-linear-gradient(90deg, rgb(0,0,0), rgb(73,73,73)) repeat scroll 0 0 transparent;\
+ border: 1px solid rgb(78,78,78);\
+ border-radius: 7px;\
+ color: white;\
+ cursor: pointer;\
+ font-size: 14px;\
+ text-align:center;\
+ padding-top: 3px;\
+ margin-left: 10px;\
+ margin-right: 10px;\
+ padding-bottom: 3px;\
+ text-decoration: none;\
+ width: 100px;\
+}\
+.elveos-compact-more-info {\
+ margin-top: 0px;\
+}\
+.elveos-compact-more-info a {\
+ font-size: 13px;\
+ color: rgb(0,0,168);\
+ text-decoration: none;\
+}\
+.elveos-feature-link-block {\
+ float: right;\
+}\
+</style>\
+ ";
+
+}
+
+function elveos_generateFeature(feature, compact) {
var contribution = parseFloat(feature.getElementsByTagName('contribution')[0].firstChild.data);
var progression = parseFloat(feature.getAttribute("progression"));
var title = feature.getElementsByTagName('title')[0].firstChild.data;
@@ -216,6 +320,7 @@ function elveos_generateFeature(feature) {
}
var out ="";
+ if(!compact) {
out+="\
<div class=elveos-feature>\
<div class=elveos-feature-three-column>\
@@ -274,24 +379,72 @@ function elveos_generateFeature(feature) {
</div>\
</div>\
";
+ } else {
+
+out+="\
+<div class=elveos-compact-feature>\
+ <p class=elveos-feature-title>"+title+"</p>\
+ <div class=elveos-progress-bar-block>\
+ <div class=elveos-progress-bar-background></div>\
+ <div class=elveos-progress-bar-state style=\"width: "+progression+"%;\"></div>";
+
+ if (state == "success") {
+ out+="\
+ <div class=elveos-progress-bar-label >Funding success</div>";
+ } else if (state == "development") {
+ out+="\
+ <div class=elveos-progress-bar-label >Development ongoing</div>";
+ }
+
+ out+="\
+ </div>\
+ <p class=elveos-progress-text>";
+ if(offerAmount == null) {
+ out+="\
+ <span class=elveos-important>"+contribution+"&nbsp;€</span>funded</p>";
+ } else {
+ out+="\
+ <span class=elveos-important>"+contribution+"&nbsp;€</span> i.e <span class=elveos-important>"+progress+"&nbsp;%</span> of <span class=elveos-important>"+offerAmount+"&nbsp;€</span> requested</p>";
+ }
+ out+="\
+ <div class=elveos-feature-link-block>";
+ if(state == "funding") {
+ out+="\
+ <a class=elveos-compact-button href=\""+elveos_hostname+"/contribution/process?feature="+id+"\">Finance It</a>";
+ } else if (state == "success") {
+ out+="\
+ <a class=elveos-compact-button href=\""+elveos_hostname+"/features/"+id+"/description\"\">More info</a>";
+ } else if (state == "development") {
+ out+="\
+ <a class=elveos-compact-button href=\""+elveos_hostname+"/features/"+id+"/description\"\">More info</a>";
+ }
+ out+="\
+ </div>";
+ if(state == "funding") {
+ out+="\
+ <p class=elveos-compact-more-info><a href=\""+elveos_hostname+"/features/"+id+"/description\">More info ...</a></p>";
+ }
+ out+="\
+</div>\
+";
+ }
return out;
}
-function elveos_startGenerateFeatureList(featureListElement) {
+
+function elveos_startGenerateFeatureList(featureListElement, compact) {
var link = featureListElement.getElementsByTagName('a')[0].getAttribute('href');
var softwareId = parseInt(/.*\/softwares\/([0-9]+)/.exec(link)[1]);
- featureListElement.innerHTML = softwareId;
- return
elveos_ajax(elveos_hostname + '/rest/features?software='+softwareId, function(xml) {
//Add css
- var html = elveos_getCss();
+ var html = (compact?elveos_getCompactCss():elveos_getCss());
var features = xml.getElementsByTagName('features')[0].childNodes;
for(var i = 0; i < features.length; i++) {
if(features[i].nodeType ==1) {
- html += elveos_generateFeature(features[i]);
+ html += elveos_generateFeature(features[i],compact);
}
}
@@ -307,7 +460,17 @@ function elveos_startGenerateFeatureList(featureListElement) {
if(featureList != undefined && featureList.getAttribute('data-generated') != 'true') {
featureList.setAttribute('data-generated', 'true');
- elveos_startGenerateFeatureList(featureList);
+ elveos_startGenerateFeatureList(featureList, false);
}
- }
+ }
+
+ var compactFeatureLists = document.getElementsByClassName('elveos-compact-feature-list');
+ var compactFeatureList;
+ for(var i = 0; ((compactFeatureList = compactFeatureLists[i]) != null); i++) {
+
+ if(compactFeatureList != undefined && compactFeatureList.getAttribute('data-generated') != 'true') {
+ compactFeatureList.setAttribute('data-generated', 'true');
+ elveos_startGenerateFeatureList(compactFeatureList, true);
+ }
+ }
})();
Please sign in to comment.
Something went wrong with that request. Please try again.