Предлагаю расширить 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, 10:44
modx.pro
1
3 154
+6

Комментарии: 35

Сергей
11 октября 2017, 16:00
+2
Вообще автор вряд — ли будет изменять сам на основе предложенного здесь кода. Сделайте форк github.com/bezumkin/AjaxSnippet, напишите изменения, а потом отправте pull-request, так больше шансов, что изменения попадут в пакет
    Арсений
    11 октября 2017, 16:09
    +2
    Спасибо, попробую. правда теперь надо разобраться как это сделать:) Раньше не приходилось, но надо же научиться:)
    Сергей Кепкин
    13 октября 2017, 01:54
    0
    А пример вызова &as_selector можно? наименование класса? Не пашет…
      Арсений
      13 октября 2017, 09:51
      +1
      &as_selector=`#id` или &as_selector=`.class`
        Сергей Кепкин
        13 октября 2017, 11:43
        0
        неа, я пробовал и так и сяк
          Арсений
          13 октября 2017, 15:28
          0
          проверь, что-то не так сделал.
          если знаешь jquery, то вот эта строчка говорит сама за себя:
          $(document).on("click", "'.$as_selector.'", function(e) {
            Арсений
            13 октября 2017, 15:31
            +1
            [[MyAjaxSnippet?
                        &snippet=`snip`
                        &type=`good`
                        &as_mode=`onclick`
                        &as_target=`#good`
                        &as_selector=`#good-tab`
                    ]]
            все работает
              Сергей Кепкин
              13 октября 2017, 15:48
              0
              Хах, твою дивизию!!! Я про
              &as_mode=`onclick`
              забыл… Старость не радость)))
              Ок, запустил.
              А повторный запуск — это что имеется ввиду?
                Арсений
                13 октября 2017, 15:50
                0
                к примеру по клику на кнопку нужно каждый раз обновлять данные, в данном случае сниппет будет вызываться каждый раз при клике на селектор
                  Сергей Кепкин
                  13 октября 2017, 15:51
                  0
                  У меня это не прокатило,
                  вписывал так : &as_refresh=`true`
                  Первый раз сниппет вызывается, второй раз и дальше — неа
                    Сергей Кепкин
                    13 октября 2017, 16:03
                    +1
                    Первый раз сниппет вызывается, второй раз и дальше — неа
                    А, не, ошибся, все четко работает! Данные слишком быстро приходили и казалось, что не меняется ничего, консолька помогла!
                    Крайне рекомендую к использованию!
                      Арсений
                      13 октября 2017, 16:05
                      +1
                      спасибо за отзыв)
                        Сергей Кепкин
                        13 октября 2017, 16:08
                        0
                        А кстати не решал проблемку с переменной spinner?) Я конечно все понимаю, что чувство юмора должно быть, но в сниппете из 23300 символов 19900 занимает код картинки спиннера в base64)))
                          Арсений
                          13 октября 2017, 16:17
                          0
                          так там же можно вроде свой подставлять, к примеру из font Avesome, правда сам не проверял
                          Сергей Кепкин
                          13 октября 2017, 16:18
                          0
                          Заменил во всем сниппете это
                          '.$spinner.'
                          на это
                          /assets/images/icons/ajax-loader.gif
                          и зачистил это
                          $spinner = 'блабла-на-19900-символов';
      Сергей Кепкин
      13 октября 2017, 15:51
      0
      Еще может понадобиться такой вариант — запуск по готовности страницы (т.е. как было задумано изначально автором сниппета) и ПЛЮС запуск по клику, неужели придется вписать два вызова, один стандартный, второй с кликом???
        Арсений
        13 октября 2017, 16:02
        +1
        если нужно обновлять контент этого сниппета, то да, придется дважды вызывать, ну или дописать под себя этот сниппет.
        У меня этот сниппет работает при переходе по вкладкам (во кладках находится второстепенный контент, который ни к чему вызывать при загрузке страницы, он нужен только по требованию)
          Сергей Кепкин
          14 октября 2017, 19:54
          0
          Еще заметил — если второй и т.д. раз запускаю — то спиннер не вызывается…
            Арсений
            16 октября 2017, 17:32
            +1
            по тому, что спиннер на момент запуска находится в том же боксе, куда вставляется контент, и спиннер убирается оттуда после вставки результатов, надо его поковырять просто
              Сергей Кепкин
              16 октября 2017, 17:42
              0
              Я сначала подумал, что он туда добавляется по событию. Угу, ок!
              Подскажи, что значит эта запись в tpl.msOrder — что-то на феноме, а я в нем ни зуб ногой:
              {var $checked = !$order.delivery && $index == 0 || $delivery.id == $order.delivery}
                Сергей Кепкин
                16 октября 2017, 18:11
                0
                я понял так, верно?: $checked будет true, если не существует $order.delivery и это первая доставка в цикле ИЛИ при совпадении id текущей в цикле доставки с выбранной доставкой $order.delivery.
                  Арсений
                  17 октября 2017, 09:31
                  -3
                  это же какое-то условие из минишопа, как я понял, я хз, надо полностью смотреть что есть что
        Волков Николай
        14 октября 2017, 18:45
        +1
        Когда увидел заголовок данного поста, то первая мысль была «предлагаю кому-то прокачать скиллы в JavaScript», т.к. на мой скромный взгляд AjaxSnippet нужен для случаев, когда совсем уж лень писать несколько строк кода…
          Сергей Кепкин
          14 октября 2017, 19:53
          0
          критикуешь — предлагай!
            Волков Николай
            14 октября 2017, 23:12
            0
            Я не то чтобы критикую, а скорее не понимаю смысла. Ну да ладно. Что конкретно предложить надо не совсем понял.
              Сергей Кепкин
              14 октября 2017, 23:20
              0
              Ну интересно, что это за
              несколько строк кода
              У безумкина и то строк 30 было в аналоге этого компонента — здесь жевали — modx.pro/development/3139-foundations-of-ajax/
                Волков Николай
                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'ить) и посчитаете кол-во строк оставшихся… Я даже промолчу про то, что код можно уменьшить, если несколько иначе переписать…
                  Сергей Кепкин
                  15 октября 2017, 00:26
                  0
                  А, т.е. этот код modx.pro/development/3139-foundations-of-ajax/ сами не используете? ууууу… я думал есть реальный опыт использования, сам код проверял лично, работает исправно, но думал есть что-то посвежее 2012 года…
                  REST конечно круто, но ради ТРЕХ использовании на одном сайте огород городить…
                    Волков Николай
                    15 октября 2017, 02:06
                    0
                    Я сейчас в растерянности, если честно. Я весь твой код в тексте заметки сжал до нескольких строк. PHPDoc строки, разумеется, не считаются :-) Вот смотри, если мой вариант окажется лучше, то что будет с исходным текстом твоей заметки?
                      Волков Николай
                      15 октября 2017, 02:36
                      0
                      Я сейчас на github'е глянул исходники ajaxSnippet и вообще со смеху умираю, если честно. Надо было с самого начала это сделать, т.к. не помня наизусть оригинальный код, не смог сходу понять, что конкретно добавил ТЫ, а что было изначально. Помимо всего прочего в код Василия со своими улучшениями влез и его код сократить умудрился:-) Ну да ладно. Касательно того, что именно ТЫ написал. У меня вышло от 2 до 4 строк… 4 строки 100% вариант, а более короткие варианты я еще банально не до конца проверил.
                        Волков Николай
                        15 октября 2017, 02:37
                        +1
                        И сами вы:
                        ууууу
                        ^_^
              Арсений
              15 октября 2017, 20:47
              +1
              ммм… не, не в этом дело, когда много всякого функционала нужно обновлять через ajax, то каждый раз надо писать заново «несколько строк кода», а потом при изменении каждый раз искать «где же надо немного исправить?». А когда есть такой стандартный функционал, то все это проще.
              Ну и да, мне еще есть куда стремиться в правильности написания кода и знания JS)
              Волков Николай
              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. Это написано на от*&ись, поэтому претензии или т.п. не принимаются! :-)
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                35