Skip to content

feat/ validate dropbox url #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AliAlaqrabawi3 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat/ validate dropbox url #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5cdebc4
feat/ validate dropbox url
AliAlaqrabawi2 Feb 24, 2026
bd938f8
fix indentation
AliAlaqrabawi2 Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
363 changes: 207 additions & 156 deletions control/content/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,186 +1,237 @@
<!DOCTYPE html>
<html ng-app="webviewPlugin">

<head lang="en">
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>content</title>
<!-- CSS -->
<link href="../../../../styles/helper.css" rel="stylesheet">
<link href="../../../../styles/siteIcons.css" rel="stylesheet">
<link href="../../../../styles/helper.css" rel="stylesheet" />
<link href="../../../../styles/siteIcons.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />

<!-- JS -->
<script src="../../../../scripts/buildfire.js"></script>
<script src="../../../../scripts/angular/angular.min.js"></script>
</head>
<body ng-controller="webviewPluginCtrl" id="webviewApp" ng-cloak
ng-show="datastoreInitialized">
<div ng-form="frmMain">

<div class="item clearfix row margin-bottom-fifteen">
<div class="labels col-md-3 padding-right-zero pull-left">
<span>URL to your PDF</span>
</div>
<div class="main col-md-9 pull-right clearfix">
<div class="col-md-9 pull-left padding-left-zero">
<input id="url" name="url" type="url" class="form-control"
ng-model="data.content.url"
required>
<body ng-controller="webviewPluginCtrl" id="webviewApp" ng-cloak ng-show="datastoreInitialized">
<div ng-form="frmMain">
<div class="item clearfix row margin-bottom-fifteen">
<div class="labels col-md-3 padding-right-zero pull-left">
<span>URL to your PDF</span>
</div>
<div class="col-md-3 pull-right padding-zero">
<button class="btn btn-success stretch" ng-click="validateUrl()"
ng-disabled="!data.content.url">
Validate
</button>
<div class="main col-md-9 pull-right clearfix">
<div class="col-md-9 pull-left padding-left-zero">
<input id="url" name="url" type="url" class="form-control" ng-model="data.content.url" required />
</div>
<div class="col-md-3 pull-right padding-zero">
<button class="btn btn-success stretch" ng-click="validateUrl()" ng-disabled="!data.content.url">
Validate
</button>
</div>
</div>
</div>
</div>
<br>
<br />

<div class="item clearfix row">
<div class="main pull-right col-md-9">
<div class="alert alert-success alert-sm text-center" ng-if="urlValid">Url
successfully validated
<div ng-if="urlValid || urlInValid" class="item clearfix row">
<div ng-if="urlValid" class="main pull-right col-md-9">
<div class="alert alert-success alert-sm text-center">
Url successfully validated
</div>
</div>
<div class="alert alert-danger alert-sm text-center" ng-if="urlInValid">
Invalid Url
<div ng-if="urlInValid" class="main pull-right col-md-9">
<div class="alert alert-danger alert-sm text-center">Invalid Url</div>
</div>
</div>
</div>
<hr class="none">
<div class="item clearfix row">
<div class="col-md-9 pull-right">
<div class="checkbox checkbox-primary margin-top-zero">
<input id="checkboxid" type="checkbox"
ng-checked="data.content.openInApp"
ng-model="data.content.openInApp"
ng-change="openMethodChanged()">
<label for="checkboxid">Open URL in the app </label>
</div>

<div class="item clearfix row">
<div class="col-md-12">
<div class="checkbox checkbox-primary margin-top-zero">
<input id="checkboxid" type="checkbox" ng-checked="data.content.openInApp" ng-model="data.content.openInApp"
ng-change="openMethodChanged()" />
<label for="checkboxid">Open URL in the app </label>
</div>
</div>
</div>
<div class="item clearfix row">
<div class="note">
<strong>Important:</strong>
<p>
The file must be publicly accessible (anyone with the link can view
it without signing in).
</p>
<p>
If you are using Dropbox, update your shared link to include raw=1
(for example: https://www.dropbox.com/.../file.pdf?raw=1).
</p>
<p class="margin-bottom-zero">This ensures the app can load the PDF correctly.</p>
</div>
</div>
</div>
</div>

<script>
var webviewPluginApp = angular.module('webviewPlugin', []);

webviewPluginApp.controller("webviewPluginCtrl", ["$scope", "$log", "$timeout", function ($scope, $log, $timeout) {
var dataChanged = false;
$scope.datastoreInitialized = false;
$scope.urlValid = false;
$scope.urlInValid = false;
/*
* Go pull any previously saved data
* */
buildfire.datastore.get(function (err, result) {
if (!err) {
$scope.datastoreInitialized = true;
} else {
console.error("Error: ", err);
return;
}

if (result && result.data && !angular.equals({}, result.data) && result.id) {
$scope.data = result.data;
$scope.id = result.id;
} else {
$scope.data = {
content: {
url: "https://www.polyu.edu.hk/iaee/files/pdf-sample.pdf",
openInApp: true
}
};
}

/*
* watch for changes in data
* */
$scope.$watch('data', function (newObj, oldObj) {
if (angular.equals(newObj, oldObj) || newObj == undefined) {
dataChanged = false;
} else {
dataChanged = true;
}
if (dataChanged && newObj.content && !newObj.content.url) {
$scope.clearUrl();
}
}, true);

if (!$scope.$$phase && !$scope.$root.$$phase) {
$scope.$apply();
}
});

$scope.saveData = function () {
if (!$scope.datastoreInitialized) {
console.error("Error with datastore didn't get called");
return;
}

if (!dataChanged) {
console.warn("data didn't changed");
return;
}
var data = $scope.data;
// if the form has some invalid data do not save, in our case the user eneter invalid URL
if ($scope.frmMain.$invalid) {
$log.warn('invalid data, details will not be saved');

<script>
var webviewPluginApp = angular.module("webviewPlugin", []);

webviewPluginApp.controller("webviewPluginCtrl", ["$scope", "$log", "$timeout",
function ($scope, $log, $timeout) {
var dataChanged = false;
$scope.datastoreInitialized = false;
$scope.urlValid = false;
$scope.urlInValid = true;
$timeout(function () {
$scope.urlInValid = false;
}, 3000);
} else {
$scope.urlValid = true;
$scope.urlInValid = false;
$timeout(function () {
$scope.urlValid = false;
}, 3000);
dataChanged = false;
if (!/^https?\:\/\//.test(data.content.url)) {
data.content.url = "http://" + data.content.url;
}
/*
* Go pull any previously saved data
* */
buildfire.datastore.get(function (err, result) {
if (!err) {
$scope.datastoreInitialized = true;
} else {
console.error("Error: ", err);
return;
}

buildfire.datastore.save(data, function (err, result) {
if (err || !result) {
$log.error('Error saving the widget details: ', err);
if (
result &&
result.data &&
!angular.equals({}, result.data) &&
result.id
) {
$scope.data = result.data;
$scope.id = result.id;
} else {
$scope.data = {
content: {
url: "https://www.polyu.edu.hk/iaee/files/pdf-sample.pdf",
openInApp: true,
},
};
}
else {
$log.info('Widget details saved');

/*
* watch for changes in data
* */
$scope.$watch(
"data",
function (newObj, oldObj) {
if (angular.equals(newObj, oldObj) || newObj == undefined) {
dataChanged = false;
} else {
dataChanged = true;
}
if (dataChanged && newObj.content && !newObj.content.url) {
$scope.clearUrl();
}
},
true,
);

if (!$scope.$$phase && !$scope.$root.$$phase) {
$scope.$apply();
}
});
}
};

$scope.validateUrl = function () {
$scope.saveData();
};

$scope.clearUrl = function () {
$scope.data.content.url = undefined;
var data = $scope.data;
buildfire.datastore.save(data, function (err, result) {
if (err || !result) {
$log.error('Error saving the widget details: ', err);
}
else {
$log.info('Widget details saved');
}
});
};

$scope.openMethodChanged = function () {
dataChanged = true;
buildfire.datastore.save($scope.data, function (err, result) {
if (err || !result) {
$log.error('Error saving the widget details: ', err);
}
else {
$log.info('Widget details saved');

$scope.saveData = function () {
if (!$scope.datastoreInitialized) {
console.error("Error with datastore didn't get called");
return;
}

if (!dataChanged) {
console.warn("data didn't changed");
return;
}
var data = $scope.data;
// if the form has some invalid data do not save, in our case the user eneter invalid URL
if ($scope.frmMain.$invalid) {
$log.warn("invalid data, details will not be saved");
$scope.urlValid = false;
$scope.urlInValid = true;
$timeout(function () {
$scope.urlInValid = false;
}, 3000);
} else {
$scope.urlValid = true;
$scope.urlInValid = false;
$timeout(function () {
$scope.urlValid = false;
}, 3000);
dataChanged = false;
if (!/^https?\:\/\//.test(data.content.url)) {
data.content.url = "http://" + data.content.url;
}

buildfire.datastore.save(data, function (err, result) {
if (err || !result) {
$log.error("Error saving the widget details: ", err);
} else {
$log.info("Widget details saved");
}
});
}
};

function normalizePdfUrl(inputUrl) {
try {
if (!inputUrl || typeof inputUrl !== "string") {
return inputUrl;
}

const url = new URL(inputUrl);

// Check if it's a Dropbox link
const isDropbox =
url.hostname === "dropbox.com" ||
url.hostname === "www.dropbox.com";

if (!isDropbox) {
return inputUrl;
}

// Remove dl parameter if present
if (url.searchParams.has("dl")) {
url.searchParams.delete("dl");
}

// Ensure raw=1 exists
if (url.searchParams.get("raw") !== "1") {
url.searchParams.set("raw", "1");
}

return url.toString();
} catch (e) {
return inputUrl;
}
}
});
}
}]);
</script>

$scope.validateUrl = function () {
$scope.data.content.url = normalizePdfUrl($scope.data.content.url);
$scope.saveData();
};

$scope.clearUrl = function () {
$scope.data.content.url = undefined;
var data = $scope.data;
buildfire.datastore.save(data, function (err, result) {
if (err || !result) {
$log.error("Error saving the widget details: ", err);
} else {
$log.info("Widget details saved");
}
});
};

$scope.openMethodChanged = function () {
dataChanged = true;
buildfire.datastore.save($scope.data, function (err, result) {
if (err || !result) {
$log.error("Error saving the widget details: ", err);
} else {
$log.info("Widget details saved");
}
});
};
},
]);
</script>
</body>

</html>
</html>
Loading