Skip to content

Instantly share code, notes, and snippets.

@alikuro

alikuro/gist:4f1f6fa033cc721721fef8f180bb157e

Created June 29, 2018 09:37
Show Gist options
  • Save alikuro/4f1f6fa033cc721721fef8f180bb157e to your computer and use it in GitHub Desktop.
Save alikuro/4f1f6fa033cc721721fef8f180bb157e to your computer and use it in GitHub Desktop.
Download ZIP
Tjb Issue: blank page edit/ reupload pic, multiple like shadow in text while aligned, double clikc to edit not working on mobile phone
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>Pasang Iklan Ads Murah Bisnis Jual Beli Online - TJB.id</title>
<meta name="title" content="Pasang Iklan Ads Murah Bisnis Jual Beli Online - TJB.id"/>
<meta name="description" content="TJB.id Partner Terpercaya Beriklan Ads Murah di Indonesia - Solusi Mudah Pasang Iklan Jual Beli Online, Promosi Produk Bisnis Usaha Anda Secara Aman dan Nyaman"/>
<meta name="keyword" content="Pasang Iklan, Ads, Ads Iklan, Iklan Murah, Jual Beli, Iklan, Bisnis Online"/>
<meta property="og:title" content="Pasang Iklan Ads Murah Bisnis Jual Beli Online - TJB.id"/>
<meta property="og:description" content="TJB.id Partner Terpercaya Beriklan Ads Murah di Indonesia - Solusi Mudah Pasang Iklan Jual Beli Online, Promosi Produk Bisnis Usaha Anda Secara Aman dan Nyaman"/>
<meta property="og:site_name" content="TJB.id"/>
<meta property="og:url" content="https://tjb.id"/>
<meta property="og:image" content="/static/img/tjb-icon.png"/>
<link rel="icon" type="image/png" href="/static/img/favicon.png">
<link rel="stylesheet" href="/static/icons/icons.css">
<link rel="stylesheet" href="/static/icons/ie7/ie7.css">
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/CACHE/css/d44b57abb132.css" type="text/css" media="all" />
<link href="/static/style/select2.min.css" rel="stylesheet"/>
<!-- React Dependencies for the SDK UI -->
<script src="/static/pesdk-4.7.0/js/vendor/react.production.min.js"></script>
<script src="/static/pesdk-4.7.0/js/vendor/react-dom.production.min.js"></script>
<!-- PhotoEditor SDK-->
<script src="/static/pesdk-4.7.0/js/PhotoEditorSDK.min.js"></script>
<!-- PhotoEditor SDK UI -->
<script src="/static/pesdk-4.7.0/js/PhotoEditorSDK.UI.ReactUI.min.js"></script>
<link rel="stylesheet" href="/static/pesdk-4.7.0/css/PhotoEditorSDK.UI.ReactUI.min.css"/>
</head>
<body>
<header>
<div class="container">
<nav class="nav-menu">
<ul>
<li id="nav-left-menu"><a class="icon-menu"></a></li>
<li id="header-logo"><a href="/" class=""><img src="/static/img/logo-inverse.png" style="width: 46px; margin: 0 12px;"></a></li>
<li class="right">
<a href="/user/edit/">Hi, Muhamad Ali</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="breadcrumb"></div>
<main>
<div class="container">
<div id="create-ads">
<div class="step-group">
<div class="step" data-step="1">
<p for="step-1">Target Iklan</p>
<p for="step-3">Rancangan Iklan</p>
<p for="step-3">Atur Budget</p>
<p for="step-4">Ringkasan</p>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input type='hidden' name='csrfmiddlewaretoken' value='M2lSYBbwH0x9jEpcsAkUJCGIGvoNmBY8dtOyVGbXV41CehYbcSOCWBtM4zDwEBjf' />
<div id="step-1" class="step-content">
<h2>Target Iklan</h2>
<div class="input-group">
<label>Tentukan daerah/kota target iklan Anda</label>
<div class="area-full">
<select class="multiple-select" id="id_location" name="id_location" multiple="multiple">
<option value="9072620-Ambarawa-Ambarawa">Ambarawa</option>
<option value="9072522-Amlapura-Amlapura">Amlapura</option>
<option value="9072552-Arga Makmur-Arga Makmur">Arga Makmur</option>
<option value="9072604-Arjawinangun-Arjawinangun">Arjawinangun</option>
<option value="1007721-Balikpapan-Balikpapan">Balikpapan</option>
<option value="9072598-Balongan-Balongan">Balongan</option>
</select>
</div>
</div>
<div id="forecastResultGroup">
<div id="forecastResult"></div>
</div>
</div>
<div id="step-2" class="step-content">
<h2>Rancangan Iklan</h2>
<div class="input-group">
<label>Nama iklan<br/>
<small>Nama iklan akan ditampilkan di daftar iklan Anda</small>
</label>
<div class="input-group-icon border">
<div class="area">
<input type="text" onclick="gaCreateAds('Type in ad\'s title', false)" name="name" id="name" class="white">
</div>
</div>
<ul class="errorlist">
<li class="hidden" id="error_name"></li>
</ul>
</div>
<div class="input-group">
<label>URL iklan<br/>
<small>Alamat website atau landing page yang dituju ketika iklan diklik</small>
</label>
<div class="input-group-icon border">
<!-- <div class="icon option">
<select name="url_protocol">
<option value="http://">http://</option>
<option value="https://">https://</option>
</select>
</div> -->
<div class="area">
<input type="text" onclick="gaCreateAds('Type in ad\'s URL', false)" name="url" id="url" class="white">
</div>
</div>
<ul class="errorlist">
<li class="hidden" id="error_url"></li>
</ul>
</div>
<div class="input-group">
<label>Tanggal mulai<br/>
<small>Tanggal mulai tayang iklan yang Anda inginkan</small>
</label>
<div class="input-group-icon border" onclick="gaCreateAds('Select start date', false)">
<div class="area">
<input type="date" name="start_date" id="start_date" class="white">
</div>
<div class="icon white"><i class="icon-calendar-plus"></i></div>
</div>
<ul class="errorlist">
<li class="hidden" id="error_start_date"></li>
</ul>
</div>
<div class="input-group">
<label>Materi iklan</label>
<div>
<div id="input-image">
<div class="input-file-container" onclick="gaCreateAds('Upload ad creative', false)">
<label tabindex="0" for="img" class="input-file-trigger">
<i class="fa fa-plus"></i><br/> Pilih gambar<br/> 300x250 pixel
</label>
<input class="input-file" id="img" name="img" type="file" onchange="previewImage()">
</div>
<small>Materi iklan dalam format file jpg/png,<br/>dengan ukuran maks 1MB</small>
</div>
<div id="edit-image">
<img src="" class="img_preview">
<div class="action">
<a onclick="showEditor()"><i class="fa fa-edit"></i> Edit</a>
<a onclick="removeEditor()"><i class="fa fa-remove"></i> Hapus</a>
</div>
</div>
</div>
<ul class="errorlist">
<li class="hidden" id="error_img"></li>
</ul>
</div>
<div class="warning">
Dengan menekan tombol LANJUT, Anda menyatakan<br/>
bahwa rancangan iklan telah sesuai dengan <a
onclick="showModal('terms-ads'); gaCreateAds('Click Terms of Service link', false)">Ketentuan
Iklan</a> TJB.id
</div>
</div>
<div id="step-3" class="step-content">
<h2>Atur Budget</h2>
<div class="input-group">
<label>Pilih sesuai paket</label>
<div class="package-list">
<label for="pkg1">
<input type="radio" class="package-options" name="package" value="paket-hemat-irit" id="pkg1" data-price="50000.00" data-click="100">
<span><strong>Rp 50,000.00</strong><br/>100 klik</span>
</label>
<label for="pkg2">
<input type="radio" class="package-options" name="package" value="paket-asik-pas" id="pkg2" data-price="150000.00" data-click="300">
<span><strong>Rp 150,000.00</strong><br/>300 klik</span>
</label>
<label for="pkg3">
<input type="radio" class="package-options" name="package" value="paket-super-pas" id="pkg3" data-price="300000.00" data-click="600">
<span><strong>Rp 300,000.00</strong><br/>600 klik</span>
</label>
<label for="pkg4">
<input type="radio" class="package-options" name="package" value="paket-terjangkau" id="pkg4" data-price="500000.00" data-click="1000">
<span><strong>Rp 500,000.00</strong><br/>1,000 klik</span>
</label>
<label for="pkg5">
<input type="radio" class="package-options" name="package" value="paket-luar-biasa" id="pkg5" data-price="1000000.00" data-click="2000">
<span><strong>Rp 1,000,000.00</strong><br/>2,000 klik</span>
</label>
</div>
</div>
</div>
<div id="step-4" class="step-content">
<h2>Ringkasan Pembelian</h2>
<div class="preview-img">
<img src="" class="img_preview">
<div class="message-error" id="preview_img_warning">
Materi belum ada, silahkan kembali dan upload materi.
</div>
<a id="ga-ads-preview" onclick="showModal('previews-ads')">Preview Iklan</a>
</div>
<div class="summery-info">
<p>Nama Iklan<br/>
<strong id="preview_ads_name"></strong></p>
<p>URL Iklan<br/>
<strong id="preview_ads_url"></strong></p>
<p>Tanggal Tayang<br/>
<strong id="preview_ads_date"></strong></p>
<p>Target Lokasi<br/>
<strong id="preview_ads_location"></strong></p>
<p>Jumlah klik yang dibeli<br/>
<strong id="preview_click">0</strong> klik</p>
<table>
<tr>
<td>Harga</td>
<td class="text-right">Rp <span id="preview_price">0</span></td>
</tr>
<tr>
<td><strong>Total Pembayaran</strong></td>
<td class="text-right"><strong>Rp <span id="preview_price_total">0</span></strong></td>
</tr>
</table>
</div>
<hr/>
<div class="payment-info">
<p>Metode Pembayaran</p>
<div class="payment-list">
<label>
<input type="radio" name="payment_method" value="bca-va" checked="checked">
<img src="/static/img/pay-bca.png">
<span>BCA Virtual Account</span>
</label>
<label>
<input type="radio" name="payment_method" value="mandiri-va">
<img src="/static/img/pay-mandiri.png">
<span>Mandiri Virtual Account</span>
</label>
<label>
<input type="radio" name="payment_method" value="permata-va">
<img src="/static/img/pay-atm.png">
<span>Bank Lainya</span>
</label>
</div>
</div>
</div>
<div class="step-action">
<input type="hidden" id="new_img" name="new_img" value="">
<button type="button" class="btn btn-outline action-back disable">Kembali</button>
<button type="button" class="btn btn-primary action-next">Lanjut</button>
<button type="submit" class="btn btn-primary action-pay disable">Bayar</button>
</div>
</form>
</div>
</div>
<div id="previews-ads" class="modal">
<div class="top">
<a onclick="hideModal('previews-ads')"><strong>X</strong></a>
</div>
<div style="overflow: auto; max-height: 95vh;">
<div class="content">
<div id="pre-one" class="active">
<h2>Desktop</h2>
<div class="ads-desktop">
<img src="/static/img/ads-prev-desktop.png">
</div>
</div>
<div id="pre-two">
<h2>Mobile</h2>
<div class="ads-mobile">
<img src="/static/img/ads-prev-mobile.png">
</div>
</div>
<div class="prev-indicator">
<a onclick="swipePrev('one')" id="btn-one" class="current"><i class="fa fa-angle-left"></i></a>
<a onclick="swipePrev('two')" id="btn-two"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="bottom">
<p>Berikut adalah contoh tampilan iklan Anda. Posisi, lokasi dan frekuensi kemunculan sebenarnya
tergantung
pada
ketersediaan space iklan di website partner kami</p>
<br/>
<br/>
</div>
</div>
</div>
<div id="terms-ads" class="modal">
<div class="top">
<a onclick="hideModal('terms-ads')"><strong>X</strong></a>
</div>
<div style="overflow: auto; max-height: 95vh;">
<iframe src="/terms/" style="width: 100%;height: 95vh;border: 0;"></iframe>
</div>
</div>
<div class="popup-editor">
<div class="top">
<div class="">
<h1>Edit Gambar</h1>
</div>
<div class="">
<a onclick="removeEditor()"><strong>X</strong></a>
</div>
</div>
<div id="editor-image" style="width: 100vw; height: 80vh;"></div>
</div>
</main>
<footer>
<div class="container">
<ul>
<li class="footer-terms"><a href="/terms/" target="_blank">Ketentuan Layanan</a></li>
<li id="footer-privacy"><a href="/privacy/" target="_blank">Kebijakan Privasi</a></li>
<li class="footer-terms-ads"><a href="/terms-ads/" target="__blank">Ketentuan Iklan</a></li>
<li class="right"><a href="#">&copy; 2018 TJB.id</a></li>
</ul>
</div>
</footer>
<div class="backdrop"></div>
<aside>
<div class="head logged">
<a class="close">x</a>
<div class="profile">
&nbsp;<br>
<h2>Muhamad Ali</h2>
<p>[email protected]</p>
</div>
</div>
<div class="body" style="padding: 0 15px;">
<ul>
<li><a href="/ads/" class="btn btn-primary" style="">Pasang Iklan</a></li>
<li><a href="/ads/history/"><i class="fa fa-bullhorn"></i>Iklan Saya <i
class="fa fa-bell-o right"><sup>1</sup></i></a></li>
<li><a href="/logout/"><i class="fa fa-sign-out"></i>Keluar</a></li>
</ul>
</div>
</aside>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var datefield = document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type != "date") {
document.write('<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">\n');
document.write('<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"><\/script>\n');
}
if (datefield.type != "date") {
jQuery(function ($) {
$('#start_date').datepicker({minDate: +3});
$('#start_date').style("padding-top", "5px");
});
}
$.fn.delayKeyup = function (callback, ms) {
var timer = 0;
var el = $(this);
$(this).keyup(function () {
clearTimeout(timer);
timer = setTimeout(function () {
callback(el)
}, ms);
});
return $(this);
};
function showModal(id) {
$('body').css("position", "fixed");
$('#' + id).show();
}
function hideModal(id) {
$('body').css("position", "relative");
$('#' + id).hide();
}
$('.ga-login-link').click(function () {
ga('send', 'event', {
eventCategory: 'Login',
eventAction: 'Start login',
nonInteraction: false
});
});
$('#header-logo').click(function () {
ga('send', 'event', {
eventCategory: 'Header',
eventAction: 'Click logo',
nonInteraction: false
});
});
$('#nav-left-menu').click(function () {
ga('send', 'event', {
eventCategory: 'Header',
eventAction: 'Click menu',
nonInteraction: false
});
});
$('#footer-privacy').click(function () {
ga('send', 'event', {
eventCategory: 'Footer',
eventAction: 'Click Privacy Policy',
nonInteraction: false
});
});
$('.footer-terms').click(function () {
ga('send', 'event', {
eventCategory: 'Footer',
eventAction: 'Click Terms of Service',
nonInteraction: false
});
});
$(function () {
if (window.location.search.split("=")[1]) {
ga('send', 'event', {
eventCategory: 'Login',
eventAction: 'Login success',
nonInteraction: true
});
}
});
</script>
<script src="/static/js/side.js"></script>
<script src="/static/js/format-number.js"></script>
<script src="/static/js/moment.min.js"></script>
<script src="/static/js/step-wizard.js"></script>
<script src="/static/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$(document).ready(function () {
$('.step-content').addClass('disable');
$('#step-1').removeClass('disable');
});
getForcast();
$('.img_preview').hide();
$('.multiple-select').select2({
placeholder: "Indonesia"
});
var MyDate = new Date();
var MyDateString;
MyDate.setDate(MyDate.getDate());
MyDateString = MyDate.getFullYear() + '-' + ('0' + (MyDate.getMonth() + 1)).slice(-2) + '-' + ('0' + MyDate.getDate()).slice(-2);
$("#start_date").val(MyDateString);
$("#start_date").attr('min', MyDateString);
$("#start_date").on("change", function () {
this.setAttribute("data-date", moment(this.value, "YYYY-MM-DD").format(this.getAttribute("data-date-format")))
}).trigger("change");
$("#id_location").change(function () {
getForcast();
});
ga('send', 'event', {
eventCategory: 'Target Location',
eventAction: 'Start Target Location',
nonInteraction: false
});
$('.select2-search__field').delayKeyup(function (el) {
ga('send', 'event', {
eventCategory: 'Target Location',
eventAction: 'View Suggestions results ',
eventLabel: 'count: ' + $('.select2-results__options').children().length,
nonInteraction: true
});
}, 800);
$('input[name="payment"]').click(function () {
ga('send', 'event', {
eventCategory: 'Order Summary',
eventAction: 'Select payment Method',
eventLabel: 'payment: ' + $(this).val(),
nonInteraction: false
});
});
$('#ga-ads-preview').click(function () {
ga('send', 'event', {
eventCategory: 'Order Summary',
eventAction: 'Click Preview Button',
nonInteraction: false
});
});
$('.action-pay').click(function () {
ga('send', 'event', {
eventCategory: 'Order Summary',
eventAction: 'Click Next button',
eventLabel: 'payment: ' + $('input[name="payment"]:checked').val(),
nonInteraction: false
});
});
});
var log_selected = [];
function getForcast() {
ga('send', 'event', {
eventCategory: 'Target Location',
eventAction: 'Auto Submit for suggestions',
nonInteraction: false
});
var target = '<h3>Perkiraan target</h3>';
target += '<img class="audience" src="/static/img/audience.png" /><br/>';
$('#forecastResultGroup').show();
$('#forecastResult').html('<img class="loading" src="/static/img/small-loading.gif" />');
var val = '50,000 ++';
var selectednumbers = [2360]; //default indo
if ($('#id_location :selected').length > 0) {
$('#id_location :selected').each(function (i, selected) {
selectednumbers[i] = parseInt($(selected).val());
if (log_selected.indexOf($(selected).val()) < 0) {
log_selected.push($(selected).val());
ga('send', 'event', {
eventCategory: 'Target Location',
eventAction: 'Click suggested result',
eventLabel: $(selected).val(),
nonInteraction: false
});
}
});
}
$.ajax({
url: 'forecast/',
data: {
'id_location': JSON.stringify(selectednumbers),
'csrfmiddlewaretoken': "M2lSYBbwH0x9jEpcsAkUJCGIGvoNmBY8dtOyVGbXV41CehYbcSOCWBtM4zDwEBjf"
},
type: 'POST',
success: function (data) {
if (data.target >= 100000) {
val = numberFormat(data.target);
}
target += 'Iklan Anda berpotensi dilihat oleh<br/><strong>' + val + '</strong> orang';
$('#forecastResult').html(target);
},
error: function (er) {
target += 'Iklan Anda berpotensi dilihat oleh<br/><strong>' + val + '</strong> orang';
$('#forecastResult').html(target)
ga('send', 'event', {
eventCategory: 'Target Location',
eventAction: 'Suggestion error',
eventLabel: er,
nonInteraction: false
});
}
});
}
function swipePrev(val) {
$('#pre-one').hide();
$('#pre-two').hide();
$('#pre-' + val).show();
$('#btn-one').removeClass();
$('#btn-two').removeClass();
$('#btn-' + val).addClass('current');
}
function previewImage() {
$('#edit-image').show();
$('.img_preview').show();
$('#preview_img_warning').hide();
var file = document.querySelector('input[name=img]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
$.each($('.img_preview'), function () {
$(this).attr('src', reader.result);
$('#input-image').hide();
});
$('#new_img').val(reader.result);
showEditor();
gaCreateAds('Auto edit ad creative', true);
};
if (file) {
reader.readAsDataURL(file);
} else {
$.each($('.img_preview'), function () {
$(this).attr('src', '');
});
$('#edit-image').hide();
$('.img_preview').hide();
$('#preview_img_warning').show();
$('#input-image').show();
}
}
function removeEditor() {
$('#editor-image').html('');
$('.img_preview').attr('src', '');
$('.img_preview').hide();
$('#edit-image').hide();
$('#preview_img_warning').show();
$('#input-image').show();
$('#img').val('');
$('body').css("position", "relative");
$('.popup-editor').hide();
gaCreateAds('Delete ad creative', false);
}
function showEditor() {
$('body').css("position", "fixed");
$('.popup-editor').show();
gaCreateAds('Edit ad creative', false);
var file = document.querySelector('input[name=img]').files[0];
var reader = new FileReader();
if (file) {
var inpImage = new Image();
reader.onloadend = function () {
inpImage.src = reader.result;
};
reader.readAsDataURL(file);
var container = document.getElementById('editor-image');
var editor = new PhotoEditorSDK.UI.ReactUI({
container: container,
license: '{"owner":"PT Tribun Digital Online","version":"2.1","enterprise_license":false,"available_actions":["magic","filter","transform","sticker","text","adjustments","brush","focus","frames","camera"],"features":["transform","text","camera","library","export"],"platform":"HTML5","app_identifiers":["www.tjb.id","*.tjb.id","tjb.id","staging.pico.id","localhost","pico.id","www.pico.id","*.pico.id"],"api_token":"VNij0ScJsNLquzUZ27AtEQ","domains":["https://api.photoeditorsdk.com"],"issued_at":1529393212,"expires_at":null,"signature":"......[kompas-signature]....."}',
assets: {
baseUrl: '/static/pesdk-4.7.0/assets'
},
logLevel: 'error',
showCloseButton: false,
showHeader: false,
enableWebcam: true,
enableUpload: false,
responsive: true,
extensions: {
languages: {
en: {
editor: {
'export': 'Lanjut',
},
loading: {
'exporting': 'Menyimpan gambar...',
},
controls: {
transform: {
'300x250': '300x250'
}
}
}
}
},
language: 'en',
editor: {
enableZoom: true,
export: {
format: 'image/png',
download: false,
type: PhotoEditorSDK.RenderType.DATAURL
},
maxMegaPixels: 10,
controlsOptions: {
transform: {
ratios: [
{
identifier: '300x250',
defaultName: '300x250',
ratio: 300 / 250
}
],
replaceRatios: true
}
},
forceControls: [
{
control: "transform",
options: {
ratios: [
{
identifier: '300x250',
defaultName: '300x250',
ratio: 300 / 250
}
],
replaceRatios: true
}
}
],
tools: [
"transform", "rotation", "flip", "text"
],
image: inpImage
}
});
editor.on('export', (result) => {
$.each($('.img_preview'), function () {
$(this).attr('src', result);
});
$('body').css("position", "relative");
$('.popup-editor').hide();
$('#new_img').val(result);
});
} else {
alert('Materi belum dipilih.');
$('.popup-editor').hide();
}
}
function gaCreateAds(action, nonint) {
ga('send', 'event', {
eventCategory: 'Create Ad',
eventAction: action,
nonInteraction: nonint
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment