How to Third Party javascript in sap ui5

Third Party javascript in sap ui5

view.xml


<content>
<Panel id="Photo"></Panel>
</content>

first add only one panel with id  to your view.xml file.

controller.js


in the controller.js file i defined libs file and placed this lib files in lib folder then i create one canvas.

why canvas ?

canvas allowes to you to write a html code in controller. in the canvas we write html code with + sign
+ sign is used to add div.

after that i bind that canvas with panel. means directly i put this html cde in panel.

and other functions available with this lib files this put directly in controller.js directly

check once below. i implemented digital clock from ( https://www.jqueryscript.net/demo/Simple-Digital-Countdown-Clock-with-jQuery-CSS3/ ) check and implemet that.



sap.ui.define(
[ 'sap/ui/core/mvc/Controller', "digiclock/libs/show_ads" ],
function(Controller, show_adsjs) {
"use strict";
var iModel = new sap.ui.model.json.JSONModel();
return Controller
.extend(
"digiclock.s1",
{
onInit : function() {

var map = this.getView().byId(
"Photo");
var canvas = new sap.ui.core.HTML(
{
content : "<section class='clock'>"
+ +"<div id='digit-10' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+ "<div id='digit-9' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+ "<div id='digit-8' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-7' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+ "<div id='digit-6' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-5' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-4' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-3' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-2' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-1' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+

"<div id='digit-0' class='digit'>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "<div class='cell'></div>"
+ "</div>"
+ "</<section>"
});

map.addContent(canvas);

},

onAfterRendering : function() {

var grad = new Date(2019, 11, 1,
14, 0, 0, 0, 0), digit0 = $('#digit-0'), digit1 = $('#digit-1'), digit2 = $('#digit-2'), digit3 = $('#digit-3'), digit4 = $('#digit-4'), digit5 = $('#digit-5'), digit6 = $('#digit-6'), digit7 = $('#digit-7'), digit8 = $('#digit-8'), digit9 = $('#digit-9'), digit10 = $('#digit-10');

function renderDigit(container,
number) {
var matrix;
switch (number) {
case 0:
matrix = [ true, true,
true, true, true,
false, false, true,
true, false, false,
true, true, false,
false, true, true,
false, false, true,
true, false, false,
true, true, true,
true, true ];
break;
case 1:
matrix = [ false, false,
false, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true,
false, false,
false, true ];
break;
case 2:
matrix = [ true, true,
true, true, false,
false, false, true,
false, false,
false, true, true,
true, true, true,
true, false, false,
false, true, false,
false, false, true,
true, true, true ];
break;
case 3:
matrix = [ true, true,
true, true, false,
false, false, true,
false, false,
false, true, false,
true, true, true,
false, false,
false, true, false,
false, false, true,
true, true, true,
true ];
break;
case 4:
matrix = [ true, false,
false, false, true,
false, false, true,
true, false, false,
true, true, true,
true, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true ];
break;
case 5:
matrix = [ true, true,
true, true, true,
false, false,
false, true, false,
false, false, true,
true, true, true,
false, false,
false, true, false,
false, false, true,
true, true, true,
true ];
break;
case 6:
matrix = [ true, true,
true, true, true,
false, false,
false, true, false,
false, false, true,
true, true, true,
true, false, false,
true, true, false,
false, true, true,
true, true, true ];
break;
case 7:
matrix = [ true, true,
true, true, true,
false, false, true,
false, false,
false, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true,
false, false,
false, true ];
break;
case 8:
matrix = [ true, true,
true, true, true,
false, false, true,
true, false, false,
true, true, true,
true, true, true,
false, false, true,
true, false, false,
true, true, true,
true, true ];
break;
case 9:
matrix = [ true, true,
true, true, true,
false, false, true,
true, false, false,
true, true, true,
true, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true ];
break;
case 10:
matrix = [ true, true,
true, true, true,
false, false, true,
true, false, false,
true, true, true,
true, true, false,
false, false, true,
false, false,
false, true, false,
false, false, true ];
break;
}
var children = container
.children();
var len = matrix.length;
for (var i = 0; i < len; i++) {
children.eq(i).toggleClass(
'on', matrix[i]);
}
}

function render() {
debugger;
var now = new Date(), diff = String(grad
.getTime()
- now.getTime()), len = diff.length;
renderDigit(digit0, Number(diff
.charAt(len - 1)));
renderDigit(digit1, Number(diff
.charAt(len - 2)));
renderDigit(digit2, Number(diff
.charAt(len - 3)));
renderDigit(digit3, Number(diff
.charAt(len - 4)));
renderDigit(digit4, Number(diff
.charAt(len - 5)));
renderDigit(digit5, Number(diff
.charAt(len - 6)));
renderDigit(digit6, Number(diff
.charAt(len - 7)));
renderDigit(digit7, Number(diff
.charAt(len - 8)));
renderDigit(digit8, Number(diff
.charAt(len - 9)));
renderDigit(digit9, Number(diff
.charAt(len - 10)));
renderDigit(
digit10,
Number(diff
.charAt(len - 11)));
requestAnimationFrame(render);
debugger;
}

requestAnimationFrame(render);

debugger;

}

});
});



index.html


<link rel="stylesheet" href="css/style.css">


style.css



.clock {
  font-size: 0;
  text-align: center;
}

.clock .digit {
  display: inline-block;
  width: 88px;
  margin: 10px;
  -webkit-transform: skewX(-2deg);
  transform: skewX(-2deg);
}

.clock .digit#digit-2 .cell {
  -webkit-transition: opacity 50ms ease;
  transition: opacity 50ms ease;
}

.clock .digit#digit-3 .cell,
.clock .digit#digit-4 .cell,
.clock .digit#digit-5 .cell,
.clock .digit#digit-6 .cell,
.clock .digit#digit-7 .cell,
.clock .digit#digit-8 .cell,
.clock .digit#digit-9 .cell,
.clock .digit#digit-10 .cell,
.clock .digit#digit-11 .cell {
  -webkit-transition: opacity 100ms ease;
  transition: opacity 100ms ease;
}

.clock .digit .cell {
  width: 18px;
  height: 18px;
  margin: 2px;
  background-color: black;

  border-radius: 2px;
  display: inline-block;
  opacity: 0.1;
}

.clock .digit .cell.on { opacity: 2; }


.sapMPanelBGTranslucent {
    background-color: #e5e5e5 !important;
}


.sapMTitle{
font-family: cursive !important;
font-weight: 900 !important;
}



output :









Post a Comment

Previous Post Next Post