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