Предлагаю расширить AjaxSnippet Обсуждение

Дополнение: AjaxSnippet

Доброго времени суток!

Предлагаю несколько расширить функционал сниппета от Василия AjaxSnippet.
Предлагаемые изменения: Добавить возможность запуска сниппета при клике на заданный CSS селектор, а так же возможность повторного его вызова.

У себя я это реализовал следующим образом:
  1. Добавил 2 параметра: &as_selector — CSS селектор на onclick, &as_refresh — повторный вызов сниппета (по умолчанию false)
  2. Дописал сниппет
Дописаный код:
case 'onclick':
	    if(empty($as_selector)){
		    if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
		    	<a href="#" class="as_trigger">[[+trigger]]</a>
		    	<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
		    </div>';}
		    if (empty($as_trigger)) {
		    	$as_trigger = $modx->lexicon('as_trigger');
		    }
            
		    $modx->regClientScript(preg_replace('/(\t|\n)/', '','
		    <script type="text/javascript">
		    	$(document).on("click", ".as_trigger", function(e) {
		    		var spinner = $(this).parent().find(".as_spinner");
		    		spinner.css("display","block");
		    		$(this).remove();
		    		'.$script.'
		    		return false;
		    	});
		    </script>'), true);
        }
        else{
            if(empty($as_refresh)){$as_refresh = false;}
            $ajax='';
            if($as_refresh == false){$ajax = '$(this).attr("ajax","none");';}
            if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
		    	<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
		    </div>';}
		    $modx->regClientScript(preg_replace('/(\t|\n)/', '','
		    <script type="text/javascript">
		    	$(document).on("click", "'.$as_selector.'", function(e) {
		    	    if(!$(this).attr("ajax")){
		    		    var spinner = $("'.$as_target.'").find(".as_spinner");
		    		    '.$ajax.'
		    		    spinner.css("display","block");
		    		    '.$script.'
		    		    return false;
		    	    }
		    	});
		    </script>'), true);
        }
		$output = str_replace(array('[[+key]]','[[+trigger]]'), array($key, $as_trigger), $wrapper);
		break;
Остальное без изменений.
Отдаю на Ваш суд, если посчитаете изменения не лишними, то был бы рад обновить данный сниппет в установщике :)
11 октября 2017, 13:44    Арсений   
2    479 +6

Комментарии (35)

  1. Сергей 11 октября 2017, 16:00 # +2
    Вообще автор вряд — ли будет изменять сам на основе предложенного здесь кода. Сделайте форк github.com/bezumkin/AjaxSnippet, напишите изменения, а потом отправте pull-request, так больше шансов, что изменения попадут в пакет
    1. Арсений 11 октября 2017, 16:09 # +2
      Спасибо, попробую. правда теперь надо разобраться как это сделать:) Раньше не приходилось, но надо же научиться:)
    2. Сергей Кепкин 13 октября 2017, 01:54 # 0
      А пример вызова &as_selector можно? наименование класса? Не пашет…
      1. Арсений 13 октября 2017, 09:51 # +1
        &as_selector=`#id` или &as_selector=`.class`
        1. Сергей Кепкин 13 октября 2017, 11:43 # 0
          неа, я пробовал и так и сяк
          1. Арсений 13 октября 2017, 15:28 # 0
            проверь, что-то не так сделал.
            если знаешь jquery, то вот эта строчка говорит сама за себя:
            $(document).on("click", "'.$as_selector.'", function(e) {
            1. Арсений 13 октября 2017, 15:31 # +1
              [[MyAjaxSnippet?
                          &snippet=`snip`
                          &type=`good`
                          &as_mode=`onclick`
                          &as_target=`#good`
                          &as_selector=`#good-tab`
                      ]]
              все работает
              1. Сергей Кепкин 13 октября 2017, 15:48 # 0
                Хах, твою дивизию!!! Я про
                &as_mode=`onclick`
                забыл… Старость не радость)))
                Ок, запустил.
                А повторный запуск — это что имеется ввиду?
                1. Арсений 13 октября 2017, 15:50 # 0
                  к примеру по клику на кнопку нужно каждый раз обновлять данные, в данном случае сниппет будет вызываться каждый раз при клике на селектор
                  1. Сергей Кепкин 13 октября 2017, 15:51 # 0
                    У меня это не прокатило,
                    вписывал так : &as_refresh=`true`
                    Первый раз сниппет вызывается, второй раз и дальше — неа
                    1. Сергей Кепкин 13 октября 2017, 16:03 # +1
                      Первый раз сниппет вызывается, второй раз и дальше — неа
                      А, не, ошибся, все четко работает! Данные слишком быстро приходили и казалось, что не меняется ничего, консолька помогла!
                      Крайне рекомендую к использованию!
                      1. Арсений 13 октября 2017, 16:05 # +1
                        спасибо за отзыв)
                        1. Сергей Кепкин 13 октября 2017, 16:08 # 0
                          А кстати не решал проблемку с переменной spinner?) Я конечно все понимаю, что чувство юмора должно быть, но в сниппете из 23300 символов 19900 занимает код картинки спиннера в base64)))
                          1. Арсений 13 октября 2017, 16:17 # 0
                            так там же можно вроде свой подставлять, к примеру из font Avesome, правда сам не проверял
                            1. Сергей Кепкин 13 октября 2017, 16:18 # 0
                              Заменил во всем сниппете это
                              '.$spinner.'
                              на это
                              /assets/images/icons/ajax-loader.gif
                              и зачистил это
                              $spinner = 'блабла-на-19900-символов';
            2. Сергей Кепкин 13 октября 2017, 15:51 # 0
              Еще может понадобиться такой вариант — запуск по готовности страницы (т.е. как было задумано изначально автором сниппета) и ПЛЮС запуск по клику, неужели придется вписать два вызова, один стандартный, второй с кликом???
              1. Арсений 13 октября 2017, 16:02 # +1
                если нужно обновлять контент этого сниппета, то да, придется дважды вызывать, ну или дописать под себя этот сниппет.
                У меня этот сниппет работает при переходе по вкладкам (во кладках находится второстепенный контент, который ни к чему вызывать при загрузке страницы, он нужен только по требованию)
                1. Сергей Кепкин 14 октября 2017, 19:54 # 0
                  Еще заметил — если второй и т.д. раз запускаю — то спиннер не вызывается…
                  1. Арсений 16 октября 2017, 17:32 # +1
                    по тому, что спиннер на момент запуска находится в том же боксе, куда вставляется контент, и спиннер убирается оттуда после вставки результатов, надо его поковырять просто
                    1. Сергей Кепкин 16 октября 2017, 17:42 # 0
                      Я сначала подумал, что он туда добавляется по событию. Угу, ок!
                      Подскажи, что значит эта запись в tpl.msOrder — что-то на феноме, а я в нем ни зуб ногой:
                      {var $checked = !$order.delivery && $index == 0 || $delivery.id == $order.delivery}
                      1. Сергей Кепкин 16 октября 2017, 18:11 # 0
                        я понял так, верно?: $checked будет true, если не существует $order.delivery и это первая доставка в цикле ИЛИ при совпадении id текущей в цикле доставки с выбранной доставкой $order.delivery.
                        1. Арсений 17 октября 2017, 09:31 # -3
                          это же какое-то условие из минишопа, как я понял, я хз, надо полностью смотреть что есть что
              2. Волков Николай 14 октября 2017, 18:45 # +1
                Когда увидел заголовок данного поста, то первая мысль была «предлагаю кому-то прокачать скиллы в JavaScript», т.к. на мой скромный взгляд AjaxSnippet нужен для случаев, когда совсем уж лень писать несколько строк кода…
                1. Сергей Кепкин 14 октября 2017, 19:53 # 0
                  критикуешь — предлагай!
                  1. Волков Николай 14 октября 2017, 23:12 # 0
                    Я не то чтобы критикую, а скорее не понимаю смысла. Ну да ладно. Что конкретно предложить надо не совсем понял.
                    1. Сергей Кепкин 14 октября 2017, 23:20 # 0
                      Ну интересно, что это за
                      несколько строк кода
                      У безумкина и то строк 30 было в аналоге этого компонента — здесь жевали — modx.pro/development/3139-foundations-of-ajax/
                      1. Волков Николай 14 октября 2017, 23:52 # 0
                        Скажем так… На данный момент мне нравится вариант для загрузки и манипуляции с AJAX контентом, когда используется действительно далеко не несколько строк…
                        Суть в том, что на сайт подключаются jquery, underscore и backbone, далее пишутся соответствующие Model, View и т.д. с помощью extend стандартных объектов backbone.
                        Далее создается в корне сайта папка rest в которой создается что-то по типу и подобию этого docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/developing-rest-servers
                        Ну и последнее это расписывание template для нужных блоков.
                        Но… Если вернуться к вашей ссылке, то если вы банально уберете из кода все комментарии, а также alert из js скрипта (ибо нужно в консоли браузера debug'ить) и посчитаете кол-во строк оставшихся… Я даже промолчу про то, что код можно уменьшить, если несколько иначе переписать…
                        1. Сергей Кепкин 15 октября 2017, 00:26 # 0
                          А, т.е. этот код modx.pro/development/3139-foundations-of-ajax/ сами не используете? ууууу… я думал есть реальный опыт использования, сам код проверял лично, работает исправно, но думал есть что-то посвежее 2012 года…
                          REST конечно круто, но ради ТРЕХ использовании на одном сайте огород городить…
                          1. Волков Николай 15 октября 2017, 02:06 # 0
                            Я сейчас в растерянности, если честно. Я весь твой код в тексте заметки сжал до нескольких строк. PHPDoc строки, разумеется, не считаются :-) Вот смотри, если мой вариант окажется лучше, то что будет с исходным текстом твоей заметки?
                            1. Волков Николай 15 октября 2017, 02:36 # 0
                              Я сейчас на github'е глянул исходники ajaxSnippet и вообще со смеху умираю, если честно. Надо было с самого начала это сделать, т.к. не помня наизусть оригинальный код, не смог сходу понять, что конкретно добавил ТЫ, а что было изначально. Помимо всего прочего в код Василия со своими улучшениями влез и его код сократить умудрился:-) Ну да ладно. Касательно того, что именно ТЫ написал. У меня вышло от 2 до 4 строк… 4 строки 100% вариант, а более короткие варианты я еще банально не до конца проверил.
                              1. Волков Николай 15 октября 2017, 02:37 # +1
                                И сами вы:
                                ууууу
                                ^_^
                                1. Сергей Кепкин 15 октября 2017, 02:46 # 0
                                  пока что одни я да я, а где код-то вась?
                                  1. Волков Николай 15 октября 2017, 04:14 # 0
                                    Сейчас скину ^_^
                      2. Арсений 15 октября 2017, 20:47 # +1
                        ммм… не, не в этом дело, когда много всякого функционала нужно обновлять через ajax, то каждый раз надо писать заново «несколько строк кода», а потом при изменении каждый раз искать «где же надо немного исправить?». А когда есть такой стандартный функционал, то все это проще.
                        Ну и да, мне еще есть куда стремиться в правильности написания кода и знания JS)
                      3. Волков Николай 15 октября 2017, 05:03 # +1
                        case 'onclick':
                                //1 
                                $as_selector = $modx->getOption('as_selector', $scriptProperties, 'as_trigger');
                                //2
                                if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
                        			<a href="#" class="[[+as_selector]]">[[+trigger]]</a>
                        			<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
                        		</div>';}
                                if (empty($as_trigger)) {
                                    $as_trigger = $modx->lexicon('as_trigger');
                                }
                                //3
                                $script = (empty($as_repeat)?'$(this).remove();':'').$script;
                                //4, 5
                                $modx->regClientScript(preg_replace('/(\t|\n)/', '','
                        		<script type="text/javascript">
                        			$(document).on("click", ".'.$as_selector.'", function(e) {
                        				var spinner = $(this).parent().find(".as_spinner");
                        				spinner.css("display","block");
                        				'.$script.'
                        				return false;
                        			});
                        		</script>'), true);
                                //6
                                $output = str_replace(array('[[+key]]','[[+trigger]], [[+as_selector]]'), array($key, $as_trigger, $as_selector), $wrapper);
                                break;
                        P.S. Это написано на от*&ись, поэтому претензии или т.п. не принимаются! :-)
                        Вы должны авторизоваться, чтобы оставлять комментарии.