File indexing completed on 2024-12-29 05:24:53
0001 <?php 0002 /** 0003 * ocs-webserver 0004 * 0005 * Copyright 2016 by pling GmbH. 0006 * 0007 * This file is part of ocs-webserver. 0008 * 0009 * This program is free software: you can redistribute it and/or modify 0010 * it under the terms of the GNU Affero General Public License as 0011 * published by the Free Software Foundation, either version 3 of the 0012 * License, or (at your option) any later version. 0013 * 0014 * This program is distributed in the hope that it will be useful, 0015 * but WITHOUT ANY WARRANTY; without even the implied warranty of 0016 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 0017 * GNU Affero General Public License for more details. 0018 * 0019 * You should have received a copy of the GNU Affero General Public License 0020 * along with this program. If not, see <http://www.gnu.org/licenses/>. 0021 **/ 0022 ?> 0023 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 embed-option embed-option" 0024 data-ng-app="widgetApp" 0025 data-ng-controller="WidgetController"> 0026 0027 <?php if (!isset($this->product->project_uuid)) { ?> 0028 <!-- error --> 0029 <?php echo $this->translate('product.error.button_code'); ?> 0030 <!-- /error --> 0031 <?php } else { ?> 0032 0033 <!-- ANGULAR JS APP --> 0034 0035 <article data-ng-app="widgetApp" data-ng-controller="WidgetController"> 0036 <div id="configuration-options"> 0037 0038 <!-- tab menu --> 0039 <ul class="nav nav-tabs"> 0040 <li class="active"><a href="#general-config" data-toggle="tab" ng-click="getEmbedCode()">General</a> 0041 </li> 0042 <li><a href="#texts-config" data-toggle="tab" ng-click="getEmbedCode()">Texts</a></li> 0043 <li><a href="#colors-config" data-toggle="tab" ng-click="getEmbedCode()">Colors</a></li> 0044 <li><a href="#widget-embed-code" data-toggle="tab" ng-click="getEmbedCode()">Embed</a></li> 0045 </ul> 0046 <!-- /tab menu --> 0047 0048 <!-- tab panels --> 0049 <div class="tab-content"> 0050 <div class="tab-pane active" id="general-config"> 0051 <div class="row"> 0052 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0053 <label>show donations field</label> 0054 <input type="checkbox" data-ng-model="amounts.showDonationAmount" 0055 data-ng-init="amounts.showDonationAmount=true"/> 0056 </div> 0057 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0058 <label>initial donation amount</label> 0059 <input type="text" data-ng-model="amounts.donation"/> 0060 </div> 0061 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0062 <label>show supporters</label> 0063 <input type="checkbox" 0064 data-ng-model="showSupporters" 0065 data-ng-init="showSupporters=true"/> 0066 </div> 0067 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0068 <label>show comments</label> 0069 <input type="checkbox" data-ng-model="showComments" data-ng-init="showComments=true"/> 0070 </div> 0071 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0072 <label>ocs logo</label> 0073 <input type="radio" data-ng-model="logo" value="grey"><span>grey</span> 0074 <input type="radio" data-ng-model="logo" value="orange"><span>orange</span> 0075 <input type="radio" data-ng-model="logo" value="icon"><span>icon</span> 0076 </div> 0077 </div> 0078 </div> 0079 0080 <div class="tab-pane" id="texts-config"> 0081 <div class="row"> 0082 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0083 <label>headline text</label> 0084 <input type="text" data-ng-model="text.headline"/> 0085 </div> 0086 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0087 <label>custom text</label> 0088 <textarea data-ng-model="text.content"></textarea> 0089 </div> 0090 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0091 <label>button text</label> 0092 <input type="text" data-ng-model="text.button"/> 0093 </div> 0094 </div> 0095 </div> 0096 0097 <div class="tab-pane" id="colors-config"> 0098 <div class="row"> 0099 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0100 <label>widget background</label> 0101 <input class="color-input" 0102 colorpicker 0103 maxlength="7" 0104 size="7" 0105 data-ng-model="colors.widgetBg" 0106 value="{{colors.widgetBg}}"/> 0107 </div> 0108 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0109 <label>widget content</label> 0110 <input class="color-input" colorpicker maxlength="7" size="7" 0111 data-ng-model="colors.widgetContent" value="{{colors.widgetContent}}"/> 0112 </div> 0113 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0114 <label>headline</label> 0115 <input class="color-input" 0116 colorpicker 0117 maxlength="7" 0118 size="7" 0119 data-ng-model="colors.headline" 0120 value="{{colors.headline}}"/> 0121 </div> 0122 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0123 <label>text</label> 0124 <input class="color-input" 0125 colorpicker 0126 maxlength="7" 0127 size="7" 0128 data-ng-model="colors.text" 0129 value="{{colors.text}}"/> 0130 </div> 0131 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0132 <label>button background</label> 0133 <input class="color-input" 0134 colorpicker 0135 maxlength="7" 0136 size="7" 0137 data-ng-model="colors.button" 0138 value="{{colors.button}}"/> 0139 </div> 0140 <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0141 <label>button text</label> 0142 <input class="color-input" 0143 colorpicker 0144 maxlength="7" 0145 size="7" 0146 data-ng-model="colors.buttonText" 0147 value="{{colors.buttonText}}"/> 0148 </div> 0149 </div> 0150 </div> 0151 0152 <div class="tab-pane" id="widget-embed-code"> 0153 <div class="row"> 0154 <div id="button-input" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0155 <textarea name="widget-code" 0156 id="widget-code" 0157 class="light full-width">{{embedCode}}</textarea> 0158 </div> 0159 <div class="button col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0160 <button id="get-widget-box-code" class="btn btn-min-width btn-native" 0161 data-clipboard-target="#widget-code">get the code! 0162 </button> 0163 </div> 0164 </div> 0165 </div> 0166 0167 </div> 0168 <!-- /tab panels --> 0169 </div> 0170 <div id="widget-preview"> 0171 <div id="pling-widget" style="background-color:{{colors.widgetBg}};"> 0172 0173 <div class="widget-header"> 0174 <h3 style="color:{{colors.headline}};">{{text.headline}}</h3> 0175 </div> 0176 0177 <div class="widget-body" style="background-color:{{colors.widgetContent}};color:{{colors.text}};"> 0178 0179 <div class="widget-text" style="">{{text.content}}</div> 0180 0181 <div class="donation-amount" data-ng-if="amounts.showDonationAmount"> 0182 <div class="support-with"> 0183 <span>Support with</span> 0184 </div> 0185 <div class="donation-amount-number"> 0186 <span class="glyphicon glyphicon-usd"></span> 0187 <?php if (true === empty($this->product->paypal_mail) || true === empty($this->product->dwolla_id)) { 0188 $style = 'disabled'; 0189 } else { 0190 $style = ''; 0191 } 0192 ?> 0193 <input type="text" 0194 class="inp-pling <?php echo $style; ?>" 0195 data-ng-model="amounts.donation"/> 0196 </div> 0197 <div class="button"> 0198 <button class="btn btn-pling" 0199 style="background-color:{{colors.button}};color:{{colors.buttonText}};" 0200 type="submit">{{text.button}} 0201 </button> 0202 </div> 0203 <?php if (false === empty($this->product->paypal_mail) || false === empty($this->product->dwolla_id)) { ?> 0204 <div class="payment-providers"> 0205 <div class="pay-with"> 0206 <span>Pay with</span> 0207 </div> 0208 <?php if (false === empty($this->product->paypal_mail)) { ?> 0209 <div class="input-group"> 0210 <span class="input-group-addon"> 0211 <input type="radio" name="payment_provider" value="paypal" checked> 0212 </span> 0213 <span class="payment-icon"> 0214 <img src="/theme/flatui/img/logo_paypal.png"/> 0215 </span> 0216 </div> 0217 <?php } ?> 0218 <?php if (false === empty($this->product->dwolla_id)) { 0219 $checked = ''; 0220 if (empty($this->product->paypal_mail)) { 0221 $checked = 'checked'; 0222 } 0223 ?> 0224 <div class="input-group"> 0225 <span class="input-group-addon"> 0226 <input type="radio" name="payment_provider" value="dwolla" <?= $checked ?>> 0227 </span> 0228 <span class="payment-icon"> 0229 <img src="/theme/flatui/img/new/dwolla.png"/> 0230 </span> 0231 </div> 0232 <?php } ?> 0233 </div> 0234 <?php } ?> 0235 </div> 0236 0237 <div class="product-funding-info" data-ng-class="{ 'with-goal' : amounts.goal}"> 0238 <div class="goal-range-number"> 0239 <span>$0</span> 0240 <span data-ng-if="amounts.goal">${{amounts.goal}}</span> 0241 <span class="unlimited" data-ng-if="!amounts.goal">∞</span> 0242 </div> 0243 <div class="achieved-amount"> 0244 <div class="bar" data-ng-class="{ 'no-goal' : !amounts.goal}" 0245 style="width:{{Math.round(100*amounts.current/amounts.goal)}}%"></div> 0246 </div> 0247 <div class="money-raised">Raised ${{amounts.current}} <span data-ng-if="amounts.goal">of ${{amounts.goal}}</span> 0248 </div> 0249 <div class="percentage" style="color:{{colors.widgetBg}};" data-ng-show="amounts.goal"> 0250 {{Math.round(100*amounts.current/amounts.goal)}}% 0251 </div> 0252 </div> 0253 0254 <div class="supporters" data-ng-if="showSupporters" ng-hide="!supporters.length"> 0255 <div class="supporter" 0256 data-ng-repeat="supporter in supporters" 0257 data-toggle="tooltip" 0258 data-placement="top" 0259 title="{{supporter.username}}"> 0260 <a href="{{supporter.url}}"> 0261 <figure><img ng-src="{{supporter.img}}"/></figure> 0262 </a> 0263 </div> 0264 </div> 0265 0266 <div class="comments" data-ng-if="showComments" ng-hide="!comments.length"> 0267 <div class="comment" data-ng-repeat="comment in comments"> 0268 <figure><img ng-src="{{comment.img}}"/></figure> 0269 <div class="content"> 0270 <div class="info">{{comment.username}} donated ${{comment.amount}}</div> 0271 <div class="text">{{comment.comment}}</div> 0272 </div> 0273 </div> 0274 </div> 0275 0276 </div> 0277 0278 <div class="widget-footer"> 0279 <div class="row"> 0280 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 0281 <div class="pay-secure"> 0282 <a href="<?php echo $this->serverUrl() . $this->buildProductUrl($this->product->project_id); ?>" 0283 target="_blank">visit product on <?= $this->getRequest()->getHttpHost() ?></a> 0284 </div> 0285 <div class="powered-by"> 0286 <a href="<?php echo $this->serverUrl() . $this->buildProductUrl($this->product->project_id); ?>" 0287 target="_blank" 0288 class="opendesktop-logo {{logo}}"></a> 0289 </div> 0290 </div> 0291 </div> 0292 </div> 0293 0294 </div> 0295 </div> 0296 </article> 0297 0298 <?php 0299 $helpMemberUrl = new Default_View_Helper_BuildMemberUrl(); 0300 $supportersArray = array(); 0301 foreach ($this->supporting as $supporter) { 0302 $new_supporter = new stdClass(); 0303 $new_supporter->username = $supporter->username; 0304 $new_supporter->img = $supporter->profile_image_url; 0305 $new_supporter->url = $helpMemberUrl->buildMemberUrl($supporter->username); 0306 array_push($supportersArray, $new_supporter); 0307 } 0308 $commentsArray = array(); 0309 foreach ($this->comments as $comment) { 0310 $new_comment = new stdClass(); 0311 $new_comment->username = $comment->username; 0312 $new_comment->img = $comment->profile_image_url; 0313 $new_comment->amount = $comment->amount; 0314 $new_comment->comment = $comment->comment; 0315 array_push($commentsArray, $new_comment); 0316 } 0317 ?> 0318 0319 <script type="text/javascript"> 0320 0321 var widgetApp = angular.module('widgetApp', ['colorpicker.module', 'ngRoute']); 0322 0323 widgetApp.controller('WidgetController', function ($scope, $http) { 0324 0325 $scope.Math = window.Math; 0326 0327 $scope.text = { 0328 content: "<?=addslashes($this->widgetConfig->text->content)?>", 0329 headline: "<?=addslashes($this->widgetConfig->text->headline)?>", 0330 button: "Pling it!" 0331 }; 0332 0333 $scope.amounts = { 0334 donation: '<?=$this->widgetConfig->amounts->donation?>', 0335 showDonationAmount:<?=$this->widgetConfig->amounts->showDonationAmount?'true':'false'?>, 0336 current: '<?=(float)$this->product->amount_received;?>', 0337 goal: '<?=false === empty($this->product->amount)?$this->product->amount:''; ?>' 0338 }; 0339 0340 $scope.colors = { 0341 widgetBg: '<?=$this->widgetConfig->colors->widgetBg?>', 0342 widgetContent: '<?=$this->widgetConfig->colors->widgetContent?>', 0343 headline: '<?=$this->widgetConfig->colors->headline?>', 0344 text: '<?=$this->widgetConfig->colors->text?>', 0345 button: '<?=$this->widgetConfig->colors->button?>', 0346 buttonText: '<?=$this->widgetConfig->colors->buttonText?>' 0347 }; 0348 0349 $scope.showSupporters = <?=$this->widgetConfig->showSupporters?'true':'false'?>; 0350 $scope.supporters = angular.fromJson('<?php echo json_encode($supportersArray);?>'); 0351 0352 $scope.showComments = <?=$this->widgetConfig->showComments?'true':'false'?>; 0353 $scope.comments = angular.fromJson('<?php echo json_encode($commentsArray);?>'); 0354 0355 $scope.logo = '<?=$this->widgetConfig->logo?>'; 0356 0357 $scope.project = <?=$this->product->project_id ?>; 0358 $scope.uuid = '<?=$this->widgetConfig->uuid?>'; 0359 $scope.embedCode = '<?=$this->externalWidgetSource($this->product->project_id)?>'; 0360 0361 0362 $scope.getEmbedCode = function () { 0363 $http.post('/widget/savedefault/', { 0364 'uuid': $scope.uuid, 0365 'project': $scope.project, 0366 'config': { 0367 "text": $scope.text, 0368 "amounts": $scope.amounts, 0369 "colors": $scope.colors, 0370 "showSupporters": $scope.showSupporters, 0371 "showComments": $scope.showComments, 0372 "logo": $scope.logo 0373 } 0374 }). 0375 success(function (data, status) { 0376 $scope.status = status; 0377 $scope.uuid = data.data.uuid; 0378 $scope.embedCode = data.data.embedCode; 0379 }) 0380 . 0381 error(function (data, status) { 0382 $scope.status = status; 0383 $scope.result = data || "Request failed"; 0384 }); 0385 } 0386 0387 }); 0388 0389 </script> 0390 0391 <!-- ANGULAR JS APP --> 0392 <?php } ?> 0393 </div> 0394 0395 <?php 0396 $this->inlineScript()->appendScript( 0397 ' $(document).ready(function(){ 0398 ButtonCode.setupClipboardCopy(\'div#widget-embed-code\'); 0399 }); 0400 ');