Err… sorta. There’s no doubt that Cookiereports is a terrible product, that I really can’t see the value of; as opposed to writing the legal stuff yourself. But for some reason clients insists on using them, so below you’ll find a nice little Umbraco MacroPartial, that will at least let you integrate it into your site a bit better than the god awful iframe solution they normally force you to use. Naturally this solution isn’t limited to Umbraco, it can be used in any MVC View or Partial View, or even in Webforms, if you care to do some minor coding yourself.
The Razor part
What’s happening below is actually quite trivial. It fetches the source for the page that normally would be embedded via an iframe, and runs a couple of Regex’ against it, to extract the body, and transform all hrefs and srcs to fully qualified Uris, since we’re no longer executing in the original domain context.
1
2
3
4
5
6
7
8
9
10
11
12
13
@using System.Text
@using System.Text.RegularExpressions
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var language = Model.MacroParameters["lang"].ToString();
var client = new WebClient();
var html = Encoding.UTF8.GetString(client.DownloadData("http://policy.cookiereports.com/{your key goes here}-" + language + ".html"));
var r = new Regex(@"<body[^>]*>(?<content>.*)</body>", RegexOptions.IgnoreCase | RegexOptions.Singleline);
var body = r.Match(html).Groups["content"].Value;
r = new Regex(@"(?<attr>src|href)=""(?<val>[^""]*)""", RegexOptions.IgnoreCase | RegexOptions.Singleline);
body = r.Replace(body, @"${attr}=""http://policy.cookiereports.com/${val}""");
}
@Html.Raw(body)
The CSS part
This is an almost exact copy of the original CSS, with only a few changes. Everything is now properly namespaced under #policy, to prevent inteference, and urls are now pointing on fully qualified Uris.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<style type="text/css">
#policy {
font: 14px Arial,Helvetica,sans-serif;
color: #553e3d;
}
#policy h1, #policy h2, #policy h3, #policy h4, #policy h5, #policy h6, #policy h1 a, #policy h2 a, #policy h3 a, #policy h4 a, #policy h5 a, #policy h6 a {
color: #553e3d;
}
#policy h1 {
font-size: 14px;
}
#policy h2 {
font-size: 14px;
}
#policy h3 {
font-size: 9.8px;
}
#policy h4 {
font-size: 7.7px;
}
#policy h5 {
font-size: 5.6px;
}
#policy h6 {
font-size: 3.5px;
}
#policy h1, #policy h2, #policy p, #policy li {
font-family: "Soho W02 Regular";
font-size: 14px;
line-height: 20px;
}
#policy .section {
padding: 0 0 7px 0;
}
#policy ul.details li {
padding: 10px 0 0 10px;
}
#policy-flash .screenshot {
background: url('http://policy.cookiereports.com/i/policy/screenshot-flash') no-repeat;
height: 300px;
}
#policy .pdficon {
display: inline-block;
background: url('http://policy.cookiereports.com/i/policy/pdf') no-repeat;
height: 17px;
width: 17px;
margin-left: 4px;
}
#policy #policy-downloads .pdficon {
margin: 0 4px 0 0;
}
#policy #policy-downloads ul {
padding: 0;
margin: 0;
}
#policy #policy-downloads li {
list-style-type: none;
padding: 0;
margin: 3px 0;
}
#policy table.cookies {
font-size: 0.8em;
}
#policy table.cookies th, table.cookies td {
padding: 3px 9px;
}
#policy table.cookies th {
vertical-align: top;
text-align: left;
border-bottom: 1px solid #ccc;
}
#policy .rtl table.cookies th {
vertical-align: top;
text-align: right;
}
#policy table.cookies td {
vertical-align: top;
border-bottom: 1px dotted #ccc;
}
#policy tr.info td {
border-bottom: 1px solid #ccc;
}
#policy td.description p {
margin-top: 0;
padding-top: 0;
}
#policy td.icon .icon {
float: left;
margin-right: 6px;
}
#policy .rtl td.icon .icon {
float: right;
margin-left: 6px;
}
#policy tr.green td.icon div.icon {
background-image: url('/i/policy/green/led');
background-position: 0 0;
width: 15px;
height: 15px;
}
#policy tr.amber td.icon div.icon {
background-image: url('/i/policy/green/led');
background-position: -16px 0;
width: 15px;
height: 15px;
}
#policy tr.red td.icon div.icon {
background-image: url('/i/policy/green/led');
background-position: -32px 0;
width: 15px;
height: 15px;
}
#policy dl {
margin: 10px 100px 30px 60px;
}
#policy dt {
float: left;
font-weight: bold;
}
#policy dd {
margin-left: 190px;
margin-bottom: 10px;
}
#policy .policy-icon-heading {
color: inherit;
text-decoration: none;
}
#policy .toggle-icon {
margin-right: 6px;
}
</style>
The jQuery part
This part is written from scratch to mimic the functionality of the original JavaScript provided by Cookiereports themselves. The reason for this is that aside from being very clunky, and unnecessarily complex, I had to change it anyway to recity the img src.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function () {
$("#policy .sections .section").each(function () {
var $this = $(this), $h2 = $this.find("h2"), $desc = $this.find("*[id$='_cookies']");
if ($desc.length > 0) {
$h2.click(function () {
$desc.toggle();
var $img = $h2.find("img");
$img.attr("src", $desc.is(":visible") ? "http://policy.cookiereports.com/i/boxminus.png" : "http://policy.cookiereports.com/i/boxplus.png");
}).prepend("<img class=\"plusminus\" src=\"http://policy.cookiereports.com/i/boxplus.png\" /> ").css("cursor", "pointer");
$desc.css("display", "none");
}
});
});
</script>
I hope you find it as useful as I did. And while we can easily agree that they should’ve provided us proper solution, and not let us do symptom treatment, at least it’ll get the job done.