I have tried many ways to do this, but I can not just get PowerPoint.SlideCollection, or PowerPoint.Slide with any code that I tried. There are no examples about this on the documentation. What code snippet can I write inside PowerPoint.run() to get PowerPoint.SlideCollection(slides) or a particular slide PowerPoint.Slide?
Here is the code I wrote:
function log(str) { document.getElementById('log').textContent += '\n[LOG]' + str; }
function logObject(obj) { log(JSON.stringify(obj)); }
Office.onReady(info => {
if(info.host === Office.HostType.PowerPoint) {
OfficeExtension.config.extendedErrorLogging = true;
document.getElementById("sideload-msg").style.display = "none";
document.getElementById("app-body").style.display = "flex";
document.getElementById("run").onclick = getSlideCollection;
}
});
async function getSlideCollection() {
await PowerPoint.run(async function(context) {
let slides = context.presentation.slides;
await context.sync().then((res)=>{
logObject(res);
}).catch((err)=>{
logObject(err);
});
});
}
The error I am getting:
{"name":"RichApi.Error","code":"GeneralException","traceMessages":[],"innerError":null,"debugInfo":{"code":"GeneralException","message":"GeneralException","errorLocation":"Presentation.slides","statement":"var slides = root.slides;","surroundingStatements":["var root = context.root;","// >>>>>","var slides = root.slides;","// <<<<<"],"fullStatements":["var root = context.root;","var slides = root.slides;"]},"httpStatusCode":500}
Here's a simple code snippet could help you:
function GetSlideCollection() {
await PowerPoint.run(async function(context) {
let slides = context.presentation.slides;
await context.sync();
});
}
You should import preview API js file (You can refer this document) as .slides is a beta feature (in preview).
Related
I am using LiveChat on my website and trying to show a div if no agents are available, using their guide here
Javascript
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
$("#ChatLink2").hide();
} else {
$("#ChatLink2").show();
}
};
HTML
<div class='ChatLink2' id='ChatLink2'>Currently Unavailable</div>
However, the div ChatLink2 is not showing when no agents are available
It appears to be race conditions with both LiveChat and JQuery. Below checks for LC availability and uses vanilla JS instead of jQuery.
Also included state change callback if agents go offline after init.
var waitForLC = setInterval(function () {
if (window.LC_API === undefined) {
return;
}
clearInterval(waitForLC);
var showUnavailableStatus = function(show){
var statusDiv = document.getElementById("ChatLink2");
var style = show ? "block" : "none";
statusDiv.style.display = style;
}
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
showUnavailableStatus(false);
} else {
showUnavailableStatus(true);
}
};
LC_API.on_chat_state_changed = function(data) {
showUnavailableStatus(data.state==="offline");
};
}, 100);
How to preserve the navigation bar (minimized position) when navigated to other module.
Collapsed Navigation Bar
sidebar-collapse will not preserve if navigated to other page.
Do you want your nav-bar to change from big to small when you move to a different place?
(sorry, I'm not allowed to comment yet).
Do you want your nav-bar to change from big to small when you move to a different place? It is always nice if you add some code :)
const menuToggle = document.querySelector('.menu-toggle');
const mainUl = document.querySelector(".main-ul");
const navBtn = document.querySelectorAll(".nav-a");
// Open and close meny on click
menuToggle.addEventListener("click", function () {
menuToggle.classList.toggle("open");
mainUl.classList.toggle("open");
});
// Close menu when clicked on an a-tag in the menu
navBtn.forEach((button) => {
button.addEventListener("click", function () {
navBtn.forEach((button) => button.classList.remove("active"));
this.classList.add("active");
mainUl.classList.toggle("open");
menuToggle.classList.toggle("open");
});
});
This is demo and source code I created
https://minhhungit.github.io/2020/10/16/011-keep-menu-toggle-state-after-page-reload/
namespace J {
export function storageSet(name, val) {
if (typeof (Storage) !== "undefined") {
localStorage.setItem(name, val);
} else {
//window.alert('Please use a modern browser to properly view this template!');
}
}
export function storageGet(name) {
if (typeof (Storage) !== "undefined") {
return localStorage.getItem(name);
} else {
return null;
}
}
}
In _Layout.cshtml put this code
<script type="text/javascript">
$().ready(function () {
new DailyTimelog.Common.SidebarSearch($('#SidebarSearch'), $('#SidebarMenu')).init();
// ...
// ...
$(window).bind("load resize layout", doLayout);
doLayout();
});
</script>
// Add these lines
<script type="text/javascript">
let sidebarToggleButton = $('.main-header .sidebar-toggle');
if (sidebarToggleButton) {
$(sidebarToggleButton).on('click', function (e) {
e.preventDefault();
let isSidebarCollapse = $('body').hasClass('sidebar-collapse');
J.storageSet('IS_SIDEBAR_COLLAPSE', !isSidebarCollapse);
});
}
</script>
And LeftNavigation.cshtml
<script type="text/javascript">
function openWindow(url, width, height) {
height = height || (screen.availHeight - 60);
// ...
// ...
}
// Add these lines
let isSidebarCollapseCache = J.storageGet('IS_SIDEBAR_COLLAPSE');
if (isSidebarCollapseCache == 'true') {
$('body').toggleClass('sidebar-collapse', true);
}
else {
$('body').toggleClass('sidebar-collapse', false);
}
</script>
``
#minhhungit Thank you for your demo.
I have used cookie implementation similar to ThemePreference.
Views/Shared/_Layout.cshtml
var theme = !themeCookie.IsEmptyOrNull() ? themeCookie : "blue";
// Add following lines
var sbNavCookie = Context.Request.Cookies["SBNavigationPreference"];
var sbNav = !sbNavCookie.IsEmptyOrNull() && sbNavCookie == "true" ? true : false;
in Body Tag,
<body ... class="...#(sbNav?" sidebar-collapse":"")">
In Script Tag,
<script type="text/javascript">
$().ready(function () {
// Add new lines
let sidebarToggleButton = $('.main-header .sidebar-toggle');
if (sidebarToggleButton) {
$(sidebarToggleButton).on('click', function (e) {
e.preventDefault();
let isSidebarCollapse = $('body').hasClass('sidebar-collapse');
$.cookie('SBNavigationPreference', !isSidebarCollapse, {
path: Q.Config.applicationPath,
expires: 365
});
});
}
I have a following trouble in APIFY. I would like to write a function that saves HTML body of a current page and then click to the next page, saves HTML body etc.
I tried this:
var result = [];
var scrapeAndClick = function() {
$("div.ui-paginator.ui-paginator-top.ui-widget-header.ui-corner-top").each(function() {
result.push(
$(this).html()
);
//klikej na dalsi stranky
var nextButton = $('a.ui-paginator-next.ui-state-default.ui-corner-all');
console.log('Click next button');
nextButton.click().delay(4000)
});
};
scrapeAndClick();
In Google Chrome console it returns me only the HTML body of the first page. APIFY does not return anything.
Can someone see, where is the problem?
If is someone interested in the whole Page function:
async function pageFunction(context) {
const { log } = context;
const searchSelector = 'div.ui-panel-content.ui-widget-content > button';
//vyber "Gemeenschappelijk Landbouw Beleid" z Kies subsidie:
const subsidySelector = $("span.column2 > select.jsTruncate").val("10000");
log.info('Select CAP ')
subsidySelector
//klikni na Zoek
log.info('Click search.')
$(searchSelector).eq(0).click()
//loopujeme dalsi stranky a ukladame html body
var result = [];
var scrapeAndClick = function() {
$("div.ui-paginator.ui-paginator-top.ui-widget-header.ui-corner-top").each(function() {
result.push(
$(this).html()
);
//klikej na dalsi stranky
var nextButton = $('a.ui-paginator-next.ui-state-default.ui-corner-all');
console.log('Click next button');
nextButton.click().delay(4000)
});
};
scrapeAndClick();
return result;
}
StartURL is this: https://mijn.rvo.nl/europese-subsidies-2017
I found an old question on APIFY forum (https://forum.apify.com/t/clickable-link-that-doesnt-change-the-url/361/3), however it seems that it was done on old version of APIFY crawler.
Thanks a lot for any help!
I used the Mapbox JS API for showing coordinates. This is the link of the document: https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/
I have two buttons. After I click the first one, when the mouse is hovering the map, it shows the coordinates.
What I want to do is that after I click the second button, the previous running function can terminate. Can you help me on that?
function showCor() {
map.on('mousemove', function (e) {
document.getElementById('coord-info-lat').innerHTML =
JSON.stringify(e.lngLat.lat.toFixed(5));
document.getElementById('coord-info-lng').innerHTML =
JSON.stringify(e.lngLat.lng.toFixed(5));
});
}
function notShowCor() {
// Please help me here.
}
Immediately i can think of 2 options that might help you;
1.Change the html to equal ""
function notShowCor() {
map.on('mousemove', function (e) {
document.getElementById('coord-info-lat').innerHTML = "";
document.getElementById('coord-info-lng').innerHTML = "";
});
}
Set both elements to have opacity 0 (Though it would technically still be running)
Assuming you had CSS styles as follows:
#coord-info-lat, #coord-info-lng {
opacity:0;
}
#coord-info-lat.shown, coord-info-lng.shown {
opacity: 1;
}
function showCor() {
map.on('mousemove', function (e) {
var lat = document.getElementById('coord-info-lat');
var lng = document.getElementById('coord-info-lng');
lat.innerHTML = JSON.stringify(e.lngLat.lat.toFixed(5));
lng.innerHTML = JSON.stringify(e.lngLat.lng.toFixed(5));
lat.className = "shown";
lng.className = "shown";
});
}
function notShowCor() {
document.getElementById('coord-info-lat').className = "";
document.getElementById('coord-info-lng').className = "";
}
You could also do a combination of the 2
I solved the problem by setting an 'isActive' flag. Here is my code.
let isActive = true;
//function to show the position
function showCor() {
isActive = true;
map.on('mousemove', function (e) {
if (isActive) {
document.getElementById('coord-info-lat').innerHTML =
JSON.stringify(e.lngLat.lat.toFixed(5));
document.getElementById('coord-info-lng').innerHTML =
JSON.stringify(e.lngLat.lng.toFixed(5));
}
});
}
//function to clear the info and terminate the function.
function notShowCor() {
isActive = false;
document.getElementById('coord-info-lat').innerHTML = 'N/A';
document.getElementById('coord-info-lng').innerHTML = 'N/A';
}
Please advise if you have better solutions. Thank you.
I wrote a code for a mobile navigation with sub-menus and tried to add a Class using jQuery and javascript but both methods didn´t adad the Class "drop1" or "drop2" to the clicked element.
I´ve already tried to catch the error, but there was no one
$("ul#main-menu > li[class ^= level1-]")
.prev("img")
.addBack()
.on("click", async ()=> {
try {
await $(this).addClass("drop1");
cl2 = this;
cl2.className += "drop1";
} catch(e) {
console.log(e);
}
})
.each((i, elem)=> {
if($(elem).hasClass("drop1")) {
let newElem = $(elem);
if($(elem).is("img")) {
newElem = $(elem).closest("li");
$(elem).removeClass("drop1");
newElem.addClass("drop1");
}
} else {
return;
}
newElem
.nextUntil("li")
.animate({
"transform": "rotate(180deg)"
}, 300);
newElem
.children("ul[class $= m1]")
.slideDown(300)
.children("li[href = #]")
.on("click", async ()=> {
try {
await $(this).addClass("drop2");
cl1 = this;
cl1.className += "drop2";
} catch(e) {
console.log(e);
}
})
.each((i, el)=> {
if($(el).hasClass("drop2")) {
newEL = $(el);
} else {
return;
}
newEL
.children("ul")
.slideDown(300);
});
});
this is not the clicked element. this inside an arrow function is the same as outside the arrow function, in this case it is probably window. addClass is synchronous, using await on it is a no op.
/*...*/.on("click", function() {
$(this).addClass("drop1");
});
PS: Unhandled errors will bubble up, and will finally be shown in the console. Adding a try { } catch only makes sense if you really want to handle it.