| @@ -1,626 +1,497 @@ | ||
| 1 | -(function($) { | |
| 2 | - 'use strict'; | |
| 3 | - function AysChartBuilder(element, options){ | |
| 4 | - this.el = element; | |
| 5 | - this.$el = $(element); | |
| 6 | - this.ajaxAction = 'ays_chart_admin_ajax'; | |
| 7 | - this.htmlClassPrefix = 'ays-chart-'; | |
| 8 | - this.htmlNamePrefix = 'ays_'; | |
| 9 | - this.dbOptions = undefined; | |
| 10 | - this.chartSourceData = undefined; | |
| 11 | - this.chartObj = undefined; | |
| 12 | - this.chartOptions = null; | |
| 13 | - this.chartData = null; | |
| 14 | - this.chartTempData = null; | |
| 15 | - | |
| 16 | - this.chartSources = { | |
| 17 | - 'bar_chart' : 'Bar Chart', | |
| 18 | - 'pie_chart' : 'Pie Chart', | |
| 19 | - 'column_chart' : 'Column Chart' | |
| 20 | - } | |
| 21 | - | |
| 22 | - this.init(); | |
| 23 | - | |
| 24 | - return this; | |
| 25 | - } | |
| 26 | - | |
| 27 | - AysChartBuilder.prototype.init = function() { | |
| 28 | - var _this = this; | |
| 29 | - _this.chartSourceData = window.ChartBuilderSourceData; | |
| 30 | - _this.setEvents(); | |
| 31 | - _this.initLibraries(); | |
| 32 | - _this.setAccordionEvents(); | |
| 33 | - | |
| 34 | - }; | |
| 35 | - | |
| 36 | - // Set events | |
| 37 | - AysChartBuilder.prototype.setEvents = function(e){ | |
| 38 | - var _this = this; | |
| 39 | - /* == Choose poll type from modal == */ | |
| 40 | - _this.$el.on('dblclick' , '.'+_this.htmlClassPrefix+'layer_box_blocks label.'+_this.htmlClassPrefix+'dblclick-layer:not(.'+_this.htmlClassPrefix+'type-pro-feature)', function(){ | |
| 41 | - _this.$el.find('.'+_this.htmlClassPrefix+'select_button_layer input.'+_this.htmlClassPrefix+'layer_button').trigger('click'); | |
| 42 | - }); | |
| 43 | - | |
| 44 | - _this.$el.on('change' , '.'+_this.htmlClassPrefix+'choose-source', function(){ | |
| 45 | - _this.$el.find('.'+_this.htmlClassPrefix+'select_button_layer input.'+_this.htmlClassPrefix+'layer_button').prop('disabled',false).attr("data-type" , $(this).val()); | |
| 46 | - // _this.$el.find('#poll_choose_type').val($(this).val()); | |
| 47 | - }); | |
| 48 | - | |
| 49 | - _this.$el.on('click', '.'+_this.htmlClassPrefix+'layer_button' ,function(){ | |
| 50 | - var getCheckedChartTpye = _this.$el.find('.'+_this.htmlClassPrefix+'choose-source:checked').val(); | |
| 51 | - _this.$el.find('.'+_this.htmlClassPrefix+'layer_container').css({'position':'unset' , 'display':'none'}); | |
| 52 | - _this.$el.find('.'+_this.htmlClassPrefix+'type-info-box-text-changeable').text(_this.chartSources[getCheckedChartTpye]); | |
| 53 | - _this.$el.find('#'+_this.htmlClassPrefix+'option-chart-type').val(getCheckedChartTpye); | |
| 54 | - _this.$el.find('.'+_this.htmlClassPrefix+'charts-main-container').attr('id' , _this.htmlClassPrefix+getCheckedChartTpye); | |
| 55 | - _this.loadChartBySource( getCheckedChartTpye ); | |
| 56 | - }); | |
| 57 | - /* */ | |
| 58 | - | |
| 59 | - /* == Tabulation == */ | |
| 60 | - _this.$el.on('click', '.nav-tab-wrapper a.nav-tab' , _this.changeTabs); | |
| 61 | - /* */ | |
| 62 | - | |
| 63 | - // /* == Range slider functions == */ | |
| 64 | - // _this.$el.on('input', '#ays-chart-option-font-size', _this.rangeSliderChange); | |
| 65 | - // _this.$el.on('mouseenter', '#ays-chart-option-font-size', function(e) { | |
| 66 | - // $('#ays-chart-range-value').show(); | |
| 67 | - // }); | |
| 68 | - // _this.$el.on('mouseleave', '#ays-chart-option-font-size', function(e) { | |
| 69 | - // $('#ays-chart-range-value').hide(); | |
| 70 | - // }); | |
| 71 | - // /* */ | |
| 72 | - | |
| 73 | - /* == Notifications dismiss button == */ | |
| 74 | - _this.$el.on('click', '.notice-dismiss', function (e) { | |
| 75 | - _this.changeCurrentUrl('status'); | |
| 76 | - }); | |
| 77 | - | |
| 78 | - _this.$el.on('click', '.toggle_ddmenu' , _this.toggleDDmenu); | |
| 79 | - /* */ | |
| 80 | - | |
| 81 | - /* Add Manual data */ | |
| 82 | - _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-row-box', function(){ | |
| 83 | - _this.addChartDataRow(); | |
| 84 | - }); | |
| 85 | - | |
| 86 | - _this.$el.on("click" , '.'+_this.htmlClassPrefix+'add-new-column-box', function(){ | |
| 87 | - _this.addLineChartDataColumn(); | |
| 88 | - }); | |
| 89 | - | |
| 90 | - _this.$el.on('click', '.'+_this.htmlClassPrefix+'show-on-chart-bttn', function(e){ | |
| 91 | - var loadedChartType = _this.$el.find('.'+_this.htmlClassPrefix+'choose-source:checked').val(); | |
| 92 | - var chartType = (loadedChartType === undefined) ? _this.chartSourceData.chartType : loadedChartType; | |
| 93 | - e.preventDefault(); | |
| 94 | - _this.showOnChart($(this), chartType); | |
| 95 | - }); | |
| 96 | - | |
| 97 | - /* */ | |
| 98 | - | |
| 99 | - /* Delete data */ | |
| 100 | - _this.$el.on("click" , '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function(){ | |
| 101 | - _this.deleteChartDataRow($(this)); | |
| 102 | - }); | |
| 103 | - _this.$el.on('mouseenter', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() { | |
| 104 | - $(this).find('path').css('fill', '#ff0000'); | |
| 105 | - }); | |
| 106 | - _this.$el.on('mouseleave', '.'+_this.htmlClassPrefix+'chart-source-data-remove-block', function() { | |
| 107 | - $(this).find('path').css('fill', '#b8b8b8'); | |
| 108 | - }); | |
| 109 | - /* */ | |
| 110 | - | |
| 111 | - /* Load data on the edit page */ | |
| 112 | - if(_this.chartSourceData.action == 'edit'){ | |
| 113 | - _this.loadChartBySource( _this.chartSourceData.chartType ); | |
| 114 | - } | |
| 115 | - /* */ | |
| 116 | - | |
| 117 | - /* Save with Ctrl + S */ | |
| 118 | - _this.$el.on('keydown', $(document), _this.quickSaveHotKeys); | |
| 119 | - /* */ | |
| 120 | - | |
| 121 | - // Submit buttons disabling | |
| 122 | - _this.$el.on('click', '.'+_this.htmlClassPrefix+'loader-banner', _this.submitOnce); | |
| 123 | - /* */ | |
| 124 | - | |
| 125 | - // Disabling submit when press enter button on inputing | |
| 126 | - $(document).on("keypress", '.ays-text-input', _this.disableSubmit); | |
| 127 | - /* */ | |
| 128 | - | |
| 129 | - // Modal close | |
| 130 | - $(document).on('click', '.ays-close', function () { | |
| 131 | - $(this).parents('.ays-modal').aysModal('hide'); | |
| 132 | - }); | |
| 133 | - } | |
| 134 | - | |
| 135 | - // Disabling submit when pressing enter button on input | |
| 136 | - AysChartBuilder.prototype.disableSubmit = function(e){ | |
| 137 | - if(e.which == 13){ | |
| 138 | - if($(document).find("#ays-charts-form").length !== 0 || $(document).find("#ays-settings-form").length !== 0){ | |
| 139 | - return false; | |
| 140 | - } | |
| 141 | - } | |
| 142 | - } | |
| 143 | - | |
| 144 | - // Change tabs (tabulation) | |
| 145 | - AysChartBuilder.prototype.changeTabs = function(e){ | |
| 146 | - if(! $(this).hasClass('no-js')){ | |
| 147 | - var elemenetID = $(this).attr('href'); | |
| 148 | - var active_tab = $(this).attr('data-tab'); | |
| 149 | - $(document).find('.nav-tab-wrapper a.nav-tab').each(function () { | |
| 150 | - if ($(this).hasClass('nav-tab-active')) { | |
| 151 | - $(this).removeClass('nav-tab-active'); | |
| 152 | - } | |
| 153 | - }); | |
| 154 | - $(this).addClass('nav-tab-active'); | |
| 155 | - $(document).find('.ays-tab-content').each(function () { | |
| 156 | - $(this).css('display', 'none'); | |
| 157 | - }); | |
| 158 | - $(document).find("[name='ays_form_tab']").val(active_tab); | |
| 159 | - $('.ays-tab-content' + elemenetID).css('display', 'block'); | |
| 160 | - e.preventDefault(); | |
| 161 | - } | |
| 162 | - } | |
| 163 | - | |
| 164 | - // AysChartBuilder.prototype.rangeSliderChange = function(e){ | |
| 165 | - // var min = e.target.min; | |
| 166 | - // var max = e.target.max; | |
| 167 | - // var val = e.target.value; | |
| 168 | - // var width = $('#ays-chart-option-font-size').width(); | |
| 169 | - | |
| 170 | - // $(e.target).css('backgroundSize', (val - min) / (max - min) * 100 + '% 100%'); | |
| 171 | - | |
| 172 | - // $('#ays-chart-range-value').css('left', 12.8 + (val - min) / (max - min + 1) * width + 'px'); | |
| 173 | - // $('#ays-chart-range-value span').html(val); | |
| 174 | - // } | |
| 175 | - | |
| 176 | - AysChartBuilder.prototype.changeCurrentUrl = function(e){ | |
| 177 | - var linkModified = location.href.split('?')[1].split('&'); | |
| 178 | - for(var i = 0; i < linkModified.length; i++){ | |
| 179 | - if(linkModified[i].split("=")[0] == key){ | |
| 180 | - linkModified.splice(i, 1); | |
| 181 | - } | |
| 182 | - } | |
| 183 | - linkModified = linkModified.join('&'); | |
| 184 | - window.history.replaceState({}, document.title, '?'+linkModified); | |
| 185 | - } | |
| 186 | - | |
| 187 | - AysChartBuilder.prototype.toggleDDmenu = function(e){ | |
| 188 | - var ddmenu = $(this).next(); | |
| 189 | - var state = ddmenu.attr('data-expanded'); | |
| 190 | - switch (state) { | |
| 191 | - case 'true': | |
| 192 | - $(this).find('.ays_fa').css({ | |
| 193 | - transform: 'rotate(0deg)' | |
| 194 | - }); | |
| 195 | - ddmenu.attr('data-expanded', 'false'); | |
| 196 | - break; | |
| 197 | - case 'false': | |
| 198 | - $(this).find('.ays_fa').css({ | |
| 199 | - transform: 'rotate(90deg)' | |
| 200 | - }); | |
| 201 | - ddmenu.attr('data-expanded', 'true'); | |
| 202 | - break; | |
| 203 | - } | |
| 204 | - } | |
| 205 | - | |
| 206 | - AysChartBuilder.prototype.submitOnce = function(el) { | |
| 207 | - setTimeout(function() { | |
| 208 | - $(document).find('.ays-chart-loader-banner').attr('disabled', true); | |
| 209 | - }, 50); | |
| 210 | - | |
| 211 | - setTimeout(function() { | |
| 212 | - $(document).find('.ays-chart-loader-banner').attr('disabled', false); | |
| 213 | - }, 5000); | |
| 214 | - } | |
| 215 | - | |
| 216 | - // Load charts by given type main function | |
| 217 | - AysChartBuilder.prototype.initLibraries = function (){ | |
| 218 | - var _this = this; | |
| 219 | - | |
| 220 | - } | |
| 221 | - | |
| 222 | - // Load charts by given type main function | |
| 223 | - AysChartBuilder.prototype.loadChartBySource = function( chartType ){ | |
| 224 | - var _this = this; | |
| 225 | - | |
| 226 | - if( ! chartType ){ | |
| 227 | - chartType = _this.chartSourceData.chartType; | |
| 228 | - } | |
| 229 | - | |
| 230 | - if(typeof chartType !== undefined && chartType){ | |
| 231 | - switch (chartType) { | |
| 232 | - case 'pie_chart': | |
| 233 | - _this.pieChartView( chartType ); | |
| 234 | - break; | |
| 235 | - case 'bar_chart': | |
| 236 | - _this.barChartView( chartType ); | |
| 237 | - break; | |
| 238 | - case 'column_chart': | |
| 239 | - _this.columnChartView( chartType ); | |
| 240 | - break; | |
| 241 | - default: | |
| 242 | - _this.pieChartView( chartType ); | |
| 243 | - break; | |
| 244 | - } | |
| 245 | - } | |
| 246 | - } | |
| 247 | - | |
| 248 | - // Load chart by pie chart | |
| 249 | - AysChartBuilder.prototype.pieChartView = function( chartType ){ | |
| 250 | - var _this = this; | |
| 251 | - var getChartSource = _this.chartSourceData.source; | |
| 252 | - | |
| 253 | - var dataTypes = _this.chartConvertData( getChartSource ); | |
| 254 | - | |
| 255 | - var settings = _this.chartSourceData.settings; | |
| 256 | - var chartFontSize = settings['font_size']; | |
| 257 | - var tooltipTrigger = settings['tooltip_trigger']; | |
| 258 | - var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; | |
| 259 | - | |
| 260 | - /* == Google part == */ | |
| 261 | - google.charts.load('current', {'packages':['corechart']}); | |
| 262 | - google.charts.setOnLoadCallback(drawChart); | |
| 263 | - | |
| 264 | - function drawChart() { | |
| 265 | - _this.chartData = google.visualization.arrayToDataTable( dataTypes ); | |
| 266 | - | |
| 267 | - _this.chartOptions = { | |
| 268 | - backgroundColor: 'transparent', | |
| 269 | - fontSize: chartFontSize, | |
| 270 | - tooltip: { | |
| 271 | - trigger: tooltipTrigger, | |
| 272 | - showColorCode: showColorCode | |
| 273 | - } | |
| 274 | - }; | |
| 275 | - | |
| 276 | - // height: 250, | |
| 277 | - // chartArea: { | |
| 278 | - // width: '80%', | |
| 279 | - // height: '80%' | |
| 280 | - // }, | |
| 281 | - | |
| 282 | - _this.chartObj = new google.visualization.PieChart( document.getElementById(_this.htmlClassPrefix + chartType) ); | |
| 283 | - | |
| 284 | - _this.chartObj.draw( _this.chartData, _this.chartOptions ); | |
| 285 | - _this.resizeChart(); | |
| 286 | - } | |
| 287 | - /* */ | |
| 288 | - } | |
| 289 | - | |
| 290 | - // Load chart by bar chart | |
| 291 | - AysChartBuilder.prototype.barChartView = function( chartType ){ | |
| 292 | - var _this = this; | |
| 293 | - var getChartSource = _this.chartSourceData.source; | |
| 294 | - var dataTypes = _this.chartConvertData( getChartSource ); | |
| 295 | - | |
| 296 | - var settings = _this.chartSourceData.settings; | |
| 297 | - var chartFontSize = settings['font_size']; | |
| 298 | - var tooltipTrigger = settings['tooltip_trigger']; | |
| 299 | - var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; | |
| 300 | - | |
| 301 | - /* == Google part == */ | |
| 302 | - google.charts.load('current', {'packages':['corechart']}); | |
| 303 | - google.charts.setOnLoadCallback(drawChart); | |
| 304 | - | |
| 305 | - function drawChart() { | |
| 306 | - _this.chartData = google.visualization.arrayToDataTable(dataTypes); | |
| 307 | - | |
| 308 | - _this.chartOptions = { | |
| 309 | - backgroundColor: 'transparent', | |
| 310 | - fontSize: chartFontSize, | |
| 311 | - legend: { position: 'none' }, | |
| 312 | - tooltip: { | |
| 313 | - trigger: tooltipTrigger, | |
| 314 | - showColorCode: showColorCode | |
| 315 | - } | |
| 316 | - }; | |
| 317 | - | |
| 318 | - _this.chartObj = new google.visualization.BarChart(document.getElementById(_this.htmlClassPrefix + chartType)); | |
| 319 | - | |
| 320 | - _this.chartObj.draw( _this.chartData, _this.chartOptions ); | |
| 321 | - _this.resizeChart(); | |
| 322 | - } | |
| 323 | - /* */ | |
| 324 | - } | |
| 325 | - | |
| 326 | - // Load chart by column chart | |
| 327 | - AysChartBuilder.prototype.columnChartView = function( chartType ){ | |
| 328 | - var _this = this; | |
| 329 | - var getChartSource = _this.chartSourceData.source; | |
| 330 | - | |
| 331 | - var dataTypes = _this.chartConvertData( getChartSource ); | |
| 332 | - | |
| 333 | - var settings = _this.chartSourceData.settings; | |
| 334 | - var chartFontSize = settings['font_size']; | |
| 335 | - var tooltipTrigger = settings['tooltip_trigger']; | |
| 336 | - var showColorCode = (settings['show_color_code'] == 'checked') ? true : false; | |
| 337 | - | |
| 338 | - // Collect data in new array for chart rendering (Column chart) | |
| 339 | - | |
| 340 | - /* == Google part == */ | |
| 341 | - google.charts.load('current', {'packages':['corechart']}); | |
| 342 | - google.charts.setOnLoadCallback(drawChart); | |
| 343 | - | |
| 344 | - function drawChart() { | |
| 345 | - _this.chartData = google.visualization.arrayToDataTable(dataTypes); | |
| 346 | - | |
| 347 | - _this.chartOptions = { | |
| 348 | - backgroundColor: 'transparent', | |
| 349 | - fontSize: chartFontSize, | |
| 350 | - legend: { position: 'none' }, | |
| 351 | - tooltip: { | |
| 352 | - trigger: tooltipTrigger, | |
| 353 | - showColorCode: showColorCode | |
| 354 | - } | |
| 355 | - }; | |
| 356 | - | |
| 357 | - _this.chartObj = new google.visualization.ColumnChart(document.getElementById(_this.htmlClassPrefix + chartType)); | |
| 358 | - | |
| 359 | - _this.chartObj.draw( _this.chartData, _this.chartOptions ); | |
| 360 | - _this.resizeChart(); | |
| 361 | - } | |
| 362 | - /* */ | |
| 363 | - } | |
| 364 | - | |
| 365 | - // Detect window resize moment to draw charts responsively | |
| 366 | - AysChartBuilder.prototype.resizeChart = function(){ | |
| 367 | - var _this = this; | |
| 368 | - | |
| 369 | - //create trigger to resizeEnd event | |
| 370 | - $(window).resize(function() { | |
| 371 | - if(this.resizeTO) clearTimeout(this.resizeTO); | |
| 372 | - this.resizeTO = setTimeout(function() { | |
| 373 | - $(this).trigger('resizeEnd'); | |
| 374 | - }, 100); | |
| 375 | - }); | |
| 376 | - | |
| 377 | - //redraw graph when window resize is completed | |
| 378 | - $(window).on('resizeEnd', function() { | |
| 379 | - _this.chartObj.draw( _this.chartData, _this.chartOptions ); | |
| 380 | - }); | |
| 381 | - | |
| 382 | - } | |
| 383 | - | |
| 384 | - // Load chart by pie chart | |
| 385 | - AysChartBuilder.prototype.chartConvertData = function( data ){ | |
| 386 | - var _this = this; | |
| 387 | - // var dataTypes = [['Option', 'Value', { role: 'style' }]]; | |
| 388 | - var dataTypes = [['Option', 'Value']]; | |
| 389 | - | |
| 390 | - // var defaultColors = _this.chartSourceData.settings['colors']; | |
| 391 | - | |
| 392 | - // Collect data in new array for chart rendering | |
| 393 | - for ( var key in data ) { | |
| 394 | - if ( data.hasOwnProperty( key ) ) { | |
| 395 | - // var columnColor = (key <= 10) ? defaultColors[key] : Math.floor( Math.random() * 16777215 ).toString(16); | |
| 396 | - dataTypes.push([ | |
| 397 | - data[key][0], +(data[key][1]) | |
| 398 | - ]); | |
| 399 | - } | |
| 400 | - } | |
| 401 | - | |
| 402 | - return dataTypes; | |
| 403 | - } | |
| 404 | - | |
| 405 | - // Update chart data and display immediately | |
| 406 | - AysChartBuilder.prototype.updateChartData = function( newData ){ | |
| 407 | - var _this = this; | |
| 408 | - _this.chartObj.draw( newData, _this.chartOptions ); | |
| 409 | - } | |
| 410 | - | |
| 411 | - AysChartBuilder.prototype.addChartDataRow = function (element){ | |
| 412 | - // var deleteImageUrl = ChartBuilderSourceData.removeManualDataRow; | |
| 413 | - var content = ''; | |
| 414 | - | |
| 415 | - var addedTermsandConds = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block"); | |
| 416 | - var addedTermsandCondsId = this.$el.find("."+this.htmlClassPrefix+"chart-source-data-edit-block:last-child"); | |
| 417 | - var dataId = addedTermsandConds.length >= 1 ? addedTermsandCondsId.data("sourceId") + 1 : 1; | |
| 418 | - var colCount = addedTermsandConds.first().children().length - 1; | |
| 419 | - | |
| 420 | - var termsCondsMessageAttrName = this.newTermsCondsMessageAttrName( this.htmlNamePrefix + 'chart_source_data' , dataId ); | |
| 421 | - | |
| 422 | - // content += '<div class = "'+this.htmlClassPrefix+'chart-source-data-edit-block" data-source-id="' + dataId + '">'; | |
| 423 | - // content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box">'; | |
| 424 | - // content += '<input type="text" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">'; | |
| 425 | - // content += '</div>'; | |
| 426 | - // content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box">'; | |
| 427 | - // content += '<input type="text" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">'; | |
| 428 | - // content += '</div>'; | |
| 429 | - // content += '<div class="'+this.htmlClassPrefix+'icons-box '+this.htmlClassPrefix+'icons-remove-box">'; | |
| 430 | - // content += '<img class="'+this.htmlClassPrefix+'chart-source-data-remove-block" src="' + deleteImageUrl + '">'; | |
| 431 | - // content += '</div>'; | |
| 432 | - // content += '</div>'; | |
| 433 | - | |
| 434 | - content += '<div class = "'+this.htmlClassPrefix+'chart-source-data-edit-block" data-source-id="' + dataId + '" >'; | |
| 435 | - content += '<div class="'+this.htmlClassPrefix+'icons-box '+this.htmlClassPrefix+'icons-remove-box">'; | |
| 436 | - content += '<svg class="'+this.htmlClassPrefix+'chart-source-data-remove-block" data-trigger="hover" data-toggle="tooltip" title="Delete row" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" style="fill: #b8b8b8;"/></svg>'; | |
| 437 | - content += '</div>'; | |
| 438 | - for (var i = 0; i < colCount; i++) { | |
| 439 | - if (i == 0) { | |
| 440 | - content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box">'; | |
| 441 | - content += '<input type="text" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">'; | |
| 442 | - content += '</div>'; | |
| 443 | - } else { | |
| 444 | - content += '<div class="'+this.htmlClassPrefix+'chart-source-data-input-box '+this.htmlClassPrefix+'chart-source-data-input-number">'; | |
| 445 | - content += '<input type="number" class="ays-text-input form-control" name="' + termsCondsMessageAttrName + '">'; | |
| 446 | - content += '</div>'; | |
| 447 | - } | |
| 448 | - } | |
| 449 | - content += '</div>'; | |
| 450 | - | |
| 451 | - | |
| 452 | - this.$el.find('.'+this.htmlClassPrefix+'chart-source-data-content').append(content); | |
| 453 | - } | |
| 454 | - | |
| 455 | - AysChartBuilder.prototype.deleteChartDataRow = function (element){ | |
| 456 | - var $this = element; | |
| 457 | - var $thisMainParent = $this.parent().parent(); | |
| 458 | - $this.tooltip('hide'); | |
| 459 | - $thisMainParent.remove(); | |
| 460 | - } | |
| 461 | - | |
| 462 | - AysChartBuilder.prototype.newTermsCondsMessageAttrName = function (termCondName, termCondId){ | |
| 463 | - var _this = this; | |
| 464 | - return termCondName + '['+ termCondId +'][]'; | |
| 465 | - } | |
| 466 | - | |
| 467 | - AysChartBuilder.prototype.setAccordionEvents = function(e){ | |
| 468 | - var _this = this; | |
| 469 | - _this.$el.on('click', '.ays-accordion-options-header', function(e){ | |
| 470 | - _this.openCloseAccordion(e, _this); | |
| 471 | - }); | |
| 472 | - } | |
| 473 | - | |
| 474 | - AysChartBuilder.prototype.openCloseAccordion = function(e, _this){ | |
| 475 | - | |
| 476 | - var container = $(e.target).parents('.ays-accordion-options-container'); | |
| 477 | - | |
| 478 | - if( container.attr('data-collapsed') === 'true' ){ | |
| 479 | - _this.closeAllAccordions( container.parents('.ays-tab-content').attr('id') ); | |
| 480 | - // container.find('.ays-accordion-options-content').removeClass('display_none'); | |
| 481 | - container.attr('data-collapsed', 'false'); | |
| 482 | - container.find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-right').addClass('ays-accordion-arrow-down'); | |
| 483 | - }else{ | |
| 484 | - // container.find('.ays-accordion-options-content').addClass('display_none'); | |
| 485 | - container.attr('data-collapsed', 'true'); | |
| 486 | - container.find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-down').addClass('ays-accordion-arrow-right'); | |
| 487 | - } | |
| 488 | - } | |
| 489 | - | |
| 490 | - AysChartBuilder.prototype.closeAllAccordions = function( tab ){ | |
| 491 | - var _this = this; | |
| 492 | - var container = _this.$el.find('#' + tab + ' .ays-accordions-container'); | |
| 493 | - | |
| 494 | - container.find('.ays-accordion-options-container').each(function (){ | |
| 495 | - $(this).attr('data-collapsed', 'true'); | |
| 496 | - $(this).find('.ays-accordion-options-header .ays-accordion-arrow').removeClass('ays-accordion-arrow-down').addClass('ays-accordion-arrow-right'); | |
| 497 | - }); | |
| 498 | - } | |
| 499 | - | |
| 500 | - AysChartBuilder.prototype.startAjax = function( element ){ | |
| 501 | - element.lock(); | |
| 502 | - } | |
| 503 | - | |
| 504 | - AysChartBuilder.prototype.endAjax = function( element ){ | |
| 505 | - element.unlock(); | |
| 506 | - } | |
| 507 | - | |
| 508 | - AysChartBuilder.prototype.quickSaveHotKeys = function() { | |
| 509 | - $(document).on('keydown', function(e){ | |
| 510 | - var saveButton = $(document).find('input#ays-button-apply'); | |
| 511 | - if ( saveButton.length > 0 ) { | |
| 512 | - if (!(e.which == 83 && e.ctrlKey) && !(e.which == 19)){ | |
| 513 | - return true; | |
| 514 | - } | |
| 515 | - saveButton.trigger("click"); | |
| 516 | - e.preventDefault(); | |
| 517 | - return false; | |
| 518 | - } | |
| 519 | - }); | |
| 520 | - } | |
| 521 | - | |
| 522 | - // Manual data show on chart button | |
| 523 | - AysChartBuilder.prototype.showOnChart = function (button, chartType) { | |
| 524 | - var _this = this; | |
| 525 | - | |
| 526 | - var form = $(document).find("#ays-charts-form"); | |
| 527 | - var data = form.serializeFormJSON(); | |
| 528 | - // var count = $(document).find(".ays-chart-chart-source-data-edit-block").length; | |
| 529 | - var lastId = $(document).find(".ays-chart-chart-source-data-edit-block:last-child").attr('data-source-id'); | |
| 530 | - var chartData = []; | |
| 531 | - for (var i = 0; i <= lastId; i++) { | |
| 532 | - if (data['ays_chart_source_data['+i+'][]'] != undefined) { | |
| 533 | - chartData.push(data['ays_chart_source_data['+i+'][]']); | |
| 534 | - } | |
| 535 | - } | |
| 536 | - chartData = _this.chartConvertData( chartData ); | |
| 537 | - | |
| 538 | - chartData = window.google.visualization.arrayToDataTable( chartData ); | |
| 539 | - | |
| 540 | - _this.updateChartData( chartData ); | |
| 541 | - | |
| 542 | - chartData = null; | |
| 543 | - } | |
| 544 | - | |
| 545 | - $.fn.AysChartBuilderMain = function(options) { | |
| 546 | - return this.each(function() { | |
| 547 | - if (!$.data(this, 'AysChartBuilderMain')) { | |
| 548 | - $.data(this, 'AysChartBuilderMain', new AysChartBuilder(this, options)); | |
| 549 | - } else { | |
| 550 | - try { | |
| 551 | - $(this).data('AysChartBuilderMain').init(); | |
| 552 | - } catch (err) { | |
| 553 | - console.error('AysChartBuilderMain has not initiated properly'); | |
| 554 | - } | |
| 555 | - } | |
| 556 | - }); | |
| 557 | - }; | |
| 558 | - $(document).find('#ays-charts-form').AysChartBuilderMain(); | |
| 559 | - | |
| 560 | -})(jQuery); | |
| 561 | - | |
| 562 | -(function ($) { | |
| 563 | - | |
| 564 | - $.fn.serializeFormJSON = function () { | |
| 565 | - let o = {}, | |
| 566 | - a = this.serializeArray(); | |
| 567 | - $.each(a, function () { | |
| 568 | - if (o[this.name]) { | |
| 569 | - if (!o[this.name].push) { | |
| 570 | - o[this.name] = [o[this.name]]; | |
| 571 | - } | |
| 572 | - o[this.name].push(this.value || ''); | |
| 573 | - } else { | |
| 574 | - o[this.name] = this.value || ''; | |
| 575 | - } | |
| 576 | - }); | |
| 577 | - return o; | |
| 578 | - }; | |
| 579 | - | |
| 580 | - $.fn.lock = function () { | |
| 581 | - $(this).each(function () { | |
| 582 | - var $this = $(this); | |
| 583 | - var position = $this.css('position'); | |
| 584 | - | |
| 585 | - if (!position) { | |
| 586 | - position = 'static'; | |
| 587 | - } | |
| 588 | - | |
| 589 | - switch (position) { | |
| 590 | - case 'absolute': | |
| 591 | - case 'relative': | |
| 592 | - break; | |
| 593 | - default: | |
| 594 | - $this.css('position', 'relative'); | |
| 595 | - break; | |
| 596 | - } | |
| 597 | - $this.data('position', position); | |
| 598 | - | |
| 599 | - var width = $this.width(), | |
| 600 | - height = $this.height(); | |
| 601 | - | |
| 602 | - var locker = $('<div class="locker"></div>'); | |
| 603 | - locker.width(width).height(height); | |
| 604 | - | |
| 605 | - var loader = $('<div class="locker-loader"></div>'); | |
| 606 | - loader.width(width).height(height); | |
| 607 | - | |
| 608 | - locker.append(loader); | |
| 609 | - $this.append(locker); | |
| 610 | - $(window).resize(function () { | |
| 611 | - $this.find('.locker,.locker-loader').width($this.width()).height($this.height()); | |
| 612 | - }); | |
| 613 | - }); | |
| 614 | - | |
| 615 | - return $(this); | |
| 616 | - }; | |
| 617 | - | |
| 618 | - $.fn.unlock = function () { | |
| 619 | - $(this).each(function () { | |
| 620 | - $(this).find('.locker').remove(); | |
| 621 | - $(this).css('position', $(this).data('position')); | |
| 622 | - }); | |
| 623 | - | |
| 624 | - return $(this); | |
| 625 | - }; | |
| 1 | +(function($) { | |
| 2 | + 'use strict'; | |
| 3 | + function AysChartBuilder(element, options){ | |
| 4 | + this.el = element; | |
| 5 | + this.$el = $(element); | |
| 6 | + this.ajaxAction = 'ays_chart_admin_ajax'; | |
| 7 | + this.htmlClassPrefix = 'ays-chart-'; | |
| 8 | + this.htmlNamePrefix = 'ays_'; | |
| 9 | + this.dbOptions = undefined; | |
| 10 | + this.chartSourceData = undefined; | |
| 11 | + this.chartObj = undefined; | |
| 12 | + this.chartOptions = null; | |
| 13 | + this.chartData = null; | |
| 14 | + this.chartTempData = null; | |
| 15 | + this.chartType = 'pie_chart'; | |
| 16 | + | |
| 17 | + this.init(); | |
| 18 | + | |
| 19 | + return this; | |
| 20 | + } | |
| 21 | + | |
| 22 | + AysChartBuilder.prototype.init = function() { | |
| 23 | + var _this = this; | |
| 24 | + _this.chartSourceData = window.ChartBuilderSourceData; | |
| 25 | + _this.setEvents(); | |
| 26 | + _this.initLibraries(); | |
| 27 | + | |
| 28 | + _this.initDbImport(); | |
| 29 | + _this.initQuizDBImport(); | |
| 30 | + }; | |
| 31 | + | |
| 32 | + // Set events | |
| 33 | + AysChartBuilder.prototype.setEvents = function(e){ | |
| 34 | + var _this = this; | |
| 35 | + | |
| 36 | + // Quiz maker integration | |
| 37 | + $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').on('change', function () { | |
| 38 | + var option = $(this).find('option:selected'); | |
| 39 | + if (option.attr('is-pro') == "true") { | |
| 40 | + $(this).find('option[value=""]').prop('selected', true); | |
| 41 | + window.open('https://ays-pro.com/wordpress/chart-builder/', '_blank'); | |
| 42 | + } else { | |
| 43 | + _this.$el.find('.ays-chart-quiz-query-tooltip').attr('title', _this.chartSourceData.quiz_query_tooltips[this.value]); | |
| 44 | + _this.$el.find('.ays-chart-quiz-query-tooltip').attr('data-bs-original-title', _this.chartSourceData.quiz_query_tooltips[this.value]); | |
| 45 | + _this.quizMakerIntegrationConfig(); | |
| 46 | + _this.toggleQuizSelect(this); | |
| 47 | + } | |
| 48 | + }); | |
| 49 | + | |
| 50 | + $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-quiz').on('change', function () { | |
| 51 | + _this.quizMakerIntegrationConfig(); | |
| 52 | + }); | |
| 53 | + | |
| 54 | + $(window).on('load', function () { | |
| 55 | + _this.toggleQuizSelect(); | |
| 56 | + }); | |
| 57 | + } | |
| 58 | + | |
| 59 | + AysChartBuilder.prototype.toggleQuizSelect = function (e) { | |
| 60 | + var _this = this; | |
| 61 | + | |
| 62 | + var select = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query'); | |
| 63 | + var option = $(select).find('option:selected').val(); | |
| 64 | + var selectQuizSelect = $(document).find('.'+_this.htmlClassPrefix+'select-quiz-maker-quiz-container'); | |
| 65 | + | |
| 66 | + if (option == 'q1' || option == 'q3' || option == 'q6') { | |
| 67 | + selectQuizSelect.slideDown(); | |
| 68 | + } else { | |
| 69 | + selectQuizSelect.slideUp(); | |
| 70 | + } | |
| 71 | + } | |
| 72 | + | |
| 73 | + AysChartBuilder.prototype.quizMakerIntegrationConfig = function (e) { | |
| 74 | + var _this = this; | |
| 75 | + | |
| 76 | + var input = $(document).find('input[name="ays_source_type"]'); | |
| 77 | + if (input.val() !== 'quiz_maker') input.val('quiz_maker'); | |
| 78 | + | |
| 79 | + _this.$el.find('#ays-chart-quiz-maker-success').empty(); | |
| 80 | + _this.$el.find('#ays-chart-quiz-maker-error').empty(); | |
| 81 | + } | |
| 82 | + | |
| 83 | + AysChartBuilder.prototype.detectManualChange = function (e) { | |
| 84 | + var input = $(document).find('input[name="ays_source_type"]'); | |
| 85 | + if (input.val() !== 'manual') input.val('manual'); | |
| 86 | + } | |
| 87 | + | |
| 88 | + AysChartBuilder.prototype.initLibraries = function (){ | |
| 89 | + var _this = this; | |
| 90 | + | |
| 91 | + var googleSelect = _this.$el.find('.' + _this.htmlClassPrefix + 'google-sheet-select'); | |
| 92 | + googleSelect.select2(); | |
| 93 | + var fileTypeSelect = _this.$el.find('#' + _this.htmlClassPrefix + 'import-files-file-type'); | |
| 94 | + fileTypeSelect.select2(); | |
| 95 | + var quizQuerySelect = _this.$el.find('#' + _this.htmlClassPrefix + 'select-quiz-maker-data-query'); | |
| 96 | + quizQuerySelect.select2(); | |
| 97 | + var quizQuizSelect = _this.$el.find('#' + _this.htmlClassPrefix + 'select-quiz-maker-quiz'); | |
| 98 | + quizQuizSelect.select2(); | |
| 99 | + var woocommerceSelect = _this.$el.find('#' + _this.htmlClassPrefix + 'woocommerce-datas-select'); | |
| 100 | + woocommerceSelect.select2(); | |
| 101 | + | |
| 102 | + _this.$el.find('#ays-chart-option-create-author').select2({ | |
| 103 | + placeholder: aysChartBuilderAdmin.selectUser, | |
| 104 | + minimumInputLength: 1, | |
| 105 | + allowClear: true, | |
| 106 | + language: { | |
| 107 | + searching: function() { | |
| 108 | + return aysChartBuilderAdmin.searching; | |
| 109 | + }, | |
| 110 | + inputTooShort: function () { | |
| 111 | + return aysChartBuilderAdmin.pleaseEnterMore; | |
| 112 | + } | |
| 113 | + }, | |
| 114 | + ajax: { | |
| 115 | + url: ajaxurl, | |
| 116 | + dataType: 'json', | |
| 117 | + data: function (response) { | |
| 118 | + var checkedUsers = _this.$el.find('#ays-chart-option-create-author').val(); | |
| 119 | + return { | |
| 120 | + action: _this.ajaxAction, | |
| 121 | + function: window.aysChartBuilderChartSettings.ajax['actions']['author_user_search'], | |
| 122 | + security: window.aysChartBuilderChartSettings.ajax['nonces']['author_user_search'], | |
| 123 | + params: { | |
| 124 | + search: response.term, | |
| 125 | + val: checkedUsers | |
| 126 | + } | |
| 127 | + }; | |
| 128 | + } | |
| 129 | + } | |
| 130 | + }); | |
| 131 | + | |
| 132 | + _this.$el.find('.' + _this.htmlClassPrefix + 'chart-source-data-content').sortable({ | |
| 133 | + items: "> div." + _this.htmlClassPrefix + "chart-source-data-edit-block:not(:first)", | |
| 134 | + handle: "." + _this.htmlClassPrefix + "chart-source-data-move-row", | |
| 135 | + update: function (event, ui) { | |
| 136 | + _this.$el.find('div.' + _this.htmlClassPrefix + 'chart-source-data-edit-block:not(:first)').each(function (index) { | |
| 137 | + $(this).attr('data-source-id', index + 1); | |
| 138 | + $(this).find("input.ays-text-input").attr('name', 'ays_chart_source_data[' + (index + 1) + '][]') | |
| 139 | + }); | |
| 140 | + } | |
| 141 | + }); | |
| 142 | + } | |
| 143 | + | |
| 144 | + AysChartBuilder.prototype.initDbImportComponent = function(){ | |
| 145 | + var _this = this; | |
| 146 | + var table_columns = window.aysChartBuilderChartSettings.db_query.tables; | |
| 147 | + var code_mirror = wp.CodeMirror || CodeMirror; | |
| 148 | + var cm = code_mirror.fromTextArea(_this.$el.find('.ays-chart-db-query').get(0), { | |
| 149 | + value: _this.$el.find('.ays-chart-db-query').val(), | |
| 150 | + autofocus: false, | |
| 151 | + mode: 'text/x-mysql', | |
| 152 | + lineWrapping: true, | |
| 153 | + dragDrop: false, | |
| 154 | + matchBrackets: true, | |
| 155 | + autoCloseBrackets: true, | |
| 156 | + extraKeys: {"Ctrl-Space": "autocomplete"}, | |
| 157 | + hintOptions: { tables: table_columns } | |
| 158 | + }); | |
| 159 | + | |
| 160 | + // force refresh so that the query shows on first time load. Otherwise you have to click on the editor for it to show. | |
| 161 | + _this.$el.on('ays-chart:db:query:focus', function(event, data){ | |
| 162 | + cm.refresh(); | |
| 163 | + }); | |
| 164 | + | |
| 165 | + // cm.focus(); | |
| 166 | + | |
| 167 | + // update text area. | |
| 168 | + cm.on('inputRead', function(x, y){ | |
| 169 | + cm.save(); | |
| 170 | + }); | |
| 171 | + | |
| 172 | + // backspace and delete do not register so the text box does not get empty if the entire query is deleted | |
| 173 | + // from the editor. Let's force this. | |
| 174 | + _this.$el.on('ays-chart:db:query:update', function(event, data){ | |
| 175 | + cm.save(); | |
| 176 | + }); | |
| 177 | + | |
| 178 | + // clear the editor. | |
| 179 | + _this.$el.on('ays-chart:db:query:setvalue', function(event, data){ | |
| 180 | + cm.setValue(data.value); | |
| 181 | + cm.clearHistory(); | |
| 182 | + cm.refresh(); | |
| 183 | + }); | |
| 184 | + | |
| 185 | + // set an option at runtime? | |
| 186 | + _this.$el.on('ays-chart:db:query:changeoption', function(event, data){ | |
| 187 | + cm.setOption(data.name, data.value); | |
| 188 | + }); | |
| 189 | + } | |
| 190 | + | |
| 191 | + AysChartBuilder.prototype.initDbImport = function(){ | |
| 192 | + var _this = this; | |
| 193 | + _this.initDbImportComponent(); | |
| 194 | + } | |
| 195 | + | |
| 196 | + AysChartBuilder.prototype.initQuizDBImport = function(){ | |
| 197 | + var _this = this; | |
| 198 | + | |
| 199 | + _this.$el.find('#ays-chart-quiz-maker-fetch').on('click', function(e){ | |
| 200 | + e.preventDefault(); | |
| 201 | + | |
| 202 | + var select_query = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').val(); | |
| 203 | + if (select_query == "") { | |
| 204 | + return; | |
| 205 | + } | |
| 206 | + | |
| 207 | + _this.fetchQuizData( true ); | |
| 208 | + }); | |
| 209 | + | |
| 210 | + _this.$el.find('#ays-chart-quiz-maker-show-on-chart').on( 'click', function(e){ | |
| 211 | + e.preventDefault(); | |
| 212 | + | |
| 213 | + var select_query = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').val(); | |
| 214 | + if (select_query == "") { | |
| 215 | + return; | |
| 216 | + } | |
| 217 | + | |
| 218 | + if( _this.chartTempData ){ | |
| 219 | + _this.$el.find('#ays-chart-quiz-maker-success').empty(); | |
| 220 | + _this.$el.find('#ays-chart-quiz-maker-error').empty(); | |
| 221 | + if (_this.chartType == 'line_chart' || _this.chartType == 'bar_chart' || _this.chartType == 'column_chart') { | |
| 222 | + _this.chartTempData = _this.multiColumnChartConvertData( _this.chartTempData ); | |
| 223 | + } else if (_this.chartType == 'org_chart') { | |
| 224 | + _this.chartTempData = _this.orgChartConvertData( _this.chartTempData ); | |
| 225 | + } else { | |
| 226 | + _this.chartTempData = _this.chartConvertData( _this.chartTempData ); | |
| 227 | + } | |
| 228 | + _this.chartData = window.google.visualization.arrayToDataTable( _this.chartTempData ); | |
| 229 | + | |
| 230 | + _this.updateChartData( _this.chartData ); | |
| 231 | + | |
| 232 | + _this.chartTempData = null; | |
| 233 | + }else{ | |
| 234 | + _this.fetchQuizData( false, true ); | |
| 235 | + } | |
| 236 | + | |
| 237 | + }); | |
| 238 | + | |
| 239 | + _this.$el.find('#ays-chart-quiz-maker-save').on( 'click', function(e){ | |
| 240 | + e.preventDefault(); | |
| 241 | + | |
| 242 | + var select_query = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').val(); | |
| 243 | + if (select_query == "") { | |
| 244 | + return; | |
| 245 | + } | |
| 246 | + | |
| 247 | + _this.$el.find('#ays-chart-quiz-maker-success').empty(); | |
| 248 | + _this.$el.find('#ays-chart-quiz-maker-error').empty(); | |
| 249 | + | |
| 250 | + var chart_id = $(document).find('.' + _this.htmlClassPrefix + 'chart-id').val(); | |
| 251 | + var query = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').find('option:selected').val(); | |
| 252 | + var selectQuizSelectDisplay = $(document).find('.'+_this.htmlClassPrefix+'select-quiz-maker-quiz-container').css('display'); | |
| 253 | + var quizID = null; | |
| 254 | + if (selectQuizSelectDisplay != 'none') { | |
| 255 | + quizID = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-quiz').find('option:selected').val(); | |
| 256 | + if (quizID == 0) { | |
| 257 | + _this.$el.find('#ays-chart-quiz-maker-error').html( 'Please select a quiz.' ); | |
| 258 | + return; | |
| 259 | + } | |
| 260 | + } | |
| 261 | + | |
| 262 | + // submit only if a query has been provided. | |
| 263 | + if( query.length > 0 ){ | |
| 264 | + _this.startAjax( _this.$el.find('#ays-chart-quiz-maker-form') ); | |
| 265 | + | |
| 266 | + $.ajax({ | |
| 267 | + url: ajaxurl, | |
| 268 | + method: 'post', | |
| 269 | + dataType: 'json', | |
| 270 | + data: { | |
| 271 | + 'action': _this.ajaxAction, | |
| 272 | + 'function': window.aysChartBuilderChartSettings.ajax['actions']['quiz_maker_save_data'], | |
| 273 | + 'security': window.aysChartBuilderChartSettings.ajax['nonces']['quiz_maker_save_data'], | |
| 274 | + 'params': { | |
| 275 | + query: query, | |
| 276 | + quizID: quizID, | |
| 277 | + chart_id: chart_id, | |
| 278 | + } | |
| 279 | + }, | |
| 280 | + success: function( response ){ | |
| 281 | + if( response.success ){ | |
| 282 | + _this.$el.find('#ays-chart-quiz-maker-success').html( response.data.msg ); | |
| 283 | + _this.$el.find('input[name="' + _this.htmlNamePrefix + 'source_type"]').val('quiz_maker'); | |
| 284 | + }else{ | |
| 285 | + _this.$el.find('#ays-chart-quiz-maker-error').html( response.data.msg ); | |
| 286 | + _this.$el.find('input[name="' + _this.htmlNamePrefix + 'source_type"]').val('manual'); | |
| 287 | + } | |
| 288 | + }, | |
| 289 | + complete: function(){ | |
| 290 | + _this.endAjax( _this.$el.find('#ays-chart-quiz-maker-form') ); | |
| 291 | + } | |
| 292 | + }); | |
| 293 | + }else{ | |
| 294 | + _this.$el.find('#ays-chart-quiz-maker-form').unlock(); | |
| 295 | + _this.$el.find('input[name="' + _this.htmlNamePrefix + 'source_type"]').val('manual'); | |
| 296 | + } | |
| 297 | + }); | |
| 298 | + | |
| 299 | + $(document).on('ays-chart:modal:close', function (){ | |
| 300 | + _this.chartTempData = null; | |
| 301 | + }); | |
| 302 | + } | |
| 303 | + | |
| 304 | + AysChartBuilder.prototype.fetchQuizData = function( openModal = false, showOnChart = false ){ | |
| 305 | + var _this = this; | |
| 306 | + _this.$el.trigger('ays-chart:db:query:update', {}); | |
| 307 | + | |
| 308 | + var chart_id = $(document).find('.' + _this.htmlClassPrefix + 'chart-id').val(); | |
| 309 | + var query = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-data-query').find('option:selected').val(); | |
| 310 | + var selectQuizSelectDisplay = $(document).find('.'+_this.htmlClassPrefix+'select-quiz-maker-quiz-container').css('display'); | |
| 311 | + var quizID = null; | |
| 312 | + if (selectQuizSelectDisplay != 'none') { | |
| 313 | + quizID = $(document).find('#'+_this.htmlClassPrefix+'select-quiz-maker-quiz').find('option:selected').val(); | |
| 314 | + if (quizID == 0) { | |
| 315 | + _this.$el.find('#ays-chart-quiz-maker-error').html( 'Please select a quiz.' ); | |
| 316 | + return; | |
| 317 | + } | |
| 318 | + } | |
| 319 | + | |
| 320 | + if (query.length == 0) { | |
| 321 | + return; | |
| 322 | + } | |
| 323 | + | |
| 324 | + _this.startAjax( _this.$el.find('#ays-chart-quiz-maker-form') ); | |
| 325 | + | |
| 326 | + var modal = $(document).find('#ays-chart-db-query-results'); | |
| 327 | + | |
| 328 | + _this.$el.find('.db-wizard-results').empty(); | |
| 329 | + _this.$el.find('#ays-chart-quiz-maker-success').empty(); | |
| 330 | + _this.$el.find('#ays-chart-quiz-maker-error').empty(); | |
| 331 | + | |
| 332 | + $.ajax({ | |
| 333 | + url: ajaxurl, | |
| 334 | + method: 'post', | |
| 335 | + dataType: 'json', | |
| 336 | + data: { | |
| 337 | + 'action': _this.ajaxAction, | |
| 338 | + 'function': window.aysChartBuilderChartSettings.ajax['actions']['quiz_maker_get_data'], | |
| 339 | + 'security': window.aysChartBuilderChartSettings.ajax['nonces']['quiz_maker_get_data'], | |
| 340 | + 'params': { | |
| 341 | + query: query, | |
| 342 | + quizID: quizID, | |
| 343 | + chart_id: chart_id, | |
| 344 | + } | |
| 345 | + }, | |
| 346 | + success: function( response ){ | |
| 347 | + if( response.success ){ | |
| 348 | + modal.find('.db-wizard-results').html( response.data.table ); | |
| 349 | + modal.find('#results').DataTable({ | |
| 350 | + "paging": true | |
| 351 | + }); | |
| 352 | + modal.find('#results').parent().addClass('ays-db-results-wrap'); | |
| 353 | + | |
| 354 | + if( openModal === true ) { | |
| 355 | + modal.aysModal('show'); | |
| 356 | + } | |
| 357 | + | |
| 358 | + _this.chartTempData = response.data.data ? response.data.data : null; | |
| 359 | + | |
| 360 | + if( showOnChart === true ) { | |
| 361 | + if (_this.chartType == 'line_chart' || _this.chartType == 'bar_chart' || _this.chartType == 'column_chart') { | |
| 362 | + _this.chartTempData = _this.multiColumnChartConvertData( _this.chartTempData ); | |
| 363 | + } else if (_this.chartType == 'org_chart') { | |
| 364 | + _this.chartTempData = _this.orgChartConvertData( _this.chartTempData ); | |
| 365 | + } else { | |
| 366 | + _this.chartTempData = _this.chartConvertData( _this.chartTempData ); | |
| 367 | + } | |
| 368 | + _this.chartData = window.google.visualization.arrayToDataTable(_this.chartTempData); | |
| 369 | + | |
| 370 | + _this.updateChartData(_this.chartData); | |
| 371 | + | |
| 372 | + _this.chartTempData = null; | |
| 373 | + } | |
| 374 | + }else{ | |
| 375 | + modal.find('ays-close').trigger('click'); | |
| 376 | + _this.$el.find('#ays-chart-quiz-maker-error').html( response.data.msg ); | |
| 377 | + _this.$el.find('input[name="' + _this.htmlNamePrefix + 'source_type"]').val('manual'); | |
| 378 | + } | |
| 379 | + }, | |
| 380 | + complete: function(){ | |
| 381 | + _this.endAjax( _this.$el.find('#ays-chart-quiz-maker-form') ); | |
| 382 | + } | |
| 383 | + }); | |
| 384 | + } | |
| 385 | + | |
| 386 | + AysChartBuilder.prototype.startAjax = function( element ){ | |
| 387 | + element.lock(); | |
| 388 | + } | |
| 389 | + | |
| 390 | + AysChartBuilder.prototype.endAjax = function( element ){ | |
| 391 | + element.unlock(); | |
| 392 | + } | |
| 393 | + | |
| 394 | + AysChartBuilder.prototype.quickSaveHotKeys = function() { | |
| 395 | + $(document).on('keydown', function(e){ | |
| 396 | + var saveButton = $(document).find('input#ays-button-apply'); | |
| 397 | + if ( saveButton.length > 0 ) { | |
| 398 | + if (!(e.which == 83 && e.ctrlKey) && !(e.which == 19)){ | |
| 399 | + return true; | |
| 400 | + } | |
| 401 | + saveButton.trigger("click"); | |
| 402 | + e.preventDefault(); | |
| 403 | + return false; | |
| 404 | + } | |
| 405 | + }); | |
| 406 | + } | |
| 407 | + | |
| 408 | + AysChartBuilder.prototype.htmlDecode = function (input) { | |
| 409 | + if (!input) return input; | |
| 410 | + | |
| 411 | + var e = document.createElement('div'); | |
| 412 | + e.innerHTML = input; | |
| 413 | + return e.childNodes[0].nodeValue; | |
| 414 | + } | |
| 415 | + | |
| 416 | + $.fn.AysChartBuilderMain = function(options) { | |
| 417 | + return this.each(function() { | |
| 418 | + if (!$.data(this, 'AysChartBuilderMain')) { | |
| 419 | + $.data(this, 'AysChartBuilderMain', new AysChartBuilder(this, options)); | |
| 420 | + } else { | |
| 421 | + try { | |
| 422 | + $(this).data('AysChartBuilderMain').init(); | |
| 423 | + } catch (err) { | |
| 424 | + console.error('AysChartBuilderMain has not initiated properly'); | |
| 425 | + } | |
| 426 | + } | |
| 427 | + }); | |
| 428 | + }; | |
| 429 | + $(document).find('#ays-charts-form').AysChartBuilderMain(); | |
| 430 | + | |
| 431 | +})(jQuery); | |
| 432 | + | |
| 433 | +(function ($) { | |
| 434 | + | |
| 435 | + $.fn.serializeFormJSON = function () { | |
| 436 | + let o = {}, | |
| 437 | + a = this.serializeArray(); | |
| 438 | + $.each(a, function () { | |
| 439 | + if (o[this.name]) { | |
| 440 | + if (!o[this.name].push) { | |
| 441 | + o[this.name] = [o[this.name]]; | |
| 442 | + } | |
| 443 | + o[this.name].push(this.value || ''); | |
| 444 | + } else { | |
| 445 | + o[this.name] = this.value || ''; | |
| 446 | + } | |
| 447 | + }); | |
| 448 | + return o; | |
| 449 | + }; | |
| 450 | + | |
| 451 | + $.fn.lock = function () { | |
| 452 | + $(this).each(function () { | |
| 453 | + var $this = $(this); | |
| 454 | + var position = $this.css('position'); | |
| 455 | + | |
| 456 | + if (!position) { | |
| 457 | + position = 'static'; | |
| 458 | + } | |
| 459 | + | |
| 460 | + switch (position) { | |
| 461 | + case 'absolute': | |
| 462 | + case 'relative': | |
| 463 | + break; | |
| 464 | + default: | |
| 465 | + $this.css('position', 'relative'); | |
| 466 | + break; | |
| 467 | + } | |
| 468 | + $this.data('position', position); | |
| 469 | + | |
| 470 | + var width = $this.width(), | |
| 471 | + height = $this.height(); | |
| 472 | + | |
| 473 | + var locker = $('<div class="locker"></div>'); | |
| 474 | + locker.width(width).height(height); | |
| 475 | + | |
| 476 | + var loader = $('<div class="locker-loader"></div>'); | |
| 477 | + loader.width(width).height(height); | |
| 478 | + | |
| 479 | + locker.append(loader); | |
| 480 | + $this.append(locker); | |
| 481 | + $(window).resize(function () { | |
| 482 | + $this.find('.locker,.locker-loader').width($this.width()).height($this.height()); | |
| 483 | + }); | |
| 484 | + }); | |
| 485 | + | |
| 486 | + return $(this); | |
| 487 | + }; | |
| 488 | + | |
| 489 | + $.fn.unlock = function () { | |
| 490 | + $(this).each(function () { | |
| 491 | + $(this).find('.locker').remove(); | |
| 492 | + $(this).css('position', $(this).data('position')); | |
| 493 | + }); | |
| 494 | + | |
| 495 | + return $(this); | |
| 496 | + }; | |
| 626 | 497 | })(jQuery); |
