diff options
Diffstat (limited to 'addons/website_links/static/src')
6 files changed, 1096 insertions, 0 deletions
diff --git a/addons/website_links/static/src/css/website_links.css b/addons/website_links/static/src/css/website_links.css new file mode 100644 index 00000000..c5f5a350 --- /dev/null +++ b/addons/website_links/static/src/css/website_links.css @@ -0,0 +1,54 @@ +.no-link-style { + color: black; + text-decoration: none; +} + +.required-form-control { + background-color: #CECDFF; +} + +#filters li a, +#filters li.active a, +#filters li.active a.active, +#filters li.active a:hover, +#filters li.active a:focus, +#filters li a:hover { + padding: 0px 5px; + border-radius: 0px; + border: 0px; + border-color: transparent; + border-right: 1px solid #999; + padding-bottom: 0; + background-color: #FFFFFF; +} + +#filters li.active a { + color: #999; +} + +#filters li:last-child a, +#filters li:last-child a:hover, +#filters li:last-child a:focus { + border-right: 0px; +} + +.nav-tabs-inline { + font-size: 14px; +} + +#o_website_links_recent_links { + min-height:30em; +} + +.o_website_links_code_error { + display:none; + color:red; + font-weight:bold; +} + +.truncate_text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 500px; +} diff --git a/addons/website_links/static/src/js/website_links.js b/addons/website_links/static/src/js/website_links.js new file mode 100644 index 00000000..f1701005 --- /dev/null +++ b/addons/website_links/static/src/js/website_links.js @@ -0,0 +1,542 @@ +odoo.define('website_links.website_links', function (require) { +'use strict'; + +var core = require('web.core'); +var publicWidget = require('web.public.widget'); + +var _t = core._t; + +var SelectBox = publicWidget.Widget.extend({ + events: { + 'change': '_onChange', + }, + + /** + * @constructor + * @param {Object} parent + * @param {Object} obj + * @param {String} placeholder + */ + init: function (parent, obj, placeholder) { + this._super.apply(this, arguments); + this.obj = obj; + this.placeholder = placeholder; + }, + /** + * @override + */ + willStart: function () { + var self = this; + var defs = [this._super.apply(this, arguments)]; + defs.push(this._rpc({ + model: this.obj, + method: 'search_read', + params: { + fields: ['id', 'name'], + }, + }).then(function (result) { + self.objects = _.map(result, function (val) { + return {id: val.id, text: val.name}; + }); + })); + return Promise.all(defs); + }, + /** + * @override + */ + start: function () { + var self = this; + this.$el.select2({ + placeholder: self.placeholder, + allowClear: true, + createSearchChoice: function (term) { + if (self._objectExists(term)) { + return null; + } + return {id: term, text: _.str.sprintf("Create '%s'", term)}; + }, + createSearchChoicePosition: 'bottom', + multiple: false, + data: self.objects, + minimumInputLength: self.objects.length > 100 ? 3 : 0, + }); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @param {String} query + */ + _objectExists: function (query) { + return _.find(this.objects, function (val) { + return val.text.toLowerCase() === query.toLowerCase(); + }) !== undefined; + }, + /** + * @private + * @param {String} name + */ + _createObject: function (name) { + var self = this; + var args = { + name: name + }; + if (this.obj === "utm.campaign"){ + args.is_website = true; + } + return this._rpc({ + model: this.obj, + method: 'create', + args: [args], + }).then(function (record) { + self.$el.attr('value', record); + self.objects.push({'id': record, 'text': name}); + }); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Object} ev + */ + _onChange: function (ev) { + if (!ev.added || !_.isString(ev.added.id)) { + return; + } + this._createObject(ev.added.id); + }, +}); + +var RecentLinkBox = publicWidget.Widget.extend({ + template: 'website_links.RecentLink', + xmlDependencies: ['/website_links/static/src/xml/recent_link.xml'], + events: { + 'click .btn_shorten_url_clipboard': '_toggleCopyButton', + 'click .o_website_links_edit_code': '_editCode', + 'click .o_website_links_ok_edit': '_onLinksOkClick', + 'click .o_website_links_cancel_edit': '_onLinksCancelClick', + 'submit #o_website_links_edit_code_form': '_onSubmitCode', + }, + + /** + * @constructor + * @param {Object} parent + * @param {Object} obj + */ + init: function (parent, obj) { + this._super.apply(this, arguments); + this.link_obj = obj; + this.animating_copy = false; + }, + /** + * @override + */ + start: function () { + new ClipboardJS(this.$('.btn_shorten_url_clipboard').get(0)); + return this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _toggleCopyButton: function () { + if (this.animating_copy) { + return; + } + + var self = this; + this.animating_copy = true; + var top = this.$('.o_website_links_short_url').position().top; + this.$('.o_website_links_short_url').clone() + .css('position', 'absolute') + .css('left', 15) + .css('top', top - 2) + .css('z-index', 2) + .removeClass('o_website_links_short_url') + .addClass('animated-link') + .insertAfter(this.$('.o_website_links_short_url')) + .animate({ + opacity: 0, + top: '-=20', + }, 500, function () { + self.$('.animated-link').remove(); + self.animating_copy = false; + }); + }, + /** + * @private + * @param {String} message + */ + _notification: function (message) { + this.$('.notification').append('<strong>' + message + '</strong>'); + }, + /** + * @private + */ + _editCode: function () { + var initCode = this.$('#o_website_links_code').html(); + this.$('#o_website_links_code').html('<form style="display:inline;" id="o_website_links_edit_code_form"><input type="hidden" id="init_code" value="' + initCode + '"/><input type="text" id="new_code" value="' + initCode + '"/></form>'); + this.$('.o_website_links_edit_code').hide(); + this.$('.copy-to-clipboard').hide(); + this.$('.o_website_links_edit_tools').show(); + }, + /** + * @private + */ + _cancelEdit: function () { + this.$('.o_website_links_edit_code').show(); + this.$('.copy-to-clipboard').show(); + this.$('.o_website_links_edit_tools').hide(); + this.$('.o_website_links_code_error').hide(); + + var oldCode = this.$('#o_website_links_edit_code_form #init_code').val(); + this.$('#o_website_links_code').html(oldCode); + + this.$('#code-error').remove(); + this.$('#o_website_links_code form').remove(); + }, + /** + * @private + */ + _submitCode: function () { + var self = this; + + var initCode = this.$('#o_website_links_edit_code_form #init_code').val(); + var newCode = this.$('#o_website_links_edit_code_form #new_code').val(); + + if (newCode === '') { + self.$('.o_website_links_code_error').html(_t("The code cannot be left empty")); + self.$('.o_website_links_code_error').show(); + return; + } + + function showNewCode(newCode) { + self.$('.o_website_links_code_error').html(''); + self.$('.o_website_links_code_error').hide(); + + self.$('#o_website_links_code form').remove(); + + // Show new code + var host = self.$('#o_website_links_host').html(); + self.$('#o_website_links_code').html(newCode); + + // Update button copy to clipboard + self.$('.btn_shorten_url_clipboard').attr('data-clipboard-text', host + newCode); + + // Show action again + self.$('.o_website_links_edit_code').show(); + self.$('.copy-to-clipboard').show(); + self.$('.o_website_links_edit_tools').hide(); + } + + if (initCode === newCode) { + showNewCode(newCode); + } else { + this._rpc({ + route: '/website_links/add_code', + params: { + init_code: initCode, + new_code: newCode, + }, + }).then(function (result) { + showNewCode(result[0].code); + }, function () { + self.$('.o_website_links_code_error').show(); + self.$('.o_website_links_code_error').html(_t("This code is already taken")); + }); + } + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + */ + _onLinksOkClick: function (ev) { + ev.preventDefault(); + this._submitCode(); + }, + /** + * @private + * @param {Event} ev + */ + _onLinksCancelClick: function (ev) { + ev.preventDefault(); + this._cancelEdit(); + }, + /** + * @private + * @param {Event} ev + */ + _onSubmitCode: function (ev) { + ev.preventDefault(); + this._submitCode(); + }, +}); + +var RecentLinks = publicWidget.Widget.extend({ + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + getRecentLinks: function (filter) { + var self = this; + return this._rpc({ + route: '/website_links/recent_links', + params: { + filter: filter, + limit: 20, + }, + }).then(function (result) { + _.each(result.reverse(), function (link) { + self._addLink(link); + }); + self._updateNotification(); + }, function () { + var message = _t("Unable to get recent links"); + self.$el.append('<div class="alert alert-danger">' + message + '</div>'); + }); + }, + /** + * @private + */ + _addLink: function (link) { + var nbLinks = this.getChildren().length; + var recentLinkBox = new RecentLinkBox(this, link); + recentLinkBox.prependTo(this.$el); + $('.link-tooltip').tooltip(); + + if (nbLinks === 0) { + this._updateNotification(); + } + }, + /** + * @private + */ + removeLinks: function () { + _.invoke(this.getChildren(), 'destroy'); + }, + /** + * @private + */ + _updateNotification: function () { + if (this.getChildren().length === 0) { + var message = _t("You don't have any recent links."); + $('.o_website_links_recent_links_notification').html('<div class="alert alert-info">' + message + '</div>'); + } else { + $('.o_website_links_recent_links_notification').empty(); + } + }, +}); + +publicWidget.registry.websiteLinks = publicWidget.Widget.extend({ + selector: '.o_website_links_create_tracked_url', + events: { + 'click #filter-newest-links': '_onFilterNewestLinksClick', + 'click #filter-most-clicked-links': '_onFilterMostClickedLinksClick', + 'click #filter-recently-used-links': '_onFilterRecentlyUsedLinksClick', + 'click #generated_tracked_link a': '_onGeneratedTrackedLinkClick', + 'keyup #url': '_onUrlKeyUp', + 'click #btn_shorten_url': '_onShortenUrlButtonClick', + 'submit #o_website_links_link_tracker_form': '_onFormSubmit', + }, + + /** + * @override + */ + start: function () { + var defs = [this._super.apply(this, arguments)]; + + // UTMS selects widgets + var campaignSelect = new SelectBox(this, 'utm.campaign', _t("e.g. Promotion of June, Winter Newsletter, ..")); + defs.push(campaignSelect.attachTo($('#campaign-select'))); + + var mediumSelect = new SelectBox(this, 'utm.medium', _t("e.g. Newsletter, Social Network, ..")); + defs.push(mediumSelect.attachTo($('#channel-select'))); + + var sourceSelect = new SelectBox(this, 'utm.source', _t("e.g. Search Engine, Website page, ..")); + defs.push(sourceSelect.attachTo($('#source-select'))); + + // Recent Links Widgets + this.recentLinks = new RecentLinks(this); + defs.push(this.recentLinks.appendTo($('#o_website_links_recent_links'))); + this.recentLinks.getRecentLinks('newest'); + + // Clipboard Library + new ClipboardJS($('#btn_shorten_url').get(0)); + + this.url_copy_animating = false; + + $('[data-toggle="tooltip"]').tooltip(); + + return Promise.all(defs); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onFilterNewestLinksClick: function () { + this.recentLinks.removeLinks(); + this.recentLinks.getRecentLinks('newest'); + }, + /** + * @private + */ + _onFilterMostClickedLinksClick: function () { + this.recentLinks.removeLinks(); + this.recentLinks.getRecentLinks('most-clicked'); + }, + /** + * @private + */ + _onFilterRecentlyUsedLinksClick: function () { + this.recentLinks.removeLinks(); + this.recentLinks.getRecentLinks('recently-used'); + }, + /** + * @private + */ + _onGeneratedTrackedLinkClick: function () { + $('#generated_tracked_link a').text(_t("Copied")).removeClass('btn-primary').addClass('btn-success'); + setTimeout(function () { + $('#generated_tracked_link a').text(_t("Copy")).removeClass('btn-success').addClass('btn-primary'); + }, 5000); + }, + /** + * @private + * @param {Event} ev + */ + _onUrlKeyUp: function (ev) { + if (!$('#btn_shorten_url').hasClass('btn-copy') || ev.which === 13) { + return; + } + + $('#btn_shorten_url').removeClass('btn-success btn-copy').addClass('btn-primary').html('Get tracked link'); + $('#generated_tracked_link').css('display', 'none'); + $('.o_website_links_utm_forms').show(); + }, + /** + * @private + */ + _onShortenUrlButtonClick: function () { + if (!$('#btn_shorten_url').hasClass('btn-copy') || this.url_copy_animating) { + return; + } + + var self = this; + this.url_copy_animating = true; + $('#generated_tracked_link').clone() + .css('position', 'absolute') + .css('left', '78px') + .css('bottom', '8px') + .css('z-index', 2) + .removeClass('#generated_tracked_link') + .addClass('url-animated-link') + .appendTo($('#generated_tracked_link')) + .animate({ + opacity: 0, + bottom: '+=20', + }, 500, function () { + $('.url-animated-link').remove(); + self.url_copy_animating = false; + }); + }, + /** + * Add the RecentLinkBox widget and send the form when the user generate the link + * + * @private + * @param {Event} ev + */ + _onFormSubmit: function (ev) { + var self = this; + ev.preventDefault(); + + if ($('#btn_shorten_url').hasClass('btn-copy')) { + return; + } + + ev.stopPropagation(); + + // Get URL and UTMs + var campaignID = $('#campaign-select').attr('value'); + var mediumID = $('#channel-select').attr('value'); + var sourceID = $('#source-select').attr('value'); + + var params = {}; + params.url = $('#url').val(); + if (campaignID !== '') { + params.campaign_id = parseInt(campaignID); + } + if (mediumID !== '') { + params.medium_id = parseInt(mediumID); + } + if (sourceID !== '') { + params.source_id = parseInt(sourceID); + } + + $('#btn_shorten_url').text(_t("Generating link...")); + + this._rpc({ + route: '/website_links/new', + params: params, + }).then(function (result) { + if ('error' in result) { + // Handle errors + if (result.error === 'empty_url') { + $('.notification').html('<div class="alert alert-danger">The URL is empty.</div>'); + } else if (result.error === 'url_not_found') { + $('.notification').html('<div class="alert alert-danger">URL not found (404)</div>'); + } else { + $('.notification').html('<div class="alert alert-danger">An error occur while trying to generate your link. Try again later.</div>'); + } + } else { + // Link generated, clean the form and show the link + var link = result[0]; + + $('#btn_shorten_url').removeClass('btn-primary').addClass('btn-success btn-copy').html('Copy'); + $('#btn_shorten_url').attr('data-clipboard-text', link.short_url); + + $('.notification').html(''); + $('#generated_tracked_link').html(link.short_url); + $('#generated_tracked_link').css('display', 'inline'); + + self.recentLinks._addLink(link); + + // Clean URL and UTM selects + $('#campaign-select').select2('val', ''); + $('#channel-select').select2('val', ''); + $('#source-select').select2('val', ''); + + $('.o_website_links_utm_forms').hide(); + } + }); + }, +}); + +return { + SelectBox: SelectBox, + RecentLinkBox: RecentLinkBox, + RecentLinks: RecentLinks, +}; +}); diff --git a/addons/website_links/static/src/js/website_links_charts.js b/addons/website_links/static/src/js/website_links_charts.js new file mode 100644 index 00000000..29629be0 --- /dev/null +++ b/addons/website_links/static/src/js/website_links_charts.js @@ -0,0 +1,312 @@ +odoo.define('website_links.charts', function (require) { +'use strict'; + +var core = require('web.core'); +var publicWidget = require('web.public.widget'); + +var _t = core._t; + +var BarChart = publicWidget.Widget.extend({ + jsLibs: [ + '/web/static/lib/Chart/Chart.js', + ], + /** + * @constructor + * @param {Object} parent + * @param {Object} beginDate + * @param {Object} endDate + * @param {Object} dates + */ + init: function (parent, beginDate, endDate, dates) { + this._super.apply(this, arguments); + this.beginDate = beginDate; + this.endDate = endDate; + this.number_of_days = this.endDate.diff(this.beginDate, 'days') + 2; + this.dates = dates; + }, + /** + * @override + */ + start: function () { + // Fill data for each day (with 0 click for days without data) + var clicksArray = []; + var beginDateCopy = this.beginDate; + for (var i = 0; i < this.number_of_days; i++) { + var dateKey = beginDateCopy.format('YYYY-MM-DD'); + clicksArray.push([dateKey, (dateKey in this.dates) ? this.dates[dateKey] : 0]); + beginDateCopy.add(1, 'days'); + } + + var nbClicks = 0; + var data = []; + var labels = []; + clicksArray.forEach(function (pt) { + labels.push(pt[0]); + nbClicks += pt[1]; + data.push(pt[1]); + }); + + this.$('.title').html(nbClicks + _t(' clicks')); + + var config = { + type: 'line', + data: { + labels: labels, + datasets: [{ + data: data, + fill: 'start', + label: _t('# of clicks'), + backgroundColor: '#ebf2f7', + borderColor: '#6aa1ca', + + }], + }, + }; + var canvas = this.$('canvas')[0]; + var context = canvas.getContext('2d'); + new Chart(context, config); + }, +}); + +var PieChart = publicWidget.Widget.extend({ + jsLibs: [ + '/web/static/lib/Chart/Chart.js', + ], + /** + * @override + * @param {Object} parent + * @param {Object} data + */ + init: function (parent, data) { + this._super.apply(this, arguments); + this.data = data; + }, + /** + * @override + */ + start: function () { + + // Process country data to fit into the ChartJS scheme + var labels = []; + var data = []; + for (var i = 0; i < this.data.length; i++) { + var countryName = this.data[i]['country_id'] ? this.data[i]['country_id'][1] : _t('Undefined'); + labels.push(countryName + ' (' + this.data[i]['country_id_count'] + ')'); + data.push(this.data[i]['country_id_count']); + } + + // Set title + this.$('.title').html(this.data.length + _t(' countries')); + + var config = { + type: 'pie', + data: { + labels: labels, + datasets: [{ + data: data, + label: this.data.length > 0 ? this.data[0].key : _t('No data'), + }] + }, + }; + + var canvas = this.$('canvas')[0]; + var context = canvas.getContext('2d'); + new Chart(context, config); + }, +}); + +publicWidget.registry.websiteLinksCharts = publicWidget.Widget.extend({ + selector: '.o_website_links_chart', + events: { + 'click .graph-tabs li a': '_onGraphTabClick', + 'click .copy-to-clipboard': '_onCopyToClipboardClick', + }, + + /** + * @override + */ + start: function () { + var self = this; + this.charts = {}; + + // Get the code of the link + var linkID = parseInt($('#link_id').val()); + this.links_domain = ['link_id', '=', linkID]; + + var defs = []; + defs.push(this._totalClicks()); + defs.push(this._clicksByDay()); + defs.push(this._clicksByCountry()); + defs.push(this._lastWeekClicksByCountry()); + defs.push(this._lastMonthClicksByCountry()); + defs.push(this._super.apply(this, arguments)); + + new ClipboardJS($('.copy-to-clipboard')[0]); + + this.animating_copy = false; + + return Promise.all(defs).then(function (results) { + var _totalClicks = results[0]; + var _clicksByDay = results[1]; + var _clicksByCountry = results[2]; + var _lastWeekClicksByCountry = results[3]; + var _lastMonthClicksByCountry = results[4]; + + if (!_totalClicks) { + $('#all_time_charts').prepend(_t("There is no data to show")); + $('#last_month_charts').prepend(_t("There is no data to show")); + $('#last_week_charts').prepend(_t("There is no data to show")); + return; + } + + var formattedClicksByDay = {}; + var beginDate; + for (var i = 0; i < _clicksByDay.length; i++) { + var date = moment(_clicksByDay[i]['create_date:day'], 'DD MMMM YYYY'); + if (i === 0) { + beginDate = date; + } + formattedClicksByDay[date.format('YYYY-MM-DD')] = _clicksByDay[i]['create_date_count']; + } + + // Process all time line chart data + var now = moment(); + self.charts.all_time_bar = new BarChart(self, beginDate, now, formattedClicksByDay); + self.charts.all_time_bar.attachTo($('#all_time_clicks_chart')); + + // Process month line chart data + beginDate = moment().subtract(30, 'days'); + self.charts.last_month_bar = new BarChart(self, beginDate, now, formattedClicksByDay); + self.charts.last_month_bar.attachTo($('#last_month_clicks_chart')); + + // Process week line chart data + beginDate = moment().subtract(7, 'days'); + self.charts.last_week_bar = new BarChart(self, beginDate, now, formattedClicksByDay); + self.charts.last_week_bar.attachTo($('#last_week_clicks_chart')); + + // Process pie charts + self.charts.all_time_pie = new PieChart(self, _clicksByCountry); + self.charts.all_time_pie.attachTo($('#all_time_countries_charts')); + + self.charts.last_month_pie = new PieChart(self, _lastMonthClicksByCountry); + self.charts.last_month_pie.attachTo($('#last_month_countries_charts')); + + self.charts.last_week_pie = new PieChart(self, _lastWeekClicksByCountry); + self.charts.last_week_pie.attachTo($('#last_week_countries_charts')); + + var rowWidth = $('#all_time_countries_charts').parent().width(); + var $chartCanvas = $('#all_time_countries_charts,last_month_countries_charts,last_week_countries_charts').find('canvas'); + $chartCanvas.height(Math.max(_clicksByCountry.length * (rowWidth > 750 ? 1 : 2), 20) + 'em'); + + }); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _totalClicks: function () { + return this._rpc({ + model: 'link.tracker.click', + method: 'search_count', + args: [[this.links_domain]], + }); + }, + /** + * @private + */ + _clicksByDay: function () { + return this._rpc({ + model: 'link.tracker.click', + method: 'read_group', + args: [[this.links_domain], ['create_date']], + kwargs: {groupby: 'create_date:day'}, + }); + }, + /** + * @private + */ + _clicksByCountry: function () { + return this._rpc({ + model: 'link.tracker.click', + method: 'read_group', + args: [[this.links_domain], ['country_id']], + kwargs: {groupby: 'country_id'}, + }); + }, + /** + * @private + */ + _lastWeekClicksByCountry: function () { + var interval = moment().subtract(7, 'days').format('YYYY-MM-DD'); + return this._rpc({ + model: 'link.tracker.click', + method: 'read_group', + args: [[this.links_domain, ['create_date', '>', interval]], ['country_id']], + kwargs: {groupby: 'country_id'}, + }); + }, + /** + * @private + */ + _lastMonthClicksByCountry: function () { + var interval = moment().subtract(30, 'days').format('YYYY-MM-DD'); + return this._rpc({ + model: 'link.tracker.click', + method: 'read_group', + args: [[this.links_domain, ['create_date', '>', interval]], ['country_id']], + kwargs: {groupby: 'country_id'}, + }); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + */ + _onGraphTabClick: function (ev) { + ev.preventDefault(); + $('.graph-tabs li a').tab('show'); + }, + /** + * @private + * @param {Event} ev + */ + _onCopyToClipboardClick: function (ev) { + ev.preventDefault(); + + if (this.animating_copy) { + return; + } + + this.animating_copy = true; + + $('.o_website_links_short_url').clone() + .css('position', 'absolute') + .css('left', '15px') + .css('bottom', '10px') + .css('z-index', 2) + .removeClass('.o_website_links_short_url') + .addClass('animated-link') + .appendTo($('.o_website_links_short_url')) + .animate({ + opacity: 0, + bottom: '+=20', + }, 500, function () { + $('.animated-link').remove(); + this.animating_copy = false; + }); + }, +}); + +return { + BarChart: BarChart, + PieChart: PieChart, +}; +}); diff --git a/addons/website_links/static/src/js/website_links_code_editor.js b/addons/website_links/static/src/js/website_links_code_editor.js new file mode 100644 index 00000000..b3c05bbf --- /dev/null +++ b/addons/website_links/static/src/js/website_links_code_editor.js @@ -0,0 +1,121 @@ +odoo.define('website_links.code_editor', function (require) { +'use strict'; + +var core = require('web.core'); +var publicWidget = require('web.public.widget'); + +var _t = core._t; + +publicWidget.registry.websiteLinksCodeEditor = publicWidget.Widget.extend({ + selector: '#wrapwrap:has(.o_website_links_edit_code)', + events: { + 'click .o_website_links_edit_code': '_onEditCodeClick', + 'click .o_website_links_cancel_edit': '_onCancelEditClick', + 'submit #edit-code-form': '_onEditCodeFormSubmit', + 'click .o_website_links_ok_edit': '_onEditCodeFormSubmit', + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @param {String} newCode + */ + _showNewCode: function (newCode) { + $('.o_website_links_code_error').html(''); + $('.o_website_links_code_error').hide(); + + $('#o_website_links_code form').remove(); + + // Show new code + var host = $('#short-url-host').html(); + $('#o_website_links_code').html(newCode); + + // Update button copy to clipboard + $('.copy-to-clipboard').attr('data-clipboard-text', host + newCode); + + // Show action again + $('.o_website_links_edit_code').show(); + $('.copy-to-clipboard').show(); + $('.o_website_links_edit_tools').hide(); + }, + /** + * @private + * @returns {Promise} + */ + _submitCode: function () { + var initCode = $('#edit-code-form #init_code').val(); + var newCode = $('#edit-code-form #new_code').val(); + var self = this; + + if (newCode === '') { + self.$('.o_website_links_code_error').html(_t("The code cannot be left empty")); + self.$('.o_website_links_code_error').show(); + return; + } + + this._showNewCode(newCode); + + if (initCode === newCode) { + this._showNewCode(newCode); + } else { + return this._rpc({ + route: '/website_links/add_code', + params: { + init_code: initCode, + new_code: newCode, + }, + }).then(function (result) { + self._showNewCode(result[0].code); + }, function () { + $('.o_website_links_code_error').show(); + $('.o_website_links_code_error').html(_t("This code is already taken")); + }); + } + + return Promise.resolve(); + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onEditCodeClick: function () { + var initCode = $('#o_website_links_code').html(); + $('#o_website_links_code').html('<form style="display:inline;" id="edit-code-form"><input type="hidden" id="init_code" value="' + initCode + '"/><input type="text" id="new_code" value="' + initCode + '"/></form>'); + $('.o_website_links_edit_code').hide(); + $('.copy-to-clipboard').hide(); + $('.o_website_links_edit_tools').show(); + }, + /** + * @private + * @param {Event} ev + */ + _onCancelEditClick: function (ev) { + ev.preventDefault(); + $('.o_website_links_edit_code').show(); + $('.copy-to-clipboard').show(); + $('.o_website_links_edit_tools').hide(); + $('.o_website_links_code_error').hide(); + + var oldCode = $('#edit-code-form #init_code').val(); + $('#o_website_links_code').html(oldCode); + + $('#code-error').remove(); + $('#o_website_links_code form').remove(); + }, + /** + * @private + * @param {Event} ev + */ + _onEditCodeFormSubmit: function (ev) { + ev.preventDefault(); + this._submitCode(); + }, +}); +}); diff --git a/addons/website_links/static/src/js/website_links_menu.js b/addons/website_links/static/src/js/website_links_menu.js new file mode 100644 index 00000000..6f673223 --- /dev/null +++ b/addons/website_links/static/src/js/website_links_menu.js @@ -0,0 +1,26 @@ +/** + * The purpose of this script is to copy the current URL of the website + * into the URL form of the URL shortener (module website_links) + * when the user clicks the link "Share this page" on top of the page. + */ + +odoo.define('website_links.website_links_menu', function (require) { +'use strict'; + +var publicWidget = require('web.public.widget'); +var websiteNavbarData = require('website.navbar'); + +var WebsiteLinksMenu = publicWidget.Widget.extend({ + + /** + * @override + */ + start: function () { + this.$el.attr('href', '/r?u=' + encodeURIComponent(window.location.href)); + return this._super.apply(this, arguments); + }, +}); + +websiteNavbarData.websiteNavbarRegistry.add(WebsiteLinksMenu, '#o_website_links_share_page'); + +}); diff --git a/addons/website_links/static/src/xml/recent_link.xml b/addons/website_links/static/src/xml/recent_link.xml new file mode 100644 index 00000000..dc41b900 --- /dev/null +++ b/addons/website_links/static/src/xml/recent_link.xml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<templates id="template" xml:space="preserve"> + <t t-name="website_links.RecentLink"> + <div class="row mb16"> + <div class="col-md-1 col-2 text-center"> + <h4><t t-esc="widget.link_obj.count"/></h4> + <p class="text-muted" style="margin-top: -5px;">clicks</p> + </div> + <div class="col-md-7 col-7"> + <h4 class="truncate_text"> + <img t-attf-src="http://www.google.com/s2/favicons?domain={{ widget.link_obj.url }}" loading="lazy" alt="Icon" onerror="this.src='/website_links/static/img/default_favicon.png'"/> + <a class="no-link-style" t-att-href="widget.link_obj.url"><t t-esc="widget.link_obj.title"/></a> + </h4> + <p class="text-muted mb0" style="margin-top: -5px;"> + <span class="o_website_links_short_url text-muted" style="position:relative;"> + <span id="o_website_links_host"><t t-esc="widget.link_obj.short_url_host"/></span><span id="o_website_links_code"><t t-esc="widget.link_obj.code"/></span> + </span> + + <span class="o_website_links_edit_tools" style="display:none;"> + <a role="button" class="o_website_links_ok_edit btn btn-sm btn-primary" href="#">ok</a> or + <a class="o_website_links_cancel_edit" href="#">cancel</a> + </span> + + <a class="o_website_links_edit_code" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a> + + <br/> + <span class="badge badge-success"><t t-esc="widget.link_obj.campaign_id[1]"/></span> + <span class="badge badge-success"><t t-esc="widget.link_obj.medium_id[1]"/></span> + <span class="badge badge-success"><t t-esc="widget.link_obj.source_id[1]"/></span> + </p> + <p class='o_website_links_code_error' style='color:red;font-weight:bold;'></p> + </div> + + <div class="col-md-4 col-2"> + <button class="btn btn-info btn_shorten_url_clipboard mt8" t-att-data-clipboard-text="widget.link_obj.short_url">Copy</button> + <a role="button" t-attf-href="{{widget.link_obj.short_url}}+" class="btn btn-warning mt8">Stats</a> + </div> + </div> + </t> +</templates> |