Make notifications framework CSP compliant
Change-Id: I95411f646053d76219908b91e9f0921c17280c28
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 3aa40ca..0d0fee3 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -14,7 +14,7 @@
//]]></script>
<script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
</head>
- <body>
+ <body class="no-js">
<div id="kalamar-bg"></div>
<header>
<a href="/" class="logo" tabindex="-1"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
@@ -281,11 +281,10 @@
var KorAP = KorAP || {};
KorAP.URL = 'http://localhost:3000';
</script>
- <script>//<![CDATA[
-KorAP.Notifications = [];
-KorAP.Notifications.push(["warn","767: Case insensitivity is currently not supported for this layer"]);
-KorAP.Notifications.push(["error","404: Not Found (remote)"]);
-//]]>
- </script>
+ <div id="notifications">
+ <div class="notify notify-warn" data-type="warn">Error</div>
+ <div class="notify notify-error" data-type="error">Hmmm</div>
+ <div class="notify notify-success" data-type="success" data-src="Kustvakt">Hmmm</div>
+ </div>
</body>
</html>
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 91084cf..ef6dfcf 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -92,7 +92,7 @@
KorAP.tourshowR = function(){
tourClass.gTshowResults().start();
};
-
+
domReady(function (event) {
var obj = {};
@@ -105,15 +105,19 @@
/**
* Release notifications
*/
- if (KorAP.Notifications !== undefined) {
- KorAP.Notifications.forEach(function(n) {
- var msg = n[1];
- if (n[2]) {
- msg += '<code class="src">'+n[2]+'</code>';
+ d.querySelectorAll('#notifications div.notify').forEach(
+ function(e) {
+ let msg = e.textContent;
+
+ let src = e.getAttribute('data-src');
+ if (src) {
+ msg += '<code class="src">'+src+'</code>';
};
- alertifyClass.log(msg, n[0], 10000);
- });
- };
+
+ let type = e.getAttribute('data-type') || "error";
+ alertifyClass.log(msg, type, 10000);
+ }
+ );
/**
* Replace Virtual Corpus field
diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index be2f656..3c329b7 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -21,4 +21,28 @@
.alertify-log-error {
background-color: $alert-red;
+}
+
+#notifications {
+ display: none;
+}
+
+// TODO:
+// This differs from alertify messages and should be united
+div.notify {
+ position: relative;
+ margin: .5em auto;
+ display: block;
+ padding: .5em;
+
+ border-radius: $standard-border-radius;
+ max-width: 30em;
+ background-color: $alert-red;
+ color: $nearly-white;
+ &.notify-success {
+ background-color: $ids-green-1
+ }
+ &.notify-warn {
+ background-color: $ids-orange-2
+ }
}
\ No newline at end of file
diff --git a/dev/scss/no-js.scss b/dev/scss/no-js.scss
index c5f6410..985ac48 100644
--- a/dev/scss/no-js.scss
+++ b/dev/scss/no-js.scss
@@ -5,6 +5,10 @@
*/
body.no-js {
+ #notifications {
+ display: block !important;
+ }
+
// Aside in noscript mode
aside {
position: relative;